Add 'backplaces/style.css'
parent
4c7071bd84
commit
205abfbc32
@ -0,0 +1,257 @@
|
||||
:root{
|
||||
--spot-color-1: #009;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Platypi';
|
||||
src: url('../fonts/Platypi[wght].woff2');
|
||||
font-weight: 300 800;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Platypi';
|
||||
src: url('../fonts/Platypi-Italic[wght].woff2');
|
||||
font-weight: 300 800;
|
||||
font-style: italic;
|
||||
}
|
||||
a {
|
||||
color: var(--spot-color-1);
|
||||
text-decoration: none;
|
||||
}
|
||||
#about-student p{
|
||||
margin: 0;
|
||||
}
|
||||
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-animation: gradientanimator 30s ease infinite;
|
||||
-moz-animation: gradientanimator 30s ease infinite;
|
||||
animation: gradientanimator 30s ease infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes gradientanimator {
|
||||
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%}
|
||||
}
|
||||
@keyframes gradientanimator {
|
||||
0%{background-position:0% 70%}
|
||||
50%{background-position:100% 31%}
|
||||
100%{background-position:0% 70%}
|
||||
}
|
||||
body {
|
||||
background-color: #fffdfb;
|
||||
font-family: 'Platypi', serif;
|
||||
font-size: 1.3125rem;
|
||||
font-synthesis: none;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
padding: 4rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button{
|
||||
border: 1px solid var(--spot-color-1);
|
||||
font-family: 'Platypi';
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
background:none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
button:hover{
|
||||
animation: wiggle 0.6s infinite;
|
||||
}
|
||||
.content-list {
|
||||
font-size: 41px;
|
||||
max-width: 40rem;
|
||||
margin: auto;
|
||||
margin-right: 0;
|
||||
line-height: 3.5rem;
|
||||
|
||||
a{color: inherit}
|
||||
|
||||
img {
|
||||
width: 2rem;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
filter: saturate(2);
|
||||
}
|
||||
|
||||
a:hover img, img:hover {
|
||||
animation: wiggle 0.6s infinite;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 50px 0;
|
||||
line-height: 3.5rem;
|
||||
h1 {font-style: normal}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
max-width: 30%;
|
||||
margin: 0;
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#content {
|
||||
max-width: 40rem;
|
||||
margin: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.desaturate{
|
||||
filter: grayscale(90%) contrast(1.2) brightness(1.1);
|
||||
}
|
||||
.gummies{
|
||||
display: flex;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.gummy .caption{
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.gummy:hover .caption{
|
||||
opacity: 1
|
||||
}
|
||||
.gummy img{
|
||||
width: 4rem;
|
||||
filter: saturate(2);
|
||||
}
|
||||
.gummy img:hover{
|
||||
scale: 1;
|
||||
animation: wiggle 0.6s infinite;
|
||||
cursor: pointer;
|
||||
}
|
||||
header{
|
||||
line-height:1.3;
|
||||
}
|
||||
h1, #project-title {
|
||||
font-family: 'Platypi';
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
font-size: 50px;
|
||||
font-style: italic;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
iframe{
|
||||
width: 100%;
|
||||
height: 20rem;
|
||||
border-radius: 0.5rem;
|
||||
filter: grayscale(70%);
|
||||
overflow-x: hidden;
|
||||
border: none;
|
||||
}
|
||||
img{
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
figcaption{
|
||||
font-size: 0.6rem;
|
||||
margin: 0.5rem 0 0 0.5rem;
|
||||
}
|
||||
figure{
|
||||
width: 100%;
|
||||
margin: 0 0 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
hr{
|
||||
border: none;
|
||||
margin: 4rem;
|
||||
}
|
||||
|
||||
#galleries{
|
||||
width: 74%;
|
||||
}
|
||||
nav{
|
||||
position: fixed;
|
||||
a{color: inherit;}
|
||||
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{
|
||||
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){
|
||||
body {
|
||||
line-height: 1.3;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
line-height: 2rem;
|
||||
margin: 70px 0; /* Adjusted for mobile */
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
margin-bottom: -0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content-list {
|
||||
font-size: 22px;
|
||||
line-height: 2rem;
|
||||
img{
|
||||
margin: -50px 0;
|
||||
overflow-y:visible;
|
||||
}
|
||||
}
|
||||
|
||||
nav{
|
||||
position: static;
|
||||
h1{font-size: 1.8rem;}
|
||||
.gummies{margin: 0;}
|
||||
.gummy{width: 2.5rem;}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue