independent-snipette/style.css

/*
Theme Name: Independent Snipette
Author: Badri Sunderarajan
Author URI: https://medium.com/@badrihippo
Description: Snipette extensions to the "Independent Publisher" theme
Template: independent-publisher
Version: 0.1
License: GNU GPLv3
License URI: http://www.gnu.org/copyleft/gpl.html
Tags: light, white, blue, two-columns, left-sidebar, flexible-width, custom-background, custom-colors, custom-menu, editor-style, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready

Based on "Independent Publisher Child Theme" by raamdev
https://github.com/raamdev/independent-publisher-child-theme/
*/

/* =Imports styles from the parent theme
-------------------------------------------------------------- */
@import url('../independent-publisher/style.css');

/* =Theme customization starts here. Add your own custom styles.
-------------------------------------------------------------- */

/* Uncomment this style definition to hide the green bar on Quote Formatted posts: */

/*
.format-quote blockquote {
	border-left: none;
	padding-left: 0;
}
*/

/* Uncomment this style definition to use the original, Mac-specific font stack */

/*
h1,
h2,
h3,
h4,
h5,
h6,
.pinglist,
#taglist,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label,
.comment-form-comment label,
.comment-form-subscriptions label,
.comment-form-reply-title {
	font-family: "Myriad Pro","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
}
*/

/* Uncomment this style definition to use a long dash in ```<cite>```: */

/*
blockquote cite:before {
content: "\2014 \0020";
}
*/

/* Add social buttons: Fediverse and Medium */

#menu-social li a[href*="squeet.me"]::before {
	content: url('/wp-content/uploads/2019/07/fediverse-28.png');
	color: #4a4ae;
	opacity: 0.3;
}

#menu-social li a[href*="squeet.me"]:hover::before {
	opacity: 1;
}

#menu-social li a[href*="medium.com"]::before {
	content: url("/wp-content/uploads/2019/07/medium-logo-24.png");
	color: #4a4a4e;
	opacity: 0.3;
}

#menu-social li a[href*="medium.com"]:hover::before {
	opacity:1;
}

/* center-align images */
figure > p {
	text-align: center;
}
figure {
	text-align: center;
}

/* Scissors */

.wp-block-separator {
    display:block;
	    background-image:url('/wp-content/uploads/2019/07/snip-grey-small.png');
	border:0;
	background-repeat: no-repeat;
	height: 32px;
	background-color: inherit;
	background-position: center;
}

/* Image Grid */
/* Grid style */
.display-posts-listing.grid {
	display: grid;
	grid-gap: 16px;
}

.display-posts-listing a{
	font-weight: bold ;
	font-size-adjust:0.9;
	color: black;
	line-height: 2;
}

.display-posts-listing .title {
	display: block;
	color: black;
}

.display-posts-listing .excerpt {
	color: #77777;
}

.display-posts-listing .listing-item {
  border: 0.2rem solid rgba(0,0,0,0);
	padding:1rem;
}

.display-posts-listing .listing-item:hover {
	border-style: dashed;
	border-color: lightgrey;
	cursor: pointer;
}

.display-posts-listing .title:hover {
	text-decoration: none;
}

.display-posts-listing.grid img {
	display: block;
	max-width: 100%;
	height: auto;
}

@media (min-width: 600px) {
	.display-posts-listing.grid {
		grid-template-columns: repeat( 2, 1fr );
		margin-bottom: 1em;
	}
}

/* Grid: Top post */

.display-posts-listing.image-top .listing-item {
	margin-bottom: 32px;
}

.display-posts-listing.image-top .listing-item .title {
	display: block;
}

.display-posts-listing.image-top .listing-item .excerpt-dash {
	display: none;
}


/* Topbar */
.topbar {
    display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	background: white;
	border-bottom: 0.1rem solid lightgrey;
}

.topbar ul {
	margin: 0;
	padding: 1.6rem;
}

.topbar ul>li {
	display: inline;
	padding: 0.7rem;
	border: 0.2rem dashed rgba(0,0,0,0);
}

.topbar ul>li:hover {
	border: 0.2rem dashed darkgrey;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.topbar a,
.topbar a:visited,
.topbar a:hover,
.topbar a:visited:hover {
	color: black;
	text-decoration: none;
	font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
}

.topbar img {
  display: inline-block;
	margin-left: 3rem;
	margin-right: 0.5rem;
	margin-top: 0.7rem;
	margin-bottom: 0.7rem;
	max-width: 100%;
	max-height: 100%;
	max-height: 3rem;
}