From 26cf90ba8576a2d67d6a195c17352ff26bd8eb55 Mon Sep 17 00:00:00 2001 From: Brendan Hansen Date: Thu, 4 May 2023 10:54:18 -0500 Subject: [PATCH] mobile friendly now --- www/static/css/new_style.css | 160 +++++++++++++++++++++++---- www/templates/pages/homepage.html | 42 +------ www/templates/partials/logo_svg.html | 30 +++++ www/templates/partials/navbar.html | 43 ++----- 4 files changed, 182 insertions(+), 93 deletions(-) create mode 100644 www/templates/partials/logo_svg.html diff --git a/www/static/css/new_style.css b/www/static/css/new_style.css index b7de5d8..625e70d 100644 --- a/www/static/css/new_style.css +++ b/www/static/css/new_style.css @@ -34,13 +34,25 @@ } } +@media (min-width: 800px) { + :root { + --default-flex-direction: row; + font-size: 14pt; + } +} + +@media (max-width: 799px) { + :root { + --default-flex-direction: column; + font-size: 12pt; + } +} + body { background: var(--background-color); color: var(--foreground-color); font-family: "system-ui", sans-serif; - /* font-weight: lighter; */ - font-size: 14pt; } a { @@ -102,9 +114,30 @@ a:visited { background: var(--light-background-color); } +@media screen and (min-width: 800px) { + .container .split { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + } + + .container .split.right-40 > :last-child { + width: 40%; + } +} + +@media screen and (max-width: 799px) { + .container .split { + display: flex; + flex-direction: column; + justify-content: center; + } +} + h1 { min-width: 100px; - font-size: 36pt; + font-size: 2.5rem; } h1, h2, h3, h4, h5, h6 { @@ -130,36 +163,46 @@ code { /* Nagivation */ -.navbar-container { - max-width: 1200px; - width: 1200px; - margin: 0 auto; +@media screen and (min-width: 1200px) { + .navbar-container { + max-width: 1200px; + width: 1200px; + margin: 0 auto; + } +} + +@media screen and (max-width: 1199px) { + .navbar-container { + width: 100%; + margin: 0 auto; + } } + navbar { background: var(--background-color); color: var(--foreground-color); padding: 0 12px; display: flex; - flex-direction: row; + flex-direction: var(--default-flex-direction); justify-content: space-between; align-items: center; } navbar div { display: flex; - flex-direction: row; + flex-direction: var(--default-flex-direction); justify-content: center; align-items: center; } -navbar span { +navbar a span { display: inline-block; padding: 12px 24px; } -navbar span:hover { +navbar a span:hover { cursor: pointer; background-color: var(--light-background-color); } @@ -173,11 +216,54 @@ navbar a { text-decoration: none; } +@media (min-width: 1200px) { + #mobile-hamburger, .hamburger-piece { + display: none; + } +} + +@media (max-width: 1199px) { + navbar div { + display: none; + } + + navbar #mobile-hamburger:checked ~ div { + display: flex; + } + + #mobile-hamburger { + opacity: 0%; + width: 32px; + height: 20px; + z-index: 100; + position: absolute; + right: 10px; + top: 10px; + } + + .hamburger { + position: absolute; + top: 10px; + right: 10px; + } + + .hamburger-piece { + background-color: var(--foreground-color); + margin-bottom: 4px; + height: 4px; + width: 32px; + display: block; + border-radius: 3px; + } +} + /* Footer */ .footer-container { + position: sticky; + bottom: 0; display: flex; - flex-direction: row; + flex-direction: var(--default-flex-direction); } .footer-container > * { @@ -192,10 +278,9 @@ navbar a { - .panel-container { display: flex; - flex-direction: row; + flex-direction: var(--default-flex-direction); justify-content: space-between; width: 100%; gap: 24px; @@ -221,8 +306,6 @@ navbar a { main { min-height: 100vh; - display: grid; - grid-template-rows: auto 1fr auto; } main pre { @@ -230,6 +313,13 @@ main pre { box-shadow: 0px 1px 10px 1px rgba(0, 0, 0, 0.2); padding: 8px; display: block; + overflow-y: scroll; + overflow-x: scroll; +} + +pre code { + overflow-y: scroll; + overflow-x: scroll; } main blockquote { @@ -243,9 +333,35 @@ main li { margin-top: 8px; } -#logo:hover #path67 { transform: matrix(0.147954, 0, 0, 0.147954, 35, 9); } -#logo:hover #path31 { transform: translate(21.5px, -2.5px) rotate(60deg); } -#logo:hover #path1180 { transform: translate(34.25px, 7px) rotate(120deg); } -#logo:hover #path537 { transform: translate(51.5px, 11.01px) rotate(150deg); } -#logo:hover #path1062 { transform: translate(36px, 2px) rotate(90deg); } -#logo :not(#layer2) path { transition: all 1s ease-in-out; } +@media (min-width: 800px) { + #desktop_logo { + position: relative; + top: 6px; + width: 200px; + } + + #mobile_logo { + display: none; + } + + #desktop_logo:hover #path67 { transform: matrix(0.147954, 0, 0, 0.147954, 35, 9); } + #desktop_logo:hover #path31 { transform: translate(21.5px, -2.5px) rotate(60deg); } + #desktop_logo:hover #path1180 { transform: translate(34.25px, 7px) rotate(120deg); } + #desktop_logo:hover #path537 { transform: translate(51.5px, 11.01px) rotate(150deg); } + #desktop_logo:hover #path1062 { transform: translate(36px, 2px) rotate(90deg); } + #desktop_logo :not(#layer2) path { transition: all 1s ease-in-out; } +} + +@media (max-width: 799px) { + #mobile_logo { + position: relative; + top: 6px; + width: 50px; + height: 50px; + } + + #desktop_logo { + display: none; + } +} + diff --git a/www/templates/pages/homepage.html b/www/templates/pages/homepage.html index 2e18fdc..2da5be2 100644 --- a/www/templates/pages/homepage.html +++ b/www/templates/pages/homepage.html @@ -11,7 +11,7 @@
-
+

Overview


@@ -24,7 +24,7 @@
- 
use core {println}
+    
use core {println}
 
 main :: () {
     f := factorial(10);
@@ -64,44 +64,6 @@ factorial :: (n: i32) -> i32 {
- - {{endblock}} {{extends "pages/normal_page"}} diff --git a/www/templates/partials/logo_svg.html b/www/templates/partials/logo_svg.html new file mode 100644 index 0000000..fec6d7e --- /dev/null +++ b/www/templates/partials/logo_svg.html @@ -0,0 +1,30 @@ + + + + + + + + + + diff --git a/www/templates/partials/navbar.html b/www/templates/partials/navbar.html index 2887c9b..8e733af 100644 --- a/www/templates/partials/navbar.html +++ b/www/templates/partials/navbar.html @@ -2,40 +2,21 @@
- + + + + + + +
Home Try Online -- 2.25.1