643 lines
No EOL
14 KiB
SCSS
643 lines
No EOL
14 KiB
SCSS
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Roboto:wght@100;300;400;500;700;900&display=swap');
|
|
|
|
* {
|
|
--fluid-size: var(--min-font-size) * 1px + (var(--max-font-size) - var(--min-font-size)) * ((100vw - 420px) / (1200 - 420));
|
|
--bkg-color: rgb(200, 0, 0);
|
|
--faded-black: rgba(0, 0, 0, .20);
|
|
}
|
|
|
|
html {
|
|
overflow-x: hidden;
|
|
scroll-behavior: smooth;
|
|
--min-font-size: 50;
|
|
--max-font-size: 80;
|
|
scroll-padding-top: #{'clamp(var(--min-font-size) * 1.5px, var(--fluid-size), var(--max-font-size) * 1.5px)'};
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100vw;
|
|
//height: 100vh;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
background: var(--bkg-color);
|
|
}
|
|
|
|
#loader{
|
|
width: 100vw;
|
|
height:100vh;
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: #{'clamp(var(--min-font-size) * 1px, var(--fluid-size), var(--max-font-size) * 1px)'};
|
|
font-family: 'Fredoka One', serif;
|
|
color: #eee;
|
|
text-shadow: 0px 3px 0px rgb(139, 139, 139);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
header {
|
|
position: fixed;
|
|
height: 100vh;
|
|
width: calc(100vw - 20px);
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
|
|
p {
|
|
--min-font-size: 50;
|
|
--max-font-size: 80;
|
|
font-size: #{'clamp(var(--min-font-size) * 1px, var(--fluid-size), var(--max-font-size) * 1px)'};
|
|
font-family: 'Fredoka One', serif;
|
|
margin: 0;
|
|
line-height: .8;
|
|
margin-left: -.25em;
|
|
color: rgba(0, 0, 0, .1);
|
|
text-shadow: 0px 2px 3px rgba(255, 0, 0, .1);
|
|
letter-spacing: 0px;
|
|
}
|
|
}
|
|
|
|
main {
|
|
z-index: 2;
|
|
width: #{'clamp(50vw, 350px, 100vw - 100px)'};
|
|
//width: math.clamp(50vw * 1px, 350px, 100vw * 1px);
|
|
//width: math.clamp(200px, 330px, 600px);
|
|
margin-bottom: 200px;
|
|
}
|
|
|
|
footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
|
|
.vol {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 1.25em;
|
|
padding: .5em;
|
|
background: #1542F6;
|
|
color: white;
|
|
letter-spacing: 10px;
|
|
font-weight: 100;
|
|
|
|
a {
|
|
font-weight: 900 !important;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
nav.glossary {
|
|
// position: fixed;
|
|
// bottom:0;
|
|
// left:0;
|
|
background-color: var(--bkg-color);
|
|
z-index: 2;
|
|
//width: #{'clamp(50vw, 350px, 100vw - 100px)'};
|
|
width: 100vw;
|
|
// z-index: 100;
|
|
//display: flex;
|
|
//justify-content: center;
|
|
//align-items: start;
|
|
// left: 0;
|
|
|
|
ul {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
align-content: stretch;
|
|
margin: 0;
|
|
padding: .5em;
|
|
|
|
li {
|
|
border-radius: .5em;
|
|
background-color: var(--faded-black);
|
|
padding: 10px;
|
|
margin: .25em;
|
|
font-family: 'Roboto', sans-serif;
|
|
border: 2px solid transparent;
|
|
text-transform: uppercase;
|
|
font-weight: 800;
|
|
|
|
a {
|
|
color: var(--bkg-color);
|
|
text-transform: uppercase;
|
|
font-weight: 800;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
color: white !important;
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: calc(100% + 16px);
|
|
height: .15em;
|
|
background-color: black;
|
|
left: -8px;
|
|
top: .5em;
|
|
transform: rotate(5deg);
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:first-child {
|
|
background-color: transparent;
|
|
border: 2px solid var(--faded-black);
|
|
color: var(--faded-black);
|
|
}
|
|
|
|
.todo {
|
|
display: none;
|
|
background: white;
|
|
border-radius: 100px;
|
|
color: black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
nav.contact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
opacity: .4;
|
|
position: fixed;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
top: 0px;
|
|
right: 0px;
|
|
font-family: 'Roboto', sans-serif;
|
|
|
|
ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-right: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
|
|
li {
|
|
list-style-type: none;
|
|
font-size: 16pt;
|
|
//font-family: $font_main;
|
|
font-weight: bold;
|
|
height: 1.5em;
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.suggestions {
|
|
transform: rotate(270deg);
|
|
//transform-origin: 52% -150%;
|
|
transform-origin: 51% -261%;
|
|
text-transform: uppercase;
|
|
font-weight: 900;
|
|
font-size: .75em;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 14px;
|
|
line-height: .9;
|
|
}
|
|
|
|
.arrow {
|
|
height: 1.5em;
|
|
}
|
|
|
|
a {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
color: transparent;
|
|
|
|
@media screen and (max-width: 767px) {
|
|
span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
color: black;
|
|
transition: .3 all;
|
|
}
|
|
}
|
|
|
|
img {
|
|
height: 1.5em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
section {
|
|
margin-top: 10vh;
|
|
border-radius: 30px;
|
|
background: linear-gradient(to right, rgb(228, 207, 180), rgb(187, 165, 135));
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
padding: 1px 10px 1px 50px;
|
|
position: relative;
|
|
box-shadow: 0px 3px 0px rgb(155, 132, 101), 0 0 100px 10px rgba(0, 0, 0, .5);
|
|
}
|
|
|
|
h1 {
|
|
color: #eee;
|
|
text-shadow: 0px 3px 0px rgb(139, 139, 139);
|
|
text-transform: uppercase;
|
|
position: absolute;
|
|
top: -1.5em;
|
|
--min-font-size: 30;
|
|
--max-font-size: 60;
|
|
font-size: #{'clamp(var(--min-font-size) * 1px, var(--fluid-size), var(--max-font-size) * 1px)'};
|
|
font-family: 'Fredoka One', serif;
|
|
display: flex;
|
|
align-items: center;
|
|
// text-decoration:line-through;
|
|
// text-decoration-color:red;
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: calc(100% + 20px);
|
|
height: .15em;
|
|
background-color: black;
|
|
left: -10px;
|
|
transform: rotate(5deg);
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
|
|
.items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
|
|
.item {
|
|
display: grid;
|
|
grid-template-columns: auto 6em;
|
|
grid-template-areas:
|
|
"title badges"
|
|
"desc badges";
|
|
}
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
}
|
|
|
|
.item-title {
|
|
grid-area: title;
|
|
font-family: 'Roboto', sans-serif;
|
|
|
|
h2 {
|
|
|
|
|
|
--min-font-size: 24;
|
|
--max-font-size: 40;
|
|
font-size: #{'clamp(var(--min-font-size) * 1px, var(--fluid-size), var(--max-font-size) * 1px)'};
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-bottom: 0;
|
|
|
|
&:before {
|
|
content: '';
|
|
width: 20px;
|
|
height: 20px;
|
|
background: rgba(0, 0, 0, .5);
|
|
border-radius: 100px 24px 24px 100px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.link-twitter {
|
|
margin-left: 30px;
|
|
color: var(--bkg-color);
|
|
font-weight: 700;
|
|
}
|
|
|
|
}
|
|
|
|
a {
|
|
color: black;
|
|
text-decoration: none;
|
|
transition: all .3s;
|
|
|
|
&:hover {
|
|
color: black;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
p.desc {
|
|
grid-area: desc;
|
|
--min-font-size: 12;
|
|
--max-font-size: 20;
|
|
font-size: #{'clamp(var(--min-font-size) * 1px, var(--fluid-size), var(--max-font-size) * 1px)'};
|
|
font-family: 'Roboto', sans-serif;
|
|
margin-left: 30px;
|
|
opacity: .5;
|
|
}
|
|
|
|
a>h2 {
|
|
display: inline;
|
|
}
|
|
|
|
.badge- {
|
|
display: none;
|
|
}
|
|
|
|
.badges {
|
|
grid-area: badges;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
align-content: center;
|
|
justify-content: flex-end;
|
|
flex-wrap: wrap;
|
|
//outline: greenyellow solid 1px;
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.badge-1 {
|
|
|
|
width: 2em;
|
|
height: 2em;
|
|
padding: .25em;
|
|
//position: relative;
|
|
//margin-right: 10px;
|
|
overflow: hidden;
|
|
|
|
.flyout {
|
|
font-family: 'Roboto', sans-serif;
|
|
position: absolute;
|
|
max-width: 2em;
|
|
max-height: 2em;
|
|
transition: none;
|
|
padding: 10px;
|
|
margin: -10px;
|
|
border-radius: 10px;
|
|
//background-color: white;
|
|
|
|
p {
|
|
opacity: 0;
|
|
font-size: .75em;
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: 10px;
|
|
margin: -10px;
|
|
|
|
&:before {
|
|
border-radius: 1em;
|
|
text-align: center;
|
|
content: '';
|
|
font-family: 'Fredoka One', serif;
|
|
font-size: .75em;
|
|
//padding: .5em;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
span {
|
|
//margin-left: 10px;
|
|
overflow: hidden;
|
|
width: 0;
|
|
opacity: 0;
|
|
//transition: all .3s;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
overflow: visible;
|
|
z-index: 2;
|
|
|
|
.flyout {
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
max-width: 20em;
|
|
max-height: 20em;
|
|
box-shadow: 5px 0 10px 3px rgba(0, 0, 0, .1);
|
|
transition: all .3s;
|
|
min-width: calc(2em + 15ch + 30px);
|
|
|
|
h3 span {
|
|
//max-width: 100%;
|
|
margin-left: 10px;
|
|
opacity: 1;
|
|
width: 15ch;
|
|
transition: opacity .3s;
|
|
//transition-delay: .3s;
|
|
}
|
|
|
|
p {
|
|
opacity: 1;
|
|
transition: all .3s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.badge-dx h3:before {
|
|
background: rgb(200, 0, 0);
|
|
;
|
|
content: 'dx';
|
|
box-shadow: 0px 2px 0px darken(rgb(200, 0, 0), 10%);
|
|
}
|
|
|
|
.badge-bc h3:before {
|
|
background: orange;
|
|
content: 'bc';
|
|
box-shadow: 0px 2px 0px darken(orange, 10%);
|
|
}
|
|
|
|
.badge-fd h3:before {
|
|
background: #3088D4;
|
|
content: 'fd';
|
|
box-shadow: 0px 2px 0px darken(#3088D4, 10%);
|
|
}
|
|
|
|
.badge-en h3:before {
|
|
background: rgb(89, 255, 47);
|
|
content: 'en';
|
|
color: darken(rgb(89, 255, 47), 20%);
|
|
box-shadow: 0px 2px 0px darken(rgb(89, 255, 47), 20%);
|
|
}
|
|
|
|
.badge-an h3:before {
|
|
background: black;
|
|
content: 'an';
|
|
box-shadow: 0px 2px 0px lighten(black, 30%);
|
|
}
|
|
|
|
.badge-pr h3:before {
|
|
background: rgb(199, 102, 199);
|
|
content: 'pr';
|
|
box-shadow: 0px 2px 0px darken(rgb(199, 102, 199), 10%);
|
|
}
|
|
|
|
.badge-fs h3:before {
|
|
background: hotpink;
|
|
content: 'fs';
|
|
box-shadow: 0px 2px 0px darken(hotpink, 10%);
|
|
}
|
|
|
|
.badge-os h3:before {
|
|
background: #eee;
|
|
content: 'os';
|
|
color: darken(#eee, 10%);
|
|
box-shadow: 0px 2px 0px darken(#eee, 10%);
|
|
}
|
|
|
|
@media screen and (max-width: 699px) {
|
|
|
|
html{
|
|
scroll-padding-top:60px;
|
|
}
|
|
|
|
body {
|
|
//align-items: flex-start;
|
|
}
|
|
|
|
header {
|
|
top: -5px;
|
|
flex-direction: row;
|
|
|
|
p {
|
|
--min-font-size: 40;
|
|
margin-left: 0;
|
|
|
|
.dot {
|
|
display: none;
|
|
}
|
|
|
|
&.alternative {
|
|
color: rgba(255, 255, 255, .1);
|
|
}
|
|
}
|
|
}
|
|
|
|
footer {
|
|
font-size: .9em;
|
|
}
|
|
|
|
section {
|
|
padding-left: 20px !important;
|
|
}
|
|
|
|
.item {
|
|
grid-template-columns: auto !important;
|
|
grid-template-areas:
|
|
"title"
|
|
"desc"
|
|
"badges" !important;
|
|
//margin-top:30px;
|
|
margin-bottom: 30px;
|
|
|
|
h2 {
|
|
--min-font-size: 40 !important;
|
|
}
|
|
}
|
|
|
|
.badges {
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
.badge-1 a {
|
|
display: none;
|
|
}
|
|
|
|
nav.contact{
|
|
justify-content: flex-start;
|
|
margin-top: 130px;
|
|
}
|
|
|
|
nav.glossary {
|
|
li {
|
|
padding: 0 !important;
|
|
background-color: transparent !important;
|
|
|
|
a {
|
|
color: var(--faded-black) !important;
|
|
}
|
|
|
|
&:first-child {
|
|
background-color: var(--faded-black) !important;
|
|
border-color: transparent !important;
|
|
color: var(--bkg-color) !important;
|
|
padding: 0 5px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
body{
|
|
align-items: flex-start;
|
|
}
|
|
|
|
header{
|
|
font-size:2.1em !important;
|
|
}
|
|
|
|
main{
|
|
width: 80vw;
|
|
margin-left:10px;
|
|
}
|
|
|
|
h1{
|
|
font-size:40px;
|
|
font-size: #{'min(8vw,40px)'};
|
|
line-height: 0em !important;
|
|
top:-.85em;
|
|
}
|
|
|
|
h2{
|
|
font-size:2em !important;
|
|
}
|
|
|
|
.item{
|
|
margin-top:1em;
|
|
margin-bottom:2em;
|
|
}
|
|
|
|
.badges{
|
|
height:auto !important;
|
|
}
|
|
|
|
footer{
|
|
font-size: #{'min(4vw, 16px)'};
|
|
}
|
|
} |