diff --git a/backplaces/style.css b/backplaces/style.css index 90fbd9a..e1011e8 100644 --- a/backplaces/style.css +++ b/backplaces/style.css @@ -1,6 +1,7 @@ -:root{ +:root { --spot-color-1: #1E33FAff; } + @font-face { font-family: 'Platypi'; src: url('fonts/Platypi[wght].woff2'); @@ -25,14 +26,16 @@ a { color: var(--spot-color-1); text-decoration: none; } -#about-student p{ + +#about-student p { margin: 0; } -blockquote{ + +blockquote { background: linear-gradient(to top left, white, rgba(255, 153, 150, 0), #c048ff), linear-gradient(to top right, #8edf00, rgba(255, 153, 150, 0), #f13d2b) hsl(36deg 100% 50%); background-size: 150% 150%; -webkit-background-clip: text; - -webkit-text-fill-color: transparent; + -webkit-text-fill-color: transparent; -webkit-animation: gradientanimator 30s ease infinite; -moz-animation: gradientanimator 30s ease infinite; @@ -40,20 +43,23 @@ blockquote{ } @-webkit-keyframes gradientanimator { - 0%{background-position:0% 70%} - 50%{background-position:100% 31%} - 100%{background-position:0% 70%} + 0% { background-position: 0% 70%; } + 50% { background-position: 100% 31%; } + 100% { background-position: 0% 70%; } } + @-moz-keyframes gradientanimator { - 0%{background-position:0% 70%} - 50%{background-position:100% 31%} - 100%{background-position:0% 70%} + 0% { background-position: 0% 70%; } + 50% { background-position: 100% 31%; } + 100% { background-position: 0% 70%; } } + @keyframes gradientanimator { - 0%{background-position:0% 70%} - 50%{background-position:100% 31%} - 100%{background-position:0% 70%} + 0% { background-position: 0% 70%; } + 50% { background-position: 100% 31%; } + 100% { background-position: 0% 70%; } } + body { background-color: #fffdfb; font-family: 'Platypi', serif; @@ -65,60 +71,77 @@ body { box-sizing: border-box; } -#links { +.navlinks { position: relative; font-family: 'Platypi'; font-style: normal; font-weight: 300; - padding: 0.5rem; + text-decoration: none; + padding: 0 0 0.5rem; + line-height: 160%; } - -#links:hover{ +.navlinks a:hover { animation: wiggle 0.6s infinite; } +@keyframes wiggle { + 0%, 100% { + transform: scale(1); + } + 25% { + transform: scale(0.8, 1.3); + } + 50% { + transform: scale(1.1, 0.8); + } + 75% { + transform: scale(0.7, 1.2); + } +} + .content-list { font-size: 41px; max-width: 40rem; margin: auto; margin-right: 0; line-height: 3.5rem; +} - a { - color: inherit; - } +.content-list a { + color: inherit; +} - img { - width: 2rem; - height: auto; - vertical-align: middle; - filter: saturate(2); - } +.content-list img { + width: 2rem; + height: auto; + vertical-align: middle; + filter: saturate(2); +} - a:hover img, img:hover { - animation: wiggle 0.6s infinite; - cursor: pointer; - } +.content-list a:hover img, .content-list img:hover { + animation: wiggle 0.6s infinite; + cursor: pointer; } #licensing-information { font-size: 0.5rem; } + .container { - margin: 50px 0; + margin: 50px 0; line-height: 3.5rem; - - h1 { - font-style: normal; - } +} - h2 { - font-size: 20px; - max-width: 30%; - margin: 0; - margin-bottom: -0.5rem; - } +.container h1 { + font-style: normal; +} + +.container h2 { + font-size: 20px; + max-width: 30%; + margin: 0; + margin-bottom: -0.5rem; } #content { @@ -127,119 +150,135 @@ body { margin-right: 0; } -header{ - line-height:1.3; +header { + line-height: 1.3; } h1, #project-title { font-family: 'Platypi'; font-size: 1.6rem; } -iframe{ + +iframe { width: 100%; height: 20rem; border-radius: 0.5rem; overflow-x: hidden; border: none; } -img{ + +img { max-width: 100%; padding: 0; border-radius: 0.5rem; } -figcaption{ + +figcaption { font-size: 1rem; padding: 1rem 0 0; } -figure{ + +figure { width: 100%; margin: 0 0 2rem; padding: 0; } -hr{ + +hr { border: none; margin: 4rem; } -#galleries{ +#galleries { width: 74%; } -nav{ + +nav { position: fixed; - a{color: inherit;} - h1{font-style: normal;} } -#script{ - +nav a { + color: inherit; +} + +nav h1 { + font-style: normal; +} + +#script { max-width: 40rem; margin: auto; margin-right: 0; - p{ - margin-left: 12rem; - } - p:first-of-type{ - margin-left: 0; - } - h2, h3 { - text-decoration: underline; - text-align: center; - } - strong { - position: absolute; - margin-left: -12rem; - width: 11rem; - } } -::selection{ + +#script p { + margin-left: 12rem; +} + +#script p:first-of-type { + margin-left: 0; +} + +#script h2, #script h3 { + text-decoration: underline; + text-align: center; +} + +#script strong { + position: absolute; + margin-left: -12rem; + width: 11rem; +} + +::selection { background: var(--spot-color-1); color: #fff; } -@keyframes wiggle { - 25% { - transform: scale(0.8, 1.3); - } - 50% { - transform: scale(1.1, 0.8); - } - 75% { - transform: scale(0.7, 1.2); - } -} -@media only screen and (max-width: 768px){ + +@media only screen and (max-width: 768px) { body { line-height: 1.3; padding: 2rem; } - + .container { line-height: 2rem; - margin: 70px 0; - - h1 { - font-size: 30px; - font-style: normal; - } - - h2 { - font-size: 20px; - margin-bottom: -0.25rem; - } + margin: 70px 0; + } + + .container h1 { + font-size: 30px; + font-style: normal; + } + + .container h2 { + font-size: 20px; + margin-bottom: -0.25rem; } - + .content-list { font-size: 22px; line-height: 2rem; - img{ - margin: -50px 0; - overflow-y:visible; - } } - - nav{ + + .content-list img { + margin: -50px 0; + overflow-y: visible; + } + + nav { position: static; - h1{font-size: 1.8rem;} - .gummies{margin: 0;} - .gummy{width: 2.5rem;} } -} \ No newline at end of file + + nav h1 { + font-size: 1.8rem; + } + + .gummies { + margin: 0; + } + + .gummy { + width: 2.5rem; + } +}