-
-
Save loikein/7b2a4f7d98d366a732dafd755b5248ff to your computer and use it in GitHub Desktop.
blogger-css-extra|-|{"files":{"blogger-css-extra.css":{"env":"plain"}},"tag":"Uncategorized"}
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html { | |
--theme: #CB455B; | |
--theme-sub: #037BBA; | |
--white: #FCFCFC; | |
--black: #222; | |
--dark-grey: #777; | |
--grey: #E5E5E5; | |
--code: #017B76; | |
} | |
/* link */ | |
a, a:visited, .comment-link, | |
.widget.Profile .profile-link, | |
.widget.Profile .profile-link.visit-profile { | |
color: var(--theme); | |
} | |
a:hover, | |
a:focus { | |
color: var(--theme-sub); | |
} | |
.extendable .show-more, | |
.extendable .show-less { | |
color: var(--theme); | |
border-color: var(--theme); | |
} | |
/* sidebar & post body */ | |
.pill-button { | |
border-radius: 20px !important; | |
} | |
.blog-post, | |
.sidebar-container { | |
background: var(--white); | |
} | |
.svg-icon-24 { | |
display: none; | |
} | |
.post-body, | |
.widget.Profile .profile-link, | |
.widget.Profile dd, | |
.sidebar-container .widget .title { | |
color: var(--black); | |
} | |
.profile-link.visit-profile.pill-button:hover, | |
.profile-link.visit-profile.pill-button:focus { | |
color: var(--theme-sub); | |
} | |
/* tags */ | |
.Label .label-count { | |
float: none; | |
} | |
.byline.post-labels a, .Label a { | |
color: var(--black); | |
font-size: 0.7rem; | |
} | |
.byline.post-labels a, .Label li, .Label span.label-size { | |
background: var(--grey); | |
border: 1px solid var(--grey); | |
} | |
/* section title counter */ | |
.post-body h2{ | |
counter-increment: counter_h2; | |
counter-reset: counter_h3; | |
} | |
.post-body h2::before { | |
content: counter(counter_h2)". "; | |
} | |
.post-body h3 { | |
color: var(--black); | |
counter-increment: counter_h3; | |
} | |
.post-body h3::before { | |
content: counter(counter_h2)"."counter(counter_h3)". "; | |
} | |
/* humble hr line */ | |
.post-body hr { | |
border: 0; | |
height: 1px; | |
background: var(--black); | |
background-image: linear-gradient(to right, var(--white),var(--black), var(--white)); | |
} | |
/* link icon */ | |
.post-body a::after { | |
padding-left:2px; | |
content: "\01F517"; | |
} | |
/* block quote */ | |
.post-body blockquote { | |
padding: 1em 1em 1em 1em; | |
background: var(--grey); | |
line-height: 1.6em; | |
color: var(--black); | |
} | |
/* inline-code beautifier */ | |
.post-body code { | |
color: var(--code); | |
background: var(--grey); | |
padding: 0.2em; | |
} | |
/* responsive iframe */ | |
.video-container{ | |
position: relative; | |
height: 0; | |
} | |
.video-container--4x3{ padding-bottom: 75%; } | |
.video-container--16x9{ padding-bottom: 56.25%; } | |
.video-container iframe { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
} | |
/* table */ | |
.post-body table { | |
margin: auto; | |
} | |
.post-body table, | |
.post-body table tr th, | |
.post-body table tr td { | |
border: 1px solid var(--grey); | |
border-collapse: collapse; | |
padding: 0.4em; | |
text-align: center | |
} | |
/* image */ | |
/* reference: https://bradfrost.com/web/ */ | |
.post-body img { | |
border: 1px solid var(--dark-grey); | |
box-shadow: 0 10px 0 -5px #e99095, 0 20px 0 -10px #f4b3b5, 0 30px 0 -16px #fbd7d7; | |
margin-bottom: 1rem; | |
margin-top: 0.5rem; | |
} | |
/* embedded gist normalization */ | |
.gist table, | |
.gist table tr th, | |
.gist table tr td{ | |
border: 0px; | |
} | |
/* columns */ | |
@media (min-width: 600px) { | |
.col-wrap{ | |
display: grid; | |
grid: auto-flow / 1fr 1fr; | |
grid-column-gap: 1em; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Humble
<hr>
: adapted from style 1 of Simple Styles for <hr>'s