get rid of old harsh theme

lit · Feb 29, 2024 · 56367c8 · 56367c8
1 parent 48e8bf6
commit 56367c8
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 51 deletions.
diff --git a/packages/lit-dev-content/site/_includes/blog-post.html b/packages/lit-dev-content/site/_includes/blog-post.html
@@ -47,7 +47,12 @@
 {% endblock %}
 
 {% block content %}
-  <img id="splash" src="{{ site.baseurl }}/images/blog/{{ splash }}">
+  <div id="splash">
+    <div class="bg bg1"></div>
+    <div class="bg bg2"></div>
+    <div class="bg bg3"></div>
+    <div class="bg bg4"></div>
+  </div>
 
   <article>
     <h1>{{ title }}</h1>

diff --git a/packages/lit-dev-content/site/blog/index.html b/packages/lit-dev-content/site/blog/index.html
@@ -10,7 +10,12 @@
 {% endblock %}
 
 {% block content %}
-  <img id="splash" src="{{ site.baseurl }}/images/blog/{{ splash }}">
+  <div id="splash">
+    <div class="bg bg1"></div>
+    <div class="bg bg2"></div>
+    <div class="bg bg3"></div>
+    <div class="bg bg4"></div>
+  </div>
 
   <article>
     <div id="frontMatter">

diff --git a/packages/lit-dev-content/site/css/blog-common.css b/packages/lit-dev-content/site/css/blog-common.css
@@ -3,14 +3,6 @@
   color: var(--sys-color-on-surface);
 }
 
-#splash {
-  box-shadow: rgb(0 0 0 / 20%) 0px 2px 5px 2px;
-  display: block;
-  height: 80px;
-  object-fit: cover;
-  width: 100%;
-}
-
 article {
   max-width: 800px;
   margin: auto;
@@ -40,3 +32,71 @@ img.flame {
 #footerTop {
   border-top: 1px solid var(--sys-color-primary);
 }
+
+/* Splash animation */
+#splash {
+  width: 100%;
+  height: 100px;
+  position: relative;
+  overflow: hidden;
+}
+
+#splash .bg {
+  background-color: transparent;
+  animation: slide 17s ease-in-out infinite alternate;
+  background-image: linear-gradient(
+    -60deg,
+    var(--color-blue) 50%,
+    var(--color-cyan) 50%
+  );
+  bottom: 0;
+  left: -50%;
+  opacity: 0.5;
+  position: absolute;
+  right: -50%;
+  top: 0;
+  filter: blur(50px);
+}
+
+#splash .bg2 {
+  animation-direction: alternate-reverse;
+  animation-duration: 19s;
+  background-image: linear-gradient(
+    60deg,
+    var(--color-blue) 50%,
+    var(--color-cyan) 50%
+  );
+}
+
+#splash .bg3 {
+  animation-duration: 23s;
+  animation-name: slide;
+  animation-timing-function: ease;
+  background-image: linear-gradient(
+    60deg,
+    var(--color-blue) 50%,
+    var(--color-cyan) 50%
+  );
+}
+
+#splash .bg4 {
+  animation-direction: alternate-reverse;
+  animation-duration: 29s;
+  animation-name: slide;
+  animation-timing-function: ease;
+}
+
+@media (prefers-reduced-motion) {
+  .bg {
+    animation-name: none !important;
+  }
+}
+
+@keyframes slide {
+  0% {
+    transform: translateX(-25%);
+  }
+  100% {
+    transform: translateX(25%);
+  }
+}
diff --git a/packages/lit-dev-content/site/css/learn-catalog.css b/packages/lit-dev-content/site/css/learn-catalog.css
@@ -11,67 +11,111 @@ main {
   --_learn-card-border-radius: var(--_learn-unit);
 }
 
+/* Begin hero section */
 #hero {
   background-color: black;
   color: #cfcfcf;
   font-family: Manrope;
   font-weight: 200;
   font-size: 20px;
-  padding: 67px 0;
-  padding-left: calc(var(--_learn-unit) + 40px);
-  height: 160px; /* Explicitly declared to fix layout shift as font loads */
+  padding: 67px calc(var(--_learn-unit) + 40px);
   position: relative;
+  overflow: hidden;
+}
+
+@media (max-width: 731px) {
+  #hero {
+    padding-inline: var(--_learn-unit);
+  }
 }
 
-/* The diagonal blue lines in the hero image */
-#hero::before {
-  content: '';
+#hero .bg {
+  background-color: transparent;
+  animation: slide 17s ease-in-out infinite alternate;
+  background-image: linear-gradient(
+    -60deg,
+    var(--color-blue) 50%,
+    var(--color-cyan) 50%
+  );
+  bottom: 0;
+  left: -50%;
+  opacity: 0.5;
   position: absolute;
+  right: -50%;
   top: 0;
-  right: 0;
-  bottom: 0;
-  width: 1000px;
-  --_hero-diagonal-distance: 80px;
-  background: repeating-linear-gradient(
-    30deg,
-    transparent,
-    transparent calc(var(--_hero-diagonal-distance) - 1px),
-    rgba(42,44,157,0.8) var(--_hero-diagonal-distance),
-    rgba(42,44,157,0.8) calc(var(--_hero-diagonal-distance) + 1px),
-    transparent calc(var(--_hero-diagonal-distance) + 1px)
+  filter: blur(100px);
+}
+
+#hero .bg2 {
+  animation-direction: alternate-reverse;
+  animation-duration: 19s;
+  background-image: linear-gradient(
+    60deg,
+    var(--color-blue) 50%,
+    var(--color-cyan) 50%
   );
-  clip-path: polygon(0% 0%, 50% 100%, 100% 100%, 100% 0%);
 }
 
-/* The vertical blue lines in the hero image */
-#hero::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 100px;
-  bottom: 0;
-  width: 648px;
-  --_hero-vertical-distance: 80px;
-  background: repeating-linear-gradient(
-    90deg,
-    transparent,
-    transparent calc(var(--_hero-vertical-distance) - 1px),
-    rgba(42,44,157,0.8) var(--_hero-vertical-distance),
-    rgba(42,44,157,0.8) calc(var(--_hero-vertical-distance) + 1px),
-    transparent calc(var(--_hero-vertical-distance) + 1px)
+#hero .bg3 {
+  animation-duration: 23s;
+  animation-name: slide;
+  animation-timing-function: ease;
+  background-image: linear-gradient(
+    60deg,
+    var(--color-blue) 50%,
+    var(--color-cyan) 50%
   );
 }
 
+/* End hero section */
+
+
+#hero .bg4 {
+  animation-direction: alternate-reverse;
+  animation-duration: 29s;
+  animation-name: slide;
+  animation-timing-function: ease;
+}
+
+@media (prefers-reduced-motion) {
+  .bg {
+    animation-name: none !important;
+  }
+
+  .card,
+  .card img {
+    transition: none !important;
+  }
+}
+
+@keyframes slide {
+  0% {
+    transform: translateX(-25%);
+  }
+  100% {
+    transform: translateX(25%);
+  }
+}
+
 #hero-contents {
   max-width: 1224px;
   width: 100%;
-
+  display: flex;
   margin: 0 auto;
   position: relative;
   /* Place hero contents above the blue line graphics. */
   z-index: 1;
 }
 
+#hero-contents > div {
+  box-sizing: border-box;
+  min-height: 190px; /* Explicitly declared to fix layout shift as font loads */
+  padding: 16px 32px;
+  border-radius: 16px;
+  /* --sys-color-dark-surface with opacity */
+  background-color: rgba(48, 48, 48, .75);
+}
+
 #hero h1 {
   color: var(--color-cyan);
   text-transform: uppercase;

diff --git a/packages/lit-dev-content/site/learn/index.html b/packages/lit-dev-content/site/learn/index.html
@@ -7,13 +7,19 @@
 <script type="module" src="{{ site.baseurl }}/js/pages/learn.js"></script>
 
 <div id="hero">
+  <div class="bg bg1"></div>
+  <div class="bg bg2"></div>
+  <div class="bg bg3"></div>
+  <div class="bg bg4"></div>
   <div id="hero-contents">
-    <h1>Learn</h1>
-    <p>
-      Explore a curated list of videos, articles, and tutorials tailored for all
-      experience levels. Unlock the full potential of Lit.
-    </p>
-  </div>
+    <div>
+      <h1>Learn</h1>
+      <p>
+        Explore a curated list of videos, articles, and tutorials tailored for all
+        experience levels. Unlock the full potential of Lit.
+      </p>
+    </div>
+    </div>
 </div>
 <section id="learn-catalog">
   <div class="center">