compartmentalizing scss
This commit is contained in:
Set Hallstrom
parent
071ec451b2
commit
a0f4fda895
192
_sass/main.scss
192
_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;
|
||||
}
|
||||
}
|
||||
63
_sass/music-album.scss
Normal file
63
_sass/music-album.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
100
_sass/music-track.scss
Normal file
100
_sass/music-track.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
33
_sass/navigation.scss
Normal file
33
_sass/navigation.scss
Normal file
|
|
@ -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;
|
||||
|
||||
}
|
||||
|
|
@ -6,3 +6,21 @@ $color2: rgba(152, 223, 175, 1);
|
|||
$color3: rgba(95, 180, 156, 1);
|
||||
$color4: rgba(65, 66, 136, 1);
|
||||
$color5: rgba(104, 45, 99, 1);
|
||||
|
||||
|
||||
.color1 {
|
||||
fill: $color1;
|
||||
}
|
||||
.color2 {
|
||||
fill: $color2;
|
||||
}
|
||||
.color3 {
|
||||
fill: $color3;
|
||||
}
|
||||
.color4 {
|
||||
fill: $color4;
|
||||
}
|
||||
.color5 {
|
||||
fill: $color5;
|
||||
}
|
||||
|
||||
0
_sass/svg.scss
Normal file
0
_sass/svg.scss
Normal file
|
|
@ -3,4 +3,7 @@
|
|||
@import 'palette';
|
||||
@import 'normalize';
|
||||
@import 'main';
|
||||
@import 'isotope'
|
||||
@import 'isotope';
|
||||
@import 'music-album';
|
||||
@import 'music-track';
|
||||
@import 'navigation'
|
||||
Loading…
Reference in a new issue