You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

242 lines
4.6 KiB
CSS

5 months ago
:root{
--spot-color-1: #009;
5 months ago
}
5 months ago
@font-face {
5 months ago
font-family: 'Platypi';
src: url('../fonts/Platypi[wght].woff2');
font-weight: 300 800;
5 months ago
font-style: normal;
}
@font-face {
5 months ago
font-family: 'Platypi';
src: url('../fonts/Platypi-Italic[wght].woff2');
font-weight: 300 800;
font-style: italic;
5 months ago
}
5 months ago
a {
5 months ago
color: var(--spot-color-1);
5 months ago
text-decoration: none;
}
blockquote{
5 months ago
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%;
5 months ago
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
5 months ago
-webkit-animation: gradientanimator 30s ease infinite;
-moz-animation: gradientanimator 30s ease infinite;
animation: gradientanimator 30s ease infinite;
5 months ago
}
@-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%}
5 months ago
}
5 months ago
body {
background-color: #fffdfb;
5 months ago
font-family: 'Platypi', serif;
5 months ago
font-size: 1.3125rem;
5 months ago
font-synthesis: none;
5 months ago
line-height: 1.3;
5 months ago
margin: 0;
5 months ago
padding: 4rem;
5 months ago
box-sizing: border-box;
}
5 months ago
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;
5 months ago
margin-right: 0.5rem;
5 months ago
}
button:hover{
animation: wiggle 0.6s infinite;
}
5 months ago
.content-list {
5 months ago
font-size: 41px;
max-width: 40rem;
5 months ago
margin: auto;
margin-right: 0;
5 months ago
line-height: 3.5rem;
5 months ago
5 months ago
a{color: inherit}
5 months ago
5 months ago
img {
width: 2rem;
height: auto;
vertical-align: middle;
filter: saturate(2);
}
a:hover img, img:hover {
animation: wiggle 0.6s infinite;
cursor: pointer;
}
5 months ago
}
5 months ago
.container {
5 months ago
margin: 50px 0;
5 months ago
line-height: 3.5rem;
h1 {font-style: normal}
5 months ago
5 months ago
h2 {
font-size: 40px;
max-width: 30%;
margin: 0;
margin-bottom: -0.5rem;
}
5 months ago
}
5 months ago
5 months ago
#content {
5 months ago
max-width: 40rem;
5 months ago
margin: auto;
margin-right: 0;
5 months ago
}
5 months ago
5 months ago
.desaturate{
filter: grayscale(90%) contrast(1.2) brightness(1.1);
}
5 months ago
.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);
}
5 months ago
.gummy img:hover{
scale: 1;
animation: wiggle 0.6s infinite;
cursor: pointer;
}
5 months ago
h1 {
font-weight: 700;
font-size: 50px;
font-style: italic;
margin: 0 0 0.5rem;
}
5 months ago
iframe{
width: 100%;
height: 20rem;
border-radius: 0.5rem;
filter: grayscale(70%);
overflow-x: hidden;
border: none;
}
5 months ago
img{
max-width: 100%;
5 months ago
border-radius: 0.5rem;
5 months ago
}
figcaption{
font-size: 0.85rem;
5 months ago
margin: 0.5rem 0 0 0.5rem;
5 months ago
}
figure{
width: 100%;
margin: 0 0 2rem;
}
5 months ago
hr{
border: none;
margin: 4rem;
}
5 months ago
nav{
position: fixed;
5 months ago
a{color: inherit;}
5 months ago
h1{font-style: normal;}
}
5 months ago
#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;
}
5 months ago
}
5 months ago
::selection{
background: var(--spot-color-1);
color: #fff;
}
5 months ago
@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){
5 months ago
body {
5 months ago
line-height: 1.3;
padding: 2rem;
5 months ago
}
5 months ago
.container {
5 months ago
line-height: 2rem;
margin: 70px 0; /* Adjusted for mobile */
5 months ago
h1 {
font-size: 30px;
font-style: normal;
}
h2 {
font-size: 20px;
margin-bottom: -0.25rem;
}
5 months ago
}
.content-list {
5 months ago
font-size: 22px;
line-height: 2rem;
img{
margin: -50px 0;
overflow-y:visible;
}
5 months ago
}
nav{
position: static;
h1{font-size: 1.8rem;}
.gummies{margin: 0;}
.gummy{width: 2.5rem;}
}
}