diff options
Diffstat (limited to 'css/style.css')
-rw-r--r-- | css/style.css | 132 |
1 files changed, 102 insertions, 30 deletions
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; + } } |