diff --git a/src/_footer.html b/src/_footer.html
index 05d9665..1f4cfa8 100644
--- a/src/_footer.html
+++ b/src/_footer.html
@@ -1,13 +1,11 @@
Author: Alessandro Mauri
alemauri001@gmail.com
-
-
+
The content of this site is licensed under the
Creative Commons CC0 Public Domain Dedication
-
-
+
Special thanks to Pavel Pertsev
for creating Gruvbox
diff --git a/src/styles.css b/src/styles.css
index 7e5fc31..a55d7ea 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,9 +1,4 @@
/* GLOBAL */
-* {
- text-align: left;
- font-family: sans-serif;
-}
-
:root {
--bg: #282828;
--bg-code: #1d2021;
@@ -11,16 +6,20 @@
--fg: #ebdbb2;
--fg-code: #fbf1c7;
--fg-alt: #d5c4a1;
-
--fg-link: #d79921;
}
body {
- width: 50%;
- margin: 0 auto;
background-color: var(--bg);
color: var(--fg);
- padding: 10px;
+ margin: 0 auto;
+ width: 50%;
+}
+@media (max-width: 980px) {
+ body {
+ margin: 0 auto;
+ width: 100%;
+ }
}
html {
@@ -30,10 +29,10 @@ html {
/* TABLES */
table, th, td {
+ border-collapse: collapse;
margin-left: auto;
margin-right: auto;
text-align: left;
- border-collapse: collapse;
width: 70%;
}
@@ -56,10 +55,10 @@ tr:nth-child(odd) {
pre {
background-color: var(--bg-code);
color: var(--fg-code);
- padding: 4px;
- font-size: 15;
+ font-size: medium;
font-family: monospace;
tab-size: 8;
+ padding: 4px;
}
/*
:not(pre) > code {
@@ -70,12 +69,12 @@ pre {
/* LISTS */
li {
- font-size: 14;
+ font-size: medium;
}
/* PARAGRAPHS */
p {
- font-size: 17;
+ font-size: medium;
padding-left: 20px;
padding-right: 20px;
}
@@ -89,10 +88,13 @@ h2, h4, h6 {
background-color: var(--bg-alt);
}
-h1 { font-size: 35; }
-h2 { font-size: 30; }
-h3 { font-size: 25; }
-h4, h5, h6 { font-size: 20; }
+h1 { font-size: xx-large; }
+h2 { font-size: x-large; }
+h3 { font-size: large; }
+h4, h5, h6 {
+ font-size: medium;
+ font-weight: bold;
+}
/* LINKS */
a {
@@ -105,50 +107,50 @@ footer {
}
footer p {
+ font-size: x-small;
+ margin: 0;
padding: 10px;
- margin: 0px;
- font-size: 12;
}
/* HEADER */
#thumb {
- position: absolute;
border-radius: 50%;
- max-height: 80%;
- max-width: 80%;
- width: auto;
- height: auto;
- top: 0;
bottom: 0;
+ height: auto;
left: 0;
- right: 0;
margin: auto;
+ max-width: 80%;
+ max-height: 80%;
+ right: 0;
+ top: 0;
+ position: absolute;
+ width: auto;
}
#thumb-container {
- position: relative;
- height: 80px;
- width: 80px;
float: left;
+ height: 80px;
padding-right: 40px;
+ position: relative;
+ width: 80px;
}
#links {
float: left;
- overflow: hidden;
+ overflow: auto;
}
#links a {
+ font-weight: bold;
letter-spacing: normal;
padding-right: 10px;
- font-weight: bold;
}
.header {
+ border: 1px solid var(--fg);
+ font-size: medium;
height: 80px;
- text-align: left;
line-height: 80px;
- font-size: 17;
- border: 1px solid var(--fg);
+ text-align: left;
overflow: hidden;
}