summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorKylie McClain <kylie@somas.is>2020-07-10 01:01:38 -0400
committerKylie McClain <kylie@somas.is>2020-07-10 01:01:38 -0400
commit92b9a5dcd79a37d170207506982bbe34a642940d (patch)
treeabfee659b13398cbebd148c3c2114d4d7452bb59
parent74aaa49bbaebaeae6f60fa950b4ce81e199a10ed (diff)
downloadmeta-92b9a5dcd79a37d170207506982bbe34a642940d.tar.gz
meta-92b9a5dcd79a37d170207506982bbe34a642940d.tar.xz
meta-92b9a5dcd79a37d170207506982bbe34a642940d.zip
style: convert from using px to rem units
-rw-r--r--style.css53
1 files changed, 35 insertions, 18 deletions
diff --git a/style.css b/style.css
index 015538a..03b8082 100644
--- a/style.css
+++ b/style.css
@@ -1,11 +1,22 @@
+/* NOTE: Calculating rem units:
+
+ 1rem = Root element's font size
+
+ Let 16px be the browser's default font size.
+
+ 16px/1rem = .0625
+ <px>*.0625 to get rem count
+ <rem>/.0625 to get px count
+*/
+
html {
margin: 0 auto;
- max-width: 960px;
+ max-width: 60rem;
}
body {
- padding: 16px;
- font-size: 18px;
+ margin: 0px;
+ padding: 1rem;
font-family: serif;
background: #eee;
color: #000;
@@ -13,14 +24,14 @@ body {
}
div#footer {
- margin-top: 16px;
- font-size: 16px;
+ margin-top: 1rem;
+ font-size: 1rem;
font-weight: 300;
- border-top: 2px solid rgba(0, 0, 0, .25);
+ border-top: .1250rem solid rgba(0, 0, 0, .25);
}
div#header > h1 {
- border-bottom: 4px dashed #b3b3b3;
+ border-bottom: .25rem dashed #b3b3b3;
color: #ff336d;
font-family: monospace;
margin-top: 0px;
@@ -34,10 +45,11 @@ a:link {
a:hover, a:focus {
text-decoration: underline;
- text-decoration-thickness: 2px;
+ text-decoration-thickness: .1250rem;
}
-a:active, a:visited:active {
+a:active,
+a:visited:active {
color: #01a022;
}
@@ -52,16 +64,15 @@ div#content img {
div#content pre {
background: #2f343f;
color: #fff;
- border: 4px solid #ff336d;
- padding: 16px;
+ border: .25rem solid #ff336d;
+ padding: 1rem;
border-left: 0px;
border-right: 0px;
- font-size: 14px;
}
div#toc > div#toctitle {
font-weight: bold;
- font-size: 27px;
+ font-size: 1.6875rem; /* 27px */
}
/* i'm evil */
@@ -78,14 +89,20 @@ dd > p {
div.ulist > div.title,
div.olist > div.title,
div.dlist > div.title {
- border-bottom: 2px dashed #b3b3b3;
+ border-bottom: .1250rem dashed #b3b3b3;
font-weight: bold;
font-style: italic;
- font-size: 16px;
+ font-size: 1rem;
}
blockquote {
- border-left: 2px solid #b3b3b3;
- margin: 16px 32px;
- padding-left: 16px;
+ border-left: .1250rem solid #b3b3b3;
+ margin: 1rem 2rem;
+ padding-left: 1rem;
+}
+
+@media screen and (max-width: 37.5rem) {
+ body {
+ padding: .5em;
+ }
}