231 lines
4.5 KiB
CSS
231 lines
4.5 KiB
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;
|
|
}
|
|
|
|
/* Article list customisation */
|
|
article.post:hover {
|
|
border: 0.2em dashed lightgrey;
|
|
}
|
|
article.post {
|
|
border: 0.2em dashed rgba(0,0,0,0);
|
|
padding: 0.5em;
|
|
}
|
|
|
|
/* Don't put dotted lines for single articles */
|
|
.single article.post:hover {
|
|
border: 0.2em dashed rgba(0,0,0,0);
|
|
}
|
|
|
|
/* 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;
|
|
}
|