style.css

html,
body,
div,
span,
object,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
address,
code,
em,
img,
q,
s,
small,
var,
b,
i,
ul,
li,
article,
aside,
footer,
header,
nav,
section,
summary,
time {
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
}

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

aside {
  max-width: 350px;
  width: 100%;
}

:root {
  --text-color: #3d4852;
  --light-text-color: #728597;
  --main-color: #5a67d8;
  --light-gray: #eee;
  --background-color: white;
  --button-background: linear-gradient(178deg, #fff, #fff, #fff, #ddd);
  --green: #38b2ac;
  --gray: #eaedee;
  --github: #22292f;
}

html {
  background-color: var(--background-color);
  border-top: 10px solid var(--main-color);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  background-color: var(--background-color);
  padding: 0 30px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  min-height: 100vh;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1a202c;
    --text-color: #cbd5e0;
    --light-gray: #4a5568;
    --button-background: none;
    --main-color: #a3bffa;
    --gray: #1e3458;
    --github: white;
  }

  body {
    box-shadow: none;
  }

  h1 svg {
    filter: invert(100%);
  }

  /* make the images easy to the eye on dark mode */
  img {
    opacity: 0.75;
    transition: opacity 0.5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}

a {
  text-decoration: none;
  color: var(--main-color);
}

*,
:before,
:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.post h1,
h3,
h4,
h5,
p,
.post-body ul,
pre {
  margin-bottom: 20px;
}

.first svg {
  color: var(--main-color);
}

body.nf {
  height: 100vh;
}

.profile #wrapper {
  padding: 0 40px;
  max-width: 800px;
  margin: 0 auto;
}

.profile #header {
  padding-bottom: 40px;
  text-align: center;
  position: relative;
}

.profile #avatar {
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.profile h1 {
  font-weight: 400;
  letter-spacing: 0;
  font-size: 20px;
}

.profile h2 {
  font-size: 20px;
  font-weight: 300;
  color: #8795a1;
  margin-top: 10px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-style: normal;
}

nav.main-nav {
  margin: 0 auto;
  z-index: 100;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-weight: 600;
  display: grid;
}

nav.main-nav a {
  top: 8px;
  right: 6px;
  padding: 8px 12px;
  color: var(--main-color);
  font-size: 13px;
  line-height: 1.35;
  border-radius: 3px;
  padding: 0;
}

#wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 40px 100px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#post-list li:hover {
  cursor: pointer;
  border-left: 4px solid var(--main-color);
  padding-left: 15px;
  border-radius: 3px;
}

#post-list li:hover .dates {
  text-decoration: none;
  color: var(--main-color);
  font-weight: 400;
}

a,
#post-nav a,
#post-list a {
  -webkit-transition: all 0.15s ease;
  -moz-transition: all 0.15s ease;
  -ms-transition: all 0.15s ease;
  -o-transition: all 0.15s ease;
  transition: all 0.15s ease;
}

ul {
  margin: 0;
  padding: 0 20px;
  margin-bottom: 20px;
}

li {
  list-style-position: inside;
}

b {
  font-weight: 500;
  color: var(--text-color);
}

em,
i {
  font-style: italic;
}

#title {
  display: inline-block;
  line-height: 100%;
  font-weight: 500;
  font-size: 19px;
  margin: 0;
  padding-bottom: 20px;
}

.description {
  float: right;
  font: italic 14px/1.4em Georgia, serif;
  color: #aaa;
}

.post header {
  text-align: center;
}

.post h2 {
  margin-bottom: 40px;
  font: 600 1.5rem/1.5 -apple-system-subheadline, sans-serif;
  color: var(--text-color);
  letter-spacing: -0.5px;
}

.post h2.headline {
  font: normal 13px/1.5em -apple-system-subheadline, sans-serif;
  color: var(--text-color);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block;
  font-weight: 800;
}

#post-list p {
  font: normal 17px/1.5em -apple-system-subheadline, sans-serif;
  color: var(--light-text-color);
  max-width: 400px;
  margin-top: 2px;
  letter-spacing: 0.03rem;
}

h3,
h4,
h5 {
  color: var(--text-color);
}

h3 {
  font-size: 20px;
  font-weight: 400;
}

h4 {
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif;
  letter-spacing: -0.3px;
}

h5 {
  font-size: 15px;
  font-weight: 700;
}

h6 {
  font-size: 13px;
  font-weight: 700;
  color: var(--light-text-color);
  margin-bottom: 6px;
}

p.small {
  color: var(--light-text-color);
  font-size: 1rem;
  line-height: 1.5;
  display: block;
  text-align: center;
}

blockquote {
  padding-left: 15px;
  border-left: 3px solid #b8c2cc;
  margin-left: 2rem;
}

span.code {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
    monospace;
  background-color: var(--light-gray);
  font-size: 14px;
}

pre {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
    monospace;
  white-space: pre-wrap;
  padding: 20px;
  background-color: #2d3748;
  overflow: auto;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.5em;
  font-weight: 500;
  color: #d0d4d7;
}

.highlight pre {
  background-color: #2d3748;
}

img {
  max-width: 100%;
  border-radius: 3px;
}

#archive-list {
  margin-top: 100px;
}

#post-list li,
#archive-list li {
  padding-top: 20px;
  padding-bottom: 20px;
  list-style-type: none;
  margin-bottom: 0;
  -webkit-transition: all 75ms ease-out 30ms;
  -moz-transition: all 75ms ease-out 30ms;
  -o-transition: all 75ms ease-out 30ms;
  transition: all 75ms ease-out 30ms;
}

#post-list li:last-child {
  border-bottom: 1px solid var(--light-gray);
}

#post-list h2 {
  color: var(--text-color);
  display: block;
  font: bold 19px/1.7 -apple-system-subheadline, sans-serif;
}

#post-list .dates {
  float: right;
  position: relative;
  top: 1px;
  font: 300 17px/1.8 -apple-system-subheadline, sans-serif;
}

#post-list-footer {
  border-top: 1px solid var(--light-gray);
  margin-top: 20px;
  padding-top: 100px;
}

#archive-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  border-radius: 4px;
  padding: 3px 10px 6px;
  box-shadow: 0 0 0 1px #a2d0f6;
}

#archive-link:hover {
  background: var(--main-color);
  color: #fff;
  box-shadow: 0 0 0 1px var(--main-color);
}

#archive-link span {
  position: relative;
  top: 0;
  font-size: 17px;
}

#footer {
  padding: 40px 0 0;
  font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Oxygen,
    Ubuntu, Cantarell, open sans, helvetica neue, sans-serif;
}

.post {
  margin: 3rem 0 0;
}

#post-meta {
  font-weight: 700;
  line-height: 1.4;
  border-top: 1px solid var(--light-gray);
  padding-top: 40px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  margin-top: 40px;
  color: #444;
  border-bottom: 1px solid var(--light-gray);
}

#post-meta div span {
  color: #aaa;
  font-weight: 500;
  display: block;
}

#post-meta div span.dark {
  color: var(--text-color);
}

#post-meta div {
  margin: 0 25px 0 0;
  float: left;
}

#sharing {
  float: right;
  margin: -2px;
}

#sharing a {
  font-size: 20px;
  font-size: 23px;
  margin-left: 1px;
  margin-top: 4px;
  color: #d4d4d4;
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  margin-left: 2px;
}

#post-nav {
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  margin-top: 20px;
}

#post-nav span {
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -ms-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  transition: all 0.1s linear;
  position: relative;
}

#archive-list a {
  display: block;
  font: bold 17px/1.7 sans-serif;
  color: #333;
}

#archive-list .dates {
  float: right;
  position: relative;
  top: 1px;
  font: 300 17px/1.7 sans-serif;
  color: #bbb;
}

#post-meta .avatar {
  height: 36px;
  width: 36px;
  float: left;
  margin-top: 3px;
  margin-right: 20px;
}

#post-list.archive.readmore h3 {
  font: 400 20px -apple-system-subheadline, sans-serif;
  margin-bottom: 30px;
}

#post-list.archive.readmore a {
  font: 400 16px/1.6 sans-serif;
  color: var(--main-color);
  display: flex;
  justify-content: space-between;
}

#post-list.archive.readmore .dates {
  font: 300 16px/1.6 sans-serif;
}

#sharing a.twitter {
  background: #4fafed;
}

h1 {
  font-size: 30px;
  letter-spacing: -1px;
  color: var(--text-color);
  font-weight: 700;
}

h2 {
  font: italic 19px/1.3em Georgia, serif;
  color: #bbb;
}

#post-list li:hover h2,
p a,
#archive-list li a:hover,
#archive-list li:hover .dates {
  color: var(--main-color);
}

#post-list,
h1.archive,
#archive-list li:last-child {
  margin-bottom: 0;
}

#sharing a:hover,
#post-list.archive.readmore a:hover {
  opacity: 0.8;
}

@media screen and (max-width: 540px) {
  body {
    flex-direction: column;
    padding: 0;
  }

  aside {
    max-width: 100%;
  }

  #wrapper {
    padding: 15px !important;
  }

  .post {
    margin: 40px 0;
  }

  #post-list,
  #archive-list {
    margin-top: 0;
  }

  #post-meta {
    margin-top: 60px;
  }

  #title {
    font-size: 17px;
  }

  #post-list .dates {
    display: none;
  }

  #post-list-footer {
    margin-top: 20px;
    padding-top: 40px;
  }

  h1 {
    font-size: 26px;
  }

  .post h2.headline {
    font-size: 13px;
  }

  .post h1 {
    font-size: 24px;
  }

  .post h2 {
    font-size: 20px;
  }
}

#social {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

a.symbol {
  color: #cdd4da;
  font-size: 2rem;
  text-decoration: none;
  margin-right: 0.3rem;
}

a.symbol:hover {
  color: #bcd4da;
}

code {
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
    monospace;
  font-size: 14px;
  font-weight: 400;
}

.chroma code {
  padding: 0;
}

p > code {
  background-color: var(--gray);
  border-radius: 4px;
  padding: 4px;
}

body {
  letter-spacing: 0.3px;
}

#post-list li {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}

#post-list .dates {
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.5;
  color: #7d7d7d;
}

#post-list .dates span {
  font-size: 2rem;
}

#post-list.archive li {
  display: block;
}

.profile h2 {
  color: #7d7d7d;
  font-size: 1.3rem;
}

.post h2 {
  margin: 30px 0 15px;
}

img[src$="#center"] {
  display: block;
  margin: 0.7rem auto;
}

img[src$="#floatleft"] {
  float: left;
  margin: 0.7rem;
}

img[src$="#floatright"] {
  float: right;
  margin: 0.7rem;
}

h1 {
  letter-spacing: 0;
}

#social svg {
  margin: 5px;
}

#post-body {
  font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua",
    Georgia, serif;
  letter-spacing: 0.01rem;
  font-weight: 400;
  font-style: normal;
  font-size: 1.22rem;
  line-height: 1.65;
  letter-spacing: 0.025em;
}

.post h1 {
  font-family: -apple-system-body, Georgia;
  font-size: 2.3rem;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: 1.6px;
  text-align: left;
}

#social {
  background: linear-gradient(
      to left,
      red 0,
      red 33.3%,
      orange 33.3%,
      orange 66.6%,
      blue 66.6%,
      blue
    )
    no-repeat;
  background-size: 60% 3px;
  background-position: top center;
  padding-top: 20px;
}

.graph text {
  /* transform: scale(1, -1); */
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
    monospace;
  font-size: 8pt;
  font-weight: bold;
}

.symbol svg {
  width: 22px;
}

.symbol path {
  fill: #718096;
}

.symbol.twitter:hover path {
  fill: #1da1f2;
}

.symbol.github:hover path {
  fill: var(--github);
}

.symbol.rss:hover path {
  fill: #ed8936;
}

.info {
  display: flex;
  align-items: flex-start;
  margin: 1rem 0;
}

.info p {
  width: 100%;
  margin: 0 0 0 1rem;
  font-family: sans-serif;
}

p.cc {
  color: #b8c2cc;
  font-size: 0.8rem;
}

footer p.small {
  margin-bottom: 0.7rem;
}

.chroma {
  color: #f8f8f2;
  background-color: #282a36;
}

.chroma .hl {
  display: block;
  width: 100%;
  background-color: #f2d0243b;
}

.post header h2 {
  width: 100%;
  text-align: left;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  margin-bottom: 10px;
}

.post header:hover h2 {
  color: #606f7b;
  font-weight: 800;
}

.post header h1 svg {
  display: none;
  margin-left: -24px;
}

.post header h1 > a {
  color: var(--text-color);
}

.post header h1:hover svg {
  display: inline-block;
}

#wrapper {
  padding: 0 40px 10px;
}

#post-meta {
  font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Oxygen,
    Ubuntu, Cantarell, open sans, helvetica neue, sans-serif;
}

nav.main-nav {
  padding-top: 0;
}

.profile #avatar {
  border: 6px solid #fff;
  width: 100px;
  height: 100px;
}

.profile {
  /* margin-top: -10%; */
  padding-top: 20px;
}

#header {
  margin-bottom: 0;
}

.chroma .kc,
.chroma .nt,
.chroma .o {
  color: #ff79c6;
}

.chroma .s,
.chroma .s2,
.chroma .s1 {
  color: #f1fa8c;
}

.chroma .m,
.chroma .mi {
  color: #bd93f9;
}

.chroma .c,
.chroma .c1 {
  color: #6272a4;
}

#post-list a.title,
svg.background {
  width: 100%;
}

@media screen and (min-width: 1400px) {
  svg.background {
    max-height: 300px;
  }
}

span.tag {
  display: flex;
  flex-direction: row;
  align-items: center;
  float: right;
  margin-right: 10px;
  font-weight: 500;
  font-size: 8pt;
}

span.tag > a {
  margin: 0;
  color: var(--text-color);
  font-weight: 500;
}

.page-404 svg {
  width: 100%;
}

kbd {
  border: 1px solid #aaa;
  border-radius: 4px;
  display: inline-block;
  padding: 0px 9px;
  background: var(--button-background);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 1rem;
}

header .last-edited {
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Open Sans",
    "Helvetica Neue", sans-serif;
  text-align: left;
  font-size: 10pt;
  text-transform: uppercase;
  margin-bottom: 30px;
}

picture {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}