studio-variable/index-main
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

save
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
isUnknown 2026-01-06 11:19:25 +01:00
parent 522d975a3a
commit 48e7f21c71
37 changed files with 2595 additions and 1348 deletions
Download patch file Download diff file Expand all files Collapse all files

13
assets/css/base/_body.scss
View file

@ -5,7 +5,9 @@
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased
-o-font-smoothing: antialiased;
scroll-behavior: smooth;
}
a {
color: currentColor;
@ -27,15 +29,10 @@ body{
color: var(--color-txt);
background-color: var(--color-bg);
padding: 0px var(--padding-body);
width: 100vw;
overflow-x: hidden;
}
//temp
main{
// padding-top: calc(var(--header-h-shrinked) - var(--padding-body));
img{
max-width: 100%;
}

16
assets/css/base/_responsive.scss
View file

@ -1,14 +1,12 @@
$desktop: "screen and (min-width: 1200px)";
$medium: "screen and (max-width: 1200px)";
$small-up: "screen and (min-width: 720px)";
$small: "screen and (max-width: 720px)";
$x-small: "screen and (max-width: 560px)";
$medium: "screen and (max-width: 1080px)";
$medium-up: "screen and (min-width: 1080px)";
$small-up: "screen and (min-width: 768px)";
$small: "screen and (max-width: 768px)";
$x-small: "screen and (max-width: 560px)";
$paysage: "screen and (max-height: 670px) and (min-width: 1080px)";
@media #{$medium}{
:root{
--padding: 16px;
--padding-cards: 0.75rem;
--padding-cards-small: 0.5rem;
}
}

135
assets/css/base/_var.scss
View file

@ -1,55 +1,90 @@
:root{
--font: Arial, sans-serif;
:root {
--font: 'Executive', Arial, sans-serif;
--title: 'System', Arial, sans-serif;
// --fs-small: 9px;
// --font-size: 12px;
// --fs-medium: 18px;
// --fs-big: 24px;
// --fs-xsmall: 10px;
// --fs-small: 12px;
// --fs-normal: 16px;
// --fs-medium: 22px;
// --fs-big: 38px;
--fs-x-small: 9px;
--fs-small: 13px;
--fs-normal: 18px;
--fs-medium: 22px;
--fs-xsmall: 10px;
--fs-small: 12px;
--fs-normal: 16px;
--fs-medium: 20px;
--fs-big: 30px;
--fs-xbig: 38px;
--fs-button-bold: 22px;
--max-w-content: 700px;
@media #{$small} {
--fs-medium: 20px;
--fs-big: 26px;
}
--leading-tight: 1.05;
--leading-normal: 1.2;
// --leading-relaxed: 1.4;
// --leading-loose: 1.8;
--fw-normal: 400;
--fw-medium: 500;
--fw-bold: 600;
--grey-100: #d8d8d8;
--grey-200: #c8c8c8;
--grey-300: #b9b9b9;
--grey-400: #969696;
--grey-600: #6d6d6d;
--grey-800: #383838;
--color-bg: #161616;
--color-txt: #ffffff;
--color-txt-light: var(--grey-400);
--color-accent: #00ff00;
--color-accent-50: #e9ffe9;
--color-accent-100: #d8fdd8;
--dark: black;
--border: 1px solid var(--color-txt);
--border-light: 1px solid var(--grey-800);
--header-h: 80px;
--header-h-shrinked: 50px;
--menu-w: 420px;
--banner-medium: 220px;
// responsive
--padding-body: 26px;
--padding-inner: 14px;
--radius-small: 4px;
--radius-btn: 4px;
--spacing: 30px;
--h-block: 30px;
--curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media #{$small}{
:root {
--fs-xsmall: 10px;
--fs-small: 11px;
--fs-normal: 14px;
--fs-medium: 18px;
--fs-big: 28px;
--fs-x-big: 36px;
--fs-xbig: 32px;
--leading-tight: 1;
--leading-normal: 1.2;
// --leading-relaxed: 1.4;
// --leading-loose: 1.8;
--fw-normal: 400;
--fw-medium: 600;
--color-bg: #161616;
--color-txt: #FFFFFF;
--color-accent: #00FF00;
--color-accent-50: #e9ffe9;
--color-accent-100: #d8fdd8;
--grey-100: #d8d8d8;
--grey-300: #B9B9B9;
--grey-400: #969696;
--grey-800: #383838;
--border: 1px solid var(--color-txt);
--header-h: 140px;
--header-h-shrinked: 60px;
// responsive
--padding-body: 16px;
--radius-small: 4px;
--spacing: 40px;
--h-block: 40px;
--header-h: 60px;
}
}