diff options
| author | Curly Bryce <curlybryce@protonmail.com> | 2022-11-10 17:46:49 -0700 |
|---|---|---|
| committer | Curly Bryce <curlybryce@protonmail.com> | 2022-11-10 17:46:49 -0700 |
| commit | 35223a1e4fe71f6fc8ca344b5d10592e64ec79fb (patch) | |
| tree | 391228239bbf3abcb56a63a9149a645d76f62b4e /src | |
| download | infernal.garden-35223a1e4fe71f6fc8ca344b5d10592e64ec79fb.tar.gz infernal.garden-35223a1e4fe71f6fc8ca344b5d10592e64ec79fb.tar.bz2 infernal.garden-35223a1e4fe71f6fc8ca344b5d10592e64ec79fb.zip | |
initial commit
Diffstat (limited to 'src')
| -rw-r--r-- | src/assets/css/main.css | 109 | ||||
| -rw-r--r-- | src/assets/image/background.jpg | bin | 0 -> 79090 bytes | |||
| -rw-r--r-- | src/assets/image/header.png | bin | 0 -> 1102 bytes | |||
| -rw-r--r-- | src/assets/image/icon.png | bin | 0 -> 539 bytes | |||
| -rw-r--r-- | src/index.html | 40 |
5 files changed, 149 insertions, 0 deletions
diff --git a/src/assets/css/main.css b/src/assets/css/main.css new file mode 100644 index 0000000..b6bd538 --- /dev/null +++ b/src/assets/css/main.css @@ -0,0 +1,109 @@ +html, body { + margin: 0; + border: 0; + padding: 0; + background-color: black; +} + + + +@media screen and (max-width: 500px) { + #nav, #space { + display: none; + } + #mobile-nav { + display: grid; + height: 70px; + grid-template-columns: 20% 20% 20% 20% 20%; + } +} +@media screen and (min-width: 501px) and (max-width: 1099px) { + .floatwrapper > center > :nth-child(1) { + display: none; + } + .floatwrapper > center > :nth-child(2) { + display: unset; + } + #nav { + display: grid; + width: 50px; + } + #space { + display: none; + } + #mobile-nav { + display: none; + } +} +@media screen and (min-width: 1100px) { + .floatwrapper > center > :nth-child(1) { + display: unset; + } + .floatwrapper > center > :nth-child(2) { + display: none; + } + #nav { + display: grid; + } + #space { + display: unset; + } + #mobile-nav { + display: none; + } +} + + + +body { + display: flex; + flex-flow: row nowrap; + max-width: 100vw; + width: 100vw; + min-height: 100vh; + background-image: url("/assets/image/background.jpg"); + background-size: cover; +} + +/* TESTING */ +#nav { + background-color: #fffa; +} +#content { + background-color: #ddda; +} +#mobile-nav { + background-color: #fffa; +} +/* END TESTING */ + + +#nav { + align-content: space-between; +} +#body { + display: flex; + flex-flow: column nowrap; + flex-grow: 7; +} +#space { + flex-grow: 2; +} + +#content { + flex-grow: 1; +} + +.noaa { + image-rendering: -moz-crisp-edges; + image-rendering: -o-crisp-edges; + image-rendering: pixelated; +} +.floatwrapper { + position: sticky +} + +.mobile-nav-button { + display: block; + margin: auto; +}
\ No newline at end of file diff --git a/src/assets/image/background.jpg b/src/assets/image/background.jpg Binary files differnew file mode 100644 index 0000000..1bc4421 --- /dev/null +++ b/src/assets/image/background.jpg diff --git a/src/assets/image/header.png b/src/assets/image/header.png Binary files differnew file mode 100644 index 0000000..85c482d --- /dev/null +++ b/src/assets/image/header.png diff --git a/src/assets/image/icon.png b/src/assets/image/icon.png Binary files differnew file mode 100644 index 0000000..4379547 --- /dev/null +++ b/src/assets/image/icon.png diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..c291abd --- /dev/null +++ b/src/index.html @@ -0,0 +1,40 @@ +<!DOCTYPE lang="en" html> +<head> + <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> + <link rel="icon" type="image/png" href="/assets/image/icon.png"> +</head> +<body> + <div id="nav"> + <div class="floatwrapper"> + <center> + <div> + <img class="noaa" src="/assets/image/header.png"> + </div> + <div> + <img class="noaa" src="/assets/image/icon.png"> + </div> + </center> + <div id="nav-pin">pin</div> + </div> + </div> + <div id="body"> + <div id="content"> + dd + </div> + <div id="mobile-nav"> + <div class="mobile-nav-button"></div> + <div class="mobile-nav-button"></div> + <div class="mobile-nav-button"> + <img class="noaa" src="/assets/image/icon.png"> + </div> + <div class="mobile-nav-button"></div> + <div class="mobile-nav-button"></div> + </div> + </div> + <div id="space"></div> + <footer></footer> +</body> +</html>
\ No newline at end of file |
