init

style.css

@@ -0,0 +1,151 @@
+@font-face{
+  font-family: Heebo;
+  src: url('heebo.ttf');
+}
+@font-face{
+  font-family: Lato;
+  src: url('lato.ttf');
+}
+*{
+  transition: 400ms;
+}
+
+body{
+  font-family: Lato, sans-serif;
+  width: 60%;
+  margin-left: 20%;
+  margin-right: 20%;
+  line-height: 1.7em;
+  transition: 500ms;
+  padding-bottom: 5vh;
+  background-color: var(--bg-color);
+  color: var(--txt-color);
+  font-size: 1.07em;
+}
+h1,h2,h3,h4,h5,h6{
+  font-family: Heebo, sans-serif;
+  color: var(--secondary-txt-color);
+}
+
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Opera and Firefox */
+}
+.theme{
+    width: 1em;
+    position: absolute;
+    top: 40px;
+    right: 50px;
+}
+#moonImg{
+    width: 100%;
+    cursor: pointer;
+}
+
+#top{
+  text-align: center;
+}
+#menu{
+  margin-bottom: 60px;
+}
+.mi{
+  display: inline-block;
+  font-size: 1.3em;
+}
+.mi:not(:last-of-type){
+  margin-right: 50px;
+}
+.name{
+  text-align: center;
+  font-size: 1.7em;
+}
+#me{
+  font-size: 2.5em;
+  margin-top: 100px;
+  margin-bottom: 70px;
+  line-height: 1.1em;
+}
+a{
+  color: var(--green);
+  text-decoration: none;
+}
+a:hover{
+  text-decoration: underline;
+}
+.content{
+  margin-bottom: 10px;
+}
+.content>h2{
+  margin-bottom: 10px;
+}
+.content>p{
+  margin: 0px;
+  margin-bottom: 40px;
+}
+
+.name:last-of-type{
+  margin-top: 7vh;
+}
+.network{
+  position: relative;
+  top: 1vh;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  width: 100%;
+  grid-column-gap: 1em;
+  grid-row-gap: 1em; /*used in @media*/
+}
+.networkLink{
+  font-family: Heebo, sans-serif;
+  font-weight: 700;
+  text-align: center;
+  border: 1px solid var(--green);
+  border-radius: 0.3em;
+  padding: 0.2em 0;
+}
+.networkLink:hover{
+  background-color: var(--green);
+  color: white;
+  text-decoration: none;
+}
+
+
+@media (max-width: 1000px){
+  body{
+    width: 80%;
+    margin-left: 10%;
+    margin-right: 10%;
+  }
+  .network{
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 700px){
+  body{
+    width: 90%;
+    margin-left: 5%;
+    margin-right: 5%;
+  }
+  .mi, .mi:not(:last-of-type){
+    display: block;
+    margin: 0px;
+    transition: 300ms;
+  }
+  #me{
+    margin-top: 50px;
+    margin-bottom: 40px;
+  }
+  .network{
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+  .theme{
+      top: 20px;
+      right: 25px;
+  }
+}