Merge pull request #148 from bootdotdev/2794_hb_new_ui

Update UI to match the main site

Author: hbeckmann

assets/css/styles.css

@@ -10,15 +10,45 @@
   --blue-500: hsl(235, 86%, 65%);
   --blue-600: hsl(235, 89%, 57%);
 
-  --gray-50: hsl(235, 10%, 97%);
-  --gray-100: hsl(235, 9%, 94%);
-  --gray-400: hsl(235, 3%, 62%);
-  --gray-500: hsl(235, 1%, 50%);
-  --gray-700: hsl(235, 5%, 24%);
-  --gray-750: hsl(235, 6%, 18%);
-  --gray-800: hsl(236, 7%, 13%);
-  --gray-900: hsl(240, 9%, 6%);
-  --gray-950: hsl(240, 10%, 3%);
+  --gray-50: #f5f7f9;
+  --gray-100: #e8ecf1;
+  --gray-150: #dde3eb;
+  --gray-200: #d7dee6;
+  --gray-250: #c4d1db;
+  --gray-300: #b2c1d0;
+  --gray-350: #a3b3c7;
+  --gray-400: #919dab;
+  --gray-450: #818a98;
+  --gray-500: #6e7888;
+  --gray-550: #606877;
+  --gray-600: #4e5564;
+  --gray-650: #454b59;
+  --gray-700: #3c424f;
+  --gray-750: #323845;
+  --gray-800: #252936;
+  --gray-850: #202330;
+  --gray-900: #181b26;
+  --gray-950: #121620;
+
+  --yellow-50: #fffaeb;
+  --yellow-100: #fef4d1;
+  --yellow-150: #fde9b0;
+  --yellow-200: #fddf8f;
+  --yellow-250: #fcd570;
+  --yellow-300: #f6bd45;
+  --yellow-350: #eeb23f;
+  --yellow-400: #e5ae3c;
+  --yellow-450: #dca336;
+  --yellow-500: #efbb03;
+  --yellow-550: #d69e02;
+  --yellow-600: #c18500;
+  --yellow-650: #a96f06;
+  --yellow-700: #905a0a;
+  --yellow-750: #7b4d0c;
+  --yellow-800: #64400e;
+  --yellow-850: #4e3310;
+  --yellow-900: #3b2710;
+  --yellow-950: #2a1c0c;
 
   --top-nav-bar-height: 56px;
 }
@@ -96,12 +126,12 @@ main ol {
 }
 
 main a {
-  color: var(--blue-400);
+  color: inherit;
   text-decoration: underline;
 }
 
 main a:hover {
-  color: var(--blue-300);
+  opacity: 0.7;
 }
 
 main code {

assets/css/syntax.css

@@ -1,7 +1,7 @@
 /* Background */
 .bg {
   color: #f8f8f2;
-  background-color: var(--gray-750);
+  background-color: var(--gray-800);
 }
 
 /* PreWrapper */

assets/css/tail-in.css

@@ -4,26 +4,79 @@
 
 @layer components {
   .textlink {
-    @apply hover:text-blue-300 text-blue-400 underline cursor-pointer;
-  }
-  .glassmorph {
-    @apply rounded border border-gray-500 bg-glassmorph;
-  }
-  .bg-glassmorph {
-    @apply bg-gradient-to-br from-gray-750/60  to-black/60 bg-clip-padding backdrop-filter backdrop-blur-sm;
+    @apply cursor-pointer underline hover:opacity-70;
   }
+
   .block-button-primary {
-    @apply active-scale-103 relative block origin-bottom overflow-hidden rounded px-4 py-2 text-white shadow-md focus:outline-none disabled:scale-100 disabled:cursor-not-allowed bg-gradient-to-br from-blue-500 to-blue-550 hover:from-blue-550 hover:to-blue-600 disabled:from-blue-350 disabled:to-blue-450;
+    @apply relative block origin-bottom overflow-hidden rounded-full border text-center text-sm text-gray-950 font-semibold bg-blend-soft-light px-4 py-2 shadow-md focus:outline-none disabled:scale-100 disabled:cursor-not-allowed btn-texture-yellow;
   }
+
   .block-button-secondary {
-    @apply active-scale-103 relative block origin-bottom overflow-hidden rounded px-4 py-2 text-white shadow-md focus:outline-none disabled:scale-100 disabled:cursor-not-allowed bg-gradient-to-br from-gray-650 to-gray-700 hover:from-gray-700 hover:to-gray-750 disabled:from-gray-500 disabled:to-gray-600;
+    @apply relative block origin-bottom overflow-hidden rounded-full border text-center text-sm text-gray-950 font-semibold bg-blend-soft-light px-4 py-2 shadow-md focus:outline-none disabled:scale-100 disabled:cursor-not-allowed btn-texture-gray;
   }
 }
 
-.active-scale-103 {
-  transition: transform 0.15s;
+.bg-black-textured {
+  background-image: url('/img/800/bg-black.webp');
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.bg-blue-textured {
+  background-image: url('/img/800/maptexture.webp'), url('/img/800/bg-blue.webp');
+  background-blend-mode: overlay;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.bg-wooden-divider {
+  background-image: url('/img/800/woodendividergem.webp');
+}
+
+.btn-texture-yellow {
+  background-image: url("/img/800/smalltexture.webp"),
+    radial-gradient(circle at center, rgba(255, 255, 255, 0.3), transparent 70%),
+    linear-gradient(to bottom,
+      var(--yellow-350),
+      var(--yellow-450),
+      var(--yellow-550));
+  border-color: var(--yellow-200);
+}
+
+.btn-texture-yellow:hover {
+  background-image: url("/img/800/smalltexture.webp"),
+    radial-gradient(circle at center, rgba(255, 255, 255, 0.3), transparent 30%),
+    linear-gradient(to bottom,
+      var(--yellow-500),
+      var(--yellow-600),
+      var(--yellow-700));
+  border-color: var(--yellow-450);
+}
+
+.btn-texture-yellow:disabled {
+  background-image: url("/img/800/smalltexture.webp"),
+    radial-gradient(circle at center, rgba(255, 255, 255, 0.3), transparent 70%),
+    linear-gradient(to bottom, var(--yellow-650), var(--yellow-850));
+  border-color: var(--yellow-550);
+}
+
+.btn-texture-gray {
+  background-image: url("/img/800/smalltexture.webp"),
+    radial-gradient(circle at center, rgba(255, 255, 255, 0.3), transparent 70%),
+    linear-gradient(to bottom, var(--gray-250), var(--gray-350));
+  border-color: var(--gray-200);
+}
+
+.btn-texture-gray:hover {
+  background-image: url("/img/800/smalltexture.webp"),
+    radial-gradient(circle at center, rgba(255, 255, 255, 0.3), transparent 30%),
+    linear-gradient(to bottom, var(--gray-350), var(--gray-500));
+  border-color: var(--gray-350);
 }
 
-.active-scale-103:hover {
-  transform: scale(1.03);
+.btn-texture-gray:disabled {
+  background-image: url("/img/800/smalltexture.webp"),
+    radial-gradient(circle at center, rgba(255, 255, 255, 0.3), transparent 70%),
+    linear-gradient(to bottom, var(--gray-450), var(--gray-550));
+  border-color: var(--gray-450);
 }