change demo design from 11straps.com website

holger1411 · holger1411 · commit 0b85c88742ad · 2021-06-03T10:52:53.000+02:00
diff --git a/src/_includes/layouts/blog.njk b/src/_includes/layouts/blog.njk
@@ -5,7 +5,7 @@
     {% include 'snippets/head.njk' %}
   </head>
 
-  <body class="bg-dark text-light">
+  <body>
 
     {% include 'snippets/navbar.njk' %}
 
diff --git a/src/_includes/layouts/default.njk b/src/_includes/layouts/default.njk
@@ -5,7 +5,7 @@
     {% include 'snippets/head.njk' %}
   </head>
 
-  <body class="bg-dark text-light">
+  <body>
 
     {% include 'snippets/navbar.njk' %}
 
diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
@@ -5,7 +5,7 @@
     {% include 'snippets/head.njk' %}
   </head>
 
-  <body class="bg-dark text-light">
+  <body>
 
     {% include 'snippets/navbar.njk' %}
 
diff --git a/src/_includes/layouts/post.njk b/src/_includes/layouts/post.njk
@@ -5,7 +5,7 @@
     {% include 'snippets/head.njk' %}
   </head>
 
-<body class="bg-dark text-light">
+<body>
 
     {% include 'snippets/navbar.njk' %}
 
diff --git a/src/_includes/snippets/navbar.njk b/src/_includes/snippets/navbar.njk
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-dark pt-0">
+<nav class="navbar navbar-expand-lg navbar-light pt-0">
   <div class="container">
     <a class="navbar-brand mb-0 py-4 px-3 pt-5 text-center text-white bg-primary" href="{{ '/' | url }}">11straps</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
diff --git a/src/index.njk b/src/index.njk
@@ -3,45 +3,45 @@ layout: layouts/home.njk
 ---
 
 <div class="container my-vh-6">
-<div class="row">
+<div class="row d-flex justify-content-center">
 
-  <div class="col-12 col-lg-6 my-4">
-    <h1 class="display-3 text-white">
-      <strong>11straps</strong> is a static website boilerplate.
+  <div class="col-12 col-lg-8 my-4 text-center">
+    <h1 class="display-1">
+      Welcome to the <strong>11straps</strong> demo website!
     </h1>
-    <p class="lead mb-4 text-light">It combines the static website generator Eleventy & the CSS framework Bootstrap 5.</p>
+    <p class="lead mb-4">It combines the static website generator Eleventy & the CSS framework Bootstrap 5.</p>
     <a class="btn btn-primary px-5 py-3 me-4 position-relative" href="https://gumroad.com/l/WPeVF" target="_blank">Download  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning">v0.3<span class="visually-hidden">latest version</span></span></a>
-    <a class="link-fancy py-2" href="https://github.com/holger1411/11straps">Check it out on Github <img src="img/arrow-right.svg" alt="arrow pointing to the right icon" width="24" height="24"/></a>
+    <a class="link-fancy py-2" href="https://github.com/holger1411/11straps">Check it out on Github </a>
   </div>
 </div>
   <!--<div class="col col-12 col-lg-8 mt-5">
     <p class="lead text-light">{{ frontpage.text }}</p>
   </div>-->
 </div>
 
-<div class="wrapper text-white position-relative my-vh-5 bg-primary">
-    <div class="bg-gray900 w-50 h-100 position-absolute d-none d-lg-block"></div>
+<div class="wrapper position-relative my-vh-5 bg-dark">
+    <div class="bg-primary w-50 h-100 position-absolute d-none d-lg-block"></div>
   <div class="container position-relative py-vh-4">
-    <div class="row justify-content-between d-flex align-items-stretch border-top py-vh-2">
-      <div class="col-12 col-lg-5">
+    <div class="row justify-content-between d-flex align-items-stretch py-vh-2">
+      <div class="col-12 col-lg-5 text-white">
         <img src="img/coffee-hot.svg" class="mb-3" alt="a cup of hot coffee icone" width="24" height="24"/>
         <h2 class="h2">Open source & free</h2>
         <p>11straps is an open source project released under the MIT license. It is free for everyone. You are welcome to test, contribute and improve it or use it even for commercial projects.</p>
       </div>
 
-      <div class="col-12 col-lg-5 py-vh-1">
+      <div class="col-12 col-lg-5 py-vh-1 text-white">
         <img src="img/code-2.svg" class="mb-3" alt="a code icon" width="24" height="24"/>
         <h2>Eleventy + Bootstrap = 💪</h2>
         <p>11straps come´s with the static site generator Eleventy and the CSS framework Bootstrap 5 in it. It combines both via npm and Gulp and adds some dev and build magic to it. This website itself is also included as example.</p>
       </div>
 
-      <div class="col-12 col-lg-5 py-vh-1">
+      <div class="col-12 col-lg-5 py-vh-1 text-white">
                 <img src="img/monitor.svg" class="mb-3" alt="a monitor icon" width="24" height="24"/>
                 <h2>Local server & Browser Sync</h2>
         <p>11straps includes a dev build process with a local server and browser sync. Everything you need for your local live dev environment.</p>
       </div>
 
-      <div class="col-12 col-lg-5 py-vh-1">
+      <div class="col-12 col-lg-5 py-vh-1 text-white">
                 <img src="img/tool.svg" class="mb-3" alt="a tool icon" width="24" height="24"/>
                 <h2>Minified and purged output</h2>
         <p>Once you are done with your local development it´s time for a prod build. The 11straps prod output is a minified HTML site with a minified and purged CSS file and optimized assets. Thats it. Just a clean, fast and static website will come out.</p>
@@ -51,7 +51,7 @@ layout: layouts/home.njk
 
 </div>
 
-<div class="container text-white">
+<div class="container">
   <div class="row py-5 border-top">
     <div class="col-12 col-lg-6 border-right">
             <h2>Documentation</h2>
diff --git a/src/scss/themes/base/_style-theme.scss b/src/scss/themes/base/_style-theme.scss
@@ -5,18 +5,12 @@
   background-origin: border-box;
   background-clip: content-box, border-box;
 }
-a {color:$white;}
 .link-fancy {
-  color: $white;
   text-decoration: none;
   display: inline-block;
   position: relative;
 }
 
-.link-fancy:hover {
-  color: $white;
-}
-
 .link-fancy:before {
   content: '';
   display: block;
@@ -26,7 +20,7 @@ a {color:$white;}
   position: absolute;
   left: 0;
   bottom: 0;
-  background-image: linear-gradient(90deg, #fff 0, #fff 25%, transparent 0, transparent 50%, #fff 0, #fff 75%, transparent 0, transparent);
+  background-image: linear-gradient(90deg, $primary 0, $primary 25%, transparent 0, transparent 50%, $primary 0, $primary 75%, transparent 0, transparent);
   background-repeat: no-repeat;
   background-position: 0;
   background-size: 400% 1px;
diff --git a/src/scss/themes/base/_variables-theme.scss b/src/scss/themes/base/_variables-theme.scss
@@ -1,13 +1 @@
 $font-family-sans-serif:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-
-$gray-900: #151515;
-$gray-300: #888;
-$blue: #1717e5;
-$gray-800: #282828;
-$orange: #F15D00;
-$warning: $orange;
-$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
-$lead-font-weight:200;
-$font-weight-light:           200 !default;
-$font-weight-normal:          200 !default;
-$lead-font-size:              $font-size-base * 1.3;

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<nav class="navbar navbar-expand-lg navbar-dark pt-0">`
	`1`	`+<nav class="navbar navbar-expand-lg navbar-light pt-0">`
`2`	`2`	`<div class="container">`
`3`	`3`	`<a class="navbar-brand mb-0 py-4 px-3 pt-5 text-center text-white bg-primary" href="{{ '/' \| url }}">11straps</a>`
`4`	`4`	`<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">`