design virtual pages

assets/css/src/article.css

@@ -1,2 +1,3 @@
 article .content {
+  margin-top: calc(var(--unit--vertical) * 2);
 }

assets/css/src/header.css

@@ -33,18 +33,26 @@
   bottom: 0%;
 }
 
-.page-cover {
-  position: relative;
-  height: 80svh;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding-top: calc(var(--unit--vertical-relative) * 5);
+body {
+  --entry-btns-height: 10svh;
+}
+body[data-template="home"] {
+  --entry-btns-height: 30svh;
 }
 
-.page-cover.open + * {
-  margin-top: calc(var(--unit--vertical-relative) * 19);
+.page-cover {
+  position: relative;
+  height: calc(100svh - var(--entry-btns-height));
+  box-sizing: border-box;
+  padding-top: calc(var(--unit--vertical-relative) * 5);
+
+  display: flex;
+  flex-direction: column;
+}
+
+.page-cover .text-wrapper {
+  height: 100%;
+  overflow: auto;
 }
 
 [data-template="home"] .page-cover {
@@ -56,7 +64,7 @@
   position: sticky;
   position: -webkit-sticky;
   top: calc(var(--unit--vertical) * 3);
-  height: 20svh;
+  height: var(--entry-btns-height);
   display: flex;
   justify-content: space-between;
 }

assets/css/src/html.css

@@ -37,7 +37,7 @@ html {
 
 * {
   scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
+  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
 }
 
 /* Works on Chrome, Edge, and Safari */
@@ -52,7 +52,7 @@ html {
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: transparent;
+  background-color: rgba(255, 255, 255, 0.25);
   border-radius: 0px;
   border: none;
 }

assets/css/src/texts.css

@@ -38,6 +38,12 @@ h2 {
   font-size: var(--font-size-xl);
 }
 
+h3,
+.h3 {
+  font-size: var(--font-size-xl);
+  color: var(--color-secondary);
+}
+
 article h2 {
   margin-bottom: calc(var(--unit--vertical) / 2);
 }

assets/css/src/virtual.css

@@ -0,0 +1,4 @@
+/* ================= SPECIFIC TO VIRTUAL PAGES ================= */
+[data-template="year"] .edito {
+  margin-bottom: var(--unit--vertical);
+}

assets/css/style.css

@@ -5,6 +5,7 @@
 @import url("src/header.css");
 @import url("src/nav.css");
 @import url("src/article.css");
+@import url("src/virtual.css");
 @import url("src/home.css");
 @import url("src/footer.css");
 :root {