Simplifying layout (#1)

avosoftware · Nov 30, 2023 · 2001819 · 2001819
2 parents 0a2ee3b + 012b97f
commit 2001819
Show file tree

Hide file tree

Showing 8 changed files with 276 additions and 267 deletions.
diff --git a/Makefile b/Makefile
@@ -4,4 +4,4 @@ setup:
 	bundle install
 
 start:
-	bundle exec jekyll serve
+	bundle exec jekyll serve --host 0.0.0.0
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,11 +1,3 @@
-<section class="">
-  <footer class="pt-4 pb-4 ">
-    <div class="container">
-      <div class="row justify-content-center">
-        <div class="col col-md-8 text-center">
-          © 2012-{{ 'now' | date: "%Y" }} {{ site.title }}
-        </div>
-      </div>
-    </div>
-  </footer>
-</section>
+<footer class="footer">
+  © 2012-{{ 'now' | date: "%Y" }} {{ site.title }}
+</footer>
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,7 +1,6 @@
-<nav class="navbar">
-  <div class="container">
-    <a href="#">
-      {{ site.title }}
-    </a>
+<header class="banner">
+  <div class="title-wrapper">
+    <h1 class="site-title slide-in-down">{{ site.title }}</h1>
+    <h2 class="site-description slide-in-left">{{ site.description }}</h2>
   </div>
-</nav>
+</header>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -9,29 +9,20 @@
 
     <title>{{ site.title }}</title>
 
-    <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
-    <link rel="dns-prefetch" href="//use.fontawesome.com">
+    <link rel="dns-prefetch" href="//use.fontawesome.com">    
 
     <link rel="preload" as="image" href="/assets/images/header-lores.jpg" fetchpriority="high">
 
     <link rel="icon" href="/favicon.png">
 
-    <link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css ">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
-    <link rel="stylesheet" href="/assets/css/animations.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
+    <link rel="stylesheet" href="/assets/css/main.css">
   </head>
 
-  <body class="bg-white">
-
+  <body>
     {{ content }}
 
     {% include footer.html %}
-
-    <script
-      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
-      crossorigin="anonymous"></script>
-
   </body>
 
 </html>
diff --git a/assets/css/animations.css b/assets/css/animations.css
@@ -1,166 +1,59 @@
-@-webkit-keyframes bounceInDown {
-  0%,60%,75%,90%,to {
-    -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
-    animation-timing-function: cubic-bezier(.215,.61,.355,1)
-  }
-
+@-webkit-keyframes slide-in-down {
   0% {
     opacity: 0;
-    -webkit-transform: translate3d(0,-3000px,0);
-    transform: translate3d(0,-3000px,0)
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(0,25px,0);
-    transform: translate3d(0,25px,0)
-  }
-
-  75% {
-    -webkit-transform: translate3d(0,-10px,0);
-    transform: translate3d(0,-10px,0)
-  }
-
-  90% {
-    -webkit-transform: translate3d(0,5px,0);
-    transform: translate3d(0,5px,0)
+    -webkit-transform: translate3d(0,-90px,0);
+    transform: translate3d(0,-90px,0);
   }
 
   to {
     -webkit-transform: none;
-    transform: none
+    transform: none;
   }
 }
 
-@keyframes bounceInDown {
-  0%,60%,75%,90%,to {
-    -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
-    animation-timing-function: cubic-bezier(.215,.61,.355,1)
-  }
-
+@keyframes slide-in-down {
   0% {
     opacity: 0;
-    -webkit-transform: translate3d(0,-3000px,0);
-    transform: translate3d(0,-3000px,0)
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(0,25px,0);
-    transform: translate3d(0,25px,0)
-  }
-
-  75% {
-    -webkit-transform: translate3d(0,-10px,0);
-    transform: translate3d(0,-10px,0)
-  }
-
-  90% {
-    -webkit-transform: translate3d(0,5px,0);
-    transform: translate3d(0,5px,0)
+    -webkit-transform: translate3d(0,-90px,0);
+    transform: translate3d(0,-90px,0);
   }
 
   to {
     -webkit-transform: none;
-    transform: none
+    transform: none;
   }
 }
 
-.bounceInDown {
-  animation: 2s bounceInDown ease-out;
+.slide-in-down {
+  animation: .6s slide-in-down;
 }
 
-@-webkit-keyframes bounceInRight {
-  0%,60%,75%,90%,to {
-    -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
-    animation-timing-function: cubic-bezier(.215,.61,.355,1)
-  }
-
+@-webkit-keyframes slide-in-left {
   0% {
     opacity: 0;
-    -webkit-transform: translate3d(3000px,0,0);
-    transform: translate3d(3000px,0,0)
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(-25px,0,0);
-    transform: translate3d(-25px,0,0)
-  }
-
-  75% {
-    -webkit-transform: translate3d(10px,0,0);
-    transform: translate3d(10px,0,0)
-  }
-
-  90% {
-    -webkit-transform: translate3d(-5px,0,0);
-    transform: translate3d(-5px,0,0)
+    -webkit-transform: translate3d(50px,0,0);
+    transform: translate3d(50px,0,0);
   }
 
   to {
     -webkit-transform: none;
-    transform: none
+    transform: none;
   }
 }
 
-@keyframes bounceInRight {
-  0%,60%,75%,90%,to {
-    -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
-    animation-timing-function: cubic-bezier(.215,.61,.355,1)
-  }
-
+@keyframes slide-in-left {
   0% {
     opacity: 0;
-    -webkit-transform: translate3d(3000px,0,0);
-    transform: translate3d(3000px,0,0)
-  }
-
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(-25px,0,0);
-    transform: translate3d(-25px,0,0)
-  }
-
-  75% {
-    -webkit-transform: translate3d(10px,0,0);
-    transform: translate3d(10px,0,0)
-  }
-
-  90% {
-    -webkit-transform: translate3d(-5px,0,0);
-    transform: translate3d(-5px,0,0)
+    -webkit-transform: translate3d(50px,0,0);
+    transform: translate3d(50px,0,0);
   }
 
   to {
     -webkit-transform: none;
-    transform: none
+    transform: none;
   }
 }
 
-.bounceInRight {
-  animation: 2s bounceInRight ease-out;
-}
-
-/* https://www.youtube.com/watch?v=345V2MU3E_w */
-img {
-  max-width: 100%;
-  height: auto;
-  vertical-align: middle;
-  font-style: italic;
-  background-repeat: no-repeat;
-  background-size: cover;
-  shape-margin: 1rem;
-}
-
-.banner {
-  min-height: 100vh;
-  min-height: 100svh;
-  background-size: cover;
-  background-image: url(/assets/images/header.webp), url(/assets/images/header-lores.jpg);
-  background-color: rgb(0, 102, 191);
-}
-
-.page-title {
-  background-image: linear-gradient(to bottom, rgba(0, 102, 191, 0) 0%, rgba(0, 102, 191, 0.6) 35% 75%, rgba(0, 102, 191, 0) 100%);
+.slide-in-left {
+  animation: .75s slide-in-left;
 }