TMS-1045: Change site bg-color to white

CHANGELOG.MD

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-1045: Style changes:
+    - Remove "Tampere Filharmonia" pseudo text-elements from hero
+    - Change hero CTA-button colors
+    - Change footer "Tampere"-logo color
+    - Change page background-color from grey to white
+    - Add borders to elements with a white background
+
 ## [1.12.2] - 2024-05-20
 
 - TMS-1028: Fix footer social-media icon color

assets/images/index.js

@@ -1,3 +1,4 @@
 import './tampere-filharmonia-pysty.svg';
 import './tampere-pysty.svg';
+import './tampere-vaakuna-color.svg';
 import './favicon.png';

assets/styles/blocks/_image-gallery.scss

@@ -13,5 +13,9 @@
         .icon {
             fill: currentColor !important;
         }
+
+        &.is-primary .icon {
+            fill: $primary !important;
+        }
     }
 }

assets/styles/layouts/_articles.scss

@@ -40,3 +40,13 @@
         font-weight: 700 !important;
     }
 }
+
+.Home,
+.layout-articles,
+.layout-blog-articles {
+    .highlight-article {
+        .has-background-secondary {
+            border: 1px solid $secondary-invert !important;
+        }
+    }
+}

assets/styles/layouts/_hero.scss

@@ -38,35 +38,6 @@
 
         @include from($desktop) {
             min-height: 36.198vw !important; // sass-lint:disable-line no-important
-
-            &::before,
-            &::after {
-                content: '';
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                z-index: 1;
-                width: 40px;
-                height: 100%;
-                background-repeat: no-repeat;
-                background-position-y: center;
-                background-size: contain;
-            }
-
-            &::before {
-                top: 7.5%;
-                bottom: 7.5%;
-                left: 0;
-                height: 85%;
-                background-image: url('images/tampere-pysty.svg');
-                background-position-x: 0;
-            }
-
-            &::after {
-                right: 0;
-                background-image: url('images/tampere-filharmonia-pysty.svg');
-                background-position-x: 100%;
-            }
         }
 
         @include from(1600px) {

assets/styles/layouts/_textblock.scss

@@ -0,0 +1,7 @@
+.layout-textblock {
+    &.has-background-primary {
+        h2 {
+            color: $primary-invert !important;
+        }
+    }
+}

assets/styles/layouts/index.scss

@@ -12,3 +12,4 @@
 @import "events";
 @import "logo-wall";
 @import "content-columns";
+@import "textblock";

assets/styles/overrides/_button.scss

@@ -1,7 +1,7 @@
 .button {
     &.is-primary {
         color: $primary-invert !important;
-        
+
         .icon {
             fill: $primary-invert !important;
         }
@@ -16,7 +16,7 @@
 
         &:hover,
         &:focus {
-            border-color: $primary-invert !important;
+            border-color: $primary !important;
         }
     }
 
@@ -27,7 +27,8 @@
             &:hover {
                 color: $primary !important;
                 background-color: $primary-invert !important;
-                border-color: $primary-invert !important;
+                border-color: $primary !important;
+                text-decoration: underline !important;
 
                 .icon {
                     fill: $primary !important;
@@ -39,8 +40,8 @@
             &.is-focused,
             &:focus {
                 color: $secondary-invert !important;
-                background-color: $primary-invert !important;
-                border-color: $primary-invert !important;
+                background-color: $tertiary !important;
+                border-color: $tertiary !important;
 
                 .icon {
                     fill: $secondary-invert !important;
@@ -73,8 +74,9 @@
             &.is-hovered,
             &:hover {
                 color: $secondary-invert !important;
-                background-color: $primary-invert !important;
-                border-color: $primary-invert !important;
+                background-color: $tertiary !important;
+                border-color: $secondary-invert !important;
+                text-decoration: underline !important;
 
                 .icon {
                     fill: $secondary-invert !important;

assets/styles/overrides/_colors.scss

@@ -33,3 +33,11 @@
         color: $secondary-invert;
     }
 }
+
+main {
+    .has-colors-white,
+    .has-background-secondary,
+    .has-colors-secondary {
+        border: 1px solid $secondary-invert;
+    }
+}

assets/styles/overrides/_events.scss

@@ -4,6 +4,8 @@
 
 .events {
     &__item {
+        border: 1px solid $secondary-invert;
+
         .pill {
             display: none;
         }

assets/styles/overrides/_footer.scss

@@ -16,6 +16,16 @@
     }
 
     &__tampere-vaakuna {
+        height: 40px;
+        background-image: url('images/tampere-vaakuna-color.svg');
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+
+        svg {
+            display: none;
+        }
+
         &:focus {
             outline-color: $black;
         }

assets/styles/overrides/_forms.scss

@@ -0,0 +1,12 @@
+/**
+ * Gravityforms
+ */
+.gform_wrapper {
+    form {
+        select,
+        input,
+        textarea {
+            border: 1px solid $secondary-invert;
+        }
+    }
+}

assets/styles/overrides/_grid.scss

@@ -5,7 +5,7 @@
 .grid {
     &__item {
         color: $secondary-invert !important;
-        background-color: $secondary !important;
+        border: 1px solid $secondary-invert;
 
         .button {
             color: $white !important;
@@ -22,6 +22,12 @@
             }
         }
 
+        &.has-colors-accent {
+            .button {
+                border-color: $white !important;
+            }
+        }
+
         &--featured {
             a {
                 &.button {

assets/styles/overrides/_header-top.scss

@@ -1,5 +1,4 @@
 .site-header {
-
     &__logo-image {
         @include from($tablet) {
             min-width: 10rem;
@@ -29,7 +28,7 @@
             padding-left: 1rem;
             border-color: $black !important;
             color: $black !important;
-    
+
             .icon {
                 fill: $black !important;
             }
@@ -43,11 +42,11 @@
             padding-top: 0;
             border-bottom-right-radius: 0.25rem;
             border-bottom-left-radius: 0.25rem;
-            
+
             .dropdown-content {
                 background-color: $secondary;
             }
-           
+
         }
 
     }

assets/styles/overrides/_share-links.scss

@@ -1,6 +1,7 @@
 .share-links {
     a {
         transition: box-shadow $easing $speed;
+        border: 1px solid $secondary-invert;
 
         &.is-hovered,
         &:hover {

assets/styles/overrides/index.scss

@@ -7,6 +7,7 @@
 @import "colors";
 @import "events";
 @import "fly-out-nav";
+@import "forms";
 @import "footer";
 @import "grid";
 @import "header-top";

assets/styles/theme-filharmonia.scss

@@ -11,14 +11,14 @@ $primary-light-invert: $color-white;
 $primary-dark: bulmaDarken($primary, 15);
 $primary-dark-invert: $color-white;
 
-$secondary: #dee3e3;
+$secondary: $color-white;
 $secondary-invert: $color-black;
 $secondary-light: bulmaLighten($secondary, 10);
 $secondary-light-invert: $color-black;
 $secondary-dark: bulmaDarken($secondary, 10);
 $secondary-dark-invert: $color-black;
 
-$tertiary: $color-white;
+$tertiary: #dee3e3;
 $tertiary-invert: $color-black;
 
 $light: $primary-light;