diff options
| -rw-r--r-- | src/assets/css/main.css | 60 | ||||
| -rw-r--r-- | src/assets/image/background.jpg | bin | 79090 -> 1419420 bytes | |||
| -rw-r--r-- | src/assets/image/footer.png | bin | 0 -> 4947 bytes | |||
| -rw-r--r-- | src/index.html | 5 |
4 files changed, 53 insertions, 12 deletions
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 Binary files differindex 1bc4421..6bb5f1e 100644 --- a/src/assets/image/background.jpg +++ b/src/assets/image/background.jpg diff --git a/src/assets/image/footer.png b/src/assets/image/footer.png Binary files differnew file mode 100644 index 0000000..98383d3 --- /dev/null +++ b/src/assets/image/footer.png 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 @@ <!DOCTYPE lang="en" html> <head> - <title>Infernal * Garden</title> + <title>Infernal ⁕ Garden</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style defer>@import url("/assets/css/main.css");</style> @@ -56,7 +56,7 @@ <div id="body-wrapper"> <div id="body"> <div id="content"> - dd + Lorem ipsum<br>yaddayaddayadda<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>dd </div> <nav id="mobile-nav"> <div class="mobile-nav-button"></div> @@ -68,6 +68,7 @@ <div class="mobile-nav-button"></div> </nav> </div> + <div class="body_decoration noaa"></div> <div id="space"></div> </div> <footer></footer> |
