Merge pull request #9 from Retrylife/new-landing

Changed up website design

_includes/advert.html

@@ -13,7 +13,7 @@
     adverts = [
         'Want to waste away your period 4 english class by playing games? Check out <a href="https://rsninja.dev">rsninja.dev</a>',
         'Is dark mode too cheery? Check out <a href="https://exvacuum.dev">exvacuum.dev</a>',
-        '{Advertisement text here} <a href="https://hyperlisk.dev">hyperlisk.dev</a>'
+        // '{Advertisement text here} <a href="https://hyperlisk.dev">hyperlisk.dev</a>'
     ]
 
     // Display random advert

_includes/footer.html

@@ -1,13 +1,6 @@
 <!-- <div id="particles-js"></div> -->
 
-<div class="container foot" style="text-align:center;">
+<br><br>
-    <br>
-    <span class="site-info">
-        Site design by: <a href="https://retrylife.ca">Evan Pratten</a> |
-
-        This site was last updated at: {{site.time}}
-    </span>
-</div>
 
 <!-- Brython -->
 <script src="/assets/js/brython.js"></script>

_includes/nav.html

@@ -1,7 +1,7 @@
 <nav class="navbar navbar-dark sticky-top bg-dark navbar-expand-lg">
     <!-- Navbar content -->
-    <!-- <div class="container"> -->
+    <div class="container">
-    <a class="navbar-brand" href="{{site.baseurl}}/">{{site.title}}</a>
+        <a class="navbar-brand" href="{{site.baseurl}}/"><span>{{site.title}}</span></a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
             aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -14,6 +14,8 @@
                 <!-- <a class="nav-item nav-link" href="{{site.baseurl}}/documentation">Documentation</a> -->
                 <a class="nav-item nav-link" href="{{site.baseurl}}/about">About</a>
             </div>
-        <!-- </div> -->
+        </div>
     </div>
 </nav>
+
+<br>

_layouts/about.html

@@ -16,6 +16,18 @@
         </div>
 
     </div>
+    <br>
+
+    <div class="reactive-bg">
+        <div class="post container" id="advert">
+            <span >
+                Site design by: <a href="https://retrylife.ca">Evan Pratten</a> |
+        
+                This site was last updated at: {{site.time}}
+            </span>
+        </div>
+    </div>
+
     {% include footer.html %}
 
 

_layouts/home.html

@@ -7,13 +7,15 @@
         {% include nav.html %}
 
         <!-- Header -->
-        <div class="header" style="height:30vh">
+        <div class="header container" style="height:30vh">
             <div class="home-header">
             </div>
         </div>
 
         <div class="reactive-bg">
             <div class="home container">
+
+
                 <div class="profile">
                     <img src="{{site.baseurl}}/assets/images/human-profile.jpg">
                 </div>

assets/css/main.css

@@ -3,6 +3,7 @@ body {
     padding: 0;
     font-family: 'IBM Plex Mono', monospace;
     font-family: 'IBM Plex Sans', sans-serif;
+    background-color: #343a40;
 }
 
 .foot {}
@@ -19,11 +20,16 @@ body {
 
 .header {
     height: 35vh;
+    /* max-width: 1140px; */
+    margin: auto;
     background-color: #ebeef1;
     background-image: url('/assets/images/banner.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
+    overflow: hidden;
+    border-top-right-radius: 7px;
+    border-top-left-radius: 7px;
 }
 
 .table-fix {
@@ -91,9 +97,9 @@ a h5 {
 .post.container {
     padding: 20px;
     font-family: 'IBM Plex Sans', 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.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    /* border-radius: 15px;
+    border-radius: 5px;
-    transform: translateY(-30px); */
+    /* transform: translateY(-30px); */
     background-color: #fff;
 }
 
@@ -101,7 +107,8 @@ a h5 {
     /* background-color: #343a40; */
     /* color:#fff; */
     text-align: center;
-    /* padding:5; */
+    padding: 10;
+    font-size: medium;
 }
 
 #advert p {
@@ -109,11 +116,32 @@ a h5 {
     margin: 0;
 }
 
+.nav-item.nav-link {
+    padding-top: .4125rem;
+    padding-bottom: .3125rem;
+    line-height: inherit;
+}
+
+.navbar-brand span {
+    background-color: #fff;
+    color: #343a40;
+    font-weight: bolder;
+    padding-left: 5;
+    padding-right: 5;
+}
+
+.navbar-brand {
+    margin-right: 0;
+    color: #343a40;
+}
+
 .home.container {
     padding: 20px;
     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);
     background-color: #fff;
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
 }
 
 .container .profile {
@@ -234,4 +262,5 @@ kbd {
 pre {
     padding: 3px;
 }
+
 }