From c6d0e4cfd41c8853a88b11d5c1b990ef0dedb161 Mon Sep 17 00:00:00 2001 From: curly Date: Tue, 13 Dec 2022 13:19:47 -0700 Subject: working better now --- src/assets/css/main.css | 60 +++++++++++++++++++++++++++++++++------- src/assets/image/background.jpg | Bin 79090 -> 1419420 bytes src/assets/image/footer.png | Bin 0 -> 4947 bytes src/index.html | 5 ++-- 4 files changed, 53 insertions(+), 12 deletions(-) create mode 100644 src/assets/image/footer.png diff --git a/src/assets/css/main.css b/src/assets/css/main.css index d77bf82..c9b4d3a 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -3,9 +3,24 @@ html, body { border: 0; padding: 0; background-color: black; + color: var(--text-primary); } +:root { + --primary: 244, 238, 238; + --secondary: 187, 187, 187; + --tertiary: 153, 153, 153; + --text-primary: #222; +} +@media (prefers-color-scheme: dark) { + :root { + --primary: 34, 34, 34; + --secondary: 51, 51, 51; + --tertiary: 68, 68, 68; + --text-primary: #ddd; + } +} @media screen and (max-width: 500px) { #nav, #space { @@ -16,6 +31,9 @@ html, body { height: 70px; grid-template-columns: 20% 20% 20% 20% 20%; } + .body_decoration { + display: none; + } } @media screen and (min-width: 501px) and (max-width: 1099px) { .header-image > :nth-child(1) { @@ -27,6 +45,9 @@ html, body { .nav-button > :nth-child(2) { display: none; } + .body_decoration { + display: none; + } #nav { display: flex; flex-flow: column nowrap; @@ -69,6 +90,7 @@ html, body { + body { display: flex; flex-flow: row nowrap; @@ -78,14 +100,12 @@ body { } /* TESTING */ -#nav { - background-color: #fff; -} #content { - background-color: #ddda; + background-color: rgba(var(--primary), 0.7); + word-break: break-all; } #mobile-nav { - background-color: #fff; + background-color: rgb(var(--primary)); } /* END TESTING */ @@ -104,6 +124,16 @@ body { flex-flow: column nowrap; flex-grow: 7; } +.body_decoration { + background-color: rgba(var(--primary), 0.7); + mask-image: url(/assets/image/footer.png); + mask-size: 50px; + mask-repeat: repeat-y; + width: 50px; + -webkit-mask-image: url(/assets/image/footer.png); + -webkit-mask-size: 50px; + -webkit-mask-repeat: repeat-y; +} #space { flex-grow: 2; } @@ -119,20 +149,22 @@ body { image-rendering: pixelated; } .floatwrapper { + background-color: rgb(var(--primary)); + top: 0; position: sticky; align-content: space-between; - padding: 5px 0px 5px 0px; display: grid; - height: 100%; - flex-grow: 1; + height: 100vh; } .floatwrapper > div > div { - padding: 0px 5px 0px 5px; + padding-left: 5px; + padding-right: 5px; } .header-image { display: flex; justify-content: center; + padding-top: 5px; } .mobile-nav-button { @@ -140,6 +172,14 @@ body { margin: auto; } +#mobile-nav { + position: sticky; + bottom: 0; +} + +#nav-pin > a > span { + color: var(--text-primary) +} .nav-button { display: block; height: 35px; @@ -156,6 +196,6 @@ body { background-color: grey; } .nav-button > a:link, .nav-button > a:visited .nav-button > a { - color: black; + color: inherit; text-decoration: none; } \ No newline at end of file diff --git a/src/assets/image/background.jpg b/src/assets/image/background.jpg index 1bc4421..6bb5f1e 100644 Binary files a/src/assets/image/background.jpg and b/src/assets/image/background.jpg differ diff --git a/src/assets/image/footer.png b/src/assets/image/footer.png new file mode 100644 index 0000000..98383d3 Binary files /dev/null and b/src/assets/image/footer.png differ diff --git a/src/index.html b/src/index.html index 1d7cda4..e3de1e0 100644 --- a/src/index.html +++ b/src/index.html @@ -1,6 +1,6 @@ - Infernal * Garden + Infernal ⁕ Garden @@ -56,7 +56,7 @@
- dd + Lorem ipsum
yaddayaddayadda




































dd
+
-- cgit v1.2.3