summaryrefslogtreecommitdiffstats
path: root/templates
diff options
context:
space:
mode:
authorJohannes Löthberg <johannes@kyriasis.com>2016-11-16 14:42:22 +0100
committerJohannes Löthberg <johannes@kyriasis.com>2016-11-16 14:42:22 +0100
commit1aa2f35f53bd4b75f6be9dfe38c4fca92ac6376a (patch)
tree89d8c5ef019be3a792bf2700fc6ab6bb100e2d31 /templates
parent69edb9c845c263db156989b9135a90e330b7cb7c (diff)
downloadkyblo-1aa2f35f53bd4b75f6be9dfe38c4fca92ac6376a.tar.xz
Use 62.5% base font size and proper rem everywhere
https://snook.ca/archives/html_and_css/font-size-with-rem Signed-off-by: Johannes Löthberg <johannes@kyriasis.com>
Diffstat (limited to 'templates')
-rw-r--r--templates/layout.html33
1 files changed, 24 insertions, 9 deletions
diff --git a/templates/layout.html b/templates/layout.html
index 3dfa031..562764f 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -4,8 +4,11 @@
<meta charset="UTF-8">
{% block head %}{% endblock %}
<style>
+html {
+ font-size:62.5%;
+}
body {
- max-width: 42rem;
+ max-width: 75rem;
}
a, a:visited {
text-decoration: none;
@@ -20,7 +23,7 @@ header nav ul {
}
header nav ul li {
display: inline;
- margin-right: 0.25rem;
+ margin-right: 0.5rem;
}
header nav a, header nav a:visited {
color: #444;
@@ -29,8 +32,17 @@ header nav a:hover {
color: #111;
}
.padded-box {
- padding-left: 0.5rem;
- padding-right: 0.5rem;
+ font-size: 1.6rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+hr {
+ margin-top: 2rem;
+ margin-bottom: 2rem;
+}
+article header h1 {
+ margin-top: 2rem;
+ margin-bottom: 0.5rem;
}
article p {
white-space: pre-wrap;
@@ -39,7 +51,7 @@ article p {
padding-bottom: 0.25rem;
}
#post-nav {
- padding-bottom: 0.25rem;
+ padding-bottom: 0rem;
}
ul#archive-list {
list-style-type: none;
@@ -49,19 +61,22 @@ ul#tag-list {
list-style-type: circle;
padding-left: 2rem;
}
-footer p#copy {
+footer#bottom div {
+ margin-bottom: 0.25rem;
+}
+footer#bottom p#copy {
margin: 0rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
-footer ul#contact-info {
+footer#bottom ul#contact-info {
margin: 0;
padding: 0rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
list-style-type: none;
}
-footer ul#contact-info li {
+footer#bottom ul#contact-info li {
display: inline;
margin-right: 0.25rem;
}
@@ -84,7 +99,7 @@ footer ul#contact-info li {
{% block content %}{% endblock %}
</div>
<hr />
- <footer class="padded-box">
+ <footer id="bottom" class="padded-box">
<div>
<p id="copy">© 2016 Johannes Löthberg</p>
</div>