XPUB
/
project.xpub.nl
65
1
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Update 'backplaces/style.css'

Browse Source
master
ada 5 months ago
parent 2c98c41179
commit 294940dbda
1 changed files with 144 additions and 105 deletions
Show Stats Download Patch File Download Diff File

249
backplaces/style.css
Unescape Escape View File

@ -1,6 +1,7 @@
:root{ :root {
--spot-color-1: #1E33FAff; --spot-color-1: #1E33FAff;
} }
@font-face { @font-face {
font-family: 'Platypi'; font-family: 'Platypi';
src: url('fonts/Platypi[wght].woff2'); src: url('fonts/Platypi[wght].woff2');
@ -25,14 +26,16 @@ a {
color: var(--spot-color-1); color: var(--spot-color-1);
text-decoration: none; text-decoration: none;
} }
#about-student p{
#about-student p {
margin: 0; 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: 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%; background-size: 150% 150%;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
-webkit-animation: gradientanimator 30s ease infinite; -webkit-animation: gradientanimator 30s ease infinite;
-moz-animation: gradientanimator 30s ease infinite; -moz-animation: gradientanimator 30s ease infinite;
@ -40,20 +43,23 @@ blockquote{
} }
@-webkit-keyframes gradientanimator { @-webkit-keyframes gradientanimator {
0%{background-position:0% 70%} 0% { background-position: 0% 70%; }
50%{background-position:100% 31%} 50% { background-position: 100% 31%; }
100%{background-position:0% 70%} 100% { background-position: 0% 70%; }
} }
@-moz-keyframes gradientanimator { @-moz-keyframes gradientanimator {
0%{background-position:0% 70%} 0% { background-position: 0% 70%; }
50%{background-position:100% 31%} 50% { background-position: 100% 31%; }
100%{background-position:0% 70%} 100% { background-position: 0% 70%; }
} }
@keyframes gradientanimator { @keyframes gradientanimator {
0%{background-position:0% 70%} 0% { background-position: 0% 70%; }
50%{background-position:100% 31%} 50% { background-position: 100% 31%; }
100%{background-position:0% 70%} 100% { background-position: 0% 70%; }
} }
body { body {
background-color: #fffdfb; background-color: #fffdfb;
font-family: 'Platypi', serif; font-family: 'Platypi', serif;
@ -65,60 +71,77 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
#links { .navlinks {
position: relative; position: relative;
font-family: 'Platypi'; font-family: 'Platypi';
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
padding: 0.5rem; text-decoration: none;
padding: 0 0 0.5rem;
line-height: 160%;
} }
.navlinks a:hover {
#links:hover{
animation: wiggle 0.6s infinite; 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 { .content-list {
font-size: 41px; font-size: 41px;
max-width: 40rem; max-width: 40rem;
margin: auto; margin: auto;
margin-right: 0; margin-right: 0;
line-height: 3.5rem; line-height: 3.5rem;
}
a { .content-list a {
color: inherit; color: inherit;
} }
img { .content-list img {
width: 2rem; width: 2rem;
height: auto; height: auto;
vertical-align: middle; vertical-align: middle;
filter: saturate(2); filter: saturate(2);
} }
a:hover img, img:hover { .content-list a:hover img, .content-list img:hover {
animation: wiggle 0.6s infinite; animation: wiggle 0.6s infinite;
cursor: pointer; cursor: pointer;
}
} }
#licensing-information { #licensing-information {
font-size: 0.5rem; font-size: 0.5rem;
} }
.container { .container {
margin: 50px 0; margin: 50px 0;
line-height: 3.5rem; line-height: 3.5rem;
}
h1 {
font-style: normal;
}
h2 { .container h1 {
font-size: 20px; font-style: normal;
max-width: 30%; }
margin: 0;
margin-bottom: -0.5rem; .container h2 {
} font-size: 20px;
max-width: 30%;
margin: 0;
margin-bottom: -0.5rem;
} }
#content { #content {
@ -127,119 +150,135 @@ body {
margin-right: 0; margin-right: 0;
} }
header{ header {
line-height:1.3; line-height: 1.3;
} }
h1, #project-title { h1, #project-title {
font-family: 'Platypi'; font-family: 'Platypi';
font-size: 1.6rem; font-size: 1.6rem;
} }
iframe{
iframe {
width: 100%; width: 100%;
height: 20rem; height: 20rem;
border-radius: 0.5rem; border-radius: 0.5rem;
overflow-x: hidden; overflow-x: hidden;
border: none; border: none;
} }
img{
img {
max-width: 100%; max-width: 100%;
padding: 0; padding: 0;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
figcaption{
figcaption {
font-size: 1rem; font-size: 1rem;
padding: 1rem 0 0; padding: 1rem 0 0;
} }
figure{
figure {
width: 100%; width: 100%;
margin: 0 0 2rem; margin: 0 0 2rem;
padding: 0; padding: 0;
} }
hr{
hr {
border: none; border: none;
margin: 4rem; margin: 4rem;
} }
#galleries{ #galleries {
width: 74%; width: 74%;
} }
nav{
nav {
position: fixed; position: fixed;
a{color: inherit;}
h1{font-style: normal;}
} }
#script{ nav a {
color: inherit;
}
nav h1 {
font-style: normal;
}
#script {
max-width: 40rem; max-width: 40rem;
margin: auto; margin: auto;
margin-right: 0; 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); background: var(--spot-color-1);
color: #fff; color: #fff;
} }
@keyframes wiggle {
25% { @media only screen and (max-width: 768px) {
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){
body { body {
line-height: 1.3; line-height: 1.3;
padding: 2rem; padding: 2rem;
} }
.container { .container {
line-height: 2rem; line-height: 2rem;
margin: 70px 0; margin: 70px 0;
}
h1 {
font-size: 30px; .container h1 {
font-style: normal; font-size: 30px;
} font-style: normal;
}
h2 {
font-size: 20px; .container h2 {
margin-bottom: -0.25rem; font-size: 20px;
} margin-bottom: -0.25rem;
} }
.content-list { .content-list {
font-size: 22px; font-size: 22px;
line-height: 2rem; line-height: 2rem;
img{
margin: -50px 0;
overflow-y:visible;
}
} }
nav{ .content-list img {
margin: -50px 0;
overflow-y: visible;
}
nav {
position: static; position: static;
h1{font-size: 1.8rem;}
.gummies{margin: 0;}
.gummy{width: 2.5rem;}
} }
}
nav h1 {
font-size: 1.8rem;
}
.gummies {
margin: 0;
}
.gummy {
width: 2.5rem;
}
}

Write Preview
Loading…
Cancel
Save