[gnome-bootstrap-theme] feat: update index page

From: Guillaume Bernard <gbernard src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-bootstrap-theme] feat: update index page
Date: Sun, 25 Sep 2022 13:25:04 +0000 (UTC)
commit c96cfc43ded7dd38dd3818a85d52b1cdb03b5119
Author: Guillaume Bernard <associations guillaume-bernard fr>
Date:   Sun Sep 25 15:08:42 2022 +0200

    feat: update index page

 index.html           | 353 +++++++++++++++++++++++++--------------------------
 src/css/_navbar.scss |   8 +-
 src/css/header.scss  |  34 +----
 3 files changed, 185 insertions(+), 210 deletions(-)
---
diff --git a/index.html b/index.html
index b001218..1185e4c 100644
--- a/index.html
+++ b/index.html
@@ -1,204 +1,201 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<!-- Good morning, GNOME -->
 <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="theme-color" content="#4a86cf">
-    <meta name="application-name" content="GNOME.org Website">
-    <link rel="icon" type="image/png" href="src/images/favicon.ico" />
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="theme-color" content="#4a86cf">
+  <meta name="application-name" content="GNOME.org Website">
+  <link rel="icon" type="image/png" href="src/images/favicon.ico"/>
+  <title>GNOME Deneb</title>
+  <link href="dist/deneb.css" rel="stylesheet">
+  <style>
+      section {
+          padding: 40px 0;
+          border-bottom: 1px solid #e7e7e7;
+      }
 
-    <title>GNOME Deneb</title>
-    <link href="deneb.css" rel="stylesheet">
+      .bg-dark {
+          background: #f6f6f6;
+      }
 
-<style>
-section {
-    padding: 40px 0;
-    border-bottom: 1px solid #e7e7e7;
-}
-.bg-dark {
-    background: #f6f6f6;
-}
-.fake-nav {
-    background-color: #4a86cf;
-    height: 50px;
-}
-.color-panels {
-    float: left;
-    width: 60px;
-    height: 60px;
-    margin: 0 5px;
-    border-radius: 3px;
-}
-</style>
+      .fake-nav {
+          background-color: #4a86cf;
+          height: 50px;
+      }
+
+      .color-panels {
+          float: left;
+          width: 60px;
+          height: 60px;
+          margin: 0 5px;
+          border-radius: 3px;
+      }
+  </style>
 </head>
 <body class="gnome-body">
 
-    <header class="gnome-header">
-        <nav class="navbar navbar-fixed-top navbar-default affix-top">
-            <div class="container">
-                <div class="navbar-header">
-                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
data-target="#navbar-wrapper" aria-expanded="false">
-                        <span class="sr-only">Toggle navigation</span>
-                        <span class="icon-bar top-bar"></span>
-                        <span class="icon-bar middle-bar"></span>
-                        <span class="icon-bar bottom-bar"></span>
-                    </button>
-                    <button aria-label="Search" class="search-icon search-icon-mobile js-search-toggle 
visible-xs-block pull-right" type="button"><img src="src/images/search-icon.svg"></button>
-                    <a class="gnome-navbar-brand"  title="Go to home page">
-                        <img src="src/images/gnome-logo.svg" alt="GNOME: The Free Software Desktop Project">
-                    </a>
-                </div>
+<header class="gnome-header">
+  <nav class="navbar navbar-collapse navbar-expand-lg navbar-default">
+    <div class="container" id="navbar-wrapper">
 
-                <div class="search-box js-search-box">
-                  <form role="search" method="get" id="searchform" action="#">
-                      <input id="search_input" name="q" placeholder="Search" class="search-input js-search" 
type="text">
-                      <span class="form-icon"><img alt="Search icon that opens the searchbar" 
src="https://static.gnome.org/img/search-icon.svg";></span>
-                     <button aria-label="Close search" class="search-close js-search-toggle" 
type="button"><img src="https://static.gnome.org/img/close-icon.svg"; alt="Icon that closes the 
searchbar"></button>
-                  </form>
-                </div>
+      <a class="gnome-navbar-brand" href="#" title="Go to home page">
+        <img src="src/images/gnome-logo.svg" alt="GNOME: The Free Software Desktop Project">
+      </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">
+        <span class="navbar-toggler-icon"></span>
+      </button>
 
-                <div class="nav navbar-nav navbar-right">
-                    <li class="hidden-xs">
-                        <button aria-label="Search" class="search-icon js-search-toggle" type="button"><img 
src="src/images/search-icon.svg" alt="Search icon that opens the searchbar"></button>
-                    </li>
+      <div class="collapse navbar-collapse my-1 my-sm-0 my-md-0 my-lg-0 my-xl-0" id="navbarSupportedContent">
+        <ul class="nav navbar-nav">
+          <li class="nav-item active">
+            <a href="#" class="nav-link">Application</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" 
aria-expanded="false">
+              Sign in
+            </a>
+            <a href="#" class="dropdown-toggle d-block d-sm-none d-md-none d-lg-none d-xl-none" id="drop3"
+               data-toggle="dropdown" role="button"
+               aria-haspopup="true" aria-expanded="false"><img src="src/images/avatar-icon.svg" alt="Avatar 
Icon"></a>
+            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="drop3">
+              <form action="#" method="post" class="form">
+                <div class="form-group my-1">
+                  <input name="username" id="id_username" class="form-control" placeholder="Username" 
type="text">
                 </div>
-                <div class="nav navbar-nav navbar-right">
-                <li id="userDropdownMenu1" class="dropdown">
-                <a href="#" class="dropdown-toggle btn btn-wide btn-login hidden-xs" id="drop3" 
data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sign In</a> 
-                <a href="#" class="dropdown-toggle visible-xs" id="drop3" data-toggle="dropdown" 
role="button" aria-haspopup="true" aria-expanded="false"><img src="src/images/avatar-icon.svg"></a>
-                        <ul class="dropdown-menu" aria-labelledby="drop3">
-                            <li>
-                                <div class="row">
-                                    <div class="col-sm-12">
-                                        <form action="#" method="post" class="form">
-                                            <div class="form-group">
-                                                <input name="username" id="id_username" class="form-control" 
placeholder="Username" type="text">
-                                            </div>
-                                            <div class="form-group">
-                                                <input name="password" id="id_password" class="form-control" 
placeholder="Password" type="password">
-                                            </div>
-                                            <div class="form-group">
-                                                <button type="submit" class="btn btn-primary btn-block">Sign 
In</button>
-                                            </div>
-                                            <div class="form-group">
-                                                <a href="#" class="">Forgot your password?</a>
-                                            </div>
-                                            <li class="divider"></li>
-                                            <p>Don’t have an account?</p>
-                                            <div class="form-group">
-                                                <a href="#" class="btn btn-action btn-block">Sign Up</a>
-                                            </div>
-                                        </form>
-                                    </div>
-                                </div>
-                            </li>
-                        </ul>
-                        </li>
+                <div class="form-group my-1">
+                  <input name="password" id="id_password" class="form-control" placeholder="Password"
+                         type="password">
                 </div>
-                <ul class="nav navbar-nav navbar-right">
-                    <li id="userDropdownMenu" class="dropdown">
-                        <a href="#" class="dropdown-toggle hidden-xs avatar" data-toggle="dropdown" 
role="button" aria-haspopup="true" aria-expanded="false">
-                            <img src="https://unsplash.it/g/200?image=972"; alt="">
-                        </a>
-                        <ul class="dropdown-menu user-menu">
-                            <li>
-                                <div class="row">
-                                    <div class="col-sm-12">
-                                        <a class="btn btn-link" href="#">User Settings</a>
-                                        <a class="btn btn-link" href="#">Menu item</a>
-                                        <a class="btn btn-link" href="#">Menu item</a>
-                                            <form action="#" method="post" class="form">
-                                                <div class="form-group">
-                                                    <button type="submit" class="btn btn-link">Sign 
Out</button>
-                                                </div>
-                                            </form>
-                                    </div>
-                                </div>
-                            </li>
-                        </ul>
-                    </li>
-                </ul>
-                <div class="navbar-collapse collapse" id="navbar-wrapper">
-                    <ul class="nav navbar-nav">
-                        <li> <a href="#">Menu item</a></li>
-                        <li> <a href="#">Menu item</a></li>
-                        <li class="active"> <a href="#">Menu item</a></li>
-                        <li> <a href="#">Menu item</a></li>
-                        <li> <a href="#">Menu item</a></li>
-                    </ul>
-            </div>
-        </nav>
-    </header>
-
-    <div class="gnome-content">
-        <section>
-            <div class="container">
-                <div class="row">
-                    <div class="col-xs-12">
-                        <p class="h1 m-t-0">GNOME Deneb</p> Bootstrap theme for GNOME Websites
-                    </div>
+                <div class="form-group my-1">
+                  <button type="submit" class="btn btn-primary w-100">Sign In</button>
                 </div>
-            </div>
-        </section>
-        <section class="bg-dark">
-            <div class="container">
-                <div class="row">
-                    <div class="col-xs-12 col-md-3">
-                        <p class="h1">Typography</p>
-                    </div>
-                    <div class="col-xs-12 col-md-5">
-                        <p class="h1">Heading 1</p>
-                        <p class="h2">Heading 2</p>
-                        <p class="h3">Heading 3</p>
-                        <p class="h4">Heading 4</p>
-                        <p>Body Text</p>
-                    </div>
+                <div class="form-group">
+                  <a href="#" class="nav-link">Forgot your password?</a>
                 </div>
+              </form>
+              <hr class="dropdown-divider"></hr>
+              <h6 class="h6 text-center">Don’t have an account?</h6>
+              <div class="form-group my-1">
+                <a href="#" class="btn btn-action w-100">Sign Up</a>
+              </div>
             </div>
-        </section>
-        <section>
-            <div class="container">
-                <div class="row">
-                    <div class="col-xs-12 col-md-3">
-                        <p class="h1 m-t-0">Buttons</p>
-                    </div>
-                    <div class="col-xs-12 col-md-5">
-                        <a href="#" class="btn btn-primary">Button</a>
-                        <a href="#" class="btn btn-success">Button</a>
-                        <a href="#" class="btn btn-default">Button</a>
-                        <a href="#" class="btn btn-action">Button</a>
-                    </div>
-                    <div class="col-xs-12 col-md-4">
+          </li>
+
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" 
aria-expanded="false">
+              Dropdown link
+            </a>
+            <ul class="dropdown-menu dropdown-menu-end">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </li>
+
+          <li class="nav-item dropdown">
+            <a href="#" class="dropdown-toggle nav-link avatar" data-bs-toggle="dropdown" role="button"
+               aria-expanded="false"><img src="https://unsplash.it/g/200?image=972"; alt=""></a>
+            <ul class="dropdown-menu dropdown-menu-end">
+              <li><a class="dropdown-item" href="#">User Settings</a></li>
+              <li><a class="dropdown-item active" href="#">Menu item</a></li>
+              <li><a class="dropdown-item" href="#">Menu item</a>
+              <li>
+                <form action="#" method="post" class="form">
+                  <div class="form-group">
+                    <button type="submit" class="dropdown-item">Sign Out</button>
+                  </div>
+                </form>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+
+      <ul class="navbar-nav float-end">
+        <li>
+          <form class="d-flex float-end" role="search">
+            <div class="input-group">
+              <input class="form-control" type="search" placeholder="Search" aria-label="Search">
+              <button class="btn btn-action px-2" type="button">
+                <i class="fa-sharp fa-solid fa-magnifying-glass"></i>
+              </button>
+            </div>
+          </form>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</header>
+
+<div class="gnome-content">
+  <section>
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-12">
+          <p class="h1 m-t-0">GNOME Deneb</p> Bootstrap theme for GNOME Websites
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="bg-dark">
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-12 col-md-3">
+          <p class="h1">Typography</p>
+        </div>
+        <div class="col-xs-12 col-md-5">
+          <p class="h1">Heading 1</p>
+          <p class="h2">Heading 2</p>
+          <p class="h3">Heading 3</p>
+          <p class="h4">Heading 4</p>
+          <p>Body Text</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section>
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-12 col-md-3">
+          <p class="h1 m-t-0">Buttons</p>
+        </div>
+        <div class="col-xs-12 col-md-5">
+          <a href="#" class="btn btn-primary">Button</a>
+          <a href="#" class="btn btn-success">Button</a>
+          <a href="#" class="btn btn-default">Button</a>
+          <a href="#" class="btn btn-action">Button</a>
+        </div>
+        <div class="col-xs-12 col-md-4">
                         <pre>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Button&lt;/a&gt;
     &lt;a href=&quot;#&quot; class=&quot;btn btn-success&quot;&gt;Button&lt;/a&gt;
     &lt;a href=&quot;#&quot; class=&quot;btn btn-default&quot;&gt;Button&lt;/a&gt;
     &lt;a href=&quot;#&quot; class=&quot;btn btn-action&quot;&gt;Button&lt;/a&gt;</pre>
-                    </div>
-                </div>
-            </div>
-        </section>
-    </div>
-    <div class="footer m-t-0">
-        <div class="container triangles">
-            <div class="row">
-                <div class="col-xs-12">
-                    <p>
-                    &copy; <a href="//gnome.org"> The GNOME Project</a>
-                    </p>
-                    <p>
-                    GNOME Website Example.
-                    Hosted by <a href="#" target="_blank">Host Provider</a>.
-                    Powered by <a href="#" target="_blank">Service</a>.
-                    </p>
-                </div>
-            </div>
         </div>
+      </div>
+    </div>
+  </section>
+</div>
+<div class="footer m-t-0">
+  <div class="container triangles">
+    <div class="row">
+      <div class="col-xs-12">
+        <p>
+          &copy; <a href="//gnome.org"> The GNOME Project</a>
+        </p>
+        <p>
+          GNOME Website Example.
+          Hosted by <a href="#" target="_blank">Host Provider</a>.
+          Powered by <a href="#" target="_blank">Service</a>.
+        </p>
+      </div>
     </div>
+  </div>
+</div>
 
-<script src="https://code.jquery.com/jquery-2.1.4.min.js";></script>
-<script src="deneb.js"></script>
+<script src="dist/deneb.js"></script>
 
 </body>
 </html>
diff --git a/src/css/_navbar.scss b/src/css/_navbar.scss
index b8853b4..aa968fb 100644
--- a/src/css/_navbar.scss
+++ b/src/css/_navbar.scss
@@ -9,6 +9,8 @@ $dropDown: false;
 .navbar-default {
   background-color: $bgDefault;
   border-color: $bgHighlight;
+  padding-top: 0;
+  padding-bottom: 0;
 
   .navbar-brand {
     color: $colDefault;
@@ -26,6 +28,8 @@ $dropDown: false;
     > li {
       > a {
         color: $colDefault;
+        padding-top: 15px;
+        padding-bottom: 15px;
 
         &:hover, &:focus {
           color: $colHighlight;
@@ -66,8 +70,8 @@ $dropDown: false;
 
     > .active {
       > a, > a:hover, > a:focus {
-        color: $colHighlight;
-        background-color: $bgHighlight;
+        color: $colHighlight !important;
+        background-color: $bgHighlight !important;
       }
     }
 
diff --git a/src/css/header.scss b/src/css/header.scss
index 96c8b72..0d9c4cb 100644
--- a/src/css/header.scss
+++ b/src/css/header.scss
@@ -2,6 +2,7 @@
   padding-bottom: 90px;
 
   .gnome-navbar-brand {
+    @extend .navbar-brand;
     padding: 6px 6px 6px 0;
     float: left;
 
@@ -13,8 +14,8 @@
 
   .avatar {
     background-color: transparent !important;
-    margin: 10px 15px 10px 0;
-    padding: 0px;
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
 
     img {
       border-radius: 50%;
@@ -26,7 +27,7 @@
   .dropdown-menu {
     margin-top: 15px !important;
     min-width: 220px;
-    padding: 15px 15px 5px;
+    padding: 15px 15px 15px;
     box-shadow: none;
   }
 
@@ -37,33 +38,6 @@
   }
 }
 
-@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;
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]