172 lines
3.2 KiB
SCSS
172 lines
3.2 KiB
SCSS
html {
|
|
font: #{$base-font-size} $font-sans;
|
|
color: $color-text;
|
|
scroll-behavior: smooth;
|
|
min-width: 320px;
|
|
|
|
@media screen and (prefers-reduced-motion: reduce) {
|
|
scroll-behavior: auto;
|
|
}
|
|
}
|
|
body {
|
|
@include font-smooth;
|
|
background: $color-primary;
|
|
cursor: default;
|
|
overflow-x: hidden;
|
|
}
|
|
*, *:before, *:after {
|
|
box-sizing: border-box;
|
|
}
|
|
strong {
|
|
font-weight: normal;
|
|
}
|
|
em {
|
|
font-style: normal;
|
|
}
|
|
figure, p, dl, dt, dd, ul, ol, li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
figure img {
|
|
display: block;
|
|
}
|
|
button {
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Selection
|
|
::selection { color: #fff; background: $color-secondary; }
|
|
::-moz-selection { color: #fff; background: $color-secondary; }
|
|
|
|
// Images glitches fix
|
|
// img {backface-visibility: hidden;}
|
|
|
|
|
|
|
|
/* Titles
|
|
========================================================================== */
|
|
#{headings(1,6)} {
|
|
margin: 0;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
// Title: Massive
|
|
.title-massive {
|
|
font-family: $font-serif-extra;
|
|
font-size: pxVW(800);
|
|
line-height: 1;
|
|
color: $color-secondary;
|
|
letter-spacing: -2vw;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
|
|
@include breakpoint (xxl) {
|
|
font-size: rem(900px);
|
|
}
|
|
}
|
|
|
|
// Title: Locations
|
|
.title-location {
|
|
font-family: $font-serif;
|
|
font-size: rem(68px);
|
|
line-height: 1;
|
|
color: $color-secondary;
|
|
text-align: center;
|
|
|
|
@include breakpoint (sm) {
|
|
font-size: rem(64px);
|
|
}
|
|
@include breakpoint (lg) {
|
|
font-size: rem(72px);
|
|
}
|
|
@include breakpoint (xl) {
|
|
font-size: rem(96px);
|
|
}
|
|
|
|
em {
|
|
display: block;
|
|
font-size: rem(18px);
|
|
color: $color-lightpurple;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
|
|
@include breakpoint (sm) {
|
|
display: inline-block;
|
|
font-size: rem(32px);
|
|
margin-right: -8px;
|
|
}
|
|
}
|
|
|
|
// Bigger version
|
|
&--big {
|
|
font-size: rem(56px);
|
|
|
|
@include breakpoint (sm) {
|
|
font-size: rem(160px);
|
|
}
|
|
|
|
em {
|
|
display: inline-block;
|
|
font-size: rem(20px);
|
|
|
|
@include breakpoint (sm) {
|
|
margin-left: -8px;
|
|
font-size: rem(56px);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Inline version
|
|
&--inline {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
|
|
em {
|
|
margin: 0 16px 0 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* Text Styles
|
|
========================================================================== */
|
|
.style-location {
|
|
text-align: center;
|
|
|
|
.street {
|
|
margin-bottom: 8px;
|
|
font-family: $font-serif;
|
|
font-size: rem(24px);
|
|
|
|
@include breakpoint (sm) {
|
|
font-size: rem(28px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.style-caps {
|
|
font-size: rem(14px);
|
|
color: $color-tertiary;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.style-description {
|
|
font-family: $font-sans-light;
|
|
font-size: rem(18px);
|
|
line-height: 1.55;
|
|
text-align: center;
|
|
|
|
@include breakpoint (sm) {
|
|
max-width: 572px;
|
|
font-size: rem(28px);
|
|
line-height: 1.64;
|
|
}
|
|
}
|