diff --git a/style.css b/style.css index 481eaf3..1c47927 100644 --- a/style.css +++ b/style.css @@ -57,3 +57,119 @@ 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; +} + +/* 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; +}