* {
box-sizing: border-box;
&:before,
&:after {
content: "";
position: absolute;
}
}
$font-title: "Chelsea Market", sans-serif;
$font-cursive: "Pacifico", cursive;
$font-text: "Neucha", sans-serif;
$black: #37353f;
$green: rgb(205, 220, 57);
$purple: #965784;
$pink: #fc8b93;
$orange: #feac5e;
$yellow: #fdc830;
$blue: #396afc;
$border: 1.5px solid #37353f;
$border-radius: 0 0 125px 3px/3px 85px 5px 55px;
$border-radius-rounded: 4px;
$box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
@mixin border($width) {
border: $width solid $black;
}
body {
background-image: linear-gradient(#e4e4e4 1px, transparent 1px),
linear-gradient(90deg, #e4e4e4 1px, transparent 1px);
background-size: 10px 10px, 10px 10px, 2px 2px, 2px 2px;
font-family: $font-title;
}
main {
max-width: 1000px;
margin: 4rem auto;
display: grid;
grid-row-gap: 10px;
grid-template-columns: repeat(6, 1fr);
.traced-header {
grid-column: 1 / -1;
}
.titles {
grid-column: span 2;
}
.lists {
grid-column: span 3;
}
.lists-2,
.forms {
grid-column: span 2;
}
.tapes {
text-align: center;
}
.images {
grid-column: 1 / 5;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
align-items: center;
}
.title-cloud {
grid-column: span 2;
}
@media (max-width: 1000px) {
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
section {
padding: 0 30px;
}
.traced-header {
grid-column: 1 / -1;
}
.lists-2,
.highlights,
.lists {
grid-column: span 2;
}
.highlights {
padding-bottom: 4rem;
> * {
display: inline-block;
vertical-align: middle;
}
}
.forms {
margin-top: 3rem;
}
.images {
grid-column: span 1;
grid-row: span 2;
grid-template-columns: 100%;
}
.titles h1 {
margin: 1rem 0 1.5rem;
}
.title-cloud {
grid-row: 2 / 3;
grid-column: 3 / 4;
margin-left: -7rem;
}
}
}
section {
padding: 20px;
}
label {
display: block;
width: 100%;
margin: 0.5rem 0;
}
button,
input,
select {
font-family: $font-title;
outline: none;
background: transparent;
&:focus,
&:active {
box-shadow: 0 0 0 2px rgba($purple, 0.5);
}
}
input[type="text"],
select {
padding: 8px;
@include border(1.5px);
border-radius: $border-radius;
width: 100%;
&.alternative {
border-width: 0 0 1.5px 0;
}
}
select,
button {
&:hover {
cursor: pointer;
}
}
input[type="radio"] {
display: none;
+ label {
margin: 5px 15px 5px 0;
display: inline-block;
position: relative;
padding-left: 1.5rem;
cursor: pointer;
width: auto;
&:after {
border: 1px dashed;
border-radius: 50%;
width: 15px;
height: 15px;
background: transparent;
transition: 0.3s ease-in-out;
top: 50%;
left: 0;
margin-top: -10px;
}
&:hover:after {
background: rgba($pink, 0.3);
}
}
&:checked + label:after {
background: $pink;
}
}
input[type="checkbox"] {
display: none;
+ label {
margin: 5px 15px 5px 0;
display: inline-block;
position: relative;
padding-left: 1.5rem;
cursor: pointer;
width: auto;
&:before {
@include border(1.5px);
border-radius: $border-radius;
width: 15px;
height: 15px;
background: transparent;
transition: 0.3s ease-in-out;
top: 50%;
left: 0;
margin-top: -10px;
}
&:after {
content: "✓";
font-size: 1.6rem;
left: 2px;
bottom: 0;
transform: scale(0);
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
&:hover:before {
background: rgba($green, 0.4);
}
}
&:checked + label:before {
background: rgba($green, 0.8);
}
&:checked + label:after {
transform: scale(1);
}
}
.field-wrapper {
width: 100%;
&:not(:last-child) {
margin-bottom: 1.5rem;
}
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
fieldset {
@include border(1px);
border-radius: $border-radius;
padding: 2rem 2rem 1.2rem;
margin: 20px;
position: relative;
&:before,
&:after {
top: 0;
left: 0.25%;
height: 100%;
border: inherit;
border-radius: $border-radius-rounded;
transform: rotate(-0.1deg) scaleX(-1);
z-index: -1;
width: 99.5%;
}
&:after {
transform: rotate(-0.25deg);
left: 0.15%;
}
legend {
background: $black;
font-family: $font-title;
font-size: 1.3rem;
color: #fff;
position: absolute;
top: -18px;
padding: 6px 12px;
border-radius: $border-radius;
transform: rotate(-1deg);
}
}
.box-1 {
@include border(1.5px);
border-radius: $border-radius;
box-shadow: 4px 4px 0 0 rgba(252, 139, 147, 0.8);
margin-top: 1rem;
padding: 1.5rem 1.5rem 1rem;
h3 {
font-family: $font-text;
font-size: 3rem;
text-transform: uppercase;
transform: translate(-8px, -8px);
position: relative;
margin-bottom: 1rem;
&:before {
border-radius: $border-radius;
width: calc(100% - 110px);
height: 50%;
border-bottom: 1.5px solid;
bottom: 10px;
right: -12px;
}
small {
display: inline-block;
font-family: Liu Jian Mao Cao;
text-transform: none;
font-size: 50%;
color: $pink;
vertical-align: top;
margin: 2px 0 0 15px;
}
}
}
figure {
width: 100%;
line-height: 0;
display: inline-block;
img {
width: 100%;
object-fit: cover;
height: 140px;
margin: 0;
}
figcaption {
font-family: $font-cursive;
text-align: center;
margin-top: 5px;
line-height: 1.3;
}
&.polaroid {
padding: 8px;
@include border(1.5px);
border-radius: $border-radius;
background: #fff;
box-shadow: $box-shadow;
}
&.classy {
padding: 5px;
border-radius: 2px;
background: #fff;
box-shadow: $box-shadow;
position: relative;
&:before,
&:after {
width: 0;
height: 0;
border-style: solid;
}
&:before {
left: -1px;
top: -1px;
box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.15);
border-width: 35px 35px 0 0;
border-color: $pink transparent transparent transparent;
}
&:after {
right: -1.5px;
bottom: -2px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
border-width: 0 0 35px 35px;
border-color: transparent transparent $pink transparent;
}
}
&.frame {
@include border(1.5px);
border-radius: $border-radius;
padding: 16px;
background: rgba($pink, 0.4);
position: relative;
overflow: hidden;
img {
border: inherit;
border-radius: inherit;
position: relative;
z-index: 1;
@include border(1.5px);
}
&:before,
&:after {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
&:before {
background: linear-gradient(
-44deg,
transparent 0,
transparent 50%,
#37353f 50%,
#37353f 50.6%,
transparent 50.6%,
transparent 100%
);
}
&:after {
background: linear-gradient(
42deg,
transparent 0,
transparent 50%,
#37353f 50%,
#37353f 50.6%,
transparent 50.6%,
transparent 100%
);
}
}
}
ul {
margin: 0.8rem 0;
li {
padding: 0.2rem 0 0.2rem 2.2rem;
position: relative;
}
&.squiggly li:before {
content: "⤳";
left: 0.2rem;
top: 0;
line-height: 1.3rem;
font-size: 2rem;
}
&.important li:before {
content: "*";
font-family: $font-title;
left: 0.6rem;
top: 0;
line-height: 1.8rem;
font-size: 2rem;
}
&.curved li:before {
content: "⤹";
left: 0.8rem;
top: 0;
line-height: 1.3rem;
font-size: 2rem;
transform: rotate(-45deg);
}
}
.washi-tape {
display: inline-block;
width: 85px;
height: 30px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
transform: rotate(-25deg);
margin: 0.2rem 0;
&.polkadot {
background-color: rgba($pink, 0.3);
background-image: radial-gradient(circle, #fc8b93 20%, transparent 20%),
radial-gradient(circle, #fc8b93 20%, transparent 20%);
background-size: 10px 10px, 10px 10px;
background-position: 0 0, 5px 5px;
}
&.polkadot-dark {
background-color: $purple;
background-image: radial-gradient(circle, #fff 20%, transparent 20%),
radial-gradient(circle, #fff 20%, transparent 20%);
background-size: 10px 10px, 10px 10px;
background-position: 0 0, 5px 5px;
}
&.dream {
background: radial-gradient(
circle at 50% 60%,
rgba(149, 176, 249, 1),
rgba(149, 176, 249, 0) 50%
),
radial-gradient(
circle at 10% 10%,
rgba(114, 226, 253, 1),
rgba(114, 226, 253, 0) 50%
),
radial-gradient(
circle at 77% 16%,
rgba(184, 150, 255, 1),
rgba(184, 150, 255, 0) 50%
),
radial-gradient(
circle at 90% 90%,
rgba(86, 207, 210, 1),
rgba(86, 207, 210, 0) 50%
),
radial-gradient(
circle at 10% 90%,
rgba(168, 112, 253, 1),
rgba(168, 112, 253, 0) 50%
);
}
&.zigzag {
background-repeat: repeat-x;
background-color: $green;
background-image: repeating-linear-gradient(
45deg,
transparent,
transparent 2px,
$blue 2px,
$blue 4px,
transparent 4px,
transparent 9px
),
repeating-linear-gradient(
-45deg,
transparent,
transparent 2px,
$blue 2px,
$blue 4px,
transparent 4px,
transparent 9px
);
background-size: 20px 60px;
background-position: center top -3px, center top -3px;
}
&.emoji {
overflow: hidden;
background: linear-gradient(to bottom right, #fdc830, #ffefbf, #fdc830);
&:before {
content: "😺 😸 😹 😻 😼 😽 ";
white-space: nowrap;
font-size: 0.9rem;
letter-spacing: -1px;
top: 30%;
left: -6px;
}
}
&.lines {
background-color: rgba(#e9e4f0, 0.6);
background-image: linear-gradient(
to bottom,
transparent,
transparent 25%,
#feac5e 25%,
#feac5e 31%,
transparent 31%,
transparent 52%,
#c779d0 52%,
#c779d0 57%,
transparent 58%,
transparent 80%,
#4bc0c8 80%,
#4bc0c8 85%,
transparent 85%
);
}
}
button {
border: 0;
box-shadow: none;
margin-top: 1.8rem;
}
.btn {
display: inline-block;
padding: 8px 12px;
position: relative;
transition: 0.2s ease-in-out;
width: 100%;
span {
position: relative;
z-index: 2;
}
&:before,
&:after {
top: 0;
left: 0;
transition: 0.2s ease;
}
&:before {
height: 102%;
width: 102%;
background: #d9de6e;
transform: translate(6px, 6px);
}
&:after {
height: 99%;
width: 99%;
@include border(1.5px);
border-radius: $border-radius;
}
&:hover {
&:before {
transform: translate(0);
}
}
&:focus,
&:active {
color: #fff;
&:before {
transform: translate(0);
background: #afb42b;
}
}
}
.btn-circle {
background-color: transparent;
transition: 0.1s ease-in-out;
display: inline-block;
border-radius: 50%;
width: 35px;
height: 35px;
position: relative;
border: 0;
box-shadow: none;
margin-right: 2px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 233.514 233.514' preserveAspectRatio='xMaxYMax slice'%3E%3Cpath d='M123.931,0.618c-1.224,0-2.447,0.612-3.061,1.836C60.894-6.115,8.263,41.009,0.917,100.374 c-7.956,62.424,36.72,122.399,99.144,131.58c59.978,9.181,123.013-32.437,132.192-93.636 C242.047,75.894,193.698-5.502,123.931,0.618z M220.015,146.886c-14.075,52.632-74.052,85.681-126.072,73.439 c-51.408-11.628-87.516-58.752-85.68-111.384C10.71,47.742,62.119,6.125,120.87,5.514c0.612,0.612,1.225,1.224,3.061,1.224 C189.414,9.186,236.539,85.686,220.015,146.886z'/%3E%3C/svg%3E");
&:before {
content: "♥";
font-size: 1.7rem;
top: 0;
left: 0;
text-align: center;
width: 100%;
line-height: 1.2;
}
&:hover {
background-color: rgba($pink, 0.4);
}
&:focus,
&:active {
color: #fff;
background-color: $pink;
}
&.btn-star {
&:before {
content: "★";
}
&:hover {
background-color: rgba($yellow, 0.4);
}
&:focus,
&:active {
background-color: $yellow;
}
}
&.btn-x {
&:before {
content: "+";
font-size: 2rem;
line-height: 1.1;
}
&:hover {
background-color: rgba($blue, 0.4);
}
&:focus,
&:active {
background-color: $blue;
}
}
}
.btn-box {
display: inline-block;
padding: 8px 20px;
width: 100%;
position: relative;
transition: 0.2s ease-in-out;
background: $pink;
@include border(1.5px);
border-radius: $border-radius;
box-shadow: 3px 3px 0 0 $black;
span {
position: relative;
z-index: 2;
}
&:hover {
background: rgba($pink, 0.6);
}
&:focus,
&:active {
transform: translate(3px, 3px);
}
}
.btn-box-dark {
background: $blue;
color: #fff;
box-shadow: 4px 4px 0 0 rgba($blue, 0.3);
&:hover {
color: $black;
background: rgba($blue, 0.3);
}
}
.highlight:before,
button.highlight:after {
width: 100%;
height: 80%;
top: -15%;
left: 0;
background: linear-gradient(
to right,
rgba($green, 0.3) 0%,
rgba($green, 0.4) 60%,
rgba($green, 0.4) 60%,
rgba($green, 0.6) 85%,
rgba($green, 0.8) 100%
);
border-radius: 10px 0/100px 20px;
z-index: -1;
transition: 0.1s ease;
}
.highlight {
position: relative;
display: inline-block;
margin: 0.8rem 0 0;
&.pink:before {
background: linear-gradient(
to right,
rgba($pink, 0.3) 0%,
rgba($pink, 0.4) 60%,
rgba($pink, 0.4) 60%,
rgba($pink, 0.6) 85%,
rgba($pink, 0.8) 100%
);
}
&.yellow:before {
background: linear-gradient(
to right,
rgba($yellow, 0.3) 0%,
rgba($yellow, 0.4) 60%,
rgba($yellow, 0.4) 60%,
rgba($yellow, 0.6) 85%,
rgba($yellow, 0.8) 100%
);
}
&.orange:before {
background: linear-gradient(
to right,
rgba($orange, 0.3) 0%,
rgba($orange, 0.4) 60%,
rgba($orange, 0.4) 60%,
rgba($orange, 0.6) 85%,
rgba($orange, 0.8) 100%
);
}
&.blue:before {
background: linear-gradient(
to right,
rgba($blue, 0.3) 0%,
rgba($blue, 0.4) 60%,
rgba($blue, 0.4) 60%,
rgba($blue, 0.6) 85%,
rgba($blue, 0.8) 100%
);
}
}
button.highlight {
font-size: 1.2rem;
margin-top: 0.3rem;
&:before,
&:after {
width: 0%;
top: 10%;
}
&:before {
left: 0;
background: linear-gradient(
to right,
rgba($purple, 0.2) 0%,
rgba($purple, 0.3) 60%,
rgba($purple, 0.3) 60%,
rgba($purple, 0.5) 85%,
rgba($purple, 0.7) 100%
);
}
&:after {
transition-delay: 0.3s;
transform: rotate(-7deg);
background: linear-gradient(
to right,
rgba($pink, 0.2) 0%,
rgba($pink, 0.3) 60%,
rgba($pink, 0.3) 60%,
rgba($pink, 0.5) 85%,
rgba($pink, 0.7) 100%
);
}
&:hover {
&:before {
width: 100%;
}
}
&:focus,
&:active {
&:before,
&:after {
width: 100%;
}
}
}
.highlights {
text-align: center;
h5 {
font-family: $font-title;
font-size: 1.5rem;
padding: 3px 15px;
margin-bottom: 1.1rem;
&:before {
top: 50%;
}
}
p,
button {
min-height: 30px;
min-width: 105px;
text-align: center;
}
}
.grocery-list {
display: grid;
grid-auto-flow: dense;
grid-template-columns: 25% 75%;
border: 1.5px solid $pink;
border-width: 2.5px 1px 2.5px 2.5px;
border-radius: $border-radius;
position: relative;
h4 {
position: absolute;
font-family: $font-title;
font-size: 1.8rem;
padding: 0.5rem;
min-width: 70%;
left: 50%;
transform: translate(-50%, -50%);
@include border(1.5px);
border-radius: $border-radius;
background: rgba($pink, 1);
text-align: center;
box-shadow: 5px 4px 0 0 #fff, 4px 6px 0 0 $black, 6.5px 5.5px 0 0 $black,
6.5px 2.5px 0 0 $black;
&:before {
content: none;
width: 100%;
height: 100%;
background: transparent;
@include border(1.5px);
top: 4px;
left: 4px;
}
}
input {
border-radius: 0;
border-width: 0 1.5px 1.5px 0;
border-right-color: $pink;
border-bottom-color: rgba($blue, 0.7);
padding: 4px 6px;
&:nth-last-of-type(-n + 2) {
border-bottom: 0;
}
}
}
h1 {
font-family: $font-cursive;
font-size: 3rem;
}
.title-cloud h1 {
margin: 20px 0 0 80px;
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(to bottom, rgba($blue, 0.3), rgba($blue, 0.2));
box-shadow: 20px 20px 0 0 rgba($blue, 0.15), 60px -30px 0 0 rgba($blue, 0.1),
60px 50px 0 0 rgba($blue, 0.12), -50px -20px 0 0 rgba($blue, 0.12),
-50px 20px 0 0 rgba($blue, 0.12), -40px 50px 0 0 rgba($blue, 0.2);
position: relative;
line-height: 1;
padding: 1.5rem 1rem 1.5rem 0;
transform: rotate(-3deg);
span {
display: block;
width: 100%;
white-space: nowrap;
text-align: center;
&:nth-child(2) {
transform: translate(-4px, -8px);
}
}
}
.normal-header h1 {
text-shadow: 3px 3.5px 0 rgba($pink, 0.7);
margin: 1.2rem 0;
}
.traced-header h1 {
-webkit-text-stroke: 1.5px black;
text-transform: uppercase;
font-family: $font-title;
letter-spacing: 0.5px;
font-size: 3.5rem;
margin-bottom: 1.2rem;
span:nth-child(odd) {
color: rgba($yellow, 0.6);
}
span:nth-child(even) {
color: rgba($green, 0.7);
}
}
.circled-header h1 {
margin: 3rem 0;
span.char {
display: inline-block;
font-family: $font-title;
text-transform: uppercase;
font-size: 1.5rem;
padding-top: 0.4rem;
width: 35px;
height: 35px;
text-align: center;
border-radius: 50%;
background: $purple;
color: #fff;
box-shadow: 0 0 0 2px #fff, 0 0 0 3px $purple;
&:not(:last-child) {
margin-right: 12px;
}
}
}
.repeated-header h1 {
font-family: $font-text, sans-serif;
text-transform: uppercase;
letter-spacing: 5px;
position: relative;
display: inline-block;
&:before {
content: "another";
font-family: $font-cursive;
text-transform: none;
z-index: -1;
opacity: 0.5;
color: $orange;
letter-spacing: 15px;
font-size: 80%;
left: 50%;
white-space: nowrap;
transform: translate(-49%, 10%);
}
}
[data-title] {
position: relative;
&:before {
content: attr(data-title);
width: 150px;
bottom: 50%;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.9);
display: inline-block;
padding: 5px 5px;
@include border(1.5px);
border-radius: $border-radius;
opacity: 0;
font-size: 0.9em;
transition: 0.2s ease;
z-index: 10;
text-align: center;
}
&:hover:before {
opacity: 1;
}
}
aside.context {
text-align: center;
color: $black;
line-height: 1.7;
font-size: 20px;
letter-spacing: 0.5px;
a {
text-decoration: none;
color: $black;
padding: 3px 0;
border-bottom: 1px dashed;
&:hover {
border-bottom: 1px solid;
}
}
.explanation {
max-width: 700px;
margin: 5em auto 0;
}
}
footer {
text-align: center;
margin: 1rem auto 3rem;
width: 100%;
a {
text-decoration: none;
display: inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
background: transparent;
border: 1px dashed $black;
color: #fff;
margin: 5px;
&:hover {
background: rgba(0, 0, 0, 0.1);
}
.icons {
margin-top: 12px;
display: inline-block;
font-size: 20px;
color: $black;
&:before {
position: relative;
}
}
}
}
!
