update main css

Author: dev-jonghoonpark

_sass/_main.scss

@@ -9,10 +9,10 @@
 }
 
 body {
-  font-family: system-ui, sans-serif;
+  font-family: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  line-height: 1.5;
+  line-height: 1.7;
   font-size: 1rem;
   color: rgb(22, 23, 26);
 }
@@ -248,11 +248,6 @@ main {
   font-weight: bold;
 }
 
-h1 {
-  font-weight: 700;
-  font-size: 28px;
-}
-
 .post a {
   overflow-wrap: break-word;
 }
@@ -365,3 +360,193 @@ figcaption {
     display: none !important;
   }
 }
+
+.post > h1 {
+  font-size: 2.125em;
+  margin-bottom: .5em;
+  line-height: 36px;
+}
+
+.content {
+  --content-heading-weight: var(--weight-extrabold);
+  --content-heading-line-height: 1.125;
+  --content-block-margin-bottom: 1em;
+  --content-blockquote-padding: 1.25em 1.5em;
+  --content-pre-padding: 1.25em 1.5em;
+  --content-table-cell-border-width: 0 0 1px;
+  --content-table-cell-padding: 0.5em 0.75em;
+  --content-table-head-cell-border-width: 0 0 2px;
+  --content-table-body-last-row-cell-border-bottom-width: 0;
+  --content-table-foot-cell-border-width: 2px 0 0;
+}
+
+.content li + li {
+  margin-top: 0.25em;
+}
+.content p:not(:last-child),
+.content dl:not(:last-child),
+.content ol:not(:last-child),
+.content ul:not(:last-child),
+.content blockquote:not(:last-child),
+.content pre:not(:last-child),
+.content table:not(:last-child) {
+  margin-bottom: var(--content-block-margin-bottom);
+}
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5,
+.content h6 {
+  font-weight: var(--content-heading-weight);
+  line-height: var(--content-heading-line-height);
+}
+.content h1 {
+  font-size: 2em;
+  margin-bottom: 0.5em;
+}
+.content h1:not(:first-child) {
+  margin-top: 1em;
+}
+.content h2 {
+  font-size: 1.75em;
+  margin-bottom: 0.5714em;
+}
+.content h2:not(:first-child) {
+  margin-top: 1.1428em;
+}
+.content h3 {
+  font-size: 1.5em;
+  margin-bottom: 0.6666em;
+}
+.content h3:not(:first-child) {
+  margin-top: 1.3333em;
+}
+.content h4 {
+  font-size: 1.25em;
+  margin-bottom: 0.8em;
+}
+.content h5 {
+  font-size: 1.125em;
+  margin-bottom: 0.8888em;
+}
+.content h6 {
+  font-size: 1em;
+  margin-bottom: 1em;
+}
+.content blockquote {
+  padding: var(--content-blockquote-padding);
+}
+.content ol {
+  list-style-position: outside;
+  margin-inline-start: 2em;
+}
+.content ol:not(:first-child) {
+  margin-top: 1em;
+}
+.content ol:not([type]) {
+  list-style-type: decimal;
+}
+.content ol:not([type]).is-lower-alpha {
+  list-style-type: lower-alpha;
+}
+.content ol:not([type]).is-lower-roman {
+  list-style-type: lower-roman;
+}
+.content ol:not([type]).is-upper-alpha {
+  list-style-type: upper-alpha;
+}
+.content ol:not([type]).is-upper-roman {
+  list-style-type: upper-roman;
+}
+.content ul {
+  list-style: disc outside;
+  margin-inline-start: 2em;
+}
+.content ul:not(:first-child) {
+  margin-top: 1em;
+}
+.content ul ul {
+  list-style-type: circle;
+  margin-bottom: 0.25em;
+  margin-top: 0.25em;
+}
+.content ul ul ul {
+  list-style-type: square;
+}
+.content dd {
+  margin-inline-start: 2em;
+}
+.content figure:not([class]) {
+  margin-left: 2em;
+  margin-right: 2em;
+  text-align: center;
+}
+.content figure:not([class]):not(:first-child) {
+  margin-top: 2em;
+}
+.content figure:not([class]):not(:last-child) {
+  margin-bottom: 2em;
+}
+.content figure:not([class]) img {
+  display: inline-block;
+}
+.content figure:not([class]) figcaption {
+  font-style: italic;
+}
+.content pre {
+  -webkit-overflow-scrolling: touch;
+  overflow-x: auto;
+  padding: var(--content-pre-padding);
+  white-space: pre;
+  word-wrap: normal;
+}
+.content sup,
+.content sub {
+  font-size: 75%;
+}
+.content table td,
+.content table th {
+  border-width: var(--content-table-cell-border-width);
+  padding: var(--content-table-cell-padding);
+  vertical-align: top;
+}
+.content table th:not([align]) {
+  text-align: inherit;
+}
+.content table thead td,
+.content table thead th {
+  border-width: var(--content-table-head-cell-border-width);
+}
+.content table tfoot td,
+.content table tfoot th {
+  border-width: var(--content-table-foot-cell-border-width);
+}
+.content table tbody tr:last-child td,
+.content table tbody tr:last-child th {
+  border-bottom-width: var(--content-table-body-last-row-cell-border-bottom-width);
+}
+.content .tabs li + li {
+  margin-top: 0;
+}
+.content.is-small {
+  font-size: var(--size-small);
+}
+.content.is-normal {
+  font-size: var(--size-normal);
+}
+.content.is-medium {
+  font-size: var(--size-medium);
+}
+.content.is-large {
+  font-size: var(--size-large);
+}
+
+:root {
+  --weight-light: 300;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --weight-extrabold: 800;
+}