diff options
| -rw-r--r-- | src/assets/css/main.css | 82 | ||||
| -rw-r--r-- | src/index.html | 77 |
2 files changed, 123 insertions, 36 deletions
diff --git a/src/assets/css/main.css b/src/assets/css/main.css index b6bd538..d77bf82 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -18,14 +18,18 @@ html, body { } } @media screen and (min-width: 501px) and (max-width: 1099px) { - .floatwrapper > center > :nth-child(1) { + .header-image > :nth-child(1) { display: none; } - .floatwrapper > center > :nth-child(2) { - display: unset; + .header-image > :nth-child(2) { + display: flex; + } + .nav-button > :nth-child(2) { + display: none; } #nav { - display: grid; + display: flex; + flex-flow: column nowrap; width: 50px; } #space { @@ -34,16 +38,23 @@ html, body { #mobile-nav { display: none; } + #nav-pin { + display: none; + } } @media screen and (min-width: 1100px) { - .floatwrapper > center > :nth-child(1) { - display: unset; + .header-image > :nth-child(1) { + display: flex; } - .floatwrapper > center > :nth-child(2) { + .header-image > :nth-child(2) { display: none; } + .nav-button > :nth-child(2) { + display: flex; + } #nav { - display: grid; + display: flex; + flex-flow: column nowrap; } #space { display: unset; @@ -51,6 +62,9 @@ html, body { #mobile-nav { display: none; } + #nav-pin { + display: block; + } } @@ -61,26 +75,30 @@ body { max-width: 100vw; width: 100vw; min-height: 100vh; - background-image: url("/assets/image/background.jpg"); - background-size: cover; } /* TESTING */ #nav { - background-color: #fffa; + background-color: #fff; } #content { background-color: #ddda; } #mobile-nav { - background-color: #fffa; + background-color: #fff; } /* END TESTING */ -#nav { - align-content: space-between; +#body-wrapper { + display: flex; + flex-flow: row nowrap; + flex-grow: 1; + background-image: url("/assets/image/background.jpg"); + background-size: cover; } + + #body { display: flex; flex-flow: column nowrap; @@ -92,6 +110,7 @@ body { #content { flex-grow: 1; + padding: 5px; } .noaa { @@ -100,10 +119,43 @@ body { image-rendering: pixelated; } .floatwrapper { - position: sticky + position: sticky; + align-content: space-between; + padding: 5px 0px 5px 0px; + display: grid; + height: 100%; + flex-grow: 1; +} +.floatwrapper > div > div { + padding: 0px 5px 0px 5px; +} + +.header-image { + display: flex; + justify-content: center; } .mobile-nav-button { display: block; margin: auto; +} + +.nav-button { + display: block; + height: 35px; +} +.nav-button > a { + display: flex; + height: inherit; + flex-flow: column nowrap; + justify-content: center; + padding-left: 5px; +} +.nav-button:hover, .header-image:hover { + cursor: pointer; + background-color: grey; +} +.nav-button > a:link, .nav-button > a:visited .nav-button > a { + color: black; + text-decoration: none; }
\ No newline at end of file diff --git a/src/index.html b/src/index.html index c291abd..1d7cda4 100644 --- a/src/index.html +++ b/src/index.html @@ -7,34 +7,69 @@ <link rel="icon" type="image/png" href="/assets/image/icon.png"> </head> <body> - <div id="nav"> + <nav id="nav"> <div class="floatwrapper"> - <center> - <div> + <div> + <div class="header-image"> <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 class="nav-button"> + <img> + <a href="/pages/about.html"> + <span>About</span> + </a> + </div> + <div class="nav-button"> + <img> + <a href="/pages/projects.html"> + <span>Projects</span> + </a> </div> - <div class="mobile-nav-button"></div> - <div class="mobile-nav-button"></div> + <div class="nav-button"> + <img> + <a href="/pages/services.html"> + <span>Services</span> + </a> + </div> + <div class="nav-button"> + <img> + <a href="/pages/people.html"> + <span>People</span> + </a> + </div> + </div> + <div> + <div class="nav-button"> + <img> + <a href="/pages/contact.html"> + <span>Contact</span> + </a> + </div> + <div id="nav-pin" class="nav-button"> + <img> + <a><span>Pin</span></a> + </div> + </div> + </div> + </nav> + <div id="body-wrapper"> + <div id="body"> + <div id="content"> + 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> </div> + <div id="space"></div> </div> - <div id="space"></div> <footer></footer> </body> </html>
\ No newline at end of file |