Merge pull request #11 from Retrylife/slate

looks cool

_layouts/home.html

@@ -13,40 +13,68 @@
 
             <div style="height:20vh;"></div>
             <div class="nudge-right">
-                <h1 id="name-landing">Evan Pratten</h1>
+                <h1 id="name-landing">{{site.title}}</h1>
                 <h3 id="me-landing">Programmer</h3>
             </div>
 
         </div>
         <div class="landing-more container">
-            <h5><a href="/blog">Blog</a> <a href="/projects">Projects</a> <a href="#main-start">More</a></h5>
+            <h5><a href="/blog">Blog</a> <a href="/projects">Projects</a> <a href="#whoami">More</a></h5>
         </div>
 
-        <!-- Header -->
-        <div class="header container" style="height:30vh" id="main-start">
-            <div class="home-header">
-            </div>
-        </div>
 
         <div class="reactive-bg">
             <div class="home container">
 
 
-                <div class="profile">
+                <!-- <div class="profile">
                     <img src="{{site.baseurl}}/assets/images/human-profile.jpg">
-                </div>
+                </div> -->
 
 
                 <div class="info">
-                    <h1>{{site.title}}</h1>
+                    <div id="mobile-title">
-                    <hr>
+                        <div style="height:25vh;"></div>
-                    <div class="tagline">
+                        <h1 class="blocky">{{site.title}}</h1>
-                        <br><br><br>
+                        <h3 id="me-landing" style="text-align:center">Programmer</h3>
-                        <h2>Who am I?</h2>
+                    </div>
-                        <p>{{site.about}}</p>
 
-                        <br><br>
+                    <!-- <hr> -->
-                        <h2>Languages</h2>
+                    <div>
+                        <!-- class="tagline"> -->
+                        <br><br><br><br><br>
+                        <!-- <div style="height:20vh;"></div> -->
+
+                        <div id="whoami">
+                            <h2 class="blocky">WHOAMI</h2>
+                            <p>{{site.about}}</p>
+                        </div>
+
+                        <br><br><br><br><br>
+                        <!-- <div style="height:20vh;"></div> -->
+
+                        <div id="languages">
+                            <h2 class="blocky">Programming</h2>
+
+                            <p>I have been programming since 2013, and started learning with Python3.
+                                Since then, I have picked up many other languages, and am currently mainly using Python,
+                                Java, and C.
+                                I am also working on learning a few new languages, including Ruby at the moment.</p>
+                        </div>
+
+
+                        <br><br><br><br><br>
+                        <!-- <div style="height:20vh;"></div> -->
+
+                        <div id="whoami">
+                            <h2 class="blocky">Projects</h2>
+                            <p>In my <a href="/projects">Projects page</a>, I have a list of projects I have worked on,
+                                ranging from unfinished
+                                ideas, to codebases that took months to develop. Feel free to check them out, and let me
+                                know what you think!</p>
+                        </div>
+
+                        <!-- <h2>Languages</h2>
 
                         <div class="progress" style="height:30px">
                             <div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="15"
@@ -63,10 +91,10 @@
                         <p>I have been programming since 2013, and started learning with Python3.<br>
                             Since then, I have picked up many other languages, and am currently mainly using Python,
                             Java, and C.<br>
-                            I am working on learning a few new languages, including Ruby at the moment.</p>
+                            I am working on learning a few new languages, including Ruby at the moment.</p> -->
 
 
-                        <br><br>
+                        <!-- <br><br>
                         <h2>Projects</h2>
 
                         <p>
@@ -75,7 +103,7 @@
 
                         <a href="{{site.baseurl}}/projects">
                             <button type="button" class="btn btn-success">View Page</button>
-                        </a>
+                        </a> -->
                     </div>
 
                 </div>

assets/css/main.css

@@ -44,6 +44,17 @@ html {
     animation: fadein 2s;
 }
 
+.blocky {
+    background-color: #fff;
+    color: #343a40;
+    font-weight: bolder;
+    padding-left: 5;
+    padding-right: 5;
+    width: max-content;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-size: xx-large;
+}
+
 #me-landing {
     color: #fff;
     font-family: 'IBM Plex Sans', sans-serif;
@@ -78,7 +89,7 @@ html {
 
 .landing-more a {
     height: max-content;
-    background-color: #fff;
+    background-color: rgba(255, 255, 255, 0.801);
     padding-left: 5;
     padding-right: 5;
     font-weight: normal;
@@ -108,6 +119,59 @@ html {
     }
 }
 
+#mobile-title {
+    display: none;
+}
+
+@media only screen and (max-width: 993px) {
+    #mobile-title {
+        display: block;
+        font-family: 'IBM Plex Sans', sans-serif;
+        font-size: xxx-large;
+        margin: auto;
+    }
+    #mobile-title .blocky {
+        margin: auto;
+        font-size: xxx-large;
+        -webkit-animation: fadein 0.5s;
+        /* Safari, Chrome and Opera > 12.1 */
+        -moz-animation: fadein 0.5s;
+        /* Firefox < 16 */
+        -ms-animation: fadein 0.5s;
+        /* Internet Explorer */
+        -o-animation: fadein 0.5s;
+        /* Opera < 12.1 */
+        animation: fadein 0.5s;
+    }
+}
+
+#whoami {
+    color: #fff;
+    font-weight: bold;
+    text-align: justify;
+    max-width: 680px;
+    margin: auto;
+}
+
+#languages h2 {
+    margin: auto;
+}
+
+#whoami h2 {
+    margin: auto;
+}
+
+#languages {
+    color: #fff;
+    font-weight: bold;
+    max-width: 680px;
+    /* float: right; */
+    margin: auto;
+    right: 0;
+    text-align: justify;
+    align-items: right;
+}
+
 .site-info {
     color: rgb(199, 195, 195);
     background-color: #FFF;
@@ -250,9 +314,9 @@ a h5 {
 
 .home.container {
     padding: 20px;
-    font-family: 'Noto Sans TC', sans-serif;
+    /* font-family: 'Noto Sans TC', sans-serif; */
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
-    background-color: #fff;
+    /* background-color: #fff; */
     border-bottom-right-radius: 5px;
     border-bottom-left-radius: 5px;
 }
@@ -429,4 +493,11 @@ pre {
     to {
         opacity: 1;
     }
+}
+
+:target::before {
+    content: '';
+    display: block;
+    height: 40px;
+    margin-top: -40px;
 }