sd-13: Changes made to start theme to allow for easier over-riding in…

… Watea
silverstripe · Mar 26, 2019 · 8df361d · 8df361d
1 parent 6ca61fa
commit 8df361d
Show file tree

Hide file tree

Showing 43 changed files with 1,141 additions and 66 deletions.
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/php.xml b/.idea/php.xml
diff --git a/.idea/scssLintPlugin.xml b/.idea/scssLintPlugin.xml
diff --git a/.idea/starter.iml b/.idea/starter.iml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/dist/css/editor.css b/dist/css/editor.css
@@ -452,7 +452,7 @@ h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   margin-bottom: 0.8rem;
   font-family: inherit;
-  font-weight: 500;
+  font-weight: 600;
   line-height: 1.2;
   color: inherit;
 }
@@ -6753,7 +6753,7 @@ table caption {
 }
 
 table thead td {
-  font-weight: 500;
+  font-weight: 600;
 }
 
 table tfoot td {
@@ -6883,18 +6883,6 @@ pre {
   font-size: 1.2rem;
 }
 
-header + .meta-info,
-h1 + .meta-info,
-.h1 + .meta-info,
-h2 + .meta-info,
-.h2 + .meta-info,
-h3 + .meta-info,
-.h3 + .meta-info,
-h4 + .meta-info,
-.h4 + .meta-info {
-  margin-top: -0.66666667rem;
-}
-
 body.mceContentBody a.ss-broken {
   background-color: #dc3545;
   border: 1px solid #dc3545;

diff --git a/dist/css/main.css b/dist/css/main.css
@@ -3411,7 +3411,7 @@ h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   margin-bottom: 0.8rem;
   font-family: inherit;
-  font-weight: 500;
+  font-weight: 600;
   line-height: 1.2;
   color: inherit;
 }
@@ -12589,6 +12589,13 @@ a.text-dark:hover, a.text-dark:focus {
   margin-bottom: 2em;
 }
 
+.no-margin-collapse {
+  /*  &:before {
+    content: " "; // 1
+    display: table; // 2
+  }*/
+}
+
 @media only print {
   .site-header-brand-link-default:after,
   #header-language-toggle,
@@ -12745,7 +12752,7 @@ table caption {
 }
 
 table thead td {
-  font-weight: 500;
+  font-weight: 600;
 }
 
 table tfoot td {
@@ -12875,18 +12882,6 @@ pre {
   font-size: 1.2rem;
 }
 
-header + .meta-info,
-h1 + .meta-info,
-.h1 + .meta-info,
-h2 + .meta-info,
-.h2 + .meta-info,
-h3 + .meta-info,
-.h3 + .meta-info,
-h4 + .meta-info,
-.h4 + .meta-info {
-  margin-top: -0.66666667rem;
-}
-
 .banner-element {
   -webkit-box-align: center;
       -ms-flex-align: center;
@@ -13013,6 +13008,10 @@ h4 + .meta-info,
   padding: 0.248em 0.744em;
 }
 
+.test123 {
+  color: #ffffff;
+}
+
 .comments-holder-container .comments-heading {
   border-top: 2px solid #6c757d;
   padding-top: 2.6rem;
@@ -13202,7 +13201,7 @@ h4 + .comments-holder-container .comments-holder .comments-list .comment .info,
   display: inline-block;
   max-width: 100%;
   margin-bottom: 0;
-  font-weight: 500;
+  font-weight: 600;
   border-bottom: 0;
   font-size: 1.6rem;
 }
@@ -13222,6 +13221,10 @@ body > header .open > a:focus {
 }
 
 .site-header {
+  /*  &:before {
+    content: " "; // 1
+    display: table; // 2
+  }*/
   padding-top: 30px;
   padding-bottom: 30px;
 }
@@ -13242,7 +13245,7 @@ body > header .open > a:focus {
 
 .site-header-brand a {
   font-size: 2.4rem;
-  font-weight: 500;
+  font-weight: 600;
   line-height: 1em;
 }
 
@@ -13324,7 +13327,7 @@ body > header .open > a:focus {
 }
 
 .main-nav .navbar-nav .nav-link {
-  padding: 10px 15px;
+  padding: 13px;
   position: relative;
   display: block;
 }
@@ -13383,7 +13386,7 @@ body > header .open > a:focus {
 }
 
 .main-nav .btn-link {
-  color: rgba(0, 0, 0, 0.6);
+  color: rgba(255, 255, 255, 0.5);
 }
 
 .navbar-touch-caret {
@@ -13392,7 +13395,7 @@ body > header .open > a:focus {
   top: 0;
   right: 0;
   border: 0;
-  padding: 1rem 1.6rem 1rem 8px;
+  padding: 1.3rem 1rem 1.3rem .8rem;
   border-radius: 0;
   background: transparent;
 }
@@ -13446,6 +13449,10 @@ body > header .open > a:focus {
   font-size: 1.4rem;
 }
 
+.news-events-article {
+  margin-bottom: 2.4rem;
+}
+
 .page-utilities {
   margin-top: 3rem;
 }
@@ -13485,6 +13492,13 @@ body > header .open > a:focus {
   }
 }
 
+.page-summary {
+  /*  &:before {
+    content: " "; // 1
+    display: table; // 2
+  }*/
+}
+
 @media (min-width: 768px) {
   .search-results-results-page {
     text-align: right;
@@ -13539,3 +13553,20 @@ body > header .open > a:focus {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+
+.btn-secondary.btn-primary {
+  background-color: #337ab7;
+  color: #fff;
+}
+
+.btn-toolbar .btn {
+  margin-left: 5px;
+}
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url("../../fonts/fontawesome-webfont.eot?v=4.7.0");
+  src: url("../../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("../../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../../fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("../../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/dist/fonts/.gitkeep b/dist/fonts/.gitkeep
diff --git a/src/scss/components/button.scss b/src/scss/components/button.scss
@@ -3,3 +3,15 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+
+// Work around to force primary colour if both classes are added to a button (FormActions)
+.btn-secondary.btn-primary {
+  background-color: $primary;
+  color: $white;
+}
+
+.btn-toolbar {
+  .btn {
+    margin-left: 5px;
+  }
+}
diff --git a/src/scss/components/comments.scss b/src/scss/components/comments.scss
@@ -1,6 +1,9 @@
 // Comments styles
 // Note: These styles don't follow the CSS theme conventions as they need to override the Comment Module styles
 
+.test123 {
+  color: #ffffff;
+}
 .comments-holder-container {
   .comments-heading {
     border-top: 2px solid $gray-600;

diff --git a/src/scss/components/fonts.scss b/src/scss/components/fonts.scss
@@ -0,0 +1,11 @@
+@font-face {
+  font-family:'FontAwesome';
+  src:url('../../fonts/fontawesome-webfont.eot?v=4.7.0');
+  src:url('../../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
+    url('../../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
+    url('../../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
+    url('../../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
+    url('../../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
+  font-weight:normal;
+  font-style:normal}
+
diff --git a/src/scss/components/header.scss b/src/scss/components/header.scss
@@ -3,6 +3,8 @@ body > header .open > a:focus {
 }
 
 .site-header {
+  @include no-margin-collapse;
+
   padding-top: 30px;
   padding-bottom: 30px;
 

diff --git a/src/scss/components/nav.scss b/src/scss/components/nav.scss
@@ -42,7 +42,7 @@
     }
 
     .nav-link {
-      padding: 10px 15px;
+      padding: 13px;
       position: relative;
       display: block;
     }
@@ -111,7 +111,7 @@
   }
 
   .btn-link {
-    color: $navbar-light-color;
+    color: $navbar-dark-color;
   }
 }
 
@@ -121,7 +121,7 @@
   top: 0;
   right: 0;
   border: 0;
-  padding: 1rem 1.6rem 1rem 8px;
+  padding: 1.3rem 1rem 1.3rem .8rem;
   border-radius: 0;
   background: $dropdown-caret-bg;
 }

diff --git a/src/scss/components/news-events.scss b/src/scss/components/news-events.scss
@@ -21,3 +21,7 @@
     font-size: $font-size-base * 0.875;
   }
 }
+
+.news-events-article {
+  margin-bottom: 2.4rem;
+}
diff --git a/src/scss/components/search.scss b/src/scss/components/search.scss
@@ -1,3 +1,7 @@
+.page-summary {
+  @include no-margin-collapse;
+}
+
 @include media-breakpoint-up(md) {
   .search-results-results-page {
     text-align: right;

diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -31,3 +31,5 @@
 @import "./components/search";
 @import "./components/sitemap";
 @import "./components/button";
+@import "./components/fonts";
+
diff --git a/src/scss/typography.scss b/src/scss/typography.scss
@@ -298,6 +298,6 @@ pre {
   .h3 + &,
   h4 + &,
   .h4 + & {
-    margin-top: -$line-height-computed / 3;
+    //margin-top: -$line-height-computed / 3;
   }
 }
diff --git a/src/scss/utils/helpers.scss b/src/scss/utils/helpers.scss
@@ -51,3 +51,7 @@
 .m-b-2 {
   margin-bottom: 2em;
 }
+
+.no-margin-collapse {
+  @include no-margin-collapse;
+}
diff --git a/src/scss/utils/mixins.scss b/src/scss/utils/mixins.scss
@@ -40,3 +40,10 @@
   margin-left: auto;
   margin-right: auto;
 }
+
+@mixin no-margin-collapse() {
+/*  &:before {
+    content: " "; // 1
+    display: table; // 2
+  }*/
+}
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
@@ -282,7 +282,7 @@ $h6-font-size:                ($font-size-base * 0.75) !default; // ~12px
 
 $headings-margin-bottom:      ($spacer / 2) !default;
 $headings-font-family:        inherit !default;
-$headings-font-weight:        500 !default;
+$headings-font-weight:        600 !default;
 $headings-line-height:        1.2 !default;
 $headings-color:              inherit !default;