perf: refactor using semantic HTML (#1207)

Fixes #1196

_sass/addon/commons.scss

@@ -216,7 +216,7 @@ i {
     position: sticky;
   }
 
-  > div {
+  > section {
     padding-left: 1rem;
     border-left: 1px solid var(--main-border-color);
 
@@ -225,7 +225,7 @@ i {
     }
   }
 
-  .post-content {
+  .content {
     font-size: 0.9rem;
   }
 }
@@ -233,6 +233,9 @@ i {
 #panel-wrapper {
   /* the headings */
   .panel-heading {
+    font-family: inherit;
+    line-height: inherit;
+
     @include label(inherit);
   }
 
@@ -367,7 +370,10 @@ i {
   }
 }
 
-.post {
+main {
+  line-height: 1.75;
+  min-height: calc(100vh - $topbar-height - $footer-height);
+
   h1 {
     margin-top: 2rem;
     margin-bottom: 1.5rem;
@@ -381,6 +387,14 @@ i {
       }
     }
   }
+
+  .categories,
+  #tags,
+  #archives {
+    a:not(:hover) {
+      @extend %no-bottom-border;
+    }
+  }
 }
 
 .post-meta {
@@ -397,7 +411,7 @@ i {
   }
 }
 
-.post-content {
+.content {
   font-size: 1.08rem;
   margin-top: 2rem;
   overflow-wrap: break-word;
@@ -479,7 +493,7 @@ i {
   ::marker {
     color: var(--text-muted-color);
   }
-} /* .post-content */
+} /* .content */
 
 .tag:hover {
   @extend %tag-hover;
@@ -738,6 +752,7 @@ $btn-mb: 0.5rem;
   }
 
   .site-title {
+    font-family: inherit;
     font-weight: 900;
     font-size: 1.75rem;
     line-height: 1.2;
@@ -894,7 +909,7 @@ $btn-mb: 0.5rem;
   width: 100%;
   overflow: auto;
 
-  .post-content {
+  .content {
     margin-top: 2rem;
   }
 }
@@ -907,8 +922,7 @@ $btn-mb: 0.5rem;
 }
 
 #topbar {
-  /* icons */
-  i {
+  button i {
     color: #999999;
   }
 
@@ -937,11 +951,11 @@ $btn-mb: 0.5rem;
   display: none;
 }
 
-#search-wrapper {
+search {
   display: flex;
   width: 100%;
   border-radius: 1rem;
-  border: 1px solid var(--search-wrapper-border-color);
+  border: 1px solid var(--search-border-color);
   background: var(--main-bg);
   padding: 0 0.5rem;
 
@@ -955,7 +969,6 @@ $btn-mb: 0.5rem;
 /* 'Cancel' link */
 #search-cancel {
   color: var(--link-color);
-  margin-left: 0.75rem;
   display: none;
   white-space: nowrap;
 
@@ -1035,7 +1048,7 @@ $btn-mb: 0.5rem;
     line-height: 2.5rem;
   }
 
-  > div {
+  > article {
     width: 100%;
 
     &:not(:last-child) {
@@ -1073,19 +1086,6 @@ $btn-mb: 0.5rem;
   white-space: nowrap;
 }
 
-#core-wrapper {
-  line-height: 1.75;
-  min-height: calc(100vh - $topbar-height - $footer-height);
-
-  .categories,
-  #tags,
-  #archives {
-    a:not(:hover) {
-      @extend %no-bottom-border;
-    }
-  }
-}
-
 #mask {
   display: none;
   position: fixed;
@@ -1108,7 +1108,7 @@ $btn-mb: 0.5rem;
 }
 
 #topbar-wrapper.row,
-#main > .row,
+#main-wrapper > .container > .row,
 #search-result-wrapper > .row {
   @include ml-mr(0);
 }
@@ -1204,10 +1204,8 @@ $btn-mb: 0.5rem;
 */
 
 @media all and (max-width: 576px) {
-  #core-wrapper {
-    min-height: calc(100vh - $topbar-height - $footer-height-large);
-
-    .post-content {
+  main {
+    .content {
       > blockquote[class^='prompt-'] {
         @include ml-mr(-1rem);
 
@@ -1232,7 +1230,7 @@ $btn-mb: 0.5rem;
     @extend %full-width;
   }
 
-  #main {
+  #main-wrapper > .container {
     @extend %full-width;
     @include pl-pr(0);
   }
@@ -1250,6 +1248,10 @@ $btn-mb: 0.5rem;
     }
   }
 
+  main {
+    min-height: calc(100vh - $topbar-height - $footer-height-large);
+  }
+
   footer {
     @include slide;
 
@@ -1283,7 +1285,7 @@ $btn-mb: 0.5rem;
   }
 
   #topbar,
-  #main {
+  #main-wrapper > .container {
     max-width: 100%;
   }
 
@@ -1292,7 +1294,7 @@ $btn-mb: 0.5rem;
   }
 
   #breadcrumb,
-  #search-wrapper {
+  search {
     display: none;
   }
 
@@ -1302,7 +1304,7 @@ $btn-mb: 0.5rem;
     left: 0;
   }
 
-  #core-wrapper,
+  main,
   #panel-wrapper {
     margin-top: 0;
   }
@@ -1313,7 +1315,7 @@ $btn-mb: 0.5rem;
     display: block;
   }
 
-  #search-result-wrapper .post-content {
+  #search-result-wrapper .content {
     letter-spacing: 0;
   }
 
@@ -1324,7 +1326,7 @@ $btn-mb: 0.5rem;
   h1.dynamic-title {
     display: none;
 
-    ~ .post-content {
+    ~ .content {
       margin-top: 2.5rem;
     }
   }
@@ -1351,7 +1353,7 @@ $btn-mb: 0.5rem;
     display: none;
   }
 
-  #search-wrapper {
+  search {
     max-width: $search-max-width;
   }
 
@@ -1360,13 +1362,13 @@ $btn-mb: 0.5rem;
     justify-content: start !important;
   }
 
-  .post {
+  main {
     h1 {
       margin-top: 3rem;
     }
   }
 
-  div.post-content .table-wrapper > table {
+  div.content .table-wrapper > table {
     min-width: 70%;
   }
 
@@ -1383,7 +1385,7 @@ $btn-mb: 0.5rem;
 
 /* Pad horizontal */
 @media all and (min-width: 992px) and (max-width: 1199px) {
-  #main .col-lg-11 {
+  #main-wrapper > .container .col-lg-11 {
     flex: 0 0 96%;
     max-width: 96%;
   }
@@ -1410,7 +1412,7 @@ $btn-mb: 0.5rem;
     display: none;
   }
 
-  #main > div.row {
+  #main-wrapper > .container > div.row {
     justify-content: center !important;
   }
 }
@@ -1418,7 +1420,7 @@ $btn-mb: 0.5rem;
 /* --- desktop mode, both sidebar and panel are visible --- */
 
 @media all and (min-width: 1200px) {
-  #search-wrapper {
+  search {
     margin-right: 4rem;
   }
 
@@ -1426,8 +1428,8 @@ $btn-mb: 0.5rem;
     transition: all 0.3s ease-in-out;
   }
 
-  #search-results > div {
-    width: 46%;
+  #search-results > article {
+    width: 45%;
 
     &:nth-child(odd) {
       margin-right: 1.5rem;
@@ -1443,7 +1445,7 @@ $btn-mb: 0.5rem;
     }
   }
 
-  .post-content {
+  .content {
     font-size: 1.03rem;
   }
 }
@@ -1465,19 +1467,19 @@ $btn-mb: 0.5rem;
     left: $sidebar-width-large;
   }
 
-  #search-wrapper {
+  search {
     margin-right: calc(
       #{$main-content-max-width} * 0.25 - #{$search-max-width} - 0.75rem
     );
   }
 
-  #main {
+  #main-wrapper > .container {
     max-width: $main-content-max-width;
     padding-left: 1.75rem !important;
     padding-right: 1.75rem !important;
   }
 
-  #core-wrapper,
+  main.col-12,
   #tail-wrapper {
     padding-right: 4.5rem !important;
   }

_sass/addon/module.scss

@@ -11,7 +11,7 @@
 }
 
 %section {
-  #core-wrapper & {
+  main & {
     margin-top: 2.5rem;
     margin-bottom: 1.25rem;
 

_sass/addon/syntax.scss

@@ -149,7 +149,7 @@ div[class^='language-'] {
 
   box-shadow: var(--language-border-color) 0 0 0 1px;
 
-  .post-content > & {
+  .content > & {
     @include ml-mr(-1rem);
 
     border-radius: 0;
@@ -258,7 +258,7 @@ div {
 
 @media all and (min-width: 576px) {
   div[class^='language-'] {
-    .post-content > & {
+    .content > & {
       @include ml-mr(0);
 
       border-radius: $base-radius;

_sass/addon/variables.scss

@@ -10,7 +10,7 @@ $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
 /* other framework sizes */
 
 $topbar-height: 3rem !default;
-$search-max-width: 210px !default;
+$search-max-width: 200px !default;
 $footer-height: 5rem !default;
 $footer-height-large: 6rem !default; /* screen width: < 850px */
 $main-content-max-width: 1250px !default;

_sass/colors/typography-dark.scss

@@ -48,7 +48,7 @@
   /* Topbar */
   --topbar-bg: rgb(27, 27, 30, 0.64);
   --topbar-text-color: var(--text-color);
-  --search-wrapper-border-color: rgb(55, 55, 55);
+  --search-border-color: rgb(55, 55, 55);
   --search-icon-color: rgb(100, 102, 105);
   --input-focus-border-color: rgb(112, 114, 115);
 

_sass/colors/typography-light.scss

@@ -51,7 +51,7 @@
   /* Topbar */
   --topbar-bg: rgb(255, 255, 255, 0.7);
   --topbar-text-color: rgb(78, 78, 78);
-  --search-wrapper-border-color: rgb(240, 240, 240);
+  --search-border-color: rgb(240, 240, 240);
   --search-icon-color: #c2c6cc;
   --input-focus-border-color: #b8b8b8;
 

_sass/layout/category-tag.scss

@@ -32,11 +32,6 @@
 
       font-size: 1.1rem;
     }
-
-    /* post's date */
-    > span:last-child {
-      white-space: nowrap;
-    }
   }
 }
 

_sass/layout/home.scss

@@ -5,7 +5,7 @@
 #post-list {
   margin-top: 2rem;
 
-  a.card-wrapper {
+  .card-wrapper {
     display: block;
 
     &:hover {
@@ -51,7 +51,7 @@
         color: var(--text-muted-color) !important;
       }
 
-      .card-text.post-content {
+      .card-text.content {
         @extend %muted;
 
         p {

_sass/layout/post.scss

@@ -47,13 +47,16 @@
 }
 
 h1 + .post-meta {
-  span + span::before {
+  > span + span::before {
     @include dot;
   }
 
-  em {
+  em,
+  time {
     color: var(--text-color);
+  }
 
+  em {
     a {
       color: inherit;
     }
@@ -165,9 +168,6 @@ h1 + .post-meta {
 }
 
 .post-navigation {
-  padding-top: 3rem;
-  padding-bottom: 4rem;
-
   .btn {
     @extend %btn-post-nav;
 
@@ -198,7 +198,7 @@ h1 + .post-meta {
       color: var(--text-muted-color);
       font-size: 0.65rem;
       text-transform: uppercase;
-      content: attr(prompt);
+      content: attr(aria-label);
     }
 
     &:first-child {
@@ -326,7 +326,7 @@ h1 + .post-meta {
     @include label(1.1rem, 600);
   }
 
-  em {
+  time {
     @extend %normal-font-style;
 
     color: var(--text-muted-color);
@@ -353,8 +353,12 @@ h1 + .post-meta {
 #tail-wrapper {
   min-height: 2rem;
 
-  > div:last-of-type {
-    margin-bottom: 2rem;
+  > *:not(:last-child) {
+    margin-top: 3rem;
+  }
+
+  > *:nth-last-child(2) {
+    margin-bottom: 3rem;
   }
 
   /* stylelint-disable-next-line selector-id-pattern */
@@ -391,7 +395,7 @@ h1 + .post-meta {
 }
 
 @media all and (max-width: 768px) {
-  .post-content > p > img {
+  .content > p > img {
     max-width: calc(100% + 1rem);
   }
 }