diff --git a/styles.css b/styles.css index ce2e00b..2509f25 100644 --- a/styles.css +++ b/styles.css @@ -231,54 +231,6 @@ div#a-lec_infos { font-weight: normal; } -/* On screens that are less than 700px wide, make the sidebar into a topbar */ -@media screen and (max-width: 700px) { - - section#a-lec_page-wrapper { - display: block; - margin: 0 25px; - } - - aside#a-lec_sidebar { - background: none; - } - - .a-lec_latest-posts { - margin-left: -35px; - } - - #a-lec_footer { - display: block; - padding: 5px; - } - - #a-lec_footer .a-lec_paragraph{ - margin-bottom: 30px; - font-size: 80%; - border: 2px solid var(--a-lec_blue); - border-top : unset; - border-left: unset; - border-right: unset; - padding: 15px; - } - - #a-lec_footer h1 { - margin-top: 10px; - font-size: 115%; - padding: 15px; - margin-bottom: -20px; - } - - #a-lec_footer li { - text-align: center; - } -} -/* On screens that are less than 400px, display the bar vertically, instead of horizontally */ -@media screen and (max-width: 400px) { - -} - - /* ======================================================================== ARTICLE @@ -571,3 +523,102 @@ h1,h2,h3,h4,h5,h6 { margin-left: 75px; } +/* +======================================================================== + LITTLE SCREENS +======================================================================== +*/ +@media screen and (max-width: 700px) { + + section#a-lec_page-wrapper { + display: block; + margin: 0 25px; + } + + aside#a-lec_sidebar { + background: none; + } + + .a-lec_latest-posts { + margin-left: -35px; + } + + div#a-lec_metas { + margin: 10px -10px 0px 0px; + } + + article#a-lec_index { + margin-left: -10px; + } + + #a-lec_footer { + display: block; + padding: 5px; + } + + #a-lec_footer .a-lec_paragraph{ + margin-bottom: 30px; + font-size: 80%; + border: 2px solid var(--a-lec_blue); + border-top : unset; + border-left: unset; + border-right: unset; + padding: 15px; + } + + #a-lec_footer h1 { + margin-top: 10px; + font-size: 115%; + padding: 15px; + margin-bottom: -20px; + } + + #a-lec_footer li { + text-align: center; + } + + #a-lec_banner, + #a-lec_footer { + display: block; + } + + #a-lec_site-logo img { + all: unset; + display: inline-block; + float: left; + position: relative; + width: 100%; + height: 35%; + } + + #a-lec_site-titles { + all: unset; + } + + + #a-lec_site-name a { + margin-top: -30px; + margin-bottom: -20px; + position: relative; + float: left; + } + + + #a-lec_site-name a:hover { + margin-top: -30px; + margin-bottom: -20px; + position: relative; + float: left; + font-size: 3rem; + } + + #a-lec_site-description { + all: unset; + margin-top: 15px; + position: relative; + float: left; + font-size: 1rem; + text-align: center; + } + +}