Skip to content

Instantly share code, notes, and snippets.

@loikein
Last active May 25, 2020
Embed
What would you like to do?
blogger-css-extra|-|{"files":{"blogger-css-extra.css":{"env":"plain"}},"tag":"Uncategorized"}
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;
}
@loikein

This comment has been minimized.

Copy link
Owner Author

@loikein loikein commented Nov 16, 2018

@loikein

This comment has been minimized.

Copy link
Owner Author

@loikein loikein commented Nov 16, 2018

lines 10 ~ 16 are commented out because front page of Blogger uses h3 as article title

@loikein

This comment has been minimized.

Copy link
Owner Author

@loikein loikein commented Nov 16, 2018

lines 10 ~ 16 are commented out because front page of Blogger uses h3 as article title

According to The :not() CSS pseudo-class, they are back now.
However, this <h3> counter is not visible in Chrome and Opera (mac and mini for iOS). It is visible in Safari (mac and iOS).

@loikein

This comment has been minimized.

Copy link
Owner Author

@loikein loikein commented Nov 16, 2018

However, this <h3> counter is not visible in Chrome and Opera (mac and mini for iOS). It is visible in Safari (mac and iOS).

This was caused by narrow support of selector list argument. It looks good everywhere now.

@loikein

This comment has been minimized.

Copy link
Owner Author

@loikein loikein commented Dec 17, 2018

@loikein

This comment has been minimized.

Copy link
Owner Author

@loikein loikein commented Apr 22, 2019

Columns with Grid: blogger-css-columns.html

@loikein

This comment has been minimized.

Copy link
Owner Author

@loikein loikein commented Feb 4, 2020

Humble <hr>: adapted from style 1 of Simple Styles for <hr>'s

@loikein

This comment has been minimized.

Copy link
Owner Author

@loikein loikein commented May 25, 2020

Add <img> beautifier according to Brad Frost

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment