Add basic custom CSS
This commit is contained in:
parent
8a69142c55
commit
1183c5cca2
1 changed files with 116 additions and 0 deletions
116
style.css
116
style.css
|
@ -57,3 +57,119 @@ blockquote cite:before {
|
||||||
content: "\2014 \0020";
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Temporary "not ready" banner */
|
||||||
|
body::before {
|
||||||
|
content: "Heads up! This website isn't ready yet. You can look around, but be aware that the current version is still on Medium (https://medium.com/snipette).";
|
||||||
|
background-color: red;
|
||||||
|
width: calc(100vw - 2.6em);
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
color: white;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue