diff --git a/static/hoa.css b/static/hoa.css index 2c9f68f0dacbade6f6f8fb264a92db500d6ec8e0..b30a9f3c9855034683c050df710880b0f9b908ee 100644 --- a/static/hoa.css +++ b/static/hoa.css @@ -22,15 +22,12 @@ body { } .headers { font-size: 200%; -} -.headers { - position: fixed; - top: 0px; border: 1px solid #999999; - border-top: none; background-color: #494949; + max-width: 100vw; width: 750px; - height: 99px; + height: 100px; + margin: -1px auto 0; } .headers h1, .headers h3 { margin-top: 10px; @@ -42,11 +39,13 @@ h2 { .nav { list-style: none; margin: 0; + white-space: nowrap; } .main { max-width: 750px; font-family: "Fira Sans"; font-size: 130%; + margin-top: -30px !important; } .main h4 { font-family: "Geo"; @@ -57,7 +56,7 @@ h2 { font-size: 180%; } .main h2 { - font-family: "Geo"; + font-family: "Geo" 0; font-size: 220%; } .main a:link, .main a:visited { @@ -87,22 +86,17 @@ iframe { @media (max-width: 969px) { .main { margin: 0 auto; - padding-top: 108px; - } - .headers { - left: 50%; - margin-left: -375px; } .nav-container { - position: fixed; - left: 50%; - margin-left: -375px; - max-width: 750px; + position: sticky; + max-width: 100vw; width: 750px; - top: 100px; + top: 0; height: 40px; border: 1px solid #999999; background-color: #494949; + margin: 0 auto; + z-index: 10; } .nav { margin: auto auto; @@ -130,25 +124,18 @@ iframe { height: 59px; } .nav-container { - top: 60px; font-size: smaller; height: 30px; padding-top: 3px; } - .main { - padding-top: 78px; - } .main > div > h2 { padding-top: 100px; } .nav li a img { height: 20px; } - ul { - padding-left: 17px !important; - } } -@media (max-width: 390px) { +@media (max-width: 420px) { .nav li { margin: 0 4px; } @@ -157,7 +144,6 @@ iframe { @media (min-width: 970px) { .main { margin: 0 0 0 210px; - padding-top: 70px; } .nav { position: fixed; @@ -191,8 +177,7 @@ iframe { left: calc(50% - 585px) } .headers { - left: 50%; - margin-left: -375px; + margin-left: auto; } } ul {