diff --git a/new_index.html b/new_index.html index 86389b9..ae8af14 100644 --- a/new_index.html +++ b/new_index.html @@ -54,7 +54,6 @@
-

Sorry

This website cannot correctly render on a screen this narrow, Please resize your window or visit on a larger device. diff --git a/style/new_style.css b/style/new_style.css index de009c6..0e11923 100644 --- a/style/new_style.css +++ b/style/new_style.css @@ -1,3 +1,10 @@ +/* COLOR VARS */ +:root { + --main-bg-color: lightslategrey; + --accent-color: darkslategrey; + --overlay-color: #2f4f4f8f; + --main-text-color: azure; +} /* FONTS */ @font-face { font-family: 'indie-flower'; @@ -12,7 +19,7 @@ html {height: 100%;} body { width: 100%; margin: auto; - background-color: lightslategrey; + background-color: var(--main-bg-color); } /* PAGE HEADER */ .header_image { @@ -27,28 +34,35 @@ body { position: sticky; top: -145px; } -#header_index{background-color: #a04911} /* Try using image-set() here to offer different formats, also try moving to HTML picture element */ -@media(min-width: 50px){#header_index{background-image: url("/images/headers/index/300.webp")}} -@media(min-width: 301px){#header_index{background-image: url("/images/headers/index/500.webp")}} -@media(min-width: 501px){#header_index{background-image: url("/images/headers/index/800.webp")}} +#header_index{background-color: #a04911} /* Try using image-set() here to offer different formats */ +@media(min-width: 50px){#header_index{background-image:url("/images/headers/index/300.webp")}} +@media(min-width: 301px){#header_index{background-image:url("/images/headers/index/500.webp")}} +@media(min-width: 501px){#header_index{background-image:url("/images/headers/index/800.webp")}} @media(min-width: 801px){#header_index{background-image:url("/images/headers/index/1024.webp")}} @media(min-width:1025px){#header_index{background-image:url("/images/headers/index/1920.webp")}} @media(min-width:1921px){#header_index{background-image:url("/images/headers/index/2800.webp")}} @media(min-width:2801px){#header_index{background-image:url("/images/headers/index/4096.webp")}} -#header_face{ +#header_face { display: flex; position: absolute; - top: -140px; + top: -184px; width: 100%; + height: 185px; text-align: center; } -#header_face img{ +#header_face img { margin: auto; border-radius: 40px; - height: 100px; + border-style: solid; + border-color: var(--accent-color); + border-width: 3px; + max-height: 150px; + height: 30vw; } +@media(min-width:400px){#header_face img{border-radius:50px;}} +@media(min-width:540px){#header_face img{border-radius:55px;}} #page_title { /* This may be best floating above content div rather than inside header div */ - background-color: #2f4f4f8f; + background-color: var(--overlay-color); font-family: indie-flower, cursive; font-size: large; width: 100%; @@ -56,11 +70,11 @@ body { text-align: center; position: absolute; bottom: 0; - color: azure; + color: var(--main-text-color); } #menubar { - background-color: darkslategrey; - color: azure; + background-color: var(--accent-color); + color: var(--main-text-color); position: fixed; top: 0; left: 0; @@ -79,7 +93,7 @@ body { } .sidebar_control { background-color: transparent; - color: azure; + color: var(--main-text-color); border: none; font-family: sans-serif; font-size: larger; @@ -98,7 +112,7 @@ body { display: block; max-width: 250px; width: 0; - background-color: rgba(29,49,49,0.9); + background-color: var(--overlay-color); transition: 0.7s; } #sidebar a { @@ -136,33 +150,40 @@ body { margin: auto; margin-top: 20px; margin-bottom: 40px; - color: azure; + color: var(--main-text-color); } /* FOOTER */ +/* FOOTER */ footer { position: relative; width: 100%; - background-color: darkslategrey; + background-color: var(--accent-color); height: 30px; bottom: 0; } footer p { padding: 0; + padding-top: 5px; + margin: auto; margin-top: 9px; text-align: center; - color: azure; - font-family: monospace + color: var(--main-text-color); + font-family: monospace; } @media screen and (min-height: 600px) { footer { position: fixed; bottom: 0; } + footer p { + padding-top: 0px; + margin-top: 6px; + } } /* Hide .hide_micro on screens smaller than 250px and show .show_micro while not showing it on full screens */ .show_micro {display:none} -@media only screen and (max-width: 250px) { +@media only screen and (max-width: 249px) { .hide_micro {display: none} .show_micro {display: block} } \ No newline at end of file