compartmentalizing scss

_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;
-  }
-}

_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;
+  }
+}

_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;
+}

_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;
+
+}

_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);
+$color5: rgba(104, 45, 99, 1);
+
+
+.color1 { 
+  fill: $color1; 
+}
+.color2 { 
+  fill: $color2; 
+}
+.color3 { 
+  fill: $color3; 
+}
+.color4 { 
+  fill: $color4; 
+}
+.color5 { 
+  fill: $color5; 
+}
+            

assets/css/style20200128.scss

@@ -3,4 +3,7 @@
 @import 'palette';
 @import 'normalize';
 @import 'main';
-@import 'isotope'
+@import 'isotope';
+@import 'music-album';
+@import 'music-track';
+@import 'navigation'