Refine Home page (jenkinsci#432)

Author: janfaracik

src/main/java/io/jenkins/plugins/designlibrary/Home.java

@@ -5,6 +5,7 @@
 import hudson.model.RootAction;
 import java.util.List;
 import java.util.Map;
+import java.util.concurrent.ThreadLocalRandom;
 import jenkins.model.Jenkins;
 
 /**
@@ -61,4 +62,46 @@ public String getPluginVersion() {
         }
         return "Version not available";
     }
+
+    /**
+     * Generates a dynamic gradient for the Home cards
+     */
+    public String buildGradientVar() {
+        return GradientFactory.buildGradientVar();
+    }
+
+    private static final class GradientFactory {
+
+        private static final int LAYERS = 10;
+
+        private static final String[] COLOURS = {
+            "var(--light-orange)",
+            "var(--light-cyan)",
+            "var(--light-pink)",
+            "var(--light-red)",
+            "var(--light-yellow)",
+            "var(--light-purple)",
+            "var(--light-teal)",
+            "var(--light-indigo)",
+            "var(--light-brown)"
+        };
+
+        private GradientFactory() {}
+
+        public static String buildGradientVar() {
+            StringBuilder css = new StringBuilder("--aurora").append(": \n  ");
+
+            ThreadLocalRandom rnd = ThreadLocalRandom.current();
+            for (int i = 0; i < LAYERS; i++) {
+                int x = rnd.nextInt(101);
+                int y = rnd.nextInt(101);
+                String colour = COLOURS[rnd.nextInt(COLOURS.length)];
+
+                css.append(String.format("radial-gradient(at %d%% %d%%, %s 0, transparent 50%%)", x, y, colour));
+
+                css.append(i < LAYERS - 1 ? ",\n  " : ";");
+            }
+            return css.toString();
+        }
+    }
 }

src/main/resources/io/jenkins/plugins/designlibrary/Home/index.jelly

@@ -8,15 +8,21 @@
     </l:side-panel>
 
     <l:main-panel>
+      <style>
+        :root {
+          ${it.buildGradientVar()}
+        }
+      </style>
+
       <s:section hideBorder="true">
         <div class="app-card__container app-card__container--large">
           <div class="app-card__preview">
             <div class="app-card__preview__introduction">
               <img src="${imagesURL}/svgs/logo.svg" alt="${%Jenkins illustration}" />
             </div>
           </div>
-          <p class="jdl-section__title">${%welcome}</p>
-          <p class="jdl-section__description">${%description}</p>
+          <p class="app-card__title">${%welcome}</p>
+          <p class="app-card__description">${%description}</p>
         </div>
       </s:section>
 

src/main/resources/scss/abstracts/_overrides.scss

@@ -1,7 +1,7 @@
 :root {
   --jdl-spacing: var(--section-padding);
   --jdl-border-translucent: var(--jenkins-border-width) solid
-    color-mix(in srgb, var(--text-color-secondary) 9%, transparent);
+    color-mix(in srgb, var(--text-color-secondary) 10%, transparent);
   --jdl-box-shadow:
     0 0 0 var(--jenkins-border-width)
       color-mix(in srgb, currentColor 5%, transparent),

src/main/resources/scss/pages/_home.scss

@@ -1,5 +1,22 @@
 @use "../abstracts/mixins";
 
+@mixin aurora-background {
+  background-attachment: fixed;
+  background-color: var(--light-pink);
+  background-image: var(--aurora);
+  opacity: 0.3;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: aurora-one 10s linear infinite;
+  }
+}
+
+@property --rotation {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
 .app-home__side-by-side {
   position: relative;
   display: grid;
@@ -19,17 +36,12 @@
   flex-direction: column;
   color: var(--text-color) !important;
   text-decoration: none !important;
-  gap: 0.15rem;
+  gap: 0.75rem;
 
   &--large {
-    gap: var(--jdl-spacing);
-
-    .jdl-section__title {
-      margin-bottom: calc(var(--jdl-spacing) * -0.25);
-    }
-
-    .jdl-section__description {
-      font-size: 1rem;
+    .app-card__title {
+      font-size: 1.125rem;
+      margin-top: 0.25rem;
     }
   }
 
@@ -93,107 +105,42 @@
     display: inline-block;
     position: relative;
     width: 100%;
-    margin: -10%;
     aspect-ratio: 1;
     backdrop-filter: invert(2%) blur(100px);
     mask-image: repeating-conic-gradient(
-      from 90deg,
+      from var(--rotation),
       var(--background) 0deg,
       transparent 20deg
     );
+    z-index: -1;
+    opacity: 0.85;
+
     @media (prefers-reduced-motion: no-preference) {
       animation: sunburst-rotation 100s infinite linear;
     }
-    & {
-      z-index: -1;
-      opacity: 0.4;
-      border-radius: 100%;
-      flex: 1;
-    }
   }
 }
 
 @keyframes sunburst-rotation {
   to {
-    transform: rotate(360deg);
+    --rotation: 360deg;
   }
 }
 
 .app-card__preview {
-  &::before,
-  &::after {
+  &::before {
+    @include aurora-background();
+
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
-    background-attachment: fixed;
-    background-size: max(950px, 65vw) 100vh;
-    background-repeat: no-repeat;
-    --sidebar-width: 340px;
-    --content-width: max(950px, 65vw);
-    background-position-x: calc(
-      var(--sidebar-width) +
-        ((100vw - (var(--content-width) + var(--sidebar-width))) / 2)
-    );
-    opacity: 0.25;
-
-    @media (max-width: 970px) {
-      --sidebar-width: 0;
-      --content-width: 100%;
-      background-size: 100%;
-    }
-  }
-
-  &::before {
-    background-image:
-      radial-gradient(at 40% 20%, var(--light-orange) 0, transparent 50%),
-      radial-gradient(at 80% 0%, var(--light-cyan) 0, transparent 50%),
-      radial-gradient(at 0% 50%, var(--light-pink) 0, transparent 50%),
-      radial-gradient(at 80% 50%, var(--light-red) 0, transparent 50%),
-      radial-gradient(at 0% 100%, var(--light-yellow) 0, transparent 50%),
-      radial-gradient(at 80% 100%, var(--light-purple) 0, transparent 50%),
-      radial-gradient(at 0% 0%, var(--light-pink) 0, transparent 50%);
-    @media (prefers-reduced-motion: no-preference) {
-      animation: aurora-one 5s linear infinite;
-    }
-  }
-
-  &::after {
-    background-image:
-      radial-gradient(at 40% 20%, var(--light-cyan) 0, transparent 50%),
-      radial-gradient(at 80% 0%, var(--light-orange) 0, transparent 50%),
-      radial-gradient(at 0% 50%, var(--light-blue) 0, transparent 50%),
-      radial-gradient(at 80% 50%, var(--light-green) 0, transparent 50%),
-      radial-gradient(at 0% 100%, var(--light-red) 0, transparent 50%),
-      radial-gradient(at 80% 100%, var(--light-yellow) 0, transparent 50%),
-      radial-gradient(at 0% 0%, var(--light-cyan) 0, transparent 50%);
-    @media (prefers-reduced-motion: no-preference) {
-      animation: aurora-two 8s linear infinite;
-    }
   }
 }
 
 @keyframes aurora-one {
-  0% {
-    opacity: 0.2;
-  }
-  50% {
-    opacity: 0.55;
-  }
-  100% {
-    opacity: 0.2;
-  }
-}
-
-@keyframes aurora-two {
-  0% {
-    opacity: 0.55;
-  }
   50% {
-    opacity: 0.1;
-  }
-  100% {
-    opacity: 0.55;
+    filter: hue-rotate(180deg);
   }
 }
 
@@ -202,33 +149,42 @@
   display: inline-flex;
   font-size: 1rem;
   align-items: center;
-  font-weight: 450;
-  gap: 1.15rem;
-  margin: 0.6rem 0 0;
+  font-weight: var(--font-bold-weight);
+  gap: 1.125rem;
+  margin: 0;
+  text-box: cap alphabetic;
 }
 
 .app-card__new-tag {
   @include mixins.base-text;
   position: relative;
   margin: 0;
   font-size: 0.75rem;
-  font-weight: 500;
+  font-weight: var(--font-bold-weight);
   z-index: 0;
-  color: var(--background);
 
-  &::before {
+  &::before,
+  &::after {
     content: "";
     position: absolute;
     inset: -1px -8px;
     border-radius: 100px;
-    background: var(--text-color);
     z-index: -1;
   }
+
+  &::before {
+    @include aurora-background();
+  }
+
+  &::after {
+    border: var(--jdl-border-translucent);
+  }
 }
 
 .app-card__description {
   @include mixins.base-text;
   font-size: 1rem;
   margin: 0;
   color: var(--text-color-secondary);
+  text-box: cap alphabetic;
 }