organizing fonts, changing color

Author: zesameri

assets/bio.txt

@@ -1,4 +1,4 @@
-This once was a professional site, made with little passion or purpose. <br>
+This once was a professional site, made with little passion or purpose.
 I still am a software developer, nevertheless I've never enjoyed self promotion or praise.
 I'm no one special, I'm no one unique, still I felt intrigued to express a piece of me
 to the abyss of the Internet. Thank you for giving this place your time, and know that this is not a platform or a showcase, it is my

assets/fonts/34C3A6_0_0.ttf

@@ -351,10 +351,14 @@
 
 @media (hover: hover) {
   .footer > a:nth-child(odd):hover~.crumple {
-    background: linear-gradient(45deg, #69b7eb, #b3dbd3, #f4d6db);
+    background: #6190e8; /* fallback for old browsers */
+    background: -webkit-linear-gradient(to top, #6190e8, #a7bfe8); /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to top, #6190e8, #a7bfe8);
     background-size: 400% 400%;
   }
   .footer > a:nth-child(2n):hover~.crumple {
+    background: #ee5c87; /* fallback for old browsers */
+    background: -webkit-linear-gradient(to top, #ee5c87, #d587b3);  /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(90deg, #ee5c87, #f1a4b5, #d587b3);
     background-size: 400% 400%;
   }

exper/orange_theme/assets/black.svg assets/images/black.svgexper/orange_theme/assets/black.svg renamed to assets/images/black.svg

@@ -0,0 +1,63 @@
+body {
+  font-family: 'Roboto Slab', serif;
+  line-height: 1.5;
+  color: #f8f8f6;
+}
+h1, dt, .footer > a {
+  font-family: "Trebuchet MS", Helvetica, sans-serif;
+  letter-spacing: 2px;
+}
+dt {
+  font-size: 1.25em;
+  font-weight: bold;
+}
+h1 {
+  font-size: 3vw;
+  letter-spacing: 4px;
+  font-weight: normal;
+}
+.bio {
+  font-size: 2.5vw;
+}
+.list__item > p {
+  font-size: 1.25em;
+}
+.footer > a {
+  line-height: 1;
+  font-size: 1.4em;
+}
+a, .footer > a {
+  border-bottom: 1px solid #f8f8f6;
+  color: inherit;
+  text-decoration: none
+}
+a {
+  font-family: monospace;
+}
+a:focus, a:hover {
+  color: #3d6eff;
+  border-bottom: 1px solid #3d6eff
+}
+
+@media (max-width:800px) {
+  h1 {
+    line-height: 1em;
+    font-size: 2em;
+  }
+  .bio {
+    font-size: 1.5em;
+  }
+  .footer > a {
+    border: none;
+    text-decoration: underline;
+  }
+}
+
+@media (min-width:1080px) {
+  .bio {
+    font-size:2em;
+  }
+  h1 {
+    font-size: 2.5em;
+  }
+}

exper/orange_theme/assets/flower.svg assets/images/flower.svgexper/orange_theme/assets/flower.svg renamed to assets/images/flower.svg

@@ -1,8 +1,4 @@
 @media (max-width:800px) {
-  h1 {
-    line-height: 1em;
-    font-size: 1.5em
-  }
   body {
     padding: 1em 1em 1em 2em;
     flex-flow: column wrap;
@@ -11,13 +7,12 @@
     height: auto;
   }
   .bio {
-    font-size: 6vw;
     margin: 0;
     min-width: 80vw;
   }
-    .list {
-        margin-top: 1em;
-    }
+  .list {
+      margin-top: 1em;
+  }
   section {
     padding: 7.5vw;
     width: 100%;
@@ -35,8 +30,16 @@
     position: inherit;
     align-items: flex-start;
   }
-  .footer > a {
-    border: none;
-    text-decoration: underline;
+}
+@media (min-width:1080px) {
+  .bio {
+    max-width: 1100px;
+  }
+  .writing {
+    max-width: 750px;
+  }
+  .footer {
+    right: 3em;
+    bottom: 5em;
   }
 }

css/crumple.css

@@ -1,27 +1,10 @@
 body {
   margin: 0;
   padding: 5vh 0 3vw 3vw;
-  line-height: 1.5;
-  font-family: monospace;
-  color: #f8f8f6;
   background-color: #222;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   display: block;
-}
-h1, dt {
-  font-family: "Helvetica Neue", sans-serif;
-  font-weight: bold;
-  letter-spacing: .03em;
-}
-dt {
-    font-size: 1.25em;
-}
-h1 {
-  font-size: 2vw;
-}
-.main-section {
-
 }
 section {
   z-index: 1;
@@ -36,22 +19,11 @@ section {
 }
 .bio {
   margin-bottom: 2.5em;
-  font-size: 3vw;
   max-width: 70vw;
-  font-family: serif;
 }
 .writing {
   max-width: 70vw;
 }
-@media (min-width:1080px) {
-  .bio {
-    font-size:2.5em;
-    max-width: 1100px;
-  }
-  .writing {
-    max-width: 750px;
-  }
-}
 .list {
   margin: 0;
 }
@@ -61,7 +33,6 @@ section {
 }
 .list__item > p {
     margin: 1em 0;
-    font-size: 1.5em;
 }
 .footer {
   position: fixed;
@@ -73,24 +44,9 @@ section {
   align-items: flex-end;
 
 }
-@media (max-width:1080px) {
-  .footer {
-    right: 3em;
-    bottom: 5em;
-  }
-}
 .footer > a {
   margin-top: 1em;
-  line-height: 1;
-  font-size: 1.4em;
 }
 a {
   position: relative;
-  border-bottom: 1px solid #f8f8f6;
-  color: inherit;
-  text-decoration: none
-}
-a:focus, a:hover {
-  color: #3d6eff;
-  border-bottom: 1px solid #3d6eff
 }