diff --git a/src/static/css/App.css b/src/static/css/App.css index 7e5a24a..36078fc 100644 --- a/src/static/css/App.css +++ b/src/static/css/App.css @@ -89,10 +89,14 @@ h2 { margin-bottom: 2rem; } -h3, h4 { +h3, h4, h5 { color: #a8a8a8; } +h5 { + margin: 0; +} + strong { color: #ecebeb; } @@ -107,6 +111,14 @@ a { text-decoration: none; } +.transparent { + opacity: 0 !important; +} + +.unsetPos { + position: unset !important; +} + .header h1 { display: inline-block; transition: .4s; @@ -268,12 +280,13 @@ a { text-align: center; } -#HomeContentContainer { +#HomeContent { display: inline-block; flex-grow: 1; + min-width: 65em; } -#HomeContent { +#nametag { padding: 3rem; display: inline-block; background-color: rgb(44, 44, 44, .75); @@ -281,14 +294,23 @@ a { border: solid black 4px; text-align: center; text-shadow: .15em .15em rgba(255, 255, 255, 0.2); + max-width: 30em; } -#HomeContent p { +#nametag p { text-shadow: none; color: #a8a8a8; margin: 0; } +#nametagContainer { + display: flex; + width: 100vw; + position: absolute; + left: 0; + justify-content: center; +} + .nomargin { margin: 0; } @@ -326,8 +348,7 @@ a { } .onRight>* { - margin-left: auto; - margin-right: 1em; + margin: auto; margin-bottom: 5px; } @@ -829,12 +850,22 @@ a { src: url('https://www.chess.com/bundles/web/fonts/chessglyph-new.0cc8115c.woff2'); } -@media screen and (max-width: 1200px) { +@media screen and (max-width: 600) { + #nametagContainer { + width: unset; + } +} + +@media screen and (max-width: 1400px) { #homepage { flex-direction: column; } + #HomeContent { + min-width: 0; + } + .mobileV { flex-direction: column; } @@ -893,7 +924,7 @@ a { margin-top: 3rem; } - .onRight > * { + .onRight>* { margin: auto; } diff --git a/src/static/js/responsive.js b/src/static/js/responsive.js index 9bc4eb5..c103364 100644 --- a/src/static/js/responsive.js +++ b/src/static/js/responsive.js @@ -9,7 +9,7 @@ function onLoaded() { resizer(); }; resizer(); - if (window.innerWidth < 1200) { + if (window.innerWidth < 1400) { const e = document.querySelector(".navControl"); e.style.maxHeight = "0px"; } @@ -17,7 +17,7 @@ function onLoaded() { function resizer() { const e = document.querySelector(".navControl"); - if (window.innerWidth > 1200) { + if (window.innerWidth > 1400) { // desktop view scrollFunction(); window.onscroll = function () { @@ -68,7 +68,7 @@ function scrollFunction() { } function toggleMenu() { - if (window.innerWidth < 1200) { + if (window.innerWidth < 1400) { const e = document.querySelector(".navControl"); const bar = document.querySelector(".header"); if (e.style.maxHeight === "0px") { diff --git a/src/templates/home.html b/src/templates/home.html index 5baa65d..d357bbd 100644 --- a/src/templates/home.html +++ b/src/templates/home.html @@ -3,50 +3,61 @@
-
-
+
+
+
+