|
* { |
|
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; |
|
} |
|
} |
|
} |
|
} |