diff --git a/template/styles.css b/template/styles.css index 8e0105b..5136cbe 100644 --- a/template/styles.css +++ b/template/styles.css @@ -228,14 +228,20 @@ code.bcode_code {} * Header (Wensite Logo, Description) */ -a#site_link {} +a#site_link { + display: flex; +} header#header { background-attachment: fixed; background-image: url(../template/electronic.jpg); background-position: 0 0; - display: flex; + display: flex; + flex-direction: row; +} + +div#header_logo { + display: flex; } -div#header_logo {} img#header_logo_image { align-items: start; width: 160px; @@ -243,14 +249,13 @@ img#header_logo_image { color: #FFF; font-weight: bold; font-size: 300%; - margin: 20px; + margin: 20px; } -div#header_abouts {} -p#header_title { +div#header_abouts { display: flex; flex-direction: column; - align-items: center; - +} +p#header_title { padding-left: 50px; color: #FFF; font-weight: bold; @@ -260,7 +265,7 @@ p#header_about { font-weight: normal; color: #FFF; font-size: 130%; - margin-top: 15px; + margin: 50px; } @@ -288,7 +293,7 @@ div.sidebar_post_about {} p.sidebar_post_about_p {} -/* ============================================================================ +/* ---------------------------------------------------------------------------- * Footer (Website) */ footer#footer { @@ -332,3 +337,36 @@ div#footer_credit {} p#footer_copyright {} p#footer_tyto {} a.footer_cr_link {} + +/* ---------------------------------------------------------------------------- + * Small screens +*/ +@media screen and (max-width: 700px) { + header#header { + flex-direction: column; + } + + img#header_logo_image { + all: unset; + display: inline-block; + width: 100%; + margin-top: 20px; + height: min(20vw,20vh); + } + + p#header_title { + padding-left: 0px; + color: #FFF; + font-weight: bold; + font-size: 180%; + text-align: center; + } + + p#header_about { + padding-left: 0px; + margin-top: 0px; + color: #FFF; + font-size: 100%; + text-align: center; + } +}