From f2dd3987a4ced1c6a1a5f8800b1323a9dd35c09e Mon Sep 17 00:00:00 2001 From: santisoler Date: Wed, 24 Mar 2021 19:51:30 +0000 Subject: Improve responsiveness and some CSS style Add scroll bars on pre tags. Use flexbox on header. Add media queries for reducing font sizes on small screens. Add viewport option to base HTML layout. Change management of font sizes to em units. --- _layouts/base.html | 12 +++-- css/style.css | 132 +++++++++++++++++++++++++++++++++++++++++------------ 2 files changed, 111 insertions(+), 33 deletions(-) diff --git a/_layouts/base.html b/_layouts/base.html index dec11b7..838ed37 100644 --- a/_layouts/base.html +++ b/_layouts/base.html @@ -4,9 +4,15 @@ {{ site.title }} - + + + diff --git a/css/style.css b/css/style.css index 87e8635..1498a9c 100644 --- a/css/style.css +++ b/css/style.css @@ -1,49 +1,61 @@ /* ---------------------- */ /* General configurations */ /* ---------------------- */ +html { + min-height: 100%; + font-size: 62.5%; +} + body { font-family: "Fira Code", monospace; background-color: #282c34; color: #f3f3f3; + font-size: 1.7em; + line-height: 1.7em; } nav, header, main, footer { + margin: 0 auto; max-width: 900px; - margin: auto; } h1, h2, h3, h4 { - margin-top: 1.6em; - margin-bottom: 1em; + font-weight: bold; } h1 { - font-size: 30pt; + font-size: 2.5em; + line-height: 1.4em; text-align: center; + margin-top: 60px; + margin-bottom: 30px; } h2 { - font-size: 18pt; + font-size: 1.8em; + line-height: 1.2em; + margin-top: 40px; + margin-bottom: 20px; } h3 { - font-size: 16pt; -} - -h4 { - font-size: 14pt; - font-weight: 400; + font-size: 1.3em; + line-height: 1.5em; + margin-top: 40px; + margin-bottom: 20px; } p { - font-size: 12pt; + font-size: 0.95em; line-height: 1.5em; + margin-top: 12px; + margin-bottom: 12px; } a { @@ -62,19 +74,19 @@ li { pre { padding-left: 20px; - margin-top: 2em; - margin-bottom: 2em; + padding-bottom: 5px; + margin-top: 0px; + margin-bottom: 5px; + overflow: auto; + line-height: 1.5em; } code { + font-family: "Fira Code", monospace; + font-size: 0.95em; color: #98c379; } -pre code { - font-size: 12pt; - font-weight: 500; -} - dd { display: normal; } @@ -105,7 +117,7 @@ nav ul { width: 3em; height: 1.5em; padding: 5%; - font-size: 14pt; + font-size: 1.5em; font-weight: 500; } @@ -122,8 +134,12 @@ nav ul { /* ---------------- */ header { - margin-top: 80px; - margin-bottom: 110px; + height: 40vh; + min-height: 200px; + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; } header h1, @@ -132,13 +148,14 @@ header h2 { } header h1 { - font-size: 54pt; - margin-top: 1em; - margin-bottom: 0.6em; + font-size: 5em; + line-height: 1.6em; + margin-top: 16px; + margin-bottom: 10px; } header h2 { - font-size: 20pt; + font-size: 1.8em; font-weight: 400; margin-top: 0px; margin-bottom: 0px; @@ -150,11 +167,22 @@ header h2 { ul.posts-list { list-style: none; + padding-left: 0px; } ul.posts-list h2 { - margin-top: 1.6em; - margin-bottom: 0.7em; + margin-top: 10px; + margin-bottom: 10px; +} + +ul.posts-list li { + margin-top: 40px; + margin-bottom: 40px; +} + +ul.posts-list p { + margin-top: 10px; + margin-bottom: 10px; } .date { @@ -174,7 +202,51 @@ footer { } footer p { - font-size: 10pt; + font-size: 0.8em; + line-height: 1.2em; margin-top: 0px; - margin-bottom: 0px; + margin-bottom: 5px; +} + +/* ------------- */ +/* Media queries */ +/* ------------- */ + +@media (max-width: 768px) { + header { + height: 30vh; + } + + header h1 { + font-size: 3em; + } + + header h2 { + font-size: 1.3em; + } + + .nav-item { + font-size: 1.3em; + } +} + +@media (max-width: 576px) { + header h1 { + font-size: 2em; + } + + header h2 { + font-size: 1em; + } + + h1 { + font-size: 1.8em; + } + + h2 { + font-size: 1.2em; + } + h3 { + font-size: 1em; + } } -- cgit v1.2.3