From 6d5838de6550fbff865ecb6a178e53b4d4a89bf2 Mon Sep 17 00:00:00 2001
From: Dennis Erdmann <dennis@erdmann-freunde.de>
Date: Mon, 10 Feb 2020 13:40:58 +0100
Subject: [PATCH 1/5] add css variables to root to separate theme and nutshell
 variables

---
 files/nutshell/scss/_variables.scss             | 2 +-
 files/nutshell/scss/base/_grid.scss             | 2 +-
 files/nutshell/scss/base/_layout.scss           | 2 +-
 files/nutshell/scss/base/_page.scss             | 2 +-
 files/nutshell/scss/base/_type.scss             | 2 +-
 files/nutshell/scss/components/_accordion.scss  | 2 +-
 files/nutshell/scss/components/_comments.scss   | 2 +-
 files/nutshell/scss/components/_downloads.scss  | 2 +-
 files/nutshell/scss/components/_events.scss     | 2 +-
 files/nutshell/scss/components/_faq.scss        | 2 +-
 files/nutshell/scss/components/_forms.scss      | 2 +-
 files/nutshell/scss/components/_links.scss      | 2 +-
 files/nutshell/scss/components/_media.scss      | 2 +-
 files/nutshell/scss/components/_navs.scss       | 2 +-
 files/nutshell/scss/components/_news.scss       | 2 +-
 files/nutshell/scss/components/_newsletter.scss | 2 +-
 files/nutshell/scss/components/_search.scss     | 2 +-
 files/nutshell/scss/components/_slider.scss     | 2 +-
 files/nutshell/scss/components/_tables.scss     | 2 +-
 19 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/files/nutshell/scss/_variables.scss b/files/nutshell/scss/_variables.scss
index 2dc1816..941762a 100644
--- a/files/nutshell/scss/_variables.scss
+++ b/files/nutshell/scss/_variables.scss
@@ -12,7 +12,7 @@
 
 // General Colors
 
-html {
+:root {
   --color-default:            #ff5636;
   --color-gray-dark:          #222;
   --color-gray:               #555;
diff --git a/files/nutshell/scss/base/_grid.scss b/files/nutshell/scss/base/_grid.scss
index 08e41d0..8637e09 100644
--- a/files/nutshell/scss/base/_grid.scss
+++ b/files/nutshell/scss/base/_grid.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-html {
+:root {
   --grid__columns:       12;
   --grid__gutter:        1.875rem; // 30px
   --grid__gutter--half:  calc(var(--grid__gutter) / 2);
diff --git a/files/nutshell/scss/base/_layout.scss b/files/nutshell/scss/base/_layout.scss
index cc3b15a..30e5710 100644
--- a/files/nutshell/scss/base/_layout.scss
+++ b/files/nutshell/scss/base/_layout.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-html {
+:root {
   --header-color-background:   var(--color-page-background);
   --header-color-text:         var(--color-text);
 }
diff --git a/files/nutshell/scss/base/_page.scss b/files/nutshell/scss/base/_page.scss
index f591fba..f65ccb3 100644
--- a/files/nutshell/scss/base/_page.scss
+++ b/files/nutshell/scss/base/_page.scss
@@ -26,7 +26,7 @@
 // [4] Prevent certain mobile browsers from automatically zooming fonts.
 // [5] Fonts on OSX will look more consistent with other systems that do not
 //     render text using sub-pixel anti-aliasing.
-html {
+:root {
   font-family: var(--base-font-family, sans-serif);
   font-size: var(--base-font-size); // [1]
   line-height: var(--base-line-height); //[1]
diff --git a/files/nutshell/scss/base/_type.scss b/files/nutshell/scss/base/_type.scss
index 80f19cd..ec2b6c3 100644
--- a/files/nutshell/scss/base/_type.scss
+++ b/files/nutshell/scss/base/_type.scss
@@ -87,7 +87,7 @@ $headlines: (
 ) !default;
 
 // CSS-VARIABLES
-html {
+:root {
   --headings__font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
   --headings__font-weight: 700;
   --headings__color:       currentColor;
diff --git a/files/nutshell/scss/components/_accordion.scss b/files/nutshell/scss/components/_accordion.scss
index a9b9ce3..b6cd817 100644
--- a/files/nutshell/scss/components/_accordion.scss
+++ b/files/nutshell/scss/components/_accordion.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-html {
+:root {
   --accordion-padding:       var(--base-spacing-unit--sm);
   --accordion-background:    var(--color-gray-light);
   
diff --git a/files/nutshell/scss/components/_comments.scss b/files/nutshell/scss/components/_comments.scss
index 30779c0..4a28dd6 100644
--- a/files/nutshell/scss/components/_comments.scss
+++ b/files/nutshell/scss/components/_comments.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-html {
+:root {
   --color-error: rgba(255, 0, 0, 1);
   --color-error-light: rgba(255, 0, 0, 0.5);
 }
diff --git a/files/nutshell/scss/components/_downloads.scss b/files/nutshell/scss/components/_downloads.scss
index 0b55231..3b295fd 100644
--- a/files/nutshell/scss/components/_downloads.scss
+++ b/files/nutshell/scss/components/_downloads.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-html {
+:root {
   --download-link-color:   inherit;
   --download-link-decoration: none;
 }
diff --git a/files/nutshell/scss/components/_events.scss b/files/nutshell/scss/components/_events.scss
index a1cdac3..88bcfff 100644
--- a/files/nutshell/scss/components/_events.scss
+++ b/files/nutshell/scss/components/_events.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-html {
+:root {
   --event-border:  var(--base-border);
 }
 
diff --git a/files/nutshell/scss/components/_faq.scss b/files/nutshell/scss/components/_faq.scss
index 7d5340b..b5eb371 100644
--- a/files/nutshell/scss/components/_faq.scss
+++ b/files/nutshell/scss/components/_faq.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-html {
+:root {
   --faq-border: var(--base-border);
 }
 
diff --git a/files/nutshell/scss/components/_forms.scss b/files/nutshell/scss/components/_forms.scss
index 3ae9168..b962f4e 100644
--- a/files/nutshell/scss/components/_forms.scss
+++ b/files/nutshell/scss/components/_forms.scss
@@ -12,7 +12,7 @@
 
 
 // VARIABLES
-html {
+:root {
   --input-border-width:    var(--base-border-width);
   --input-border-radius:   var(--base-border-radius);
   --input-border-color:    rgba(0,0,0,0.25);
diff --git a/files/nutshell/scss/components/_links.scss b/files/nutshell/scss/components/_links.scss
index 60808a3..d49b2ee 100644
--- a/files/nutshell/scss/components/_links.scss
+++ b/files/nutshell/scss/components/_links.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-html {
+:root {
   --button-bg:             var(--color-btn);
   --button-bg-hover:       var(--color-btn);
   --button-spacing:        var(--base-spacing-unit--sm) var(--base-spacing-unit);
diff --git a/files/nutshell/scss/components/_media.scss b/files/nutshell/scss/components/_media.scss
index 4ea8925..5d02bee 100644
--- a/files/nutshell/scss/components/_media.scss
+++ b/files/nutshell/scss/components/_media.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-html {
+:root {
   --gallery__gutter: var(--grid__gutter);
   --gallery__gutter--half: calc(var(--gallery__gutter) / 2);
 }
diff --git a/files/nutshell/scss/components/_navs.scss b/files/nutshell/scss/components/_navs.scss
index a4cd314..1d987b5 100644
--- a/files/nutshell/scss/components/_navs.scss
+++ b/files/nutshell/scss/components/_navs.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-html {
+:root {
   --nav--main__item-padding: var(--base-spacing-unit);
   --nav-toggler-top-space:   var(--base-spacing-unit--sm);
   --nav-toggler-right-space: var(--base-spacing-unit--sm);
diff --git a/files/nutshell/scss/components/_news.scss b/files/nutshell/scss/components/_news.scss
index 166c4ed..e9d52f9 100644
--- a/files/nutshell/scss/components/_news.scss
+++ b/files/nutshell/scss/components/_news.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-html {
+:root {
   --news-border: var(--base-border);
 }
 
diff --git a/files/nutshell/scss/components/_newsletter.scss b/files/nutshell/scss/components/_newsletter.scss
index 0f09665..ba3394a 100644
--- a/files/nutshell/scss/components/_newsletter.scss
+++ b/files/nutshell/scss/components/_newsletter.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-html {
+:root {
   --newsletter-list-border:    var(--base-border);
   --newsletter-reader-width:   600px;
   --newsletter-reader-border:  var(--base-border);
diff --git a/files/nutshell/scss/components/_search.scss b/files/nutshell/scss/components/_search.scss
index a16e5de..503bfa8 100644
--- a/files/nutshell/scss/components/_search.scss
+++ b/files/nutshell/scss/components/_search.scss
@@ -14,7 +14,7 @@
 $search-hide-label:       true !default;
 
 
-html {
+:root {
   --search-color-relevance:  var(--color-gray);
   --search-color-url:        var(--color-gray);
 }
diff --git a/files/nutshell/scss/components/_slider.scss b/files/nutshell/scss/components/_slider.scss
index 7937991..a9fcb57 100644
--- a/files/nutshell/scss/components/_slider.scss
+++ b/files/nutshell/scss/components/_slider.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-html {
+:root {
   --arrow-color:               inherit;
   --arrow-size:                2rem;
   --menu-point-color:          inherit;
diff --git a/files/nutshell/scss/components/_tables.scss b/files/nutshell/scss/components/_tables.scss
index 170f173..3b6e97a 100644
--- a/files/nutshell/scss/components/_tables.scss
+++ b/files/nutshell/scss/components/_tables.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-html {
+:root {
   --table-border-width:      1px;
   --table-border-style:      solid;
   --table-border-color:      #ccc;

From 78fdad0d736472369bf42807141b386e12bcef42 Mon Sep 17 00:00:00 2001
From: Dennis Erdmann <dennis@erdmann-freunde.de>
Date: Mon, 10 Feb 2020 14:03:29 +0100
Subject: [PATCH 2/5] Revert "add css variables to root to separate theme and
 nutshell variables"

This reverts commit 6d5838de6550fbff865ecb6a178e53b4d4a89bf2.
---
 files/nutshell/scss/_variables.scss             | 2 +-
 files/nutshell/scss/base/_grid.scss             | 2 +-
 files/nutshell/scss/base/_layout.scss           | 2 +-
 files/nutshell/scss/base/_page.scss             | 2 +-
 files/nutshell/scss/base/_type.scss             | 2 +-
 files/nutshell/scss/components/_accordion.scss  | 2 +-
 files/nutshell/scss/components/_comments.scss   | 2 +-
 files/nutshell/scss/components/_downloads.scss  | 2 +-
 files/nutshell/scss/components/_events.scss     | 2 +-
 files/nutshell/scss/components/_faq.scss        | 2 +-
 files/nutshell/scss/components/_forms.scss      | 2 +-
 files/nutshell/scss/components/_links.scss      | 2 +-
 files/nutshell/scss/components/_media.scss      | 2 +-
 files/nutshell/scss/components/_navs.scss       | 2 +-
 files/nutshell/scss/components/_news.scss       | 2 +-
 files/nutshell/scss/components/_newsletter.scss | 2 +-
 files/nutshell/scss/components/_search.scss     | 2 +-
 files/nutshell/scss/components/_slider.scss     | 2 +-
 files/nutshell/scss/components/_tables.scss     | 2 +-
 19 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/files/nutshell/scss/_variables.scss b/files/nutshell/scss/_variables.scss
index 941762a..2dc1816 100644
--- a/files/nutshell/scss/_variables.scss
+++ b/files/nutshell/scss/_variables.scss
@@ -12,7 +12,7 @@
 
 // General Colors
 
-:root {
+html {
   --color-default:            #ff5636;
   --color-gray-dark:          #222;
   --color-gray:               #555;
diff --git a/files/nutshell/scss/base/_grid.scss b/files/nutshell/scss/base/_grid.scss
index 8637e09..08e41d0 100644
--- a/files/nutshell/scss/base/_grid.scss
+++ b/files/nutshell/scss/base/_grid.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-:root {
+html {
   --grid__columns:       12;
   --grid__gutter:        1.875rem; // 30px
   --grid__gutter--half:  calc(var(--grid__gutter) / 2);
diff --git a/files/nutshell/scss/base/_layout.scss b/files/nutshell/scss/base/_layout.scss
index 30e5710..cc3b15a 100644
--- a/files/nutshell/scss/base/_layout.scss
+++ b/files/nutshell/scss/base/_layout.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-:root {
+html {
   --header-color-background:   var(--color-page-background);
   --header-color-text:         var(--color-text);
 }
diff --git a/files/nutshell/scss/base/_page.scss b/files/nutshell/scss/base/_page.scss
index f65ccb3..f591fba 100644
--- a/files/nutshell/scss/base/_page.scss
+++ b/files/nutshell/scss/base/_page.scss
@@ -26,7 +26,7 @@
 // [4] Prevent certain mobile browsers from automatically zooming fonts.
 // [5] Fonts on OSX will look more consistent with other systems that do not
 //     render text using sub-pixel anti-aliasing.
-:root {
+html {
   font-family: var(--base-font-family, sans-serif);
   font-size: var(--base-font-size); // [1]
   line-height: var(--base-line-height); //[1]
diff --git a/files/nutshell/scss/base/_type.scss b/files/nutshell/scss/base/_type.scss
index ec2b6c3..80f19cd 100644
--- a/files/nutshell/scss/base/_type.scss
+++ b/files/nutshell/scss/base/_type.scss
@@ -87,7 +87,7 @@ $headlines: (
 ) !default;
 
 // CSS-VARIABLES
-:root {
+html {
   --headings__font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
   --headings__font-weight: 700;
   --headings__color:       currentColor;
diff --git a/files/nutshell/scss/components/_accordion.scss b/files/nutshell/scss/components/_accordion.scss
index b6cd817..a9b9ce3 100644
--- a/files/nutshell/scss/components/_accordion.scss
+++ b/files/nutshell/scss/components/_accordion.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-:root {
+html {
   --accordion-padding:       var(--base-spacing-unit--sm);
   --accordion-background:    var(--color-gray-light);
   
diff --git a/files/nutshell/scss/components/_comments.scss b/files/nutshell/scss/components/_comments.scss
index 4a28dd6..30779c0 100644
--- a/files/nutshell/scss/components/_comments.scss
+++ b/files/nutshell/scss/components/_comments.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-:root {
+html {
   --color-error: rgba(255, 0, 0, 1);
   --color-error-light: rgba(255, 0, 0, 0.5);
 }
diff --git a/files/nutshell/scss/components/_downloads.scss b/files/nutshell/scss/components/_downloads.scss
index 3b295fd..0b55231 100644
--- a/files/nutshell/scss/components/_downloads.scss
+++ b/files/nutshell/scss/components/_downloads.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-:root {
+html {
   --download-link-color:   inherit;
   --download-link-decoration: none;
 }
diff --git a/files/nutshell/scss/components/_events.scss b/files/nutshell/scss/components/_events.scss
index 88bcfff..a1cdac3 100644
--- a/files/nutshell/scss/components/_events.scss
+++ b/files/nutshell/scss/components/_events.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-:root {
+html {
   --event-border:  var(--base-border);
 }
 
diff --git a/files/nutshell/scss/components/_faq.scss b/files/nutshell/scss/components/_faq.scss
index b5eb371..7d5340b 100644
--- a/files/nutshell/scss/components/_faq.scss
+++ b/files/nutshell/scss/components/_faq.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-:root {
+html {
   --faq-border: var(--base-border);
 }
 
diff --git a/files/nutshell/scss/components/_forms.scss b/files/nutshell/scss/components/_forms.scss
index b962f4e..3ae9168 100644
--- a/files/nutshell/scss/components/_forms.scss
+++ b/files/nutshell/scss/components/_forms.scss
@@ -12,7 +12,7 @@
 
 
 // VARIABLES
-:root {
+html {
   --input-border-width:    var(--base-border-width);
   --input-border-radius:   var(--base-border-radius);
   --input-border-color:    rgba(0,0,0,0.25);
diff --git a/files/nutshell/scss/components/_links.scss b/files/nutshell/scss/components/_links.scss
index d49b2ee..60808a3 100644
--- a/files/nutshell/scss/components/_links.scss
+++ b/files/nutshell/scss/components/_links.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-:root {
+html {
   --button-bg:             var(--color-btn);
   --button-bg-hover:       var(--color-btn);
   --button-spacing:        var(--base-spacing-unit--sm) var(--base-spacing-unit);
diff --git a/files/nutshell/scss/components/_media.scss b/files/nutshell/scss/components/_media.scss
index 5d02bee..4ea8925 100644
--- a/files/nutshell/scss/components/_media.scss
+++ b/files/nutshell/scss/components/_media.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-:root {
+html {
   --gallery__gutter: var(--grid__gutter);
   --gallery__gutter--half: calc(var(--gallery__gutter) / 2);
 }
diff --git a/files/nutshell/scss/components/_navs.scss b/files/nutshell/scss/components/_navs.scss
index 1d987b5..a4cd314 100644
--- a/files/nutshell/scss/components/_navs.scss
+++ b/files/nutshell/scss/components/_navs.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-:root {
+html {
   --nav--main__item-padding: var(--base-spacing-unit);
   --nav-toggler-top-space:   var(--base-spacing-unit--sm);
   --nav-toggler-right-space: var(--base-spacing-unit--sm);
diff --git a/files/nutshell/scss/components/_news.scss b/files/nutshell/scss/components/_news.scss
index e9d52f9..166c4ed 100644
--- a/files/nutshell/scss/components/_news.scss
+++ b/files/nutshell/scss/components/_news.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-:root {
+html {
   --news-border: var(--base-border);
 }
 
diff --git a/files/nutshell/scss/components/_newsletter.scss b/files/nutshell/scss/components/_newsletter.scss
index ba3394a..0f09665 100644
--- a/files/nutshell/scss/components/_newsletter.scss
+++ b/files/nutshell/scss/components/_newsletter.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-:root {
+html {
   --newsletter-list-border:    var(--base-border);
   --newsletter-reader-width:   600px;
   --newsletter-reader-border:  var(--base-border);
diff --git a/files/nutshell/scss/components/_search.scss b/files/nutshell/scss/components/_search.scss
index 503bfa8..a16e5de 100644
--- a/files/nutshell/scss/components/_search.scss
+++ b/files/nutshell/scss/components/_search.scss
@@ -14,7 +14,7 @@
 $search-hide-label:       true !default;
 
 
-:root {
+html {
   --search-color-relevance:  var(--color-gray);
   --search-color-url:        var(--color-gray);
 }
diff --git a/files/nutshell/scss/components/_slider.scss b/files/nutshell/scss/components/_slider.scss
index a9fcb57..7937991 100644
--- a/files/nutshell/scss/components/_slider.scss
+++ b/files/nutshell/scss/components/_slider.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-:root {
+html {
   --arrow-color:               inherit;
   --arrow-size:                2rem;
   --menu-point-color:          inherit;
diff --git a/files/nutshell/scss/components/_tables.scss b/files/nutshell/scss/components/_tables.scss
index 3b6e97a..170f173 100644
--- a/files/nutshell/scss/components/_tables.scss
+++ b/files/nutshell/scss/components/_tables.scss
@@ -11,7 +11,7 @@
 // --------------------------------------------------
 
 // VARIABLES
-:root {
+html {
   --table-border-width:      1px;
   --table-border-style:      solid;
   --table-border-color:      #ccc;

From ac834aa40bc9e5e57e6f37a9733f21233b6165a8 Mon Sep 17 00:00:00 2001
From: Dennis Erdmann <dennis@erdmann-freunde.de>
Date: Mon, 23 Mar 2020 13:58:55 +0100
Subject: [PATCH 3/5] Update _accordion.scss

make sure a floated image with text has the correct accordion height
---
 files/nutshell/scss/components/_accordion.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/nutshell/scss/components/_accordion.scss b/files/nutshell/scss/components/_accordion.scss
index a9b9ce3..0f57a75 100644
--- a/files/nutshell/scss/components/_accordion.scss
+++ b/files/nutshell/scss/components/_accordion.scss
@@ -53,5 +53,6 @@ html {
   .accordion {
     padding: var(--accordion-padding);
     background: var(--accordion-background);
+    overflow: hidden;
   }
 }

From 24af51aa770424851124f2d930bd6ae82322fa1b Mon Sep 17 00:00:00 2001
From: Dennis Erdmann <dennis@erdmann-freunde.de>
Date: Mon, 30 Mar 2020 15:04:35 +0200
Subject: [PATCH 4/5] Update _type.scss

fix #9
---
 files/nutshell/scss/base/_type.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/nutshell/scss/base/_type.scss b/files/nutshell/scss/base/_type.scss
index 80f19cd..7d0cd04 100644
--- a/files/nutshell/scss/base/_type.scss
+++ b/files/nutshell/scss/base/_type.scss
@@ -90,7 +90,7 @@ $headlines: (
 html {
   --headings__font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
   --headings__font-weight: 700;
-  --headings__color:       currentColor;
+  --headings__color:       'currentColor'
 
   --paragraph__link-color:							var(--color-links);
   --code__color:            						var(--color-highlight);

From 808cc71142d09d0f07edbaa0bb5a113b334d0aca Mon Sep 17 00:00:00 2001
From: Dennis Erdmann <dennis@erdmann-freunde.de>
Date: Tue, 14 Apr 2020 10:07:34 +0200
Subject: [PATCH 5/5] add variables for arrow-font-family and menu-point-size

---
 files/nutshell/scss/components/_slider.scss | 25 ++++++++++++---------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/files/nutshell/scss/components/_slider.scss b/files/nutshell/scss/components/_slider.scss
index 7937991..30b1010 100644
--- a/files/nutshell/scss/components/_slider.scss
+++ b/files/nutshell/scss/components/_slider.scss
@@ -11,9 +11,14 @@
 // --------------------------------------------------
 
 // VARIABLES
+// [1] some fonts use different sizes for left and right arrow. 
+//     We take Arial to make sure it has the same size.
+
 html {
   --arrow-color:               inherit;
   --arrow-size:                2rem;
+  --arrow-font-family:         'Arial';
+  --menu-point-size:           2rem;
   --menu-point-color:          inherit;
   --menu-point-color--active:  var(--color-brand);
 }
@@ -28,15 +33,13 @@ html {
 
 // default slider
 // NOTES:
-// [1] overrides default contao slider styling
-// [2] some fonts use different sizes for left and right arrow. 
-//     We take Arial to make sure it has the same size.
+// [2] overrides default contao slider styling
 .slider {
   position: relative;
   
   .slider-control {
-  	position: static; // [1]
-  	height: 0; // [1]
+  	position: static; // [2]
+  	height: 0; // [2]
   }
   
   .slider-control a {
@@ -49,7 +52,7 @@ html {
     position: absolute;
     display: block;
     color: var(--arrow-color);
-    font-family: Arial; // [2]
+    font-family: var(--arrow-font-family);
     
     &:before {
       padding: var(--base-spacing-unit--sm);
@@ -70,18 +73,18 @@ html {
   }
   
   .slider-menu {
-    font-size: 3rem;
+    font-size: var(--menu-point-size);
     line-height: 1;
     
-    top: auto; // [1]
-    bottom: 0; // [1]
+    top: auto; // [2]
+    bottom: 0; // [2]
     
     b {
-      color: var(--menu-point-color); // [1]
+      color: var(--menu-point-color); // [2]
     }
     
     b.active {
-      color: var(--menu-point-color--active); // [1]
+      color: var(--menu-point-color--active); // [2]
     }
     
     b:hover {