blogger-css-extra|-|{"files":{"blogger-css-extra.css":{"env":"plain"}},"tag":"Uncategorized"}

blogger-css-extra.css

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;
}

reference: 纯CSS实现目录自动编号

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

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).

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.

reference: 浅谈如何正确给table加边框 - Leona.d - 博客园

Columns with Grid: blogger-css-columns.html

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

Add <img> beautifier according to Brad Frost