[gnome-bootstrap-theme] feat: build css/js theme with a script

From: Guillaume Bernard <gbernard src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-bootstrap-theme] feat: build css/js theme with a script
Date: Sat, 24 Sep 2022 15:13:44 +0000 (UTC)
commit cfb2b705565668231c3be915f94653eeb1901fb1
Author: Guillaume Bernard <associations guillaume-bernard fr>
Date:   Sat Sep 24 17:04:27 2022 +0200

    feat: build css/js theme with a script

 .gitignore                                   |  2 +
 build_theme.sh                               |  6 ++
 package.json                                 |  5 ++
 src/css/_navbar-search-form.scss             | 86 ++++++++++++++++++++++++
 src/{styles => css}/_navbar.scss             | 98 +++++++++++++++++++++-------
 src/{styles => css}/_variables.scss          | 17 +----
 src/{styles => css}/animated-close-icon.scss |  9 ++-
 src/css/buttons.scss                         | 15 +++++
 src/css/footer.scss                          | 31 +++++++++
 src/css/header.scss                          | 71 ++++++++++++++++++++
 src/css/helpers.scss                         | 47 +++++++++++++
 src/{styles => css}/main.scss                |  2 +-
 src/css/typography.scss                      | 31 +++++++++
 src/javascripts/navbar-search-form.js        |  7 --
 src/js/navbar-search-form.js                 |  7 ++
 src/styles/_navbar-search-form.scss          | 85 ------------------------
 src/styles/buttons.scss                      | 15 -----
 src/styles/footer.scss                       | 33 ----------
 src/styles/header.scss                       | 70 --------------------
 src/styles/helpers.scss                      | 41 ------------
 src/styles/typography.scss                   | 31 ---------
 21 files changed, 385 insertions(+), 324 deletions(-)
---
diff --git a/.gitignore b/.gitignore
index c925c21..a6c1d0b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 /dist
 /node_modules
+package-lock.json
+.sass-cache
diff --git a/build_theme.sh b/build_theme.sh
new file mode 100755
index 0000000..47fb270
--- /dev/null
+++ b/build_theme.sh
@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+
+sass -t expanded src/css/main.scss > ./dist/deneb.css
+sass -t compressed src/css/main.scss > ./dist/deneb.min.css
+cat ./node_modules/bootstrap/dist/js/bootstrap.bundle.js src/js/navbar-search-form.js > ./dist/deneb.js
+uglifyjs ./dist/deneb.js -c -m -o ./dist/deneb.min.js
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e56c2f9
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "bootstrap": "^5.2.1"
+  }
+}
diff --git a/src/css/_navbar-search-form.scss b/src/css/_navbar-search-form.scss
new file mode 100644
index 0000000..2e674cb
--- /dev/null
+++ b/src/css/_navbar-search-form.scss
@@ -0,0 +1,86 @@
+#searchform {
+  width: 100%;
+}
+
+.search-box.is-visible {
+  left: 10px;
+}
+
+.search-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transition: .4s ease;
+}
+
+.search-icon, .search-close {
+  padding-top: 12px;
+  border: 0;
+  background-color: transparent;
+}
+
+.form-icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  display: block;
+  width: 34px;
+  height: 34px;
+  padding-left: 5px;
+  padding-top: 6px;
+  line-height: 34px;
+  text-align: center;
+  pointer-events: none;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(100% - 60px);
+  right: 60px;
+  height: 50px;
+  z-index: 9;
+  background-color: $gnome-primary;
+  overflow: hidden;
+  transition: .25s ease;
+}
+
+.search-input {
+  width: 100%;
+  height: 40px;
+  padding-left: 30px;
+  margin-left: 5px;
+  color: $white;
+  background-color: rgba($white, .1);
+  font-size: 16px;
+  /*line-height: 28px;*/
+  border: none;
+  transition: all .35s ease;
+}
+
+@media (min-width: 768px) {
+  .search-icon, .search-close {
+    padding-top: 15px;
+  }
+  .search-box.is-visible {
+    left: 40px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .search-box {
+    left: calc(100% - 150px);
+    right: 150px;
+  }
+}
+
+@media (min-width: 992px) {
+  .search-box {
+    left: calc(100% - 40px);
+    right: 40px;
+  }
+}
diff --git a/src/styles/_navbar.scss b/src/css/_navbar.scss
similarity index 58%
rename from src/styles/_navbar.scss
rename to src/css/_navbar.scss
index 47278da..b8853b4 100644
--- a/src/styles/_navbar.scss
+++ b/src/css/_navbar.scss
@@ -1,75 +1,125 @@
 // Buttons in navbars
 //
 // Vertically center a button within a navbar (when *not* in a form).
-
-
-$bgDefault      : #4a86cf;
-$bgHighlight    : #3968a1;
-$colDefault     : #ffffff;
-$colHighlight   : #ffffff;
-$dropDown       : false;
+$bgDefault: #4a86cf;
+$bgHighlight: #3968a1;
+$colDefault: #ffffff;
+$colHighlight: #ffffff;
+$dropDown: false;
 .navbar-default {
   background-color: $bgDefault;
   border-color: $bgHighlight;
+
   .navbar-brand {
     color: $colDefault;
+
     &:hover, &:focus {
-      color: $colHighlight; }}
+      color: $colHighlight;
+    }
+  }
+
   .navbar-text {
-    color: $colDefault; }
+    color: $colDefault;
+  }
+
   .navbar-nav {
     > li {
       > a {
         color: $colDefault;
-        &:hover,  &:focus {
-          color: $colHighlight; 
+
+        &:hover, &:focus {
+          color: $colHighlight;
           background-color: rgba($colHighlight, .2)
-        }}
+        }
+      }
+
       @if $dropDown {
         > .dropdown-menu {
           background-color: $bgDefault;
+
           > li {
             > a {
               color: $colDefault;
-              &:hover,  &:focus {
+
+              &:hover, &:focus {
                 color: $colHighlight;
-                background-color: $bgHighlight; }}
+                background-color: $bgHighlight;
+              }
+            }
+
             > .divider {
-              background-color: $bgHighlight;}}}}}
+              background-color: $bgHighlight;
+            }
+          }
+        }
+      }
+    }
+
     @if $dropDown {
       .open .dropdown-menu > .active {
         > a, > a:hover, > a:focus {
           color: $colHighlight;
-          background-color: $bgHighlight; }}}
+          background-color: $bgHighlight;
+        }
+      }
+    }
+
     > .active {
       > a, > a:hover, > a:focus {
         color: $colHighlight;
-        background-color: $bgHighlight; }}
+        background-color: $bgHighlight;
+      }
+    }
+
     > .open {
       > a, > a:hover, > a:focus {
         color: $colHighlight;
-        background-color: $bgHighlight; }}}
+        background-color: $bgHighlight;
+      }
+    }
+  }
+
   .navbar-toggle {
     border-color: $bgHighlight;
+
     &:hover, &:focus {
-      background-color: $bgHighlight; }
+      background-color: $bgHighlight;
+    }
+
     .icon-bar {
-      background-color: $colDefault; }}
+      background-color: $colDefault;
+    }
+  }
+
   .navbar-collapse,
   .navbar-form {
-    border-color: $colDefault; }
+    border-color: $colDefault;
+  }
+
   .navbar-link {
     color: $colDefault;
+
     &:hover {
-      color: $colHighlight; }}}
+      color: $colHighlight;
+    }
+  }
+}
+
 @media (max-width: 767px) {
   .navbar-default .navbar-nav .open .dropdown-menu {
     > li > a {
       color: $colDefault;
+
       &:hover, &:focus {
-        color: $colHighlight; }}
+        color: $colHighlight;
+      }
+    }
+
     > .active {
       > a, > a:hover, > a:focus {
         color: $colHighlight;
-        background-color: $bgHighlight; }}}
+        background-color: $bgHighlight;
+      }
+    }
+  }
 }
diff --git a/src/styles/_variables.scss b/src/css/_variables.scss
similarity index 72%
rename from src/styles/_variables.scss
rename to src/css/_variables.scss
index d6799d7..bf9c2b3 100644
--- a/src/styles/_variables.scss
+++ b/src/css/_variables.scss
@@ -1,18 +1,12 @@
 /* Typography */
-/* ========================================================================== */
-
 $font-size-base: 0.875rem;
-
 $icon-font-path: "~/bootstrap-sass/assets/fonts/bootstrap/";
-
 $font-family-sans-serif: 'Source Sans Pro', Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial, 
sans-serif;
 $font-family-monospace: 'Source Code Pro', Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
 
 /* Colors */
-/* ========================================================================== */
-
-$white:  #ffffff !default;
-$black:  #000000 !default;
+$white: #ffffff !default;
+$black: #000000 !default;
 
 $gnome-primary: #4a86cf;
 $gnome-orange: #f57900;
@@ -20,24 +14,17 @@ $gnome-green: #4e9a06;
 $gnome-turquoise: #01808f;
 $gnome-purple: #692c52;
 
-
-
 /* Navbar */
-/* ========================================================================== */
-
 $navbar-default-bg: $gnome-primary;
 $navbar-default-link-color: $white;
 
-
 $border-radius-base: 2px;
 $gray-base: $black;
 $brand-primary: $gnome-primary;
 
-
 $btn-action-bg: #eee;
 $btn-action-border: darken($btn-action-bg, 5%);
 
 $btn-login-bg: #3e5e9f;
 $btn-login-color: $white;
 $btn-login-border: darken($btn-login-bg, 5%);
-
diff --git a/src/styles/animated-close-icon.scss b/src/css/animated-close-icon.scss
similarity index 93%
rename from src/styles/animated-close-icon.scss
rename to src/css/animated-close-icon.scss
index c1f7768..1d0b7b5 100644
--- a/src/styles/animated-close-icon.scss
+++ b/src/css/animated-close-icon.scss
@@ -1,7 +1,7 @@
 .navbar-toggle {
   border: none;
   background: transparent !important;
-  
+
   &:hover {
     background: transparent !important;
   }
@@ -10,13 +10,16 @@
     width: 22px;
     transition: all 0.2s;
   }
+
   .top-bar {
     transform: rotate(45deg);
     transform-origin: 10% 10%;
   }
+
   .middle-bar {
     opacity: 0;
   }
+
   .bottom-bar {
     transform: rotate(-45deg);
     transform-origin: 10% 90%;
@@ -24,11 +27,13 @@
 
   &.collapsed {
     .top-bar {
-      transform: rotate(0);      
+      transform: rotate(0);
     }
+
     .middle-bar {
       opacity: 1;
     }
+
     .bottom-bar {
       transform: rotate(0);
     }
diff --git a/src/css/buttons.scss b/src/css/buttons.scss
new file mode 100644
index 0000000..bf80f43
--- /dev/null
+++ b/src/css/buttons.scss
@@ -0,0 +1,15 @@
+.btn {
+  padding: 6px 30px;
+}
+
+.btn-wide {
+  padding: 4px 30px;
+}
+
+.btn-action {
+  @include button-variant($btn-action-bg, $btn-action-border);
+}
+
+.btn-login {
+  @include button-variant(transparent, transparent, transparent);
+}
diff --git a/src/css/footer.scss b/src/css/footer.scss
new file mode 100644
index 0000000..dc04447
--- /dev/null
+++ b/src/css/footer.scss
@@ -0,0 +1,31 @@
+.footer {
+  color: #919191;
+  background-color: $black;
+  padding-top: 40px;
+  padding-bottom: 20px;
+  margin-top: 80px;
+
+  a {
+    color: $white;
+    outline: 0;
+    transition: all .35s;
+    margin: 6px 0;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+}
+
+/* Sticky Footer */
+.gnome-body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.gnome-content {
+  flex: 1;
+}
diff --git a/src/css/header.scss b/src/css/header.scss
new file mode 100644
index 0000000..96c8b72
--- /dev/null
+++ b/src/css/header.scss
@@ -0,0 +1,71 @@
+.gnome-header {
+  padding-bottom: 90px;
+
+  .gnome-navbar-brand {
+    padding: 6px 6px 6px 0;
+    float: left;
+
+    img {
+      max-height: 35px;
+      min-width: 35px;
+    }
+  }
+
+  .avatar {
+    background-color: transparent !important;
+    margin: 10px 15px 10px 0;
+    padding: 0px;
+
+    img {
+      border-radius: 50%;
+      height: 30px;
+      width: 30px;
+    }
+  }
+
+  .dropdown-menu {
+    margin-top: 15px !important;
+    min-width: 220px;
+    padding: 15px 15px 5px;
+    box-shadow: none;
+  }
+
+  .user-menu {
+    a, button {
+      color: $body-color;
+    }
+  }
+}
+
+@media screen and (min-width: 767px) {
+  .gnome-header .dropdown-menu {
+    &:after {
+      position: absolute;
+      top: -11px;
+      left: 83%;
+      display: inline-block;
+      border-right: 11px solid transparent;
+      border-bottom: 11px solid #ffffff;
+      border-left: 11px solid transparent;
+      content: '';
+    }
+
+    &:before {
+      position: absolute;
+      top: -12px;
+      left: 83%;
+      display: inline-block;
+      border-right: 11px solid transparent;
+      border-bottom: 11px solid #ccc;
+      border-left: 11px solid transparent;
+      border-bottom-color: rgba(0, 0, 0, 0.2);
+      content: '';
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .gnome-header .gnome-navbar-brand {
+    margin-left: 15px;
+  }
+}
diff --git a/src/css/helpers.scss b/src/css/helpers.scss
new file mode 100644
index 0000000..d1a128b
--- /dev/null
+++ b/src/css/helpers.scss
@@ -0,0 +1,47 @@
+.m-r-0 {
+  margin-right: 0;
+}
+
+.m-l-0 {
+  margin-left: 0;
+}
+
+.m-t-0 {
+  margin-top: 0;
+}
+
+.m-b-0 {
+  margin-bottom: 0;
+}
+
+.p-r-0 {
+  padding-right: 0;
+}
+
+.p-l-0 {
+  padding-left: 0;
+}
+
+.p-t-0 {
+  padding-top: 0;
+}
+
+.p-b-0 {
+  padding-bottom: 0;
+}
+
+.form-control {
+  @include box-shadow(none); // Redeclare so transitions work
+  &:focus {
+    @include box-shadow(none);
+  }
+}
+
+.triangles {
+  background: transparent url('../images/triangles.png') no-repeat 95% 10%;
+}
+
+.col-centered {
+  float: none;
+  margin: 0 auto;
+}
diff --git a/src/styles/main.scss b/src/css/main.scss
similarity index 82%
rename from src/styles/main.scss
rename to src/css/main.scss
index f0a8634..6a58239 100644
--- a/src/styles/main.scss
+++ b/src/css/main.scss
@@ -1,5 +1,5 @@
 @import './_variables.scss';
-@import './scss/bootstrap.scss';
+@import '../../node_modules/bootstrap/scss/bootstrap';
 @import './_navbar.scss';
 @import './_navbar-search-form.scss';
 @import './header.scss';
diff --git a/src/css/typography.scss b/src/css/typography.scss
new file mode 100644
index 0000000..17604bb
--- /dev/null
+++ b/src/css/typography.scss
@@ -0,0 +1,31 @@
+html {
+  font-size: 100%;
+}
+
+h1, .h1 {
+  font-size: 2.4rem;
+  font-weight: 200;
+}
+
+h2, .h2 {
+  color: $gnome-primary;
+  font-weight: 400;
+  font-size: 1.5rem;
+
+}
+
+h3, .h3 {
+  font-weight: 300;
+  font-size: 1.3rem;
+}
+
+h4, .h4 {
+  color: #808080;
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.main_feature {
+  font-size: 14pt;
+  line-height: 130%;
+}
diff --git a/src/js/navbar-search-form.js b/src/js/navbar-search-form.js
new file mode 100644
index 0000000..2aab4e2
--- /dev/null
+++ b/src/js/navbar-search-form.js
@@ -0,0 +1,7 @@
+const searchbar = document.getElementById('.js-search');
+document.getElementById('.js-search-toggle').onclick = function () {
+    searchbar.parent.closest('div').classList.toggle('is-visible');
+    setTimeout(function () {
+        searchbar.focus()
+    }, 350)
+};
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]