From e473c9ec95c823af7cff19381d7f0c16d4893afc Mon Sep 17 00:00:00 2001 From: Brendan Hansen Date: Thu, 23 Nov 2023 23:50:15 -0600 Subject: [PATCH] homepage improvements --- www/static/css/new_style.css | 27 +++- www/static/vendor/highlight.min.css | 185 +--------------------------- www/templates/pages/homepage.html | 32 ++++- 3 files changed, 54 insertions(+), 190 deletions(-) diff --git a/www/static/css/new_style.css b/www/static/css/new_style.css index 32a7946..0a5223b 100644 --- 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 79db195..76f8218 100644 --- 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 - .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 - */ - -/* .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 */ .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 5098da0..ba06ae0 100644 --- a/www/templates/pages/homepage.html +++ b/www/templates/pages/homepage.html @@ -34,7 +34,7 @@ --> -
+
$ # Install Onyx in one command
@@ -54,9 +54,11 @@
-

Language Overview

+

Language Features

+
+

Syntax


@@ -80,7 +82,7 @@ factorial :: (n: i32) -> i32 {
-
+

Type Safety


@@ -103,7 +105,7 @@ main :: () {
-
+

Fast Compilation


@@ -127,7 +129,7 @@ Statistics:
-
+

WebAssembly


@@ -147,7 +149,7 @@ Hello, World!
-
+

C-FFI


@@ -168,6 +170,7 @@ main :: () { }
+
@@ -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); +}); {{endblock}} -- 2.25.1