From 7f2209f5e4afa496d6dcbac6e17dc00ef28e4d9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A1=D0=B5=D1=80=D0=B3=D0=B5=D0=B9=20=D0=A2=D1=8F=D0=BF?= =?UTF-8?q?=D0=BA=D0=B8=D0=BD?= Date: Fri, 5 Apr 2024 14:35:29 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?= =?UTF-8?q?=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE=D1=81=D1=82?= =?UTF-8?q?=D1=8C=20=D0=BD=D0=B0=D1=81=D1=82=D1=80=D0=BE=D0=B9=D0=BA=D0=B8?= =?UTF-8?q?=20=D0=B2=D0=B5=D1=82=D0=BA=D0=B8=20=D0=B4=D0=BB=D1=8F=20=D0=B4?= =?UTF-8?q?=D0=B5=D0=BF=D0=BB=D0=BE=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Makefile | 4 ++-- docker-deploy/.env.example | 3 ++- src/styles/animations.styl | 33 +++++++++++++++++++++++++++++++++ src/styles/components.styl | 32 ++++++++++++++++++++++++++++++++ src/styles/fontsLoader.styl | 37 +++++++++++++++++++++---------------- src/styles/utils.styl | 13 +++++++++++++ 6 files changed, 103 insertions(+), 19 deletions(-) create mode 100644 src/styles/animations.styl create mode 100644 src/styles/components.styl diff --git a/Makefile b/Makefile index 6e73eb0..89cda9b 100644 --- a/Makefile +++ b/Makefile @@ -34,7 +34,7 @@ set-auto-renewing-certs: update: git fetch --all - git reset --hard origin/master + git reset --hard origin/$$(sed -n "s/^DEPLOY_BRANCH=//p" "docker-deploy/.env") git log --oneline -1 cd docker-deploy && \ docker compose up -d nginx --build @@ -99,7 +99,7 @@ set-docker-not-sudo: setup-env-file: cp --no-clobber ./docker-deploy/.env.example ./docker-deploy/.env echo '' && \ - echo 'Edit .env file. Write right DOMAIN_URL!' && \ + echo 'Edit .env file. Write right DOMAIN_URL without https:// and url paths!' && \ echo '[press Enter...]' && \ read ENTER nano ./docker-deploy/.env diff --git a/docker-deploy/.env.example b/docker-deploy/.env.example index 22e983c..d6ad80f 100644 --- a/docker-deploy/.env.example +++ b/docker-deploy/.env.example @@ -2,4 +2,5 @@ NODE_RELEASE=18 NGINX_RELEASE=1.23.3-alpine FRONTEND_COMPOSE_NAME=frontend-compose API_PORT=3000 -DOMAIN_URL=your.domain +DOMAIN_URL=your.domain.com +DEPLOY_BRANCH=master diff --git a/src/styles/animations.styl b/src/styles/animations.styl new file mode 100644 index 0000000..e4b1614 --- /dev/null +++ b/src/styles/animations.styl @@ -0,0 +1,33 @@ +@require 'constants.styl' + +animation-roll-down(start-height=0, duration=2s, padding=0) + opacity 0 + max-height start-height + padding-top 0 + padding-bottom 0 + animation animation-roll-down duration ease forwards + @keyframes animation-roll-down + 0% + 10% + opacity 1 + 99% + opacity 1 + padding padding + max-height 3000px + 100% + opacity 1 + padding padding + max-height unset + +hover-effect() + cursor pointer + transition all 0.2s ease + @media ({desktop}) + &:hover + opacity 0.7 +hover-effect-underline(color=white) + background linear-gradient(color, color) 50% 100% / 0 1px no-repeat + transition all .2s + @media ({desktop}) + &:hover + background-size 100% 1px diff --git a/src/styles/components.styl b/src/styles/components.styl new file mode 100644 index 0000000..55115a6 --- /dev/null +++ b/src/styles/components.styl @@ -0,0 +1,32 @@ +@require 'constants.styl' +@require 'fonts.styl' +@require 'buttons.styl' +@require 'utils.styl' + +block(colorBorder=colorBorder) + display block + padding 35px + border colorBorder 2px solid + border-radius borderRadiusXL + header + font-large() + section + font-medium() +block-bg(colorBg=colorBg) + display block + background colorBg + +input() + margin 0 + padding 5px 10px + background colorBg + border colorBorder 1px solid + border-radius borderRadiusXS + color colorText2 + cursor text + trans() + &:focus + border-color colorBg + color colorText1 + &::placeholder + color colorText4 diff --git a/src/styles/fontsLoader.styl b/src/styles/fontsLoader.styl index 70ed7b4..a952759 100644 --- a/src/styles/fontsLoader.styl +++ b/src/styles/fontsLoader.styl @@ -1,23 +1,28 @@ -_font_default() - font-family SBSans +_font_default(font-family) + font-family font-family font-style normal font-stretch normal + font-display swap @font-face - _font_default() - src local(SBSans-Bold), - url(../res/fonts/SBSans/SBSansText-Bold.ttf) format("truetype"), - url(../res/fonts/SBSans/sbsanstext-bold-webfont.woff) format("woff") + _font_default(ALS-Sector) + src local(ALS-Sector-Bold), + src local(ALS Sector Bold), + url(/res/fonts/ALS_Sector/ALS_Sector_Bold.ttf) format("truetype"), + url(/res/fonts/ALS_Sector/ALS_Sector_Bold.woff) format("woff") font-weight 700 +//@font-face +// _font_default(ALS-Sector) +// src local(ALS-Sector-SemiBold), +// src local(ALS Sector SemiBold), +// url(/res/fonts/ALS_Sector/ALS_Sector_SemiBold.ttf) format("truetype"), +// url(/res/fonts/ALS_Sector/ALS_Sector_SemiBold.woff) format("woff") +// font-weight 600 @font-face - _font_default() - src local(SBSans-SemiBold), - url(../res/fonts/SBSans/SBSansText-SemiBold.ttf) format("truetype"), - url(../res/fonts/SBSans/sbsanstext-semibold-webfont.woff) format("woff") - font-weight 600 -@font-face - _font_default() - src local(SBSans-Regular), - url(../res/fonts/SBSans/SBSansText-Regular.ttf) format("truetype"), - url(../res/fonts/SBSans/sbsanstext-regular-webfont.woff) format("woff") + _font_default(ALS-Sector) + src local(ALS-Sector-Regular), + src local(ALS Sector Regular), + url(/res/fonts/ALS_Sector/ALS_Sector_Regular.ttf) format("truetype"), + url(/res/fonts/ALS_Sector/ALS_Sector_Regular.woff) format("woff") font-weight 500 + diff --git a/src/styles/utils.styl b/src/styles/utils.styl index 43f2bd6..1777e8a 100644 --- a/src/styles/utils.styl +++ b/src/styles/utils.styl @@ -14,6 +14,19 @@ centered-absolute-transform() left 50% transform translate(-50%, -50%) +trans(time=0.2s) + transition all time ease + +button-no-styles() + background none + outline none + border none + margin 0 + padding 0 +list-no-styles() + margin 0 + padding 0 + list-style none pc-hidden() @media ({desktop})