revamp start

Author: alizardguy

src/_includes/basehead.html

@@ -3,4 +3,5 @@
 <title>{{title}}</title>
 <meta name="description" content="{{description}}">
 <meta name="author" content="alizardguy">
-<link rel="stylesheet" href="/style/navbar.css">
+<link rel="stylesheet" href="/style/navbar.css">
+<link rel="stylesheet" href="/style/dividers.css">

src/index.html

@@ -6,9 +6,19 @@
 {% include "navbar.html" %}
 <link rel="stylesheet" href="/style/home.css">
 <main>
-    <div class="intro-block">
-        <h1 class="intro-text">I am a lizard!</h1>
-        <h2 class="intro-sub-text" id="at-a-time">One HTML tag at a time</h2>
-        <script src="./scripts/at_a_time.js"></script>
+    <div>
+        <!--Top Intro Text-->
+        <div class="intro-block">
+            <h1 class="intro-text bluegradtext">I'm alizard</h1>
+        </div>
+        <div>
+            <p class="infosubline">Computer Science Student, Internet Lizard</p>
+        </div>
+        <!--About Me-->
+        <div class="infoblock">
+            <p>My name is Lizard, I am a programmer with an interest in Virtual Reality.</p>
+            <br>
+            <p>I am apart of <a href="https://www.theneolanders.com/">The Neolanders</a> and am active on <a href="https://resonite.com/">Resonite</a>.</p>
+        </div>
     </div>
 </main>

src/scripts/at_a_time.js

@@ -1,6 +1,6 @@
 *{
-    --text: #e9e2f1;
-    --background: #08383a;
+    --text: #a6adbb;
+    --background: #1b1b1e;
     --primary: #bca3d4;
     --secondary: #407336;
     --accent: #5eb4ac;
@@ -12,6 +12,7 @@
 body{
     color: var(--text);
     background-color: var(--background);
+    font-size: 1.25rem;
 }
 
 a.button {

src/style/base.css

@@ -0,0 +1,20 @@
+ /* Dashed border */
+ hr.dashed {
+    border-top: 3px dashed #bbb;
+  }
+  
+  /* Dotted border */
+  hr.dotted {
+    border-top: 3px dotted #bbb;
+  }
+  
+  /* Solid border */
+  hr.solid {
+    border-top: 3px solid #bbb;
+  }
+  
+  /* Rounded border */
+  hr.thinrounded {
+    border-top: 2px solid #bbb;
+    border-radius: 5px;
+  } 

src/style/dividers.css

@@ -1,13 +1,42 @@
-.intro-text{
-    color: whitesmoke;
-    font-size: 7ch;
+.intro-text
+{
+    font-size: 6rem;
+    font-weight: 800;
+    padding-bottom: 10px;
 }
 
-.intro-sub-text{
-    font-size: 2rem;
+.intro-block
+{
+        padding-top: 30px;
+        text-align: center;
 }
 
-.intro-block{
-        padding-top: 75px;
-        text-align: center;
+.infosubline 
+{
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    text-decoration: underline;
+}
+
+.infoblock
+{
+    padding-top: 35px;
+    text-align: center;
+    align-self: center;
+}
+
+main
+{
+    text-align: center;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-bottom: 1rem;
+    margin-top: 0.5rem;
+    word-wrap: break-word;
+}
+
+a 
+{
+    color: whitesmoke;
+    text-decoration-color: green;
 }

src/style/home.css

@@ -5,9 +5,11 @@ header a {
 header {
     padding: 0 20px;
     height: 50px;
-    background-color: #264d49;
+    background-color: #1e1e1e;
     display: flex;
     justify-content: space-between;
+    box-shadow: 3px 0px 3px 3px black;
+    border: 1px solid 292929;
 }
 
 .logo {