diff options
| -rw-r--r-- | src/assets/css/main.css | 44 | ||||
| -rw-r--r-- | src/assets/image/background.avif | bin | 0 -> 258370 bytes | |||
| -rw-r--r-- | src/assets/image/background.jpg | bin | 1419420 -> 0 bytes | |||
| -rw-r--r-- | src/assets/image/decoration.png | bin | 0 -> 287 bytes | |||
| -rw-r--r-- | src/assets/image/footer.png | bin | 4947 -> 0 bytes | |||
| -rw-r--r-- | src/assets/image/header.png | bin | 1102 -> 1076 bytes | |||
| -rw-r--r-- | src/index.html | 138 |
7 files changed, 98 insertions, 84 deletions
diff --git a/src/assets/css/main.css b/src/assets/css/main.css index fc1afd9..339ad3b 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -4,7 +4,6 @@ html, body { padding: 0; background-color: black; color: var(--text-primary); - font-size: 0; } @@ -24,10 +23,10 @@ html, body { } @media screen and (max-width: 500px) { - #nav, #space { + .nav, .space { display: none; } - #mobile-nav { + .mobile-nav { display: grid; height: 70px; grid-template-columns: 20% 20% 20% 20% 20%; @@ -49,15 +48,15 @@ html, body { .body_decoration { display: none; } - #nav { + .nav { display: flex; flex-flow: column nowrap; width: 50px; } - #space { + .space { display: none; } - #mobile-nav { + .mobile-nav { display: none; } #nav-pin { @@ -74,14 +73,14 @@ html, body { .nav-button > :nth-child(2) { display: flex; } - #nav { + .nav { display: flex; flex-flow: column nowrap; } - #space { + .space { display: unset; } - #mobile-nav { + .mobile-nav { display: none; } #nav-pin { @@ -96,52 +95,56 @@ body { display: flex; flex-flow: row nowrap; max-width: 100vw; - width: 100vw; min-height: 100vh; } /* TESTING */ #content { background-color: rgba(var(--primary), 0.7); - word-break: break-all; } -#mobile-nav { +.mobile-nav { background-color: rgb(var(--primary)); } /* END TESTING */ -#body-wrapper { +.body-wrapper { display: flex; flex-flow: row nowrap; flex-grow: 1; - background-image: url("/assets/image/background.jpg"); + background-image: url("/assets/image/background.avif"); background-size: cover; } -#body { +main { display: flex; flex-flow: column nowrap; flex-grow: 7; + flex-basis: min-content; + text-align: justify; + text-justify: inter-word; + word-spacing: 2px; + line-height: 22px; } .body_decoration { background-color: rgba(var(--primary), 0.7); - mask-image: url(/assets/image/footer.png); + mask-image: url(/assets/image/decoration.png); mask-size: 50px; mask-repeat: repeat-y; width: 50px; - -webkit-mask-image: url(/assets/image/footer.png); + -webkit-mask-image: url(/assets/image/decoration.png); -webkit-mask-size: 50px; -webkit-mask-repeat: repeat-y; } -#space { +.space { flex-grow: 2; } #content { flex-grow: 1; - padding: 5px; + padding-left: 10px; + padding-right: 10px; } .noaa { @@ -173,7 +176,7 @@ body { margin: auto; } -#mobile-nav { +.mobile-nav { position: sticky; bottom: 0; } @@ -184,7 +187,6 @@ body { .nav-button { display: block; height: 35px; - font-size: initial; } .nav-button > a { display: flex; diff --git a/src/assets/image/background.avif b/src/assets/image/background.avif Binary files differnew file mode 100644 index 0000000..6b8cdd8 --- /dev/null +++ b/src/assets/image/background.avif diff --git a/src/assets/image/background.jpg b/src/assets/image/background.jpg Binary files differdeleted file mode 100644 index 6bb5f1e..0000000 --- a/src/assets/image/background.jpg +++ /dev/null diff --git a/src/assets/image/decoration.png b/src/assets/image/decoration.png Binary files differnew file mode 100644 index 0000000..dfba703 --- /dev/null +++ b/src/assets/image/decoration.png diff --git a/src/assets/image/footer.png b/src/assets/image/footer.png Binary files differdeleted file mode 100644 index 98383d3..0000000 --- a/src/assets/image/footer.png +++ /dev/null diff --git a/src/assets/image/header.png b/src/assets/image/header.png Binary files differindex 85c482d..61e82b0 100644 --- a/src/assets/image/header.png +++ b/src/assets/image/header.png diff --git a/src/index.html b/src/index.html index 3ab499d..e24f065 100644 --- a/src/index.html +++ b/src/index.html @@ -1,70 +1,82 @@ <!DOCTYPE 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> - <nav id="nav"> - <div class="floatwrapper"> - <div> - <div class="header-image"> - <img class="noaa" src="/assets/image/header.png"> - <img class="noaa" src="/assets/image/icon.png"> - </div> - <div class="nav-button"> - <a href="/pages/about.html"> - <span>About</span> - </a> - </div> - <div class="nav-button"> - <a href="/pages/projects.html"> - <span>Projects</span> - </a> - </div> - <div class="nav-button"> - <a href="/pages/services.html"> - <span>Services</span> - </a> +<html lang="en"> + <head> + <title>Infernal ⁕ Garden</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style>@import url("/assets/css/main.css");</style> + <link defer rel="icon" type="image/png" href="/assets/image/icon.png"> + </head> + <body> + <nav class="nav"> + <div class="floatwrapper"> + <div> + <div class="header-image"> + <img loading="lazy" class="noaa" alt="A pixelated Lycoris Radiata between "infernal" and "garden"" src="/assets/image/header.png"> + <img loading="lazy" class="noaa" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png"> + </div> + <div class="nav-button"> + <a href="/pages/about.html"> + <span>About</span> + </a> + </div> + <div class="nav-button"> + <a href="/pages/projects.html"> + <span>Projects</span> + </a> + </div> + <div class="nav-button"> + <a href="/pages/services.html"> + <span>Services</span> + </a> + </div> + <div class="nav-button"> + <a href="/pages/people.html"> + <span>People</span> + </a> + </div> </div> - <div class="nav-button"> - <a href="/pages/people.html"> - <span>People</span> - </a> + <div> + <div class="nav-button"> + <a href="/pages/contact.html"> + <span>Contact</span> + </a> + </div> + <div id="nav-pin" class="nav-button"> + <a><span>Pin</span></a> + </div> </div> </div> - <div> - <div class="nav-button"> - <a href="/pages/contact.html"> - <span>Contact</span> - </a> + </nav> + <div class="body-wrapper"> + <main> + <div id="content"> + <section id="lorem"> + <h2>Lorem Ipsum!</h2> + <article> + <p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis vehicula tellus. Phasellus maximus sem arcu, sit amet auctor odio fermentum sit amet. Duis viverra, magna vitae vehicula euismod, mi augue ultricies magna, quis convallis est purus ac justo. Donec quis enim vel purus sodales scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin congue quam a metus finibus, quis consectetur nisi lacinia. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam facilisis, tellus sed aliquet congue, lacus ligula lobortis arcu, sit amet mattis purus justo a purus.<br><br> + Nam ut turpis eget tortor auctor ultrices in quis enim. Nulla luctus posuere tempus. Cras quis fringilla sapien. Quisque consequat justo augue, eget pulvinar massa bibendum eget. Nam aliquet tortor ipsum, ac hendrerit ex maximus sed. Donec eu ultrices orci, quis iaculis elit. Fusce eu euismod dolor, quis vulputate tortor. Suspendisse semper viverra lectus sit amet eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus.<br><br> + Nullam sed lectus ac ipsum viverra tincidunt sed ac turpis. Quisque aliquam mi velit, at auctor massa dictum non. Cras tempus in lacus euismod blandit. Integer porta nibh nec eros consequat, ac bibendum mi placerat. Etiam euismod pellentesque erat non eleifend. Fusce sit amet justo mattis, semper lorem vel, feugiat velit. Morbi sagittis varius ante ac suscipit.<br><br> + Quisque lobortis nisl sed fermentum dignissim. Integer sit amet erat nec nunc mollis sodales. Duis augue augue, scelerisque dignissim massa sit amet, ullamcorper aliquam nibh. Praesent volutpat purus a lorem elementum eleifend. In et neque augue. Quisque vel rutrum augue. Pellentesque in nisi tellus. Duis venenatis laoreet ex sit amet facilisis. Morbi iaculis vestibulum viverra. Vivamus sed risus vel nunc mattis elementum ac vitae leo. Nullam ultrices purus vel eros fringilla, non vestibulum arcu condimentum. Curabitur vitae luctus quam.<br><br> + Cras volutpat id augue eget pellentesque. Quisque euismod nisl eget nibh rhoncus, quis commodo nisl lobortis. Mauris vulputate et ipsum in semper. Duis a placerat nunc. Suspendisse ut sem eu mi dictum euismod. Fusce non felis et nibh elementum condimentum laoreet quis leo. Fusce nisi elit, placerat sit amet semper quis, imperdiet ut leo. Cras tincidunt metus a dolor fringilla, vel feugiat tortor lobortis. Nam pellentesque tortor nec erat congue, id rutrum lacus tempus.<br><br> + </p> + </article> + </section> </div> - <div id="nav-pin" class="nav-button"> - <a><span>Pin</span></a> - </div> - </div> - </div> - </nav> - <div id="body-wrapper"> - <div id="body"> - <div id="content"> - 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> - <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> - </nav> + <nav class="mobile-nav"> + <div class="mobile-nav-button"></div> + <div class="mobile-nav-button"></div> + <div class="mobile-nav-button"> + <img class="noaa" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png"> + </div> + <div class="mobile-nav-button"></div> + <div class="mobile-nav-button"></div> + </nav> + </main> + <div class="body_decoration noaa"></div> + <div class="space"></div> </div> - <div class="body_decoration noaa"></div> - <div id="space"></div> - </div> - <footer></footer> -</body> + <footer></footer> + </body> </html>
\ No newline at end of file |
