From a0f4fda895887547cf85e27fd52daa08055ce61a Mon Sep 17 00:00:00 2001
From: Set Hallstrom <set@hallstrom.ch>
Date: Tue, 28 Jan 2020 13:38:37 +0100
Subject: [PATCH] compartmentalizing scss

---
 _sass/main.scss               | 192 ----------------------------------
 _sass/music-album.scss        |  63 +++++++++++
 _sass/music-track.scss        | 100 ++++++++++++++++++
 _sass/navigation.scss         |  33 ++++++
 _sass/palette.scss            |  20 +++-
 _sass/svg.scss                |   0
 assets/css/style20200128.scss |   5 +-
 7 files changed, 219 insertions(+), 194 deletions(-)
 create mode 100644 _sass/music-album.scss
 create mode 100644 _sass/music-track.scss
 create mode 100644 _sass/navigation.scss
 create mode 100644 _sass/svg.scss

diff --git a/_sass/main.scss b/_sass/main.scss
index bb8d252..39ebe66 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -136,195 +136,3 @@ a:hover {
 
 }
 
-/* MUSIC INDEX */
-
-.musiflex {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin: 0;
-  padding: 0;
-  background-repeat: repeat;
-}
-.trackcontainer {
-  flex: 1 1 360px;
-  width: 250px;
-
-  padding: 10px;
-  margin: 0;
-  // background: linear-gradient(230deg, rgba(218, 159, 142, 0.1), rgba(236, 0, 228, 0.1), rgba(0, 212, 236, 0.1), rgba(0, 236, 173, 0.1), rgba(110, 0, 236, 0.1));
-  background-size: 1000% 1000%;
-  
-  -webkit-animation: AnimationName 30s ease infinite;
-  -moz-animation: AnimationName 30s ease infinite;
-  animation: AnimationName 30s ease infinite;
-
-  h1, h2, h3, p {
-    padding: 5px;
-    background: linear-gradient(230deg, $color1, $color3);
-    background-size: 1000% 1000%;
-    -webkit-animation: AnimationName 30s ease infinite;
-    -moz-animation: AnimationName 30s ease infinite;
-    animation: AnimationName 30s ease infinite;
-    padding: 10px;
-    border-radius: 3px;
-
-    box-shadow: 5px 10px 100px $color4;
-    
-  }
-}
-.track {
-  width: 100%;
-  background-size: cover;
-  background-position: 50% 50%;
-  min-height: 250px;
-  padding: 0;
-  margin: 0;
-  border-radius: 3px;
-  box-shadow: 5px 10px 100px $color4;
-
-}
-
-/* Music Template */
-
-#player {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  height: 100vh;
-
-}
-
-#controls {
-  a {
-    background-color: transparent;
-  }
-  display: flex;
-  flex: 0 0 200px;
-  flex-wrap: wrap;
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  padding: 15px;
-  margin: 0 auto;
-
-
-
- .container {
-
-  box-shadow: 5px 10px 100px $color4;
-  
-background: linear-gradient(230deg, $color1, $color3);
-    
-  background-size: 1000% 1000%;
-
-  -webkit-animation: AnimationName 30s ease infinite;
-  -moz-animation: AnimationName 30s ease infinite;
-  animation: AnimationName 30s ease infinite;
-  margin: 0 auto 0 0;
-  
-  text-align: center;
-  border-radius: 20px;
-  padding: 10px;
-  }
-}
-button {
-  background: linear-gradient(230deg, $color1, $color3);
-  background-size: 1000% 1000%;
-  color: #fff;
-  -webkit-animation: AnimationName 30s ease infinite;
-  -moz-animation: AnimationName 30s ease infinite;
-  animation: AnimationName 30s ease infinite;
-  width: 100px;
-  height: 100px;
-  border-radius: 100px;
-  transition: background-color 0.5s ease-in-out;
-}
-button:hover {
-  background-color: $color2;
-}
-#info {
-  flex: 1 1 500px;
-min-height: 80vh;
-  padding: 15px;
-
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-#timer {
-  flex: 1 1 200px;
-  background: linear-gradient(230deg, $color1, $color3);
-  background-size: 1000% 1000%;
-  
-  -webkit-animation: AnimationName 30s ease infinite;
-  -moz-animation: AnimationName 30s ease infinite;
-  animation: AnimationName 30s ease infinite;
-  padding: 15px;
-
-  p {
-    background-color: $color1;
-    padding: 10px;
-    border-radius: 3px;
-
-    box-shadow: 5px 10px 100px $color4;
-    
-  }
-  img {
-    box-shadow: 5px 10px 100px $color4;
-    
-    border-radius: 3px;
-  }
-}
-#tracktime {
-  margin-bottom: auto;
-}
-#navigation {
-  z-index: 10000;
-  position: fixed;
-  bottom: 10px;
-  right: 10px;
-  opacity: 0;
-  a {
-    background-color: transparent;
-  }
-}
-.aboutflex {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  margin: 0;
-  padding: 0;
-  background: linear-gradient(230deg, $color1, $color2, $color3, $color4, $color5);
-  background-position: center;
-  background-repeat: repeat;
-  -webkit-animation: AnimationName 60s ease infinite;
-  -moz-animation: AnimationName 60s ease infinite;
-  animation: AnimationName 60s ease infinite; 
-  background-repeat: repeat;
-
-}
-.logo {
-  flex: 1 0 300px;
-  background-size: 100%;
-  background-repeat: repeat;
-  max-width: 300px;
-  max-height: 300px;
-
-}
-#privacy {
-  position: fixed;
-  bottom:0;
-  left:0;
-  z-index:77777;
-  margin: 0;
-  padding: 0;
-  img {
-    margin: 0;
-    padding: 0;
-    position: fixed;
-    bottom: 0;
-  }
-}
\ No newline at end of file
diff --git a/_sass/music-album.scss b/_sass/music-album.scss
new file mode 100644
index 0000000..a30751d
--- /dev/null
+++ b/_sass/music-album.scss
@@ -0,0 +1,63 @@
+/* MUSIC ALBUM INDEX */
+
+.musiflex {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  background-repeat: repeat;
+}
+.trackcontainer {
+  flex: 1 1 360px;
+  width: 250px;
+
+  padding: 10px;
+  margin: 0;
+  // background: linear-gradient(230deg, rgba(218, 159, 142, 0.1), rgba(236, 0, 228, 0.1), rgba(0, 212, 236, 0.1), rgba(0, 236, 173, 0.1), rgba(110, 0, 236, 0.1));
+  background-size: 1000% 1000%;
+  
+  -webkit-animation: AnimationName 30s ease infinite;
+  -moz-animation: AnimationName 30s ease infinite;
+  animation: AnimationName 30s ease infinite;
+
+  h1, h2, h3, p {
+    padding: 5px;
+    background: linear-gradient(230deg, $color1, $color3);
+    background-size: 1000% 1000%;
+    -webkit-animation: AnimationName 30s ease infinite;
+    -moz-animation: AnimationName 30s ease infinite;
+    animation: AnimationName 30s ease infinite;
+    padding: 10px;
+    border-radius: 3px;
+
+    box-shadow: 5px 10px 100px $color4;
+    
+  }
+}
+.track {
+  width: 100%;
+  background-size: cover;
+  background-position: 50% 50%;
+  min-height: 250px;
+  padding: 0;
+  margin: 0;
+  border-radius: 3px;
+  box-shadow: 5px 10px 100px $color4;
+
+}
+
+#privacy {
+  position: fixed;
+  bottom:0;
+  left:0;
+  z-index:77777;
+  margin: 0;
+  padding: 0;
+  img {
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    bottom: 0;
+  }
+}
\ No newline at end of file
diff --git a/_sass/music-track.scss b/_sass/music-track.scss
new file mode 100644
index 0000000..6404dc5
--- /dev/null
+++ b/_sass/music-track.scss
@@ -0,0 +1,100 @@
+/* Music Template */
+
+#player {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+
+}
+
+#controls {
+  a {
+    background-color: transparent;
+    text-decoration: none;
+    border: 0;
+    
+  }
+  display: flex;
+  flex: 0 0 200px;
+  flex-wrap: wrap;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  padding: 15px;
+  margin: 0 auto;
+
+
+
+ .container {
+
+  box-shadow: 5px 10px 100px $color4;
+  
+background: linear-gradient(230deg, $color1, $color3);
+    
+  background-size: 1000% 1000%;
+
+  -webkit-animation: AnimationName 30s ease infinite;
+  -moz-animation: AnimationName 30s ease infinite;
+  animation: AnimationName 30s ease infinite;
+  margin: 0 auto 0 0;
+  
+  text-align: center;
+  border-radius: 20px;
+  padding: 10px;
+  }
+}
+button {
+  background: linear-gradient(230deg, $color1, $color3);
+  background-size: 1000% 1000%;
+  color: $color5;
+  -webkit-animation: AnimationName 30s ease infinite;
+  -moz-animation: AnimationName 30s ease infinite;
+  animation: AnimationName 30s ease infinite;
+  width: 100px;
+  height: 100px;
+  border-radius: 100px;
+  border-color: $color5;
+
+  transition: background-color 0.5s ease-in-out;
+}
+button:hover {
+  background-color: $color2;
+}
+#info {
+  flex: 1 1 500px;
+min-height: 80vh;
+  padding: 15px;
+
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+#timer {
+  flex: 1 1 200px;
+  background-size: 1000% 1000%;
+  
+  -webkit-animation: AnimationName 30s ease infinite;
+  -moz-animation: AnimationName 30s ease infinite;
+  animation: AnimationName 30s ease infinite;
+  padding: 15px;
+
+  p {
+    background-color: $color1;
+    padding: 10px;
+    border-radius: 3px;
+
+    box-shadow: 5px 10px 100px $color4;
+    
+  }
+  img {
+    box-shadow: 5px 10px 100px $color4;
+    
+    border-radius: 3px;
+  }
+}
+#tracktime {
+  margin-bottom: auto;
+}
\ No newline at end of file
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
new file mode 100644
index 0000000..48d2fa0
--- /dev/null
+++ b/_sass/navigation.scss
@@ -0,0 +1,33 @@
+#navigation {
+  z-index: 10000;
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  opacity: 0;
+  a {
+    background-color: transparent;
+  }
+}
+.aboutflex {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(230deg, $color1, $color2, $color3, $color4, $color5);
+  background-position: center;
+  background-repeat: repeat;
+  -webkit-animation: AnimationName 60s ease infinite;
+  -moz-animation: AnimationName 60s ease infinite;
+  animation: AnimationName 60s ease infinite; 
+  background-repeat: repeat;
+
+}
+.logo {
+  flex: 1 0 300px;
+  background-size: 100%;
+  background-repeat: repeat;
+  max-width: 300px;
+  max-height: 300px;
+
+}
\ No newline at end of file
diff --git a/_sass/palette.scss b/_sass/palette.scss
index fa66f8e..b3ba5b9 100644
--- a/_sass/palette.scss
+++ b/_sass/palette.scss
@@ -5,4 +5,22 @@ $color1: rgba(222, 239, 183, 1);
 $color2: rgba(152, 223, 175, 1);
 $color3: rgba(95, 180, 156, 1);
 $color4: rgba(65, 66, 136, 1);
-$color5: rgba(104, 45, 99, 1);
\ No newline at end of file
+$color5: rgba(104, 45, 99, 1);
+
+
+.color1 { 
+  fill: $color1; 
+}
+.color2 { 
+  fill: $color2; 
+}
+.color3 { 
+  fill: $color3; 
+}
+.color4 { 
+  fill: $color4; 
+}
+.color5 { 
+  fill: $color5; 
+}
+            
\ No newline at end of file
diff --git a/_sass/svg.scss b/_sass/svg.scss
new file mode 100644
index 0000000..e69de29
diff --git a/assets/css/style20200128.scss b/assets/css/style20200128.scss
index 3c673b9..a101ed0 100644
--- a/assets/css/style20200128.scss
+++ b/assets/css/style20200128.scss
@@ -3,4 +3,7 @@
 @import 'palette';
 @import 'normalize';
 @import 'main';
-@import 'isotope'
\ No newline at end of file
+@import 'isotope';
+@import 'music-album';
+@import 'music-track';
+@import 'navigation'
\ No newline at end of file