Skip to content

Instantly share code, notes, and snippets.

@loikein
Last active May 25, 2020 08:25
Show Gist options
  • Save loikein/7b2a4f7d98d366a732dafd755b5248ff to your computer and use it in GitHub Desktop.
Save loikein/7b2a4f7d98d366a732dafd755b5248ff to your computer and use it in GitHub Desktop.
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
Copy link
Author

loikein commented Nov 16, 2018

@loikein
Copy link
Author

loikein commented Nov 16, 2018

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

@loikein
Copy link
Author

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
Copy link
Author

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
Copy link
Author

loikein commented Dec 17, 2018

@loikein
Copy link
Author

loikein commented Apr 22, 2019

Columns with Grid: blogger-css-columns.html

@loikein
Copy link
Author

loikein commented Feb 4, 2020

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

@loikein
Copy link
Author

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