Style changes (#50)

dav1312 · web-flow · commit 258f28404efb · 2025-03-06T20:08:22.000+01:00
- Changes GUI note style
- Fixes unintended excessive padding to cards
- Adds a flex grow to recommended pill
diff --git a/assets/scss/_bootstrap-variables.scss b/assets/scss/_bootstrap-variables.scss
@@ -13,8 +13,6 @@ $container-max-widths: (
   xl: 1140px,
 );
 
-$grid-gutter-width: 30px;
-
 $spacer: 1rem;
 $spacers: ();
 $spacers: map-merge(
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
@@ -122,6 +122,12 @@ body:after {
   border-bottom: none !important;
 }
 
+@each $name, $value in $grays {
+  .bg-#{$name} {
+    background-color: $value;
+  }
+}
+
 :root {
   font-family: Inter, sans-serif;
   font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
diff --git a/layouts/_default/download.html b/layouts/_default/download.html
@@ -6,11 +6,11 @@
         <div class="col-12">
             <h1 class="title">{{.Title}}</h1>
             <div class="content">
-                <blockquote>
-                    <p><b>Note:</b> Stockfish is a <a target="_blank" href="https://official-stockfish.github.io/docs/stockfish-wiki/Stockfish-FAQ.html#executing-stockfish-opens-a-cmd-window">command line program</a>. You may want to use it in your own <a target="_blank" href="https://official-stockfish.github.io/docs/stockfish-wiki/Download-and-usage.html#download-a-chess-gui">chess GUI</a>.</p>
+                <blockquote class="bg-800 py-1 rounded">
+                    <p class="mb-0"><b>Note:</b> Stockfish is a <a target="_blank" href="https://official-stockfish.github.io/docs/stockfish-wiki/Stockfish-FAQ.html#executing-stockfish-opens-a-cmd-window">command line program</a>. You may want to use it in your own <a target="_blank" href="https://official-stockfish.github.io/docs/stockfish-wiki/Download-and-usage.html#download-a-chess-gui">chess GUI</a>.</p>
                 </blockquote>
 
-                <div id="download-cards" class="row">
+                <div id="download-cards" class="row mx-n1">
                     {{ $downloads := .Site.Data.downloads }}
                     
                     <!-- Windows -->
diff --git a/layouts/partials/download-card.html b/layouts/partials/download-card.html
@@ -10,7 +10,7 @@
     <div class="card h-100 overflow-hidden rounded-lg border-dark">
         <div class="card-header d-flex align-items-center">
             <i class="{{ $icon }} mr-1"></i>
-            <h2 class="fs-5 my-0">{{ $title }}{{ with $subtitle }} <small class="text-muted">{{ . }}</small>{{ end }}</h2>
+            <h2 class="fs-5 my-0 flex-grow-1 flex-md-grow-0">{{ $title }}{{ with $subtitle }} <small class="text-muted">{{ . }}</small>{{ end }}</h2>
         </div>
         {{ if $osData }}
         <div class="card-body py-0">
