Moving CSS and updating with new colors and design

themes/nluug/assets/scss/_colors.scss

@@ -24,6 +24,7 @@ $midnight-blue-light: #7D7DA6;
 $magenta-dark: #FA198B;
 $magenta-medium: #FB47A2;
 $magenta-light: #FC75B9;
+$magenta-lightest: #FFDCEE;
 
 // Persian green
 $persian-green-dark: #1B998B;
@@ -55,6 +56,10 @@ $color-button-call-to-action: $midnight-blue-dark;
 //$color-button-call-to-action-hover: #0F6D06; // %25 donkerder dan #138808 met encycolorpedia
 $color-button-call-to-action-hover: $midnight-blue-medium;
 
+// Variatie CTA-knop
+$color-button-call-to-action2: $magenta-dark;
+$color-button-call-to-action2-hover: $magenta-medium;
+
 $color-footer-background: $persian-green-light;
 $color-footer-text: $raisin-black-dark;
 
@@ -68,7 +73,7 @@ $color-highlight-box-other-background: $magenta-light;
 //$color-highlight-box-nluug-border: #6A2060;
 $color-highlight-box-nluug-border: $magenta-medium;
 //$color-highlight-box-nluug-background: #F5E1ED;
-$color-highlight-box-nluug-background: $magenta-light;
+$color-highlight-box-nluug-background: $magenta-lightest;
 
 //$color-border: #6A2060;
 $color-border: #26266B;

themes/nluug/assets/scss/styles.scss

@@ -11,8 +11,9 @@ body {
     padding: 1.0rem;
     // background: hsla(93, 0%, 96%, 1.00);
     //color: #2E2E2E;
-    color: #222226;
+    //color: #222226;
-    max-width: 1024px;
+    color: #333333;
+    max-width: 1180px;
     margin: 0 auto;
 }
 
@@ -71,64 +72,6 @@ h4, h5, strong, b {
     font-size: inherit;
     font-weight: 600;
 }
-// Highlight-box om bijvoorbeeld onze evenementen opvallend op homepage te laten zien
-.highlight-box {
-  border-radius: 6px;
-  margin: 2px;
-  padding: 20px;
-}
-
-// Events voor alleen NLUUG-leden krijgen een andere kleur dan events in samenwerking met of die extra aandacht nodig hebben.
-.highlight-box-nluug {
-  background-color: $color-highlight-box-nluug-background;
-  border: 1px solid $color-highlight-box-nluug-border;
-}
-.highlight-box-other {
-  background-color: $color-highlight-box-other-background;
-  border: 1px solid $color-highlight-box-other-border;
-}
-
-
-.link {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-decoration: none;
-}
-
-a.button:link, a.button:visited {
-  background-color: $color-button;
-  border-radius: 4px;
-  color: white;
-  padding: 14px 25px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-}
-
-a.button:hover, a.button:active {
-  background-color: $color-button-hover;
-}
-
-// Button
-.btn:link, .btn:visited {
-  border-radius: 4px;
-  color: white;
-  padding: 14px 25px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-}
-
-// Button voor call-to-action, <a href="#" class="btn btn-cta">#</a>
-.btn-cta:link, .btn-cta:visited {
-  background-color: $color-button-call-to-action;
-}
-.btn-cta:hover, .btn-cta:active {
-  background-color: $color-button-call-to-action-hover;
-}
 
 .persian-green-dark {
   color: $persian-green-dark;
@@ -152,16 +95,6 @@ a.button:hover, a.button:active {
 }
 
 
-a,
-a:visited {
-    color: inherit;
-}
-
-a:hover,
-a.heading-link {
-    color: inherit;
-    text-decoration: underline;
-}
 
 blockquote {
     border-left: 5px solid #eee;

themes/nluug/assets/scss/styles_grid_homepage.scss

@@ -3,7 +3,7 @@
         display: grid;
         grid-template-columns: repeat(12, 1fr);
         grid-template-rows: 1fr auto;
-        column-gap: 1.5em;
+        column-gap: 3em;
   }
 }
 .grid-fourth {