wip: refactoring css vars

2sic · May 7, 2024 · 3dbe9f6 · 3dbe9f6
1 parent 1e42dbc
commit 3dbe9f6
Show file tree

Hide file tree

Showing 13 changed files with 155 additions and 73 deletions.
diff --git a/2shine BS5.dnn b/2shine BS5.dnn
@@ -1,5 +1,5 @@
 <dotnetnuke type="Package" version="5.0">
-  <packages><package name="2shine BS5" type="Skin" version="5.0.5">
+  <packages><package name="2shine BS5" type="Skin" version="5.3.3">
   <friendlyName>2shineBS5</friendlyName>
   <description>A clean, prepared bootstrap 5 skin for DNN (DotNetNuke), ready to make awesomeness - ideally combined with bootstrap content-templates.</description>
   <iconFile>/Images/icon_skin.gif</iconFile>
@@ -62,19 +62,19 @@
         </skinFile>
         <skinFile>
           <path>dist</path>
-          <name>theme.min.css</name>
+          <name>scripts.min.js</name>
         </skinFile>
         <skinFile>
           <path>dist</path>
-          <name>theme.min.css.map</name>
+          <name>scripts.min.js.map</name>
         </skinFile>
         <skinFile>
           <path>dist</path>
-          <name>theme.min.js</name>
+          <name>styles.min.css</name>
         </skinFile>
         <skinFile>
           <path>dist</path>
-          <name>theme.min.js.map</name>
+          <name>styles.min.css.map</name>
         </skinFile>
         <skinFile>
           <path>images\landingpage</path>
@@ -177,28 +177,28 @@
           <name>_typography.scss</name>
         </skinFile>
         <skinFile>
-          <path>src\scss\layout-variations</path>
-          <name>_variation-centered.scss</name>
+          <path>src\scss\layouts</path>
+          <name>_layout-centered.scss</name>
         </skinFile>
         <skinFile>
-          <path>src\scss\layout-variations</path>
-          <name>_variation-default.scss</name>
+          <path>src\scss\layouts</path>
+          <name>_layout-default.scss</name>
         </skinFile>
         <skinFile>
-          <path>src\scss\layout-variations</path>
-          <name>_variation-floatwideheader.scss</name>
+          <path>src\scss\layouts</path>
+          <name>_layout-floatwideheader.scss</name>
         </skinFile>
         <skinFile>
-          <path>src\scss\layout-variations</path>
-          <name>_variation-fullscreen.scss</name>
+          <path>src\scss\layouts</path>
+          <name>_layout-fullscreen.scss</name>
         </skinFile>
         <skinFile>
-          <path>src\scss\layout-variations</path>
-          <name>_variation-header.scss</name>
+          <path>src\scss\layouts</path>
+          <name>_layout-header.scss</name>
         </skinFile>
         <skinFile>
-          <path>src\scss\layout-variations</path>
-          <name>_variation-landingpage.scss</name>
+          <path>src\scss\layouts</path>
+          <name>_layout-landingpage.scss</name>
         </skinFile>
         <skinFile>
           <path>src\scss\modules</path>
@@ -214,20 +214,36 @@
         </skinFile>
         <skinFile>
           <path>src\scss</path>
-          <name>theme.scss</name>
+          <name>styles.scss</name>
         </skinFile>
         <skinFile>
           <path>src\scss</path>
-          <name>_page-customizations.scss</name>
+          <name>_custom-maps.scss</name>
+        </skinFile>
+        <skinFile>
+          <path>src\scss</path>
+          <name>_custom-pages.scss</name>
+        </skinFile>
+        <skinFile>
+          <path>src\scss</path>
+          <name>_custom-variables.scss</name>
         </skinFile>
         <skinFile>
           <path>src\scss</path>
           <name>_variables.scss</name>
         </skinFile>
+        <skinFile>
+          <path>src\ts</path>
+          <name>scripts.ts</name>
+        </skinFile>
         <skinFile>
           <path>src\ts</path>
           <name>theme.ts</name>
         </skinFile>
+        <skinFile>
+          <path>theme</path>
+          <name>theme.css</name>
+        </skinFile>
         <skinFile>
           <name>2shineBS5.zip</name>
         </skinFile>
@@ -285,6 +301,9 @@
         <skinFile>
           <name>readme.md</name>
         </skinFile>
+        <skinFile>
+          <name>Skeleton.ascx</name>
+        </skinFile>
         <skinFile>
           <name>skin.doctype.xml</name>
         </skinFile>

diff --git a/dist/styles.min.css b/dist/styles.min.css
diff --git a/dist/styles.min.css.map b/dist/styles.min.css.map
diff --git a/src/scss/components/_base-layout.scss b/src/scss/components/_base-layout.scss
@@ -6,6 +6,19 @@
       overflow-y: scroll;
       overflow-x: hidden;
       min-height: 100vh;
+      // background-color: var(--theme-backdrop-bg);
+
+      &::before {
+        content: "";
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: var(--theme-backdrop-bg);
+        clear: both;
+        z-index: -1;
+      }
 
       form#Form {
         min-height: 100vh;
@@ -33,7 +46,7 @@
         }
 
         footer {
-          background-color: var(--theme-bg);   
+          background-color: var(--theme-footer-bg);   
 
           a {
             color: var(--bs-link-color);

diff --git a/src/scss/components/_nav-breadcrumb.scss b/src/scss/components/_nav-breadcrumb.scss
@@ -6,7 +6,7 @@
   position: sticky;
   top: 82px;
   z-index: 10;
-  background: var(--bs-white);
+  background: var(--theme-breadcrumb-bg);
 
   @include media-breakpoint-down(lg) {
     top: 58px;

diff --git a/src/scss/components/_nav.scss b/src/scss/components/_nav.scss
@@ -27,7 +27,7 @@
   z-index: 801;
 
   &.navbar-expand-lg {
-    background-color: var(--theme-bg);
+    background-color: var(--theme-nav-bg);
   }
 
   .logo {

diff --git a/src/scss/layouts/_layout-centered.scss b/src/scss/layouts/_layout-centered.scss
@@ -13,17 +13,28 @@
     #theme-page-header-pane,
     footer#theme-page-footer,
     nav#theme-page-navigation {      
-      background: var(--bs-white);
       width: 100%;
       margin: 0 auto;
 
       @include media-breakpoint-up(xxl) {
         max-width: 1320px;
       }
     }   
-
+
+    main#theme-page-main {
+      background: var(--theme-page-main-bg);
+    }
+
+    #theme-page-header-pane {
+      background-color: var(--theme-nav-bg);
+    }    
+
+    nav#theme-page-navigation {
+      background-color: var(--theme-nav-bg);
+    }
+
     footer#theme-page-footer {
-      background-color: var(--theme-bg);
+      background-color: var(--theme-footer-bg);
     }
   }
 }
diff --git a/src/scss/layouts/_layout-default.scss b/src/scss/layouts/_layout-default.scss
@@ -6,9 +6,8 @@
         margin-top:50px;
       }
     }
-    main#theme-page-main,
-    footer#theme-page-footer {
-      background-color: var(--bs-white);
+    main#theme-page-main {
+      background-color: var(--theme-page-main-bg);
       width:100%;
       margin: 0 auto;
 
@@ -17,10 +16,13 @@
       }
     }
     footer#theme-page-footer { 
-      background-color: var(--theme-bg);
+      background-color: var(--theme-footer-bg);
+      width:100%;
+      margin: 0 auto;
 
       @include media-breakpoint-up(xxl) {
         margin-bottom:60px;
+        max-width: 1320px;
       }
     }
   }