continiuing transition from steam
This commit is contained in:
139
css/fira.css
Normal file
139
css/fira.css
Normal file
@@ -0,0 +1,139 @@
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-Hair.woff2') format('woff2'), url('../fonts/fira/FiraSans-Hair.woff') format('woff');
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-HairItalic.woff2') format('woff2'), url('../fonts/fira/FiraSans-HairItalic.woff') format('woff');
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-UltraLight.woff2') format('woff2'), url('../fonts/fira/FiraSans-UltraLight.woff') format('woff');
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-UltraLightItalic.woff2') format('woff2'), url('../fonts/fira/FiraSans-UltraLightItalic.woff') format('woff');
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-Light.woff2') format('woff2'), url('../fonts/fira/FiraSans-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-LightItalic.woff2') format('woff2'), url('../fonts/fira/FiraSans-LightItalic.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-Regular.woff2') format('woff2'), url('../fonts/fira/FiraSans-Regular.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-Italic.woff2') format('woff2'), url('../fonts/fira/FiraSans-Italic.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraMono-Medium.woff2') format('woff2'), url('../fonts/fira/FiraMono-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-MediumItalic.woff2') format('woff2'), url('../fonts/fira/FiraSans-MediumItalic.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-SemiBold.woff2') format('woff2'), url('../fonts/fira/FiraSans-SemiBold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-SemiBoldItalic.woff2') format('woff2'), url('../fonts/fira/FiraSans-SemiBoldItalic.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-Bold.woff2') format('woff2'), url('../fonts/fira/FiraSans-Bold.woff') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-BoldItalic.woff2') format('woff2'), url('../fonts/fira/FiraSans-BoldItalic.woff') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-ExtraBold.woff2') format('woff2'), url('../fonts/fira/FiraSans-ExtraBold.woff') format('woff');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-ExtraBoldItalic.woff2') format('woff2'), url('../fonts/fira/FiraSans-ExtraBoldItalic.woff') format('woff');
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-Heavy.woff2') format('woff2'), url('../fonts/fira/FiraSans-Heavy.woff') format('woff');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira;
|
||||
src: url('../fonts/fira/FiraSans-HeavyItalic.woff2') format('woff2'), url('../fonts/fira/FiraSans-HeavyItalic.woff') format('woff');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira Mono;
|
||||
src: url('../fonts/fira/FiraMono-Regular.woff2') format('woff2'), url('../fonts/fira/FiraMono-Regular.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Fira Mono;
|
||||
src: url('../fonts/fira/FiraMono-Bold.woff2') format('woff2'), url('../fonts/fira/FiraMono-Bold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
63
css/hack.css
Normal file
63
css/hack.css
Normal file
@@ -0,0 +1,63 @@
|
||||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('../fonts/hack/hack-regular.woff2?sha=3114f1256') format('woff2'), url('../fonts/hack/hack-regular.woff?sha=3114f1256') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('../fonts/hack/hack-bold.woff2?sha=3114f1256') format('woff2'), url('../fonts/hack/hack-bold.woff?sha=3114f1256') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('../fonts/hack/hack-italic.woff2?sha=3114f1256') format('woff2'), url('../fonts/hack/hack-italic.woff?sha=3114f1256') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('../fonts/hack/hack-bolditalic.woff2?sha=3114f1256') format('woff2'), url('../fonts/hack/hack-bolditalic.woff?sha=3114f1256') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('../fonts/hack/hack-regular-subset.woff2?sha=3114f1256') format('woff2'), url('../fonts/hack/hack-regular-subset.woff?sha=3114f1256') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('../fonts/hack/hack-bold-subset.woff2?sha=3114f1256') format('woff2'), url('../fonts/hack/hack-bold-subset.woff?sha=3114f1256') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('../fonts/hack/hack-italic-subset.woff2?sha=3114f1256') format('woff2'), url('../fonts/hack/hack-italic-subset.woff?sha=3114f1256') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Hack';
|
||||
src: url('../fonts/hack/hack-bolditalic-subset.woff2?sha=3114f1256') format('woff2'), url('../fonts/hack/hack-bolditalic-subset.woff?sha=3114f1256') format('woff');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
63
css/main.css
Normal file
63
css/main.css
Normal file
@@ -0,0 +1,63 @@
|
||||
@font-face {
|
||||
font-family: comissioner;
|
||||
src: url("../fonts/commissioner.ttf") format("ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
* {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
color: var(--text);
|
||||
transition: 0.1s ease-out;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
filter: blur(var(--blur, unset)) contrast(var(--contrast, unset));
|
||||
}
|
||||
|
||||
body {
|
||||
zoom: var(--zoom, 1);
|
||||
margin: 0;
|
||||
margin-left: var(--left, unset);
|
||||
margin-top: var(--top, unset);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
background-color: black;
|
||||
filter: blur(var(--blur, 3px)) contrast(var(--contrast, 30));
|
||||
}
|
||||
|
||||
header {
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header>h1 {
|
||||
margin: 0;
|
||||
margin-left: var(--left, unset);
|
||||
margin-top: var(--top, unset);
|
||||
width: max-content;
|
||||
opacity: var(--opacity, 1);
|
||||
line-height: 0;
|
||||
white-space: nowrap;
|
||||
font-size: 15rem;
|
||||
font-weight: var(--font-weight, 900);
|
||||
font-family: var(--font, 'Commissioner'), Roboto, sans-serif;
|
||||
text-shadow: var(--text-shadow, 'unset');
|
||||
}
|
||||
|
||||
canvas {
|
||||
transform: scale(var(--scale, 1));
|
||||
filter: url("#blob");
|
||||
}
|
||||
Reference in New Issue
Block a user