steve
/
ayerh.art
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

formatting

main
Steve Ayerhart 2020-11-22 00:24:13 -05:00
parent 337713e72e
commit 4cc612d5a4
No known key found for this signature in database
GPG Key ID: 5C815FDF3A00B8BA
1 changed files with 194 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
style/scss/music.scss
View File

@ -1,6 +1,5 @@
@import "_layout.scss" ; html,
body {
html, body {
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: #f8f8ff; background-color: #f8f8ff;
@ -15,7 +14,12 @@ html, body {
text-align: center; text-align: center;
border-bottom: 1px solid; border-bottom: 1px solid;
border-image-slice: 1; border-image-slice: 1;
border-image-source: linear-gradient(to right, transparent, #444444, transparent); border-image-source: linear-gradient(
to right,
transparent,
#444444,
transparent
);
ol { ol {
margin: 0; margin: 0;
@ -40,7 +44,7 @@ html, body {
&:after { &:after {
display: inline-block; display: inline-block;
color: #333333; color: #333333;
content: '\2015'; content: "\2015";
font-size: 1em; font-size: 1em;
font-weight: bold; font-weight: bold;
padding: 0 6px 0; padding: 0 6px 0;
@ -85,14 +89,13 @@ html, body {
} }
a { a {
font-family: 'Righteous'; font-family: "Righteous";
font-size: 10vw; font-size: 10vw;
font-weight: 800; font-weight: 800;
text-decoration: none; text-decoration: none;
color: transparent; color: transparent;
} }
} }
} }
.collection { .collection {
@ -123,7 +126,8 @@ html, body {
margin: 0 0 1em 0; margin: 0 0 1em 0;
} }
h2, h3 { h2,
h3 {
a { a {
text-decoration: none; text-decoration: none;
color: #444444; color: #444444;
@ -134,7 +138,7 @@ html, body {
display: block; display: block;
width: 100%; width: 100%;
position: relative; position: relative;
transition: all .3s ease-in-out; transition: all 0.3s ease-in-out;
&:before { &:before {
left: 50%; left: 50%;
background-image: linear-gradient(to right, #444444, transparent); background-image: linear-gradient(to right, #444444, transparent);
@ -143,14 +147,15 @@ html, body {
right: 50%; right: 50%;
background-image: linear-gradient(to left, #444444, transparent); background-image: linear-gradient(to left, #444444, transparent);
} }
&:before, &:after { &:before,
&:after {
content: ""; content: "";
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
width: 0px; width: 0px;
height: 1px; height: 1px;
margin: 5px 0 0; margin: 5px 0 0;
transition: all .3s ease-in-out; transition: all 0.3s ease-in-out;
transition-duration: 0.5s; transition-duration: 0.5s;
opacity: 0; opacity: 0;
} }
@ -160,28 +165,29 @@ html, body {
text-align: center; text-align: center;
transition-property: transform; transition-property: transform;
transition: all .3s ease-in-out; transition: all 0.3s ease-in-out;
transition-duration: .5s; transition-duration: 0.5s;
} }
.artist { .artist {
text-align: center; text-align: center;
font: small-caps 400 .85em sans-serif; font: small-caps 400 0.85em sans-serif;
transition: all .3s ease-in-out; transition: all 0.3s ease-in-out;
transition-property: transform; transition-property: transform;
transition-duration: .5s; transition-duration: 0.5s;
display: block; display: block;
} }
} }
&:hover { &:hover {
.underline { .underline {
&:before, &:after { &:before,
&:after {
width: 50%; width: 50%;
opacity: 1; opacity: 1;
} }
} }
.album-info .title { .album-info .title {
transform: translateY(-.5em); transform: translateY(-0.5em);
&:after { &:after {
opacity: 1; opacity: 1;
-webkit-transform: scale(1); -webkit-transform: scale(1);
@ -189,7 +195,7 @@ html, body {
} }
} }
.album-info .artist { .album-info .artist {
transform: translateY(.5em); transform: translateY(0.5em);
} }
} }
.cover-art { .cover-art {
@ -209,4 +215,3 @@ html, body {
} }
} }
} }