Merge pull request #176 from 1Copenut/chore/refactor-main-css

[CHORE] Refactor `main.css` for code blocks
1Copenut · Dec 29, 2023 · 4e86426 · 4e86426
2 parents 9924b73 + 6cf4729
commit 4e86426
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 79 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "html.suggest.html5": true,
+  "emmet.includeLanguages": {
+    "njk": "html",
+    "nunjucks": "html"
+  }
+}
diff --git a/src/_includes/css/global/_utilities.css b/src/_includes/css/global/_utilities.css
@@ -1,32 +1,45 @@
 /* ========================================
  * /global _UTILITIES.CSS
  * ======================================== */
+/* Code blocks */
+.utils__code--comment {
+  color: var(--color-code-gray--comment);
+  font-style: italic;
+}
+
+.utils__code--keyword {
+  font-weight: var(--font-weight-bold);
+}
+
+/* Layout */
 .utils__flex-basis--100 {
   flex-basis: 100% !important;
 }
 
+/* Lists */
 .utils__list--no-bullets {
   list-style-type: none !important;
 }
 
+/* Spacing */
 .utils__margin--0 {
   margin: 0 !important;
 }
 
 .utils__margin-bottom--0 {
-  margin-bottom: 0 !important;
+  margin-block-end: 0 !important;
 }
 
 .utils__margin-left--0 {
-  margin-left: 0 !important;
+  margin-inline-start: 0 !important;
 }
 
 .utils__margin-top--0 {
-  margin-top: 0 !important;
+  margin-block-start: 0 !important;
 }
 
 .utils__text-align--left {
-  text-align: left !important;
+  text-align: start !important;
 }
 
 .utils__text-align--center {
@@ -37,6 +50,7 @@
   width: 100% !important;
 }
 
+/* Visibility */
 .utils__visibility--sr-only {
   /* https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ */
   border: 0;

diff --git a/src/_includes/css/global/_variables.css b/src/_includes/css/global/_variables.css
@@ -2,6 +2,9 @@
  * /global _VARIABLES.CSS
  * ======================================== */
 :root {
+  /* Borders and radiuses */
+  --border-radius-standard: 3px;
+
   /* Colors */
   --color-alice-blue: #f0f8ff;
   --color-background-black: #121212;
@@ -13,9 +16,11 @@
   --color-background-dusty-rose: #ab4776;
   --color-background-dusty-rose--dark: #882455;
   --color-background-gray: #727272;
+  --color-code-blue--background: #f2f7fe;
+  --color-code-gray--comment: #707070;
   --color-form--error: #a70e0e;
   --color-link-blue: #234a71;
-  --color-link-blue-light: #2397d3;
+  --color-link-blue--light: #2397d3;
   --color-footer-black: #212121;
   --color-footer-gray: #888888;
   --color-text-black: #2b2b2b;
@@ -31,12 +36,12 @@
   --fluid-max-ratio: 1.333;
 
   /* Typefaces */
-  --typefaces-sans: 'Fig Tree', Arial, Helvetica, 'sans-serif';
-  --typefaces-serif: 'Bitter', Georgia, serif;
+  --typefaces-sans: "Fig Tree", Arial, Helvetica, "sans-serif";
+  --typefaces-serif: "Bitter", Georgia, serif;
 
   /*  Type Weights */
   --font-weight-light: 300;
-  --font-weight-balanced: 355;
+  --font-weight-balanced: 325;
   --font-weight-normal: 400;
   --font-weight-normal--mobile: 450;
   --font-weight-semi-bold--dark: 550;
@@ -46,7 +51,10 @@
 
   /* CSS locks for fluid type */
   --fluid-screen: 100vw;
-  --fluid-bp: calc((var(--fluid-screen) - (var(--fluid-min-width) * 1rem)) / (var(--fluid-max-width) - var(--fluid-min-width)));
+  --fluid-bp: calc(
+    (var(--fluid-screen) - (var(--fluid-min-width) * 1rem)) /
+      (var(--fluid-max-width) - var(--fluid-min-width))
+  );
 
   /*
    * Fluid type scales
@@ -90,14 +98,54 @@
   --fluid-max-size-6: var(--fluid-max-size) * var(--fluid-max-scale-5);
   --fluid-max-size-7: var(--fluid-max-size) * var(--fluid-max-scale-6);
 
-  --fluid-0: calc(((var(--fluid-min-size-0) * 1rem) + (var(--fluid-max-size-0) - var(--fluid-min-size-0)) * var(--fluid-bp)));
-  --fluid-1: calc(((var(--fluid-min-size-1) * 1rem) + (var(--fluid-max-size-1) - var(--fluid-min-size-1)) * var(--fluid-bp)));
-  --fluid-2: calc(((var(--fluid-min-size-2) * 1rem) + (var(--fluid-max-size-2) - var(--fluid-min-size-2)) * var(--fluid-bp)));
-  --fluid-3: calc(((var(--fluid-min-size-3) * 1rem) + (var(--fluid-max-size-3) - var(--fluid-min-size-3)) * var(--fluid-bp)));
-  --fluid-4: calc(((var(--fluid-min-size-4) * 1rem) + (var(--fluid-max-size-4) - var(--fluid-min-size-4)) * var(--fluid-bp)));
-  --fluid-5: calc(((var(--fluid-min-size-5) * 1rem) + (var(--fluid-max-size-5) - var(--fluid-min-size-5)) * var(--fluid-bp)));
-  --fluid-6: calc(((var(--fluid-min-size-6) * 1rem) + (var(--fluid-max-size-6) - var(--fluid-min-size-6)) * var(--fluid-bp)));
-  --fluid-7: calc(((var(--fluid-min-size-7) * 1rem) + (var(--fluid-max-size-7) - var(--fluid-min-size-7)) * var(--fluid-bp)));
+  --fluid-0: calc(
+    (
+      (var(--fluid-min-size-0) * 1rem) +
+        (var(--fluid-max-size-0) - var(--fluid-min-size-0)) * var(--fluid-bp)
+    )
+  );
+  --fluid-1: calc(
+    (
+      (var(--fluid-min-size-1) * 1rem) +
+        (var(--fluid-max-size-1) - var(--fluid-min-size-1)) * var(--fluid-bp)
+    )
+  );
+  --fluid-2: calc(
+    (
+      (var(--fluid-min-size-2) * 1rem) +
+        (var(--fluid-max-size-2) - var(--fluid-min-size-2)) * var(--fluid-bp)
+    )
+  );
+  --fluid-3: calc(
+    (
+      (var(--fluid-min-size-3) * 1rem) +
+        (var(--fluid-max-size-3) - var(--fluid-min-size-3)) * var(--fluid-bp)
+    )
+  );
+  --fluid-4: calc(
+    (
+      (var(--fluid-min-size-4) * 1rem) +
+        (var(--fluid-max-size-4) - var(--fluid-min-size-4)) * var(--fluid-bp)
+    )
+  );
+  --fluid-5: calc(
+    (
+      (var(--fluid-min-size-5) * 1rem) +
+        (var(--fluid-max-size-5) - var(--fluid-min-size-5)) * var(--fluid-bp)
+    )
+  );
+  --fluid-6: calc(
+    (
+      (var(--fluid-min-size-6) * 1rem) +
+        (var(--fluid-max-size-6) - var(--fluid-min-size-6)) * var(--fluid-bp)
+    )
+  );
+  --fluid-7: calc(
+    (
+      (var(--fluid-min-size-7) * 1rem) +
+        (var(--fluid-max-size-7) - var(--fluid-min-size-7)) * var(--fluid-bp)
+    )
+  );
 
   --fluid-1-margin: calc(var(--fluid-min-size-0) * 0.5rem);
   --fluid-2-margin: calc(var(--fluid-min-size-0) * 0.8333333333rem);

diff --git a/src/_includes/css/landmarks/_footer.css b/src/_includes/css/landmarks/_footer.css
@@ -1,9 +1,9 @@
 /* ========================================
  * /landmarks _FOOTER.CSS
  * ======================================== */
-[role='contentinfo'] {
+[role="contentinfo"] {
   background: var(--color-background-black)
-    url('../../images/backgrounds/[email protected]');
+    url("../../images/backgrounds/[email protected]");
   background-position: bottom 60px right 25px;
   background-repeat: no-repeat;
   background-size: auto 9%;
@@ -26,7 +26,7 @@
 
     &__block--social {
       align-content: flex-start;
-      background: url('../../images/backgrounds/ampersand.png') top 25px left
+      background: url("../../images/backgrounds/ampersand.png") top 25px left
         30% no-repeat;
       background-size: auto 80px;
     }
@@ -98,7 +98,7 @@
     }
 
     &__link {
-      color: var(--color-link-blue-light);
+      color: var(--color-link-blue--light);
       display: inline-block;
       font-size: calc(var(--fluid-0) * var(--type-size-modifier--footer));
       padding: 0.325rem 0;