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: 浅谈如何正确给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