css test

style.css

@@ -0,0 +1,314 @@
+@charset "utf-8";
+
+/* Noto Serif KR */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700&display=swap');
+/* Noto Sans KR */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
+
+html {
+    font-size: 16px;
+    text-align: justify;
+}
+
+body {
+    font-family: 'Noto Serif KR', serif;
+    max-width: 100ch;
+    margin-top: -20px;
+    padding-bottom: 70px;
+
+    counter-reset: theorem definition sidenote-counter example figure video;
+}
+
+article > * + * {
+    margin-top: 0.5em;
+}
+
+p {
+    margin-top: 0.5em;
+}
+
+.theorem {
+    font-style: normal;
+}
+
+.theorem::before {
+    content: '정리 ' counter(theorem) '. ';
+}
+
+.lemma {
+    font-style: normal;
+}
+
+.lemma::before {
+    content: '보조정리 ' counter(theorem) '. ';
+}
+
+.proof::before {
+    content: '증명. ' attr(title);
+    font-weight: bold;
+    font-style: normal;
+}
+
+.definition::before {
+    content: '정의 ' counter(definition) '. ';
+    font-style: normal;
+}
+
+caption::before {
+    content: "표 " counter(caption) ". ";
+}
+
+#headerBar {
+    width: 100%;
+    background-color: hsl(210, 20%, 98%);
+    /* border-top: 1px solid lightgray; */
+    box-shadow: 0px 0px 8px lightgray;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 9999;
+}
+
+#headerBarDiv {
+    width: 97%;
+    margin: 0 auto;
+    max-width: 97ch;
+}
+
+#headerBarDiv a {
+    float: left;
+    display: block;
+    text-align: center;
+    padding: 8px;
+    text-decoration: none;
+    font-size: larger;
+    line-height: 24px;
+}
+
+#headerBarDivLeft {
+    float: left;
+}
+
+#headerBarDivRight {
+    float: right;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    word-break: keep-all;
+    margin-top: 3rem;
+}
+
+caption {
+    word-break: keep-all;
+}
+
+figcaption {
+    word-break: keep-all;
+    text-align: center;
+    counter-increment: figure;
+}
+
+figcaption::before {
+    content: "그림 " counter(figure) ". ";
+    font-weight: bold;
+    font-style: normal;
+}
+
+.video-container {
+    position: relative;
+    width: 100%;
+    height: auto;
+    padding-top: 50%;
+    counter-increment: video;
+}
+
+iframe {
+    z-index: 1;
+    top: 0;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.video-caption {
+    margin-top: 0.3em;
+    font-size: smaller;
+}
+
+.video-caption::before {
+    content: "영상 " counter(video) ". ";
+    font-weight: bold;
+    font-style: normal;
+}
+
+.scroll-wrapper {
+    overflow-y: hidden;
+    margin-top: 0;
+}
+
+img {
+    display: block;
+    margin: auto;
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+}
+
+.example-box {
+    counter-increment: example;
+
+    border-top-style: solid;
+    border-top-width: 1px;
+    border-top-color: gray;
+
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-bottom-color: gray;
+
+    padding-bottom: 0.5em;
+}
+
+.example {
+    display: block;
+    margin-top: 0.5em;
+    font-style: normal;
+}
+
+.example::before {
+    content: '예제 ' counter(example) '. ';
+    font-weight: bold;
+    font-style: normal;
+}
+
+dl dt {
+    font-weight: bold;
+}
+
+dl dd {
+    text-align: left;
+    margin-left: 1.5em;
+}
+
+img[src$=".png"] {
+    image-rendering: -webkit-optimize-contrast;
+}
+
+ul, ol {
+    margin-top: 0.5em;
+    margin-bottom: 0;
+}
+
+li > ul, li > ol {
+    margin-top: 0;
+}
+
+li + p {
+    margin-top: 0em;
+}
+
+table {
+    margin-left: auto;
+    margin-right: auto;
+    min-width: 25%;
+}
+
+th {
+    line-height: 1.4;
+    text-align: center;
+}
+
+td {
+    line-height: 1.4;
+    text-align: center;
+}
+
+td.right {
+    text-align: right;
+}
+
+mjx-container {
+    margin-top: 1em ! important;
+    margin-bottom: 0.5em ! important;
+}
+
+blockquote {
+    margin-left: 1em;
+    margin-right: 1em;
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+    border-left-style: solid;
+    border-left-width: 3px;
+    border-left-color: gray;
+    padding: 0.2em;
+    padding-left: 1em;
+}
+
+blockquote cite {
+    font-family: 'Noto Sans KR', sans-serif;
+    font-size: large;
+    font-style: normal;
+    font-weight: bold;
+}
+
+.casterian-share {
+    text-align: left;
+    margin-top: 2rem;
+}
+
+.casterian-comment {
+    margin-top: 1rem;
+    border-top-style: solid;
+    border-top-width: 2px;
+    border-top-color: black;
+}
+
+.code-file-name {
+    display: list-item;
+    margin-left: 2em;
+    font-family: 'Noto Sans KR', sans-serif;
+    font-style: normal;
+    font-weight: bold;
+}
+
+.code-file-name::after {
+    content: ":";
+    font-family: 'Noto Sans KR', sans-serif;
+    font-style: normal;
+    font-weight: bold;
+}
+
+:not(pre) code {
+    font-size: 90%;
+}
+
+.left {
+    text-align: left;
+}
+
+.center {
+    text-align: center;
+}
+
+.right {
+    text-align: right;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.border-bottom {
+    border-bottom: 1px solid black;
+}
+
+.border-top {
+    border-top: 1px solid black;
+}
+
+.border-left {
+    border-left: 1px solid black;
+}
+
+.border-right {
+    border-right: 1px solid black;
+}