refactor: remove css

Author: arnolanglade

layouts/404.html

@@ -4,7 +4,7 @@
     <div class="row pb-5">
       <div class="col-12 text-center">
         <h1 class="display-1 fw-bold text-center text-primary pb-3">Page not found</h1>
-        <p class="text-black-61 text-center pb-3">You're lost! The page does not exit.</p>
+        <p class="text-dark text-center pb-3">You're lost! The page does not exit.</p>
       </div>
       {{- range ( where site.RegularPages "Section" "blog" | first 3 ) }}
       {{ partial "blog-post-card" . }}

layouts/_default/list.html

@@ -7,7 +7,7 @@
             <h2 class="fs-1 fw-bold text-center text-primary pb-3">{{ . }}</h2>
           {{ end }}
           {{ with .Params.description }}
-            <p class="text-black-61 text-center pb-3">{{ . }}</p>
+            <p class="text-dark text-center pb-3">{{ . }}</p>
           {{ end }}
         </div>
       </div>
@@ -19,7 +19,7 @@ <h2 class="fs-1 fw-bold text-center text-primary pb-3">{{ . }}</h2>
             </div>
             <div class="card-body">
               <h5 class="card-title fw-semibold">{{ .Title }}</h5>
-              <p class="card-text text-black-61">{{ .Summary | plainify }}</p>
+              <p class="card-text text-dark">{{ .Summary | plainify }}</p>
             </div>
           </a>
         </div>

layouts/blog/list.html

@@ -12,7 +12,7 @@
             <h2 class="me-title fw-bold display-1 text-primary text-center text-xl-start pb-4">{{ . }}</h2>
             {{ end }}
             {{ with .Params.description }}
-            <p class="text-center text-black-61 text-light text-xl-start pb-4">{{ . }}</p>
+            <p class="text-center text-light text-xl-start pb-4">{{ . }}</p>
             {{ end }}
             <div class="d-flex flex-column flex-xl-row">
               <a class="btn btn-primary px-4 my-1" href="{{ "/newsletter" | relLangURL }}">

layouts/partials/sections/me.html

@@ -8,7 +8,7 @@
           <h3 class="me-title fw-bold display-1 text-primary text-center text-xl-start pb-4">
             {{ i18n "home.section.me.title" | markdownify }}
           </h3>
-          <p class="text-center text-black-61 text-xl-start pb-4 text-light">
+          <p class="text-center text-xl-start pb-4 text-light">
             {{ i18n "home.section.me.text"  | markdownify }}
           </p>
         <div class="d-flex flex-column flex-xl-row">

layouts/partials/sections/services.html

@@ -16,7 +16,7 @@
           <h3 class="fs-1 fw-bold text-dark pb-3">{{ . | markdownify }}</h3>
         {{ end }}
         {{ with .text }}
-          <p class="text-black-61 pb-3">{{ . | markdownify }}</p>
+          <p class="text-dark pb-3">{{ . | markdownify }}</p>
         {{ end }}
         <div class="">
           {{ range .buttons | first 1 }}

layouts/partials/sections/testimonials.html

@@ -19,7 +19,7 @@ <h2 class="fs-1 fw-bold text-center text-light">
         <div class="card d-flex flex-xl-row align-items-start border-0 shadow p-5">
           {{ $src := (printf "%s%s" "testimonial/" .image ) }}
           {{ partial "asset-image" (dict "src" $src "alt" .name "size" "70x" "class" "rounded-circle mb-3") }}
-          <p class="card-text text-black-61 ps-2">
+          <p class="card-text text-dark ps-2">
             "{{ .text }}"
             <br>
             <br>
@@ -52,7 +52,7 @@ <h2 class="fs-1 fw-bold text-center text-light">
           {{ else }}
           <div class="card-body">
             {{ $colors := (slice "bg-green" "bg-yellow" "bg-red" "bg-purple") }}
-            <div class="{{ index $colors (mod $i 4) }} rounded-circle size-90 mb-4"></div>
+            <div class="{{ index $colors (mod $i 4) }} rounded-circle mb-4"></div>
             <p class="card-text text-dark">"
               {{ $e.text }}"
               <br>

layouts/talks/single.html

@@ -13,7 +13,7 @@
             <h1 class="page-title display-1 fw-bold text-primary pb-3">{{ . }}</h1>
             {{ end }}
             {{ with .Params.conference }}
-            <p class="text-black-61 mb-0">
+            <p class="text-dark mb-0">
               <a href="{{ .link }}" target="_blank"><strong>{{ .title }}</strong></a>
             </p>
             {{ end }}

themes/al/assets/scss/sections/blog-list.scss

@@ -20,3 +20,22 @@
     border-color: $dark;
   }
 }
+
+.aspect-ratio-62-5 {
+  position: relative;
+  width: 100%;
+  max-height: 0;
+  padding-bottom: 62.5%;
+
+  img {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+}

themes/al/assets/scss/shared/_utilities.scss

@@ -2,29 +2,11 @@
   font-weight: 600;
 }
 
-.text-black-61 { color: rgba(0, 0, 0, 0.61); }
-
 .bg-green { background-color: #B4D1C4; }
 .bg-yellow { background-color: #F6DE9D; }
 .bg-red { background-color: #FF87B0D9; }
 .bg-purple { background-color: #ADA8D6; }
 
-.bg-blue-16 {
-  background-color: rgba(39, 163, 255, 0.16);
-}
-
-.border-blue-16 {
-  border-color: rgba(39, 163, 255, 0.16);
-}
-
-.bg-blue-63 {
-  background-color: rgba(220, 240, 255, 0.63);
-}
-
-.bg-blue-light {
-  background-color: #F6FBFF;
-}
-
 .border-radius-30 {
   border-radius: 30px;
   overflow: hidden;
@@ -38,45 +20,3 @@
   max-height: 16px;
 }
 
-.size-24 {
-  min-width: 24px;
-  max-width: 24px;
-
-  min-height: 24px;
-  max-height: 24px;
-}
-
-.size-64 {
-  min-width: 64px;
-  max-width: 64px;
-
-  min-height: 64px;
-  max-height: 64px;
-}
-
-.size-90 {
-  min-width: 90px;
-  max-width: 90px;
-
-  min-height: 90px;
-  max-height: 90px;
-}
-
-.aspect-ratio-62-5 {
-  position: relative;
-  width: 100%;
-  max-height: 0;
-  padding-bottom: 62.5%;
-
-  img {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-  }
-}