From 5326fe77f41c623db60f05e0402510da85cd7ab6 Mon Sep 17 00:00:00 2001
From: Michael Boelen <michael.boelen@cisofy.com>
Date: Mon, 22 May 2023 10:53:03 +0200
Subject: [PATCH] Optimalisatie structuur van stylesheets en opmaak iconen

---
 themes/nluug/assets/scss/_colors.scss       | 19 +++++++++
 themes/nluug/assets/scss/styles.scss        | 45 ---------------------
 themes/nluug/assets/scss/styles_images.scss | 29 +++++++++++++
 3 files changed, 48 insertions(+), 45 deletions(-)
 create mode 100644 themes/nluug/assets/scss/_colors.scss
 create mode 100644 themes/nluug/assets/scss/styles_images.scss

diff --git a/themes/nluug/assets/scss/_colors.scss b/themes/nluug/assets/scss/_colors.scss
new file mode 100644
index 0000000..fae16ae
--- /dev/null
+++ b/themes/nluug/assets/scss/_colors.scss
@@ -0,0 +1,19 @@
+
+// purple: #6A2060
+// light purple-grey: #DCC9DB
+// darkblue: #1D3160
+
+$color-button: #1D3160;
+$color-button-hover: #17274d;
+$color-button-call-to-action: #138808;
+$color-button-call-to-action-hover: #0F6D06; // %25 donkerder dan #138808 met encycolorpedia
+$color-header: #6A2060;
+$color-highlight-box-other-border: #99AFE2;
+$color-highlight-box-other-background: #E3E9F7;
+$color-highlight-box-nluug-border: #6A2060;
+$color-highlight-box-nluug-background: #EBBCE5; // omgezet naar lichtere kleur via https://encycolorpedia.com/6a2060
+$color-border: #6A2060;
+$color-text-inverse: white;
+$color-tags-background: #6A2060;
+$color-tags-text: white;
+
diff --git a/themes/nluug/assets/scss/styles.scss b/themes/nluug/assets/scss/styles.scss
index 484c188..34726cf 100644
--- a/themes/nluug/assets/scss/styles.scss
+++ b/themes/nluug/assets/scss/styles.scss
@@ -1,23 +1,3 @@
-
-// purple: #6A2060
-// light purple-grey: #DCC9DB
-// darkblue: #1D3160
-
-$color-button: #1D3160;
-$color-button-hover: #17274d;
-$color-button-call-to-action: #138808;
-$color-button-call-to-action-hover: #0F6D06; // %25 donkerder dan #138808 met encycolorpedia
-$color-header: #6A2060;
-$color-highlight-box-other-border: #99AFE2;
-$color-highlight-box-other-background: #E3E9F7;
-$color-highlight-box-nluug-border: #6A2060;
-$color-highlight-box-nluug-background: #EBBCE5; // omgezet naar lichtere kleur via https://encycolorpedia.com/6a2060
-$color-border: #6A2060;
-$color-text-inverse: white;
-$color-tags-background: #6A2060;
-$color-tags-text: white;
-
-
 *, :after, :before {
     box-sizing: border-box;
     padding: 0;
@@ -128,22 +108,6 @@ a.button:hover, a.button:active {
   background-color: $color-button-hover;
 }
 
-.icon {
-  margin: 3px;
-}
-.icon:link {
-  text-decoration: none;
-}
-.icon:visited {
-  text-decoration: none;
-}
-.icon:hover {
-  text-decoration: none;
-}
-.icon:active {
-  text-decoration: none;
-}
-
 // Button
 .btn:link, .btn:visited {
   border-radius: 4px;
@@ -265,15 +229,6 @@ ul, ol {
   margin: 1rem;
 }
 
-img {
-    max-width: 100%;
-    height: auto;
-}
-
-img.shownormal {
-  max-width: initial;
-}
-
 .post-date {
     margin: 5% 0 5%;
 }
diff --git a/themes/nluug/assets/scss/styles_images.scss b/themes/nluug/assets/scss/styles_images.scss
new file mode 100644
index 0000000..7168c44
--- /dev/null
+++ b/themes/nluug/assets/scss/styles_images.scss
@@ -0,0 +1,29 @@
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+img.shownormal {
+  max-width: initial;
+}
+
+.icon {
+  filter: invert(18%) sepia(32%) saturate(1326%) hue-rotate(183deg) brightness(93%) contrast(95%);
+  margin: 3px;
+}
+
+.icon:link {
+  text-decoration: none;
+}
+.icon:visited {
+  text-decoration: none;
+}
+.icon:hover {
+  filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(338deg) brightness(106%) contrast(109%);
+  text-decoration: none;
+}
+.icon:active {
+  text-decoration: none;
+}
+
+