From 1fb9f04e01270bed852b6b51be3f5a8e41275b9e Mon Sep 17 00:00:00 2001
From: Bill Quith <chinbillybilbo@gmail.com>
Date: Sat, 17 Dec 2022 23:18:54 +0000
Subject: [PATCH] Modify basic theme

- First pass at basic theme.
- Colour theme based on https://www.canva.com/colors/color-palettes/foil-covered-sneakers/
- Menus, header, and headings softened.
---
 src/moin/themes/basic/static/css/theme.css    | 83 +++++++++++++------
 .../static/custom-less/moin-variables.less    | 21 +++--
 .../basic/static/custom-less/theme.less       | 32 +++++--
 src/moin/themes/basic/templates/layout.html   |  2 +-
 4 files changed, 98 insertions(+), 40 deletions(-)

diff --git a/src/moin/themes/basic/static/css/theme.css b/src/moin/themes/basic/static/css/theme.css
index 55566a0a6..a1c0a26cc 100644
--- a/src/moin/themes/basic/static/css/theme.css
+++ b/src/moin/themes/basic/static/css/theme.css
@@ -5882,6 +5882,17 @@ button.close {
 ul.moin-pull-right {
   float: right !important;
 }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  padding-left: 0.5em;
+  background-color: #E9EAEC;
+  border-radius: 7px;
+  border-bottom: 1px solid #90ADC6;
+}
 h1:hover .moin-permalink,
 h2:hover .moin-permalink,
 h3:hover .moin-permalink,
@@ -5897,6 +5908,15 @@ h6:focus .moin-permalink {
   display: inline;
   text-decoration: none;
 }
+h1 {
+  font-size: 1.75em;
+}
+h2 {
+  font-size: 1.5em;
+}
+.btn-primary {
+  background-color: #90ADC6;
+}
 .moin-permalink {
   display: none;
 }
@@ -5916,10 +5936,10 @@ h6:focus .moin-permalink {
   padding: 10px 15px;
   margin-bottom: -1px;
   background-color: #fff;
-  text-align: left;
+  text-align: center;
   padding: 2px 10px;
-  background-color: #c8ddf1;
-  border: 1px solid #c8ddf1;
+  background-color: white;
+  border: 1px solid #E9EAEC;
   width: 100%;
   color: #428bca;
   border: 1px solid #ddd;
@@ -5942,7 +5962,7 @@ h6:focus .moin-permalink {
   margin-right: 5px;
 }
 .moin-user-action-special > a {
-  color: #00417F;
+  color: white;
 }
 .moin-user-action-special:hover,
 .moin-user-action-special:focus,
@@ -5958,7 +5978,7 @@ h6:focus .moin-permalink {
   float: right;
 }
 a.moin-showhide {
-  color: #c8ddf1;
+  color: #90ADC6;
 }
 a:focus.moin-showhide {
   outline-width: 0;
@@ -5967,23 +5987,26 @@ a:focus.moin-showhide {
   margin: 7px 10px;
 }
 .list-group-item {
-  text-align: left;
+  text-align: center;
   padding: 2px 10px;
-  background-color: #c8ddf1;
-  border: 1px solid #c8ddf1;
+  background-color: white;
+  border: 1px solid #E9EAEC;
 }
 .list-group-item > a {
-  color: #00417F;
+  color: white;
+}
+a.list-group-item.wikilink {
+  color: #90ADC6;
 }
 .moin-list-heading {
-  background-color: #00417F;
-  border: 1px solid #00417F;
-  font-variant: small-caps;
-  color: #c8ddf1;
-  border-radius: 4px;
+  background-color: #E9EAEC;
+  border: 1px solid #E9EAEC;
+  color: #90ADC6;
+  margin-bottom: 0.5em;
+  border-radius: 7px;
 }
 .moin-list-heading > a {
-  color: #c8ddf1;
+  color: #90ADC6;
 }
 .moin-nav {
   margin-bottom: 0;
@@ -6061,9 +6084,10 @@ a:focus.moin-showhide {
 .moin-navbar-inverse {
   background-color: #222;
   border-color: #080808;
-  background-color: #00417F;
+  background-color: #E9EAEC;
   padding-left: 0px;
   padding-right: 0px;
+  border-color: #E9EAEC;
 }
 .moin-navbar-inverse .navbar-brand {
   color: #999999;
@@ -6151,19 +6175,24 @@ a:focus.moin-showhide {
   color: #fff;
 }
 .moin-navbar-inverse .navbar-nav > li > a {
-  color: #cce6ff;
+  color: #90ADC6;
 }
 .moin-navbar-inverse .navbar-nav > li > a.active {
   color: #fff;
 }
 .moin-navbar-inverse .navbar-text {
-  color: #cce6ff;
+  color: #90ADC6;
 }
 .moin-navbar-inverse .navbar-text > a {
-  color: #cce6ff;
+  color: #90ADC6;
 }
 .moin-navbar-inverse .navbar-brand {
-  color: #cce6ff;
+  color: #90ADC6;
+}
+.moin-button {
+  background-color: #E9EAEC;
+  color: #333652;
+  border-color: #cccccc;
 }
 .moin-navbar-user > ul.nav > li,
 .moin-navbar-user > ul.nav > li > a {
@@ -6179,12 +6208,12 @@ a:focus.moin-showhide {
 .moin-quicklink {
   position: relative;
   padding: 2px 10px 2px 10px;
-  background-color: #c8ddf1;
-  border: 1px solid #c8ddf1;
+  background-color: #90ADC6;
+  border: 1px solid #90ADC6;
   margin-bottom: -1px;
 }
 .moin-quicklink > a {
-  color: #00417F;
+  color: white;
 }
 .moin-quicklink:last-child {
   margin-bottom: 0;
@@ -6300,7 +6329,7 @@ a:focus.moin-showhide {
   font-weight: normal;
 }
 a.wikilink {
-  color: #00417F;
+  color: white;
 }
 .moin-alias {
   z-index: 500;
@@ -6328,7 +6357,7 @@ a.wikilink {
   padding: 0px;
 }
 ul.moin-breadcrumb ul.moin-alias {
-  background-color: #00417F;
+  background-color: white;
   border-radius: 6px;
 }
 ul.moin-breadcrumb,
@@ -6382,8 +6411,8 @@ body {
 .moin-search-option-bar {
   padding-left: 10px;
   border: 1px solid #555555;
-  background-color: #00417F;
-  color: #c8ddf1;
+  background-color: white;
+  color: #90ADC6;
   border-radius: 5px;
 }
 .moin-search-option-bar > span {
diff --git a/src/moin/themes/basic/static/custom-less/moin-variables.less b/src/moin/themes/basic/static/custom-less/moin-variables.less
index 3802f3d29..aa366b619 100644
--- a/src/moin/themes/basic/static/custom-less/moin-variables.less
+++ b/src/moin/themes/basic/static/custom-less/moin-variables.less
@@ -1,3 +1,10 @@
+
+// https://www.canva.com/colors/color-palettes/foil-covered-sneakers/
+ @theme-col-1: #90ADC6; // Blue Gray
+ @theme-col-2: #E9EAEC; // Pewter
+ @theme-col-3: #FAD02C; // Yellow
+ @theme-col-4: #333652; // Dark Blue
+
 // Links
 // -------------------------
 @link-nonexistent-color: lighten(@brand-danger, 15%);
@@ -6,26 +13,26 @@
 
 // Moin-Inverted Navbar
 //----------------------
-@moin-navbar-inverse-color:                    #00417F;
-@moin-navbar-inverse-bgcolor:                  #00417F;
-@moin-navbar-inverse-textcolor:                lighten(@moin-navbar-inverse-color, 65%);
+@moin-navbar-inverse-color:                    @theme-col-2;
+@moin-navbar-inverse-bgcolor:                  @theme-col-2;
+@moin-navbar-inverse-textcolor:                @theme-col-1;
 
 // Large screen / wide desktop
 @container-large-desktop:   1300px;
 @container-tablet:          728px;
 
 // Darker-Navbar and List heading background
-@navbar-bg: #00417F;
+@navbar-bg: @theme-col-2;
 
 // Search
 // -------------------------
 @searchstats_color:              #808080;
-@search_option_bar_color:        #00417F;
-@search_option_bar_text_color:   #c8ddf1;
+@search_option_bar_color:        white;
+@search_option_bar_text_color:   @theme-col-1;
 
 // Bootstrap
 // -------------------------
-@bootstrap_default_blue:         #428bca;
+@bootstrap_default_blue:         @theme-col-1;
 
 // General colors
 // -------------------------
diff --git a/src/moin/themes/basic/static/custom-less/theme.less b/src/moin/themes/basic/static/custom-less/theme.less
index ba017f3db..127e5cc96 100644
--- a/src/moin/themes/basic/static/custom-less/theme.less
+++ b/src/moin/themes/basic/static/custom-less/theme.less
@@ -15,6 +15,11 @@ ul.moin-pull-right {
 
 
 h1, h2, h3, h4, h5, h6 {
+  padding-left: 0.5em;
+  background-color: @theme-col-2;
+  border-radius: 7px;
+  border-bottom: 1px solid @theme-col-1;
+
   &:hover, &:focus {
     .moin-permalink {
       display: inline;
@@ -23,6 +28,13 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
+h1 { font-size: 1.75em; }
+h2 { font-size: 1.5em; }
+
+.btn-primary {
+  background-color: @theme-col-1;
+}
+
 .moin-permalink {
   display: none;
 }
@@ -72,21 +84,24 @@ a:focus.moin-showhide {
 }
 
 .list-group-item {
-  text-align: left;
+  text-align: center;
   padding: 2px 10px;
-  background-color: @search_option_bar_text_color;
-  border: 1px solid @search_option_bar_text_color;
+  background-color: white;
+  border: 1px solid @theme-col-2;
   > a {
     color: @search_option_bar_color;
   }
 }
+a.list-group-item.wikilink {
+  color: @theme-col-1;
+}
 
 .moin-list-heading {
   background-color: @navbar-bg;
   border: 1px solid @navbar-bg;
-  font-variant: small-caps;
   color: @search_option_bar_text_color;
-  border-radius: 4px;
+  margin-bottom: 0.5em;
+  border-radius: 7px;
   > a {
     color: @search_option_bar_text_color;
   }
@@ -138,6 +153,7 @@ a:focus.moin-showhide {
   background-color: @moin-navbar-inverse-bgcolor;
   padding-left: 0px;
   padding-right: 0px;
+  border-color: @theme-col-2;
   .navbar-nav {
     > li > a {
       color: @moin-navbar-inverse-textcolor;
@@ -157,6 +173,12 @@ a:focus.moin-showhide {
   }
 }
 
+.moin-button {
+  background-color: @theme-col-2;
+  color: @theme-col-4;
+  border-color: #cccccc;
+}
+
 .moin-navbar-user > ul.nav > li,
 .moin-navbar-user > ul.nav > li  > a {
   display: inline;
diff --git a/src/moin/themes/basic/templates/layout.html b/src/moin/themes/basic/templates/layout.html
index cb144de6b..8707956dc 100644
--- a/src/moin/themes/basic/templates/layout.html
+++ b/src/moin/themes/basic/templates/layout.html
@@ -71,7 +71,7 @@
     <div class="container-fluid">
         <div id="moin-main-wrapper" class="row">
 
-            <header class="col-md-2 col-sm-3 col-xs-4 moin-sidebar">
+            <header class="col-md-2 col-sm-2 col-xs-4 moin-sidebar">
                 <div class="moin-logo">
                     {% if logo %}
                         <a href="{{ url_for('frontend.show_item', item_name=cfg.item_root) }}">