diff options
| author | Santiago Soler <santiago.r.soler@gmail.com> | 2021-03-24 16:46:13 -0300 |
|---|---|---|
| committer | Santiago Soler <santiago.r.soler@gmail.com> | 2021-03-24 16:46:13 -0300 |
| commit | 3a38020e308ed85a6cccd32a8c5a008ff67d576d (patch) | |
| tree | bd0520267597563d4fc56ecd1b070fcb66173a4d | |
| parent | f944b792b47cae7f20ce9a7738db7a3c2e055ea1 (diff) | |
| download | website-3a38020e308ed85a6cccd32a8c5a008ff67d576d.tar.gz | |
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.
| -rw-r--r-- | _layouts/base.html | 12 | ||||
| -rw-r--r-- | 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 @@ <meta charset="UTF-8" /> <title>{{ site.title }}</title> <link rel="shortcut icon" href={{ "/images/favicon.png" | absolute_url }} /> - <link rel="stylesheet" href={{ "/assets/fira_code_v5.2/fira_code.css" | - absolute_url }} /> <link rel="stylesheet" href={{ "/css/style.css" | - absolute_url }} /> + <meta + name="viewport" + content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" + > + <link + rel="stylesheet" + href={{ "/assets/fira_code_v5.2/fira_code.css" | absolute_url }} + /> + <link rel="stylesheet" href={{ "/css/style.css" | absolute_url }} /> </head> <body> 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; + } } |