homepage improvements

diff --git a/www/static/css/new_style.css b/www/static/css/new_style.css
index 32a79461d05db41ab0a30e00527777a16ad2e399..0a5223b7cf18b55cde4ee82bd0742742e22e17da 100644 (file)
--- a/www/static/css/new_style.css
+++ b/www/static/css/new_style.css
@@ -116,7 +116,7 @@ a.cta-button:hover {
 }
 
 .container.card > * {
-    background: #000;
+    background: linear-gradient(135deg, #000, var(--accent-background));
     box-shadow: 0px 7px 41px 30px rgba(200, 200, 230, 0.2);
     border-radius: 8px;
     border: 1px solid var(--primary);
@@ -347,6 +347,7 @@ main {
 }
 
 main pre {
+    background: linear-gradient(135deg, #000, var(--accent-background));
     border: 1px solid var(--primary);
     border-radius: 6px;
     box-shadow: 0px 7px 41px 30px rgba(200, 200, 230, 0.2);
@@ -423,6 +424,30 @@ main li {
     opacity: 1;
 }
 
+@media screen and (min-width: 800px) {
+    #install-card {
+        width: 800px;
+    }
+}
+
+.scrollport {
+    mask-image: linear-gradient(to right, #0000 0, #000 10%, #000 90%, #0000 100%);
+    -webkit-mask-image: linear-gradient(to right, #0000 0, #000 10%, #000 90%, #0000 100%);
+
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+
+    display: flex;
+    gap: 100px;
+    align-items: start;
+    padding: 0 100px;
+    padding-bottom: 32px;
+}
+
+.scrollport > div {
+    min-width: 1000px;
+}
+
 ::-webkit-scrollbar{
        width: 8px;
 }

diff --git a/www/static/vendor/highlight.min.css b/www/static/vendor/highlight.min.css
index 79db19563786882e79f6d218f27e6b59506cf11c..76f82187204b70839125f7a3a9f3b58947028545 100644 (file)
--- a/www/static/vendor/highlight.min.css
+++ b/www/static/vendor/highlight.min.css
@@ -1,190 +1,9 @@
-/* @media (prefers-color-scheme: light) {
-    /*
-    Visual Studio-like style based on original C# coloring by Jason Diamond <jason@diamond.name>
-    .hljs {
-      background: white;
-      color: black;
-    }
-
-    .hljs-comment,
-    .hljs-quote,
-    .hljs-variable {
-      color: #008000;
-    }
-
-    .hljs-keyword,
-    .hljs-selector-tag,
-    .hljs-built_in,
-    .hljs-name,
-    .hljs-tag {
-      color: #00f;
-    }
-
-    .hljs-string,
-    .hljs-title,
-    .hljs-section,
-    .hljs-attribute,
-    .hljs-literal,
-    .hljs-template-tag,
-    .hljs-template-variable,
-    .hljs-type,
-    .hljs-addition {
-      color: #a31515;
-    }
-
-    .hljs-deletion,
-    .hljs-selector-attr,
-    .hljs-selector-pseudo,
-    .hljs-meta {
-      color: #2b91af;
-    }
-
-    .hljs-doctag {
-      color: #808080;
-    }
-
-    .hljs-attr {
-      color: #f00;
-    }
-
-    .hljs-symbol,
-    .hljs-bullet,
-    .hljs-link {
-      color: #00b0e8;
-    }
-
-
-    .hljs-emphasis {
-      font-style: italic;
-    }
-
-    .hljs-strong {
-      font-weight: bold;
-    }
-} */
-
-    /*
-     * Visual Studio 2015 dark style
-     * Author: Nicolas LLOBERA <nllobera@gmail.com>
-     */
-
-/* .hljs {
-  background: #1E1E1E;
-  color: #DCDCDC;
-}
-
-.hljs-keyword,
-.hljs-literal,
-.hljs-symbol,
-.hljs-name {
-  color: #569CD6;
-}
-.hljs-link {
-  color: #569CD6;
-  text-decoration: underline;
-}
-
-.hljs-built_in,
-.hljs-type {
-  color: #4EC9B0;
-}
-
-.hljs-number,
-.hljs-class {
-  color: #B8D7A3;
-}
-
-.hljs-string,
-.hljs-meta .hljs-string {
-  color: #D69D85;
-}
-
-.hljs-regexp,
-.hljs-template-tag {
-  color: #9A5334;
-}
-
-.hljs-subst,
-.hljs-function,
-.hljs-title,
-.hljs-params,
-.hljs-formula {
-  color: #DCDCDC;
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: #57A64A;
-  font-style: italic;
-}
-
-.hljs-doctag {
-  color: #608B4E;
-}
-
-.hljs-meta,
-.hljs-meta .hljs-keyword,
-
-.hljs-tag {
-  color: #9B9B9B;
-}
-
-.hljs-variable,
-.hljs-template-variable {
-  color: #BD63C5;
-}
-
-.hljs-attr,
-.hljs-attribute {
-  color: #9CDCFE;
-}
-
-.hljs-section {
-  color: gold;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}
-
-.hljs-bullet,
-.hljs-selector-tag,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
-  color: #D7BA7D;
-}
-
-.hljs-addition {
-  background-color: #144212;
-  display: inline-block;
-  width: 100%;
-}
-
-.hljs-deletion {
-  background-color: #600;
-  display: inline-block;
-  width: 100%;
-} */
-
-/*!
-  Theme: a11y-dark
-  Author: @ericwbailey
-  Maintainer: @ericwbailey
-
-  Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
-*/
 /*
   IR_Black style (c) Vasily Mikhailitchenko <vaskas@programica.ru>
 */
 
 .hljs {
-  background: #000;
+  /* background: #000; */
   color: #f8f8f8;
 }
 
@@ -248,4 +67,4 @@
 
 .hljs-strong {
   font-weight: bold;
-}
\ No newline at end of file
+}

diff --git a/www/templates/pages/homepage.html b/www/templates/pages/homepage.html
index 5098da057054bbe90e63e00b8f325915b6bd0f3e..ba06ae0f87763ac21c15d72cca774c81fc47583a 100644 (file)
--- a/www/templates/pages/homepage.html
+++ b/www/templates/pages/homepage.html
@@ -34,7 +34,7 @@
         </div>
     </div>-->
 
-    <div class="container card" style="width: 800px">
+    <div class="container card" id="install-card">
         <div style="font-size: 14pt; font-family: fira; padding: 20px;">
             <div><span style="color: #444;">$</span> <span style="font-style: italic; color: #99a;"># Install Onyx in one command</span></div>
             <div id="install-command">
@@ -54,9 +54,11 @@
 
 <div class="container">
     <div class="title">
-        <h2>Language Overview</h2>
+        <h2>Language Features</h2>
     </div>
 
+<div class="scrollport">
+<div>
     <div>
         <h2>Syntax</h2>
         <br />
@@ -80,7 +82,7 @@ factorial :: (n: i32) -> i32 {
 
 </div>
 
-<div class="container">
+<div>
     <div>
         <h2>Type Safety</h2>
         <br />
@@ -103,7 +105,7 @@ main :: () {
 
 </div>
 
-<div class="container">
+<div>
     <div>
         <h2>Fast Compilation</h2>
         <br />
@@ -127,7 +129,7 @@ Statistics:
 </code></pre>
 </div>
 
-<div class="container">
+<div>
     <div>
         <h2>WebAssembly</h2>
         <br />
@@ -147,7 +149,7 @@ Hello, World!
 </code></pre>
 </div>
 
-<div class="container">
+<div>
     <div>
         <h2>C-FFI</h2>
         <br />
@@ -168,6 +170,7 @@ main :: () {
 }
     </code></pre>
 </div>
+</div>
 
 <div class="container">
     <div class="title">
@@ -186,6 +189,23 @@ document.querySelector("#install-command .copy-button").addEventListener("click"
         setTimeout(_ => { e.target.innerHTML="Copy" }, 5000);
     });
 })
+
+let rotator = document.querySelector(".scrollport");
+let rotatorIndex = 0;
+let ignoreNextScroll = false;
+let rotatorInterval = setInterval(_ => {
+    rotatorIndex += 1;
+    rotatorIndex %= rotator.children.length;
+    let f = 1.0 / (rotator.children.length - 1);
+
+    ignoreNextScroll = true; 
+    rotator.scrollTo({ top: 0, left: f * rotatorIndex * (rotator.scrollWidth - 1200), behavior: 'smooth'});
+}, 5000);
+
+rotator.addEventListener("scrollend", (e) => {
+    if (ignoreNextScroll) ignoreNextScroll = false;
+    else                  clearInterval(rotatorInterval);
+});
 </script>
 
 {{endblock}}