mirror of
https://github.com/LaconicNetwork/laconic.com.git
synced 2026-01-16 15:44:08 +00:00
120 lines
2.5 KiB
SCSS
120 lines
2.5 KiB
SCSS
@import './normalize.css';
|
|
@import './fonts.css';
|
|
@import './helpers';
|
|
|
|
:root {
|
|
--inspect-color: #f00;
|
|
--font-system: -apple-system, blinkmacsystemfont, segoe ui, roboto, oxygen,
|
|
ubuntu, cantarell, fira sans, droid sans, helvetica neue, sans-serif;
|
|
--font-tt-hoves: 'TT Hoves', var(--font-system);
|
|
--font-arthemys: 'Arthemys Display', var(--font-system);
|
|
--font-dm-mono: 'DM Mono', var(--font-system);
|
|
|
|
// Fonts
|
|
--font-heading: var(--font-arthemys);
|
|
|
|
// Colors
|
|
--color-accent: #0000f4;
|
|
--color-black: #040404;
|
|
--color-white: #fbfbfb;
|
|
--color-grey-light: #8e8e8e;
|
|
--color-grey-lightness: #dedede;
|
|
|
|
// Duration
|
|
--duration-normal: 0.525s;
|
|
--duration-fast: 0.262s;
|
|
|
|
// Bezier
|
|
--ease: cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
--ease-button: cubic-bezier(0.3, 1, 0.8, 1);
|
|
|
|
// Transition
|
|
--normal-transition: var(--duration-fast) var(--ease);
|
|
|
|
/* Main */
|
|
--main-padding-top: #{tovw(13px, 'default', 13px)};
|
|
--main-padding-side: #{tovw(57px, 'default', 16px)};
|
|
|
|
/* Header */
|
|
--header-height: #{tovw(71px)};
|
|
}
|
|
|
|
*,
|
|
*:active,
|
|
*:focus {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
background-color: var(--color-black);
|
|
text-rendering: geometricprecision;
|
|
color: var(--color-white);
|
|
-webkit-font-smoothing: antialiased;
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
-moz-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-text-size-adjust: 100%;
|
|
box-sizing: border-box;
|
|
line-height: 1.15;
|
|
font-variant-ligatures: common-ligatures;
|
|
|
|
&.no-animation {
|
|
* {
|
|
animation-play-state: paused;
|
|
}
|
|
}
|
|
}
|
|
|
|
html.has-custom-cursor,
|
|
html.has-custom-cursor *,
|
|
html.has-custom-cursor::after,
|
|
html.has-custom-cursor ::after,
|
|
html.has-custom-cursor::before,
|
|
html.has-custom-cursor ::before {
|
|
cursor: none !important;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-black);
|
|
color: var(--color-white);
|
|
font-family: var(--font-tthoves);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body:not(.user-is-tabbing) button:focus,
|
|
body:not(.user-is-tabbing) input:focus,
|
|
body:not(.user-is-tabbing) select:focus,
|
|
body:not(.user-is-tabbing) textarea:focus {
|
|
outline: none;
|
|
}
|
|
|
|
p {
|
|
font-size: tovw(24px, 'default', 18px);
|
|
font-family: var(--font-tt-hoves);
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.hide-on-mobile {
|
|
display: inherit !important;
|
|
@include respond-to('mobile') {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.hide-on-desktop {
|
|
display: initial !important;
|
|
@media screen and (min-width: 901px) {
|
|
display: none !important;
|
|
}
|
|
}
|