Update main css. Add new CSS for resume

2 files changed, 144 insertions, 1 deletions

diff --git a/static/main.css b/static/main.css
index 08ca707..82a3645 100644
--- a/static/main.css
+++ b/static/main.css
@@ -94,9 +94,21 @@ iframe {
 }
 
 @media screen and (max-device-width: 480px) {
+    h1 {
+        font-size: 150%;
+    }
+    h2 {
+        font-size: 125%;
+    }
+    h3 {
+        font-size: 115%;
+    }
+    h4 {
+        font-size: 100%;
+    }
     body {
         max-width: 100%;
-        font-size: 90%;
+        font-size: 100%;
     }
     .license {
         font-size: 0;
@@ -108,4 +120,7 @@ iframe {
     code.longboi {
         font-size: 65%;
     }
+    .content {
+        text-align: left;
+    }
 }
diff --git a/static/resume.css b/static/resume.css
new file mode 100644
index 0000000..b1ff032
--- /dev/null
+++ b/static/resume.css
@@ -0,0 +1,128 @@
+h1 {
+    text-align: center;
+    margin: 1% auto;
+    white-space: normal;
+}
+h2,h3,h4 {
+    text-align: left;
+    margin: 1% auto;
+    white-space: normal;
+}
+h2.center {
+    text-align: center;
+}
+h3.center {
+    text-align: center;
+}
+h1 {
+    font-size: 150%;
+    color: #000000;
+}
+h2 {
+    font-size: 125%;
+    color: #202020;
+}
+h3 {
+    font-size: 100%;
+    color: #404040;
+}
+h4 {
+    font-size: 90%;
+    color: #808080;
+}
+body {
+    margin: 0 auto;
+    text-align: center;
+    font-family: Courier, Monospace;
+    word-wrap: normal;
+    white-space: normal;
+    font-size: 120%;
+}
+p {
+    margin-top: 1.5%;
+    margin-bottom: 1.5%;
+}
+small {
+    font-size: 75%;
+}
+code {
+    display: inline-block;
+    font-size: 125%;
+    background-color: #d8d8d8;
+    white-space: pre-wrap;
+    word-wrap: break-all;
+}
+th {
+    text-align: center;
+    padding: 1%;
+    background-color: #cccccc;
+}
+td {
+    text-align: center;
+    padding: 1%;
+}
+img {
+    max-width: 100%;
+    height: auto;
+    width: auto;
+}
+img.icon {
+    filter: invert(50%);
+}
+iframe {
+    border: 0;
+}
+
+.navbar {
+    text-align: center;
+    max-width: 95%;
+    display: block;
+}
+.content {
+    text-align: justify;
+    max-width: 90%;
+    display: inline-block;
+}
+.license {
+    font-size: 50%;
+    text-align: center;
+    max-width: 35%;
+    display: block;
+}
+.longboi {
+    word-wrap: break-word;
+}
+
+@media screen and (max-device-width: 480px) {
+    h1 {
+        font-size: 150%;
+    }
+    h2 {
+        font-size: 125%;
+        text-align: center;
+    }
+    h3 {
+        font-size: 100%;
+        text-align: center;
+    }
+    h4 {
+        font-size: 70%;
+    }
+    body {
+        max-width: 100%;
+        font-size: 100%;
+    }
+    .license {
+        font-size: 0;
+    }
+    p {
+        margin-top: 5%;
+        margin-bottom: 5%;
+    }
+    code.longboi {
+        font-size: 65%;
+    }
+    .content {
+        text-align: left;
+    }
+}