_grid

.stylelintrc.json

@@ -21,15 +21,6 @@
     "function-url-quotes": null,
     "keyframes-name-pattern": null,
     "no-descending-specificity": null,
-    "order/order": [
-      {
-        "type": "at-rule",
-        "name": "include"
-      },
-      "custom-properties",
-      "declarations",
-      "rules"
-    ],
     "property-no-vendor-prefix": [
       true,
       {
@@ -40,12 +31,6 @@
     "scss/at-mixin-pattern": null,
     "scss/dollar-variable-colon-space-after": "always-single-line",
     "scss/dollar-variable-colon-space-before": "never",
-    "scss/dollar-variable-pattern": [
-      "^[a-z][a-zA-Z]+$",
-      {
-        "ignore": "global"
-      }
-    ],
     "scss/double-slash-comment-empty-line-before": [
       "always",
       {
@@ -68,6 +53,8 @@
       {
         "ignorePseudoClasses": ["global", "export"]
       }
-    ]
+    ],
+    "scss/at-if-no-null": true,
+    "media-query-no-invalid": true
   }
 }

package.json

@@ -29,7 +29,6 @@
     "@graphql-codegen/typescript-urql": "^4.0.0",
     "@hocuspocus/provider": "^2.13.6",
     "@playwright/test": "^1.47.2",
-    "@popperjs/core": "^2.11.8",
     "@solid-primitives/media": "^2.2.9",
     "@solid-primitives/memo": "^1.3.9",
     "@solid-primitives/pagination": "^0.3.0",
@@ -88,7 +87,6 @@
     "@types/throttle-debounce": "^5.0.2",
     "@urql/core": "^5.0.6",
     "axe-playwright": "^2.0.3",
-    "bootstrap": "^5.3.3",
     "clsx": "^2.1.1",
     "cookie": "^0.6.0",
     "cookie-signature": "^1.2.1",

src/components/Article/Article.module.scss

@@ -1,13 +1,11 @@
 h1 {
-  @include font-size(4rem);
+  font-size:4rem;
-
   line-height: 1.1;
   margin-top: 0.5em;
 }
 
 h2 {
-  @include font-size(4rem);
+  font-size:4rem;
-
   line-height: 1.1;
 }
 
@@ -96,12 +94,11 @@ img {
 
     &[data-float='left'],
     &[data-float='right'] {
-      @include font-size(2.2rem);
-
       @include media-breakpoint-up(sm) {
         clear: none;
       }
 
+      font-size:2.2rem;
       line-height: 1.4;
     }
 
@@ -114,13 +111,12 @@ img {
   ta-sub,
   ta-selection-frame,
   ta-border-sub {
-    @include font-size(1.4rem);
-
     @include media-breakpoint-up(md) {
       margin: 3.2rem -8.3333%;
       padding: 3.2rem 8.3333%;
     }
 
+    font-size:1.4rem;
     background: #f1f2f3;
     clear: both;
     display: block;
@@ -243,7 +239,7 @@ img {
 
 .shoutAuthor,
 .shoutDate {
-  @include font-size(1.5rem);
+  font-size:1.5rem;
 }
 
 .shoutAuthor {
@@ -282,8 +278,7 @@ img {
 }
 
 .writeComment {
-  @include font-size(1.7rem);
+  font-size:1.7rem;
-
   border: 2px solid #f6f6f6;
   outline: none;
   padding: 0.2em 0.4em;
@@ -295,8 +290,7 @@ img {
 }
 
 .commentWarning {
-  @include font-size(2.2rem);
+  font-size:2.2rem;
-
   background: #f6f6f6;
   margin-bottom: 1em;
   padding: 2.4rem 1.8rem;
@@ -325,12 +319,11 @@ img {
 }
 
 .shoutStatsItem {
-  @include font-size(1.5rem);
-
   @include media-breakpoint-up(xl) {
     margin-right: 3.2rem;
   }
 
+  font-size:1.5rem;
   align-items: center;
   font-weight: 500;
   display: flex;
@@ -487,8 +480,7 @@ img {
 }
 
 .topicsList {
-  @include font-size(1.2rem);
+  font-size:1.2rem;
-
   border-bottom: 1px solid #e8e8e8;
   letter-spacing: 0.08em;
   margin-top: 1.6rem;
@@ -535,8 +527,7 @@ img {
 }
 
 .commentsHeader {
-  @include font-size(2.4rem);
+  font-size: 2.4rem;
-
   margin-bottom: 1em;
 
   .newReactions {
@@ -569,8 +560,7 @@ img {
   padding-bottom: 3.2rem;
 
   button {
-    @include font-size(1.5rem);
+    font-size:1.5rem;
-
     border-radius: 0.8rem;
     margin-right: 1.2rem;
     padding: 0.9rem 1.2rem;
@@ -620,8 +610,7 @@ a[data-toggle='tooltip'] {
 }
 
 .tooltip {
-  @include font-size(1.4rem);
+  font-size:1.4rem;
-
   position: relative;
   padding: 8px;
   border-radius: 4px;
@@ -658,8 +647,7 @@ a[data-toggle='tooltip'] {
 }
 
 .lead {
-  @include font-size(1.8rem);
+  font-size:1.8rem;
-
   font-weight: 600;
 
   b,

src/components/Article/AudioHeader/AudioHeader.module.scss

@@ -15,8 +15,7 @@
       flex-direction: row;
 
       .item {
-        @include font-size(1.6rem);
+        font-size:1.6rem;
-
         font-weight: 500;
         padding: 2px 12px;
         border-left: 2px solid #e9e9ee;

src/components/Article/AudioPlayer/AudioPlayer.module.scss

@@ -236,8 +236,7 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum
 }
 
 .playlistItemText {
-  @include font-size(1.6rem);
+  font-size:1.6rem;
-
   display: flex;
   flex-direction: row;
   flex: 1;
@@ -249,8 +248,7 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum
 
   .artist,
   .title {
-    @include font-size(1.6rem);
+    font-size:1.6rem;
-
     overflow: hidden;
     text-overflow: ellipsis;
     padding: 0;
@@ -335,7 +333,7 @@ $vendors-thumb: ('::-webkit-slider-thumb', '::-moz-moz-range-thumb', '::-ms-thum
 
   .description,
   .lyrics {
-    @include font-size(1.4rem);
+    font-size:1.4rem;
   }
 
   .description {

src/components/Article/Comment/Comment.module.scss

@@ -46,8 +46,7 @@
   }
 
   .shout-body {
-    @include font-size(1.5rem);
+    font-size:1.5rem;
-
     margin-bottom: 1em;
 
     *:last-child {
@@ -155,8 +154,7 @@
 }
 
 .commentBody {
-  @include font-size(1.5rem);
+  font-size:1.5rem;
-
   line-height: 1.47;
 
   blockquote {
@@ -176,7 +174,7 @@
 
 .commentAuthor,
 .commentRating {
-  @include font-size(1.2rem);
+  font-size:1.2rem;
 }
 
 .commentAuthor {
@@ -184,15 +182,12 @@
 }
 
 .articleAuthor {
-  @include font-size(1.2rem);
+  font-size:1.2rem;
-
   color: var(--blue-500);
   margin: 0.3rem 1rem 0;
 }
 
 .articleLink {
-  @include font-size(1.2rem);
-
   @include media-breakpoint-down(md) {
     margin: 0.3em 0 0.5em;
   }
@@ -206,6 +201,7 @@
     white-space: nowrap;
   }
 
+  font-size:1.2rem;
   flex: 0 0 50%;
   margin-right: 2em;
 }
@@ -222,8 +218,6 @@
 }
 
 .commentDates {
-  @include font-size(1.2rem);
-
   flex: 1;
   display: flex;
   gap: 1rem;

src/components/Article/CommentDate/CommentDate.module.scss

@@ -1,6 +1,4 @@
 .commentDates {
-  @include font-size(1.2rem);
-
   color: var(--secondary-color);
   display: flex;
   justify-content: center;

src/components/Article/FullArticle.tsx

@@ -1,5 +1,4 @@
 import { AuthToken } from '@authorizerdev/authorizer-js'
-import { createPopper } from '@popperjs/core'
 import { Link } from '@solidjs/meta'
 import { A, useSearchParams } from '@solidjs/router'
 import { clsx } from 'clsx'
@@ -13,6 +12,7 @@ import { DEFAULT_HEADER_OFFSET, useUI } from '~/context/ui'
 import type { Author, Maybe, Shout, Topic } from '~/graphql/schema/core.gen'
 import { processPrepositions } from '~/intl/prepositions'
 import { isCyrillic } from '~/intl/translate'
+import { createTooltip } from '~/lib/createTooltip'
 import { getImageUrl } from '~/lib/getThumbUrl'
 import { MediaItem } from '~/types/mediaitem'
 import { capitalize } from '~/utils/capitalize'
@@ -215,7 +215,7 @@ export const FullArticle = (props: Props) => {
         element.setAttribute('href', 'javascript: void(0)')
       }
 
-      const popperInstance = createPopper(element, tooltip, {
+      const popperInstance = createTooltip(element, tooltip, {
         placement: 'top',
         modifiers: [
           {

src/components/AuthModal/AuthModal.module.scss

@@ -39,12 +39,11 @@
 }
 
 .authImage {
-  @include font-size(1.5rem);
-
   @include media-breakpoint-down(sm) {
     display: none;
   }
 
+  font-size:1.5rem;
   background: var(--background-color-invert)
     url('https://images.discours.io/unsafe/1600x/production/image/auth-page.jpg') center no-repeat;
   background-size: cover;
@@ -88,8 +87,7 @@
 }
 
 .disclaimer {
-  @include font-size(1.2rem);
+  font-size:1.2rem;
-
   color: #9fa1a7;
   margin-bottom: 0;
 
@@ -103,8 +101,7 @@
 }
 
 .authActions {
-  @include font-size(1.5rem);
+  font-size:1.5rem;
-
   margin-top: 1.6rem;
   text-align: center;
   display: flex;
@@ -142,15 +139,13 @@
 }
 
 .authLink {
-  @include font-size(1.6rem);
+  font-size:1.6rem;
-
   cursor: pointer;
   font-weight: 500;
 }
 
 .authSubtitle {
-  @include font-size(1.5rem);
+  font-size:1.5rem;
-
   margin-bottom: 1em;
 }
 

src/components/AuthModal/SocialProviders/SocialProviders.module.scss

@@ -6,8 +6,7 @@
 }
 
 .text {
-  @include font-size(1.5rem);
+  font-size:1.5rem;
-
   font-weight: 500;
   margin-bottom: 1em;
   text-align: center;

src/components/Author/AuthorBadge/AuthorBadge.module.scss

@@ -29,12 +29,11 @@
   }
 
   .info {
-    @include font-size(1.4rem);
-
     @include media-breakpoint-up(sm) {
       flex: 1 100%;
     }
 
+    font-size:1.4rem;
     border: none;
     display: flex;
     flex-direction: column;
@@ -46,8 +45,7 @@
   }
 
   .name {
-    @include font-size(1.4rem);
+    font-size:1.4rem;
-
     color: var(--default-color);
     font-weight: 500;
 
@@ -58,8 +56,7 @@
   }
 
   .bio {
-    @include font-size(1.2rem);
+    font-size:1.2rem;
-
     color: var(--black-400);
     display: flex;
     flex-direction: row;

src/components/Author/AuthorCard/AuthorCard.module.scss

@@ -21,15 +21,13 @@
   }
 
   .authorName {
-    @include font-size(4rem);
+    font-size:4rem;
-
     font-weight: 700;
     margin-bottom: 1.2rem;
   }
 
   .authorAbout {
-    @include font-size(2rem);
+    font-size:2rem;
-
     color: #696969;
     font-weight: 500;
     margin-top: 1.5rem;
@@ -142,8 +140,7 @@
 }
 
 .authorName {
-  @include font-size(4rem);
+  font-size:4rem;
-
   line-height: 1.1;
 }
 
@@ -206,8 +203,7 @@
       }
 
       .authorSubscribeSocialLabel {
-        @include font-size(1.6rem);
+        font-size:1.6rem;
-
         color: #000;
         display: block;
         left: 100%;

src/components/Discours/Footer.module.scss

@@ -1,6 +1,5 @@
 .discoursFooter {
-  @include font-size(1.7rem);
+  font-size:1.7rem;
-
   background: #000;
   color: rgb(255 255 255 / 64%);
   padding: 2.4rem 0 4.2rem;
@@ -51,8 +50,7 @@
 }
 
 .footerCopyright {
-  @include font-size(1.5rem);
+  font-size:1.5rem;
-
   border-top: 5px solid #404040;
   color: #696969;
   padding-top: 1.6rem;

src/components/Discours/Hero.module.scss

@@ -1,6 +1,5 @@
 .aboutDiscours {
-  @include font-size(1.6rem);
+  font-size:1.6rem;
-
   background: #fef2f2;
   font-weight: 500;
   margin-bottom: 6.4rem;
@@ -8,8 +7,7 @@
   text-align: center;
 
   h4 {
-    @include font-size(4rem);
+    font-size:4rem;
-
     font-weight: bold;
     line-height: 1.1;
     margin-bottom: 2rem;

src/components/Draft/Draft.module.scss

@@ -3,8 +3,7 @@
 }
 
 .created {
-  @include font-size(1.2rem);
+  font-size:1.2rem;
-
   line-height: 1.5rem;
   margin-bottom: 20px;
 
@@ -16,8 +15,7 @@
 }
 
 .titleContainer {
-  @include font-size(2.6rem);
+  font-size:2.6rem;
-
   line-height: 3.2rem;
   margin-bottom: 28px;
 }
@@ -27,8 +25,7 @@
 }
 
 .actions {
-  @include font-size(1.2rem);
+  font-size:1.2rem;
-
   display: flex;
   gap: 12px;
 

src/components/Draft/PublishSettings.module.scss

@@ -1,7 +1,6 @@
 .PublishSettings {
   .goBack {
-    @include font-size(1.8rem);
+    font-size:1.8rem;
-
     font-weight: 500;
     display: flex;
     align-items: center;
@@ -33,7 +32,7 @@
     .settingInput {
       &::after,
       textarea {
-        @include font-size(1.6rem);
+        font-size:1.6rem;
       }
     }
   }
@@ -98,24 +97,21 @@
         color: var(--default-color);
 
         .mainTopic {
-          @include font-size(1.4rem);
+          font-size:1.4rem;
-
           margin: auto 0 1.6rem;
           font-weight: 600;
           text-transform: uppercase;
         }
 
         .shoutCardTitle {
-          @include font-size(2.4rem);
+          font-size: 2.4rem;
-
           font-weight: 700;
           line-height: 1.25;
           margin-bottom: 0.8rem;
         }
 
         .shoutCardSubtitle {
-          @include font-size(2.2rem);
+          font-size:2.2rem;
-
           font-weight: 400;
           line-height: 1.3;
           margin-bottom: 0.8rem;
@@ -126,7 +122,7 @@
         }
 
         .shoutAuthor {
-          @include font-size(1.6rem);
+          font-size:1.6rem;
         }
       }
 

src/components/Editor/AutoSaveNotice/AutoSaveNotice.module.scss

@@ -1,6 +1,5 @@
 .AutoSaveNotice {
-  @include font-size(1.4rem);
+  font-size:1.4rem;
-
   display: inline-flex;
   flex-direction: row;
   align-items: center;

src/components/Editor/Editor.module.scss

@@ -114,8 +114,7 @@ mark.highlight {
   }
 
   &[data-type='quote'] {
-    @include font-size(1.4rem);
+    font-size:1.4rem;
-
     border: solid #000;
     border-width: 0 0 0 2px;
     margin: 1.6rem 0;
@@ -137,8 +136,6 @@ mark.highlight {
   }
 
   &[data-type='punchline'] {
-    @include font-size(3.2rem);
-
     @include media-breakpoint-up(sm) {
       &[data-float='left'] {
         margin-right: 1.5em;
@@ -151,6 +148,7 @@ mark.highlight {
       }
     }
 
+    font-size:3.2rem;
     border: solid #000;
     border-width: 2px 0;
     font-weight: 700;
@@ -160,16 +158,13 @@ mark.highlight {
 
     &[data-float='left'],
     &[data-float='right'] {
-      @include font-size(2.2rem);
+      font-size:2.2rem;
-
       line-height: 1.4;
     }
   }
 }
 
 .ProseMirror article[data-type='incut'] {
-  @include font-size(1.4rem);
-
   @include media-breakpoint-up(sm) {
     margin-left: -2rem;
     margin-right: -2rem;
@@ -186,6 +181,7 @@ mark.highlight {
     margin-right: -3em;
   }
 
+  font-size:1.4rem;
   background: #f1f2f3;
   margin: 1em -1rem;
   padding: 2em 2rem;

src/components/Editor/MiniEditor.module.scss

@@ -8,13 +8,11 @@
   position: relative;
 
   .compactEditor {
-    @include font-size(1.4rem);
+    font-size:1.4rem;
-
     min-height: 100px;
 
     .emptyNode:first-child::before {
-      @include font-size(1.4rem);
+      font-size:1.4rem;
-
       position: absolute;
       top: 4px;
       height: 0;
@@ -154,8 +152,7 @@
   }
 
   .label {
-    @include font-size(1.2rem);
+    font-size:1.2rem;
-
     position: absolute;
     top: 6px;
     left: 12px;

src/components/Editor/Panel/Panel.module.scss

@@ -104,7 +104,7 @@
   }
 
   .typographStatus {
-    @include font-size(1.2rem);
+    font-size:1.2rem;
   }
 
   .typographStatusSuccess {

src/components/Editor/Toolbar/MicroBubbleMenu.tsx

@@ -20,7 +20,8 @@ export const MicroBubbleMenu = (props: MicroBubbleMenuProps) => {
 
   const isActive = (name: string, attributes?: Record<string, string | number>) =>
     createEditorTransaction(
-      () => props.editor,
+      // biome-ignore lint/suspicious/noExplicitAny: tiptap 2.8.0 typing issue
+      () => props.editor as any,
       (editor) => editor?.isActive(name, attributes)
     )
 

src/components/Feed/ArticleCard/ArticleCard.module.scss

@@ -133,8 +133,7 @@
 }
 
 .shoutAuthor {
-  @include font-size(1.4rem);
+  font-size:1.4rem;
-
   font-weight: 500;
   margin-right: 1.6rem;
 
@@ -151,8 +150,7 @@
 }
 
 .shoutDate {
-  @include font-size(1.2rem);
+  font-size:1.2rem;
-
   color: #9fa1a7;
   font-weight: 500;
 }
@@ -167,19 +165,18 @@
   justify-content: space-between;
 
   .shoutAuthor {
-    @include font-size(1.2rem);
+    font-size:1.2rem;
   }
 }
 
 .shoutCardTitle {
-  @include font-size(2.2rem);
+  font-size:2.2rem;
-
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 0.8rem;
 
   :global(.col-md-12) & {
-    @include font-size(2.6rem);
+    font-size:2.6rem;
   }
 }
 
@@ -193,22 +190,19 @@
   }
 
   .shoutCardTitlesContainerFeedMode & {
-    @include font-size(3.2rem);
+    font-size:3.2rem;
-
     line-height: 1.1;
   }
 }
 
 .shoutCardDescription {
-  @include font-size(1.6rem);
+  font-size:1.6rem;
-
   color: var(--default-color);
   margin-bottom: 1.4rem;
 }
 
 .shoutCardSubtitle {
-  @include font-size(1.8rem);
+  font-size:1.8rem;
-
   color: #141414;
   font-weight: 400;
   line-height: 1.3;
@@ -369,8 +363,7 @@
 
     .shoutCardTitle,
     .shoutCardSubtitle {
-      @include font-size(2.6rem);
+      font-size:2.6rem;
-
       display: inline;
       line-height: 1.2;
     }
@@ -528,7 +521,7 @@
   }
 
   .shoutCardTitle {
-    @include font-size(3.2rem);
+    font-size:3.2rem;
   }
 
   .shoutTopic a {
@@ -571,8 +564,7 @@
 }
 
 .shoutCardDetails {
-  @include font-size(1.5rem);
+  font-size:1.5rem;
-
   align-items: flex-start;
   border-top: 2px solid var(--black-500);
   display: flex;
@@ -723,22 +715,20 @@
 
 .shoutCardBigTitle {
   .shoutCardTitle {
-    @include font-size(3.2rem);
+    font-size:3.2rem;
-
     display: block;
     padding-right: 0;
   }
 
   .shoutCardSubtitle {
-    @include font-size(2.6rem);
+    font-size:2.6rem;
   }
 }
 
 .shoutCardCompact {
   .shoutCardTitle,
   .shoutCardSubtitle {
-    @include font-size(2.2rem);
+    font-size:2.2rem;
-
     display: inline;
     line-height: 1.2;
   }
@@ -765,8 +755,7 @@
 
   .shoutCardTitle,
   .shoutCardSubtitle {
-    @include font-size(1.8rem);
+    font-size:1.8rem;
-
     display: inline;
   }
 
@@ -836,15 +825,13 @@
   }
 
   .shoutCardTitle {
-    @include font-size(4rem);
+    font-size:4rem;
-
     font-weight: 900;
     line-height: 1.1;
   }
 
   .shoutCardSubtitle {
-    @include font-size(2.4rem);
+    font-size: 2.4rem;
-
     flex: 1;
   }
 }

src/components/Feed/Beside.module.scss

@@ -106,8 +106,7 @@
   }
 
   a:link {
-    @include font-size(1.4rem);
+    font-size:1.4rem;
-
     border: none;
     font-weight: bold;
     padding-right: 0.3em;
@@ -125,8 +124,7 @@
   }
 
   h4 {
-    @include font-size(2.6rem);
+    font-size:2.6rem;
-
     font-weight: bold;
     padding-right: 1em;
   }

src/components/Feed/Placeholder/Placeholder.module.scss

@@ -12,8 +12,7 @@
 
   button,
   .button {
-    @include font-size(1.5rem);
+    font-size:1.5rem;
-
     align-items: center;
     border-radius: 1.2rem;
     display: flex;
@@ -119,7 +118,7 @@
   }
 
   h3 {
-    @include font-size(3.8rem);
+    font-size:3.8rem;
   }
 
   .button {
@@ -233,13 +232,12 @@
 }
 
 .bottomLinks {
-  @include font-size(1.6rem);
-
   @include media-breakpoint-down(sm) {
     flex-direction: column;
     gap: 1.4rem;
   }
 
+  font-size:1.6rem;
   display: flex;
   gap: 4rem;
 

src/components/Feed/Sidebar/Sidebar.module.scss

@@ -38,8 +38,7 @@
   }
 
   .counter {
-    @include font-size(1.2rem);
+    font-size:1.2rem;
-
     align-items: center;
     align-self: flex-start;
     background: #f6f6f6;
@@ -131,8 +130,7 @@
   }
 
   h4 {
-    @include font-size(1.2rem);
+    font-size:1.2rem;
-
     font-weight: bold;
     color: #9fa1a7;
     cursor: pointer;

src/components/HeaderNav/Header.module.scss

@@ -122,12 +122,11 @@
 }
 
 .mainNavigationWrapper {
-  @include font-size(1.7rem);
-
   @include media-breakpoint-down(lg) {
     display: none;
   }
 
+  font-size:1.7rem;
   position: relative;
 
   .fixed & {
@@ -380,12 +379,11 @@
 }
 
 .articleHeader {
-  @include font-size(1.4rem);
-
   @include media-breakpoint-down(md) {
     display: none;
   }
 
+  font-size:1.4rem;
   left: $container-padding-x;
   margin: 0.2em 0;
   overflow: hidden;

src/components/HeaderNav/TopicsNav.module.scss

@@ -4,7 +4,7 @@
   }
 
   @include media-breakpoint-up(md) {
-    @include font-size(1.4rem);
+    font-size:1.4rem;
   }
 
   font-size: 1.6rem;

src/components/Inbox/CreateModalContent.module.scss

@@ -5,6 +5,7 @@
     justify-content: space-around;
     gap: 12px;
   }
+
   .chatTitleInput {
     width: 100%;
     padding: 0.5rem 1rem;
@@ -17,7 +18,7 @@
     &:focus {
       border-color: #80bdff;
       outline: 0;
-      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+      box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
     }
   }
 }

src/components/Inbox/CreateModalContent.tsx

@@ -78,7 +78,7 @@ const CreateModalContent = (props: Props) => {
           required={true}
           class={styles.chatTitleInput}
           // TODO: Удалите эти классы, если они не нужны
-          // class="form-control form-control-lg fs-3" 
+          // class="form-control form-control-lg fs-3"
           placeholder={t('Chat Title')}
         />
       )}
@@ -92,13 +92,7 @@ const CreateModalContent = (props: Props) => {
       </div>
 
       <div class={styles.footer}>
-        <Button
+        <Button type="button" value={t('Cancel')} variant="danger" size="L" onClick={reset} />
-          type="button"
-          value={t('Cancel')}
-          variant="danger"
-          size="L"
-          onClick={reset}
-        />
         <Button
           type="button"
           value={usersId().length > 1 ? t('New group') : t('Create Chat')}

src/components/NotificationsPanel/NotificationView/NotificationView.module.scss

@@ -1,6 +1,5 @@
 .NotificationView {
-  @include font-size(1.5rem);
+  font-size:1.5rem;
-
   display: flex;
   align-items: flex-start;
   min-height: 72px;

src/components/NotificationsPanel/NotificationsPanel.module.scss

@@ -30,8 +30,7 @@ $transition-duration: 200ms;
     flex-direction: column;
 
     .title {
-      @include font-size(2rem);
+      font-size:2rem;
-
       color: var(--black-500);
       font-style: normal;
       font-weight: 700;
@@ -47,8 +46,7 @@ $transition-duration: 200ms;
       padding: 0 38px 1rem;
 
       .loading {
-        @include font-size(1.2rem);
+        font-size:1.2rem;
-
         text-align: center;
         padding: 1rem;
         color: var(--black-300);

src/components/ProfileNav/ProfileSettingsNavigation.module.scss

@@ -1,13 +1,10 @@
 .navigationHeader {
-  @include font-size(1.8rem);
+  font-size:1.8rem;
-
   font-weight: bold;
   margin-top: 1.1em;
 }
 
 .navigation {
-  @include font-size(1.4rem);
-
   @include media-breakpoint-down(md) {
     display: flex;
 
@@ -16,6 +13,8 @@
     }
   }
 
+  font-size:1.4rem;
+
   a {
     border: none;
   }

src/components/SearchModal/SearchModal.module.scss

@@ -1,6 +1,5 @@
 @mixin search-filter-control {
-  @include font-size(1.4rem);
+  font-size:1.4rem;
-
   height: 4rem;
   padding: 0 2rem;
   background: rgb(64 64 64 / 50%);
@@ -23,8 +22,7 @@
 }
 
 .searchInput {
-  @include font-size(4.8rem);
+  font-size:4.8rem;
-
   width: 100%;
   padding: 0 0 0.5rem;
   background: none;
@@ -60,8 +58,7 @@
 }
 
 .searchDescription {
-  @include font-size(1.6rem);
+  font-size:1.6rem;
-
   margin-bottom: 44px;
   color: rgb(255 255 255 / 64%);
 }

src/components/Topic/Card.module.scss

@@ -55,8 +55,7 @@
 }
 
 .topicTitle {
-  @include font-size(2.2rem);
+  font-size:2.2rem;
-
   font-weight: bold;
   margin-bottom: 1.2rem;
   margin-top: 0.5rem !important;
@@ -84,8 +83,7 @@
 }
 
 .topicDescription {
-  @include font-size(1.4rem);
+  font-size:1.4rem;
-
   font-weight: 500;
   color: #696969;
   line-height: 1.3;
@@ -113,7 +111,7 @@
   margin-top: 2.4rem;
 
   .topicTitle {
-    @include font-size(1.6rem);
+    font-size:1.6rem;
   }
 }
 

src/components/Topic/Full.module.scss

@@ -4,16 +4,14 @@
   text-align: center;
 
   h1 {
-    @include font-size(2rem);
+    font-size:2rem;
-
     color: #2638d9;
     text-transform: uppercase;
   }
 }
 
 .topicDescription {
-  @include font-size(1.8rem);
+  font-size:1.8rem;
-
   line-height: 1.4;
   margin: 1rem 0 2rem;
 }

src/components/Topic/TopicBadge/TopicBadge.module.scss

@@ -44,8 +44,7 @@
   }
 
   .info {
-    @include font-size(1.4rem);
+    font-size:1.4rem;
-
     border: none;
 
     // display: flex;
@@ -62,14 +61,12 @@
     }
 
     .title {
-      @include font-size(2.2rem);
+      font-size:2.2rem;
-
       font-weight: bold;
     }
 
     .description {
-      @include font-size(1.6rem);
+      font-size:1.6rem;
-
       line-height: 1.4;
       margin: 0.8rem 0;
       line-clamp: 2;
@@ -106,8 +103,7 @@
     }
 
     .title {
-      @include font-size(1.4rem);
+      font-size:1.4rem;
-
       font-weight: 500;
       line-height: 1em;
       color: var(--blue-500);
@@ -115,8 +111,7 @@
     }
 
     .description {
-      @include font-size(1.2rem);
+      font-size:1.2rem;
-
       color: var(--black-400);
       font-weight: 500;
       margin: 0;
@@ -137,8 +132,6 @@
 }
 
 .stats {
-  @include font-size(1.5rem);
-
   @include media-breakpoint-down(md) {
     flex-wrap: wrap;
   }
@@ -147,12 +140,12 @@
     margin-top: 0.5em;
   }
 
+  font-size:1.5rem;
   color: var(--secondary-color);
   display: flex;
 
   .statsItem {
-    @include font-size(1.4rem);
+    font-size:1.4rem;
-
     font-weight: 500;
     margin-right: 1.6rem;
     white-space: nowrap;

src/components/_shared/ConfirmModal/ConfirmModal.module.scss

@@ -3,12 +3,11 @@
   position: relative;
 
   .confirmModalTitle {
-    @include font-size(3.2rem);
-
     @include media-breakpoint-up(sm) {
       margin: 0 10%;
     }
 
+    font-size: 3.2rem;
     color: var(--default-color);
     font-weight: 700;
     margin: 0 3rem;

src/components/_shared/DropArea/DropArea.module.scss

@@ -43,16 +43,14 @@
   }
 
   .description {
-    @include font-size(1.2rem);
+    font-size: 1.2rem;
-
     margin-top: 1.6rem;
     text-align: center;
     color: var(--secondary-color);
   }
 
   .error {
-    @include font-size(1.4rem);
+    font-size: 1.4rem;
-
     color: var(--danger-color);
     margin-top: 1.6rem;
     text-align: center;
@@ -61,8 +59,7 @@
 
   &.square {
     .field {
-      @include font-size(1.4rem);
+      font-size:1.4rem;
-
       flex-direction: column;
       padding: 0;
       width: 228px;

src/components/_shared/DropdownSelect/DropdownSelect.module.scss

@@ -2,8 +2,7 @@
   position: relative;
 
   .toggler {
-    @include font-size(1.3rem);
+    font-size: 1.3rem;
-
     display: flex;
     align-items: center;
     justify-content: center;
@@ -43,15 +42,13 @@
       transition: 0.3s ease-in-out;
 
       .title {
-        @include font-size(1.6rem);
+        font-size:1.6rem;
-
         font-weight: 700 !important;
         margin-bottom: 0;
       }
 
       .description {
-        @include font-size(1.2rem);
+        font-size:1.2rem;
-
         color: var(--default-color);
         opacity: 0.5;
         margin: 6px 0;

src/components/_shared/GroupAvatar/GroupAvatar.module.scss

@@ -75,8 +75,7 @@
   }
 
   .moreUsers {
-    @include font-size(0.75rem);
+    font-size: 0.75rem;
-
     font-weight: 700;
     position: absolute;
     width: 19px;

src/components/_shared/GrowingTextarea/GrowingTextarea.module.scss

@@ -17,8 +17,7 @@
   }
 
   .fieldName {
-    @include font-size(1.2rem);
+    font-size: 1.2rem;
-
     position: absolute;
     top: 6px;
     left: 12px;

src/components/_shared/ImageCropper/ImageCropper.tsx

@@ -1,9 +1,7 @@
 import 'cropperjs/dist/cropper.css'
-
 import { UploadFile } from '@solid-primitives/upload'
 import Cropper from 'cropperjs'
 import { Show, createSignal, onMount } from 'solid-js'
-
 import { useLocalize } from '~/context/localize'
 import { Button } from '../Button'
 

src/components/_shared/InlineLoader/InlineLoader.module.scss

@@ -1,6 +1,5 @@
 .InlineLoader {
-  @include font-size(1.4rem);
+  font-size:1.4rem;
-
   display: flex;
   align-items: center;
   justify-content: center;

src/components/_shared/InviteMembers/InviteMembers.module.scss

@@ -16,8 +16,7 @@
   }
 
   .input {
-    @include font-size(1.5rem);
+    font-size:1.5rem;
-
     border: none;
     padding: 0;
     margin: 0;

src/components/_shared/Newsletter/Newsletter.module.scss

@@ -16,8 +16,6 @@
   width: 100%;
 
   .input {
-    @include font-size(2rem);
-
     @include media-breakpoint-up(xxl) {
       border-right: none;
     }
@@ -26,6 +24,7 @@
       border-bottom: none;
     }
 
+    font-size:2rem;
     background: none;
     color: #fff;
     font-family: inherit;

src/components/_shared/Popup/Popup.module.scss

@@ -35,7 +35,7 @@
   }
 
   &.tiny {
-    @include font-size(1.4rem);
+    font-size:1.4rem;
 
     .action {
       padding: 0.5rem 1rem;

src/components/_shared/ShareLinks/ShareLinks.module.scss

@@ -68,8 +68,7 @@
   }
 
   .isCopied {
-    @include font-size(1.6rem);
+    font-size:1.6rem;
-
     position: absolute;
     top: 100%;
     left: 1.2rem;

src/components/_shared/SocialNetworkInput/SocialNetworkInput.module.scss

@@ -17,8 +17,7 @@
   }
 
   .input {
-    @include font-size(1.7rem);
+    font-size:1.7rem;
-
     margin: 0 16px;
     width: 100%;
     border: none;

src/components/_shared/SolidSwiper/Swiper.module.scss

@@ -19,8 +19,7 @@
   }
 
   .sliderTitle {
-    @include font-size(4.5rem);
+    font-size:4.5rem;
-
     text-align: center;
     padding: 4rem 0 0;
   }
@@ -133,12 +132,11 @@
     width: 100%;
 
     .counter {
-      @include font-size(1.2rem);
-
       @include media-breakpoint-up(sm) {
         top: 477px;
       }
 
+      font-size:1.2rem;
       position: absolute;
       z-index: 2;
       top: 276px;
@@ -218,23 +216,21 @@
     align-self: flex-start;
 
     .articleTitle {
-      @include font-size(1.4rem);
+      font-size:1.4rem;
     }
 
     .source {
-      @include font-size(1.2rem);
+      font-size:1.2rem;
-
       color: var(--secondary-color);
     }
 
     .body {
-      @include font-size(1.7rem);
-
       @include media-breakpoint-up(md) {
         // margin-left: calc((100% + 130px) * 0.15);
         margin-left: calc(15% + 24px);
       }
 
+      font-size:1.7rem;
       margin-top: 24px;
 
       * {
@@ -339,8 +335,7 @@
     margin: 1em 0;
 
     .input {
-      @include font-size(1.4rem);
+      font-size:1.4rem;
-
       padding: 0;
       margin: 0;
       border: none;

src/components/_shared/SoonChip/SoonChip.module.scss

@@ -1,6 +1,5 @@
 .SoonChip {
-  @include font-size(1.2rem);
+  font-size:1.2rem;
-
   display: inline-flex;
   align-items: center;
   justify-content: center;

src/lib/createTooltip.ts

@@ -0,0 +1,80 @@
+export function createTooltip(referenceElement?: Element, tooltipElement?: HTMLElement, options = {}) {
+  const defaultOptions = {
+    placement: 'top',
+    offset: [0, 8]
+  }
+  const config = { ...defaultOptions, ...options }
+
+  function updatePosition() {
+    if (!(referenceElement && tooltipElement)) return
+
+    const rect = referenceElement.getBoundingClientRect()
+    const tooltipRect = tooltipElement.getBoundingClientRect()
+    const offsetX = config.offset[0]
+    const offsetY = config.offset[1]
+
+    let top = 0
+    let left = 0
+
+    switch (config.placement) {
+      case 'top': {
+        top = rect.top - tooltipRect.height - offsetY
+        left = rect.left + (rect.width - tooltipRect.width) / 2 + offsetX
+        break
+      }
+      case 'bottom': {
+        top = rect.bottom + offsetY
+        left = rect.left + (rect.width - tooltipRect.width) / 2 + offsetX
+        break
+      }
+      case 'left': {
+        top = rect.top + (rect.height - tooltipRect.height) / 2 + offsetY
+        left = rect.left - tooltipRect.width - offsetX
+        break
+      }
+      case 'right': {
+        top = rect.top + (rect.height - tooltipRect.height) / 2 + offsetY
+        left = rect.right + offsetX
+        break
+      }
+      default: {
+        top = rect.top - tooltipRect.height - offsetY
+        left = rect.left + (rect.width - tooltipRect.width) / 2 + offsetX
+      }
+    }
+
+    tooltipElement.style.position = 'absolute'
+    tooltipElement.style.top = `${top}px`
+    tooltipElement.style.left = `${left}px`
+  }
+
+  function showTooltip() {
+    if (tooltipElement) tooltipElement.style.visibility = 'visible'
+    updatePosition()
+  }
+
+  function hideTooltip() {
+    if (tooltipElement) tooltipElement.style.visibility = 'hidden'
+  }
+
+  referenceElement?.addEventListener('mouseenter', showTooltip)
+  referenceElement?.addEventListener('mouseleave', hideTooltip)
+  window.addEventListener('resize', updatePosition)
+
+  return {
+    update: updatePosition,
+    destroy() {
+      referenceElement?.removeEventListener('mouseenter', showTooltip)
+      referenceElement?.removeEventListener('mouseleave', hideTooltip)
+      window.removeEventListener('resize', updatePosition)
+    }
+  }
+}
+
+// Usage example
+const referenceElement = document.querySelector('#reference')
+const tooltipElement = document.querySelector('#tooltip')
+createTooltip(referenceElement as HTMLElement, tooltipElement as HTMLElement, {
+  placement: 'top',
+  offset: [0, 8]
+})

src/styles/README.md

@@ -0,0 +1,65 @@
+# _grid.scss - a Minimalistic Bootstrap-Compatible Grid System
+
+This grid system is a lightweight alternative to Bootstrap's grid, providing essential features for responsive design. It includes a set of SCSS mixins and classes to create flexible layouts.
+
+## Supported Classes in _grid.scss
+
+### Container
+
+- **`.container`**: Creates a fixed-width container and centers it on the page.
+- **`.container-fluid`**: Creates a full-width container that spans the entire width of the viewport.
+
+### Row
+
+- **`.row`**: Creates a flexbox container for columns, with negative margins to offset column padding.
+
+### Columns
+
+- **`.col-xx-#`**: Defines the width of a column for a specific breakpoint (`xx` can be `xs`, `sm`, `md`, `lg`, `xl`, `xxl`). Replace `#` with a number from 1 to 24 (based on `$grid-columns`).
+
+### Offsets
+
+- **`.offset-xx-#`**: Adds left margin to a column, effectively moving it to the right by the specified number of columns. Replace `xx` with the breakpoint and `#` with the number of columns to offset.
+
+## Mixins
+
+### `media-breakpoint-up($breakpoint)`
+
+Applies styles at a minimum width of the specified breakpoint.
+
+### `media-breakpoint-down($breakpoint)`
+
+Applies styles at a maximum width of the specified breakpoint.
+
+### `media-breakpoint-between($lower, $upper)`
+
+Applies styles between two breakpoints.
+
+### `make-container($max-widths, $gutter)`
+
+Creates a container with specified maximum widths and gutter.
+
+### `make-row($gutter)`
+
+Creates a flexbox row with specified gutter.
+
+### `make-col($size, $columns)`
+
+Defines a column with a specific size and total number of columns.
+
+### `make-col-offset($size, $columns)`
+
+Offsets a column by a specific size.
+
+### `row-cols($count)`
+
+Sets the number of columns in a row, each taking an equal width.
+
+## Customization
+
+You can customize the grid system by modifying the variables in `_globals.scss`:
+
+- **`$grid-columns`**: Total number of columns in the grid.
+- **`$grid-gutter-width`**: Width of the gutter between columns.
+- **`$grid-breakpoints`**: Map of breakpoints for responsive design.
+- **`$container-max-widths`**: Maximum widths for containers at each breakpoint.

src/styles/_grid.scss

@@ -0,0 +1,145 @@
+// Миксин для media-breakpoint-up
+@mixin media-breakpoint-up($breakpoint, $breakpoints: $grid-breakpoints) {
+  $min-width: map-get($breakpoints, $breakpoint);
+
+  @if $min-width {
+    @media (min-width: #{$min-width}) {
+      @content;
+    }
+  } @else {
+    @warn "Нет валидного брейкпоинта для '#{$breakpoint}'.";
+  }
+}
+
+// Миксин для media-breakpoint-down
+@mixin media-breakpoint-down($breakpoint, $breakpoints: $grid-breakpoints) {
+  $max-width: map-get($breakpoints, $breakpoint) - 0.02px;
+
+  @if $max-width {
+    @media (max-width: #{$max-width}) {
+      @content;
+    }
+  } @else {
+    @warn "Нет валидного брейкпоинта для '#{$breakpoint}'.";
+  }
+}
+
+// Миксин для media-breakpoint-between
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $min-width: map-get($breakpoints, $lower);
+  $max-width: map-get($breakpoints, $upper) - 0.02px;
+
+  @if $min-width and $max-width {
+    @media (min-width: #{$min-width}) and (max-width: #{$max-width}) {
+      @content;
+    }
+  } @else {
+    @warn "Нет валидных брейкпоинтов для '#{$lower}' или '#{$upper}'.";
+  }
+}
+
+// Миксин make-container
+@mixin make-container($max-widths: $container-max-widths, $gutter: $grid-gutter-width) {
+  width: 100%;
+  padding-right: $gutter;
+  padding-left: $gutter;
+  margin-right: auto;
+  margin-left: auto;
+
+  @each $breakpoint, $max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+      max-width: #{$max-width};
+    }
+  }
+}
+
+// Миксин make-row
+@mixin make-row($gutter: $grid-gutter-width) {
+  --gutter-x: #{$gutter};
+  --gutter-y: 0;
+
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--gutter-y));
+  margin-right: calc(-0.5 * var(--gutter-x));
+  margin-left: calc(-0.5 * var(--gutter-x));
+}
+
+// Миксин make-col-ready
+@mixin make-col-ready() {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 100%;
+  padding-right: calc(var(--gutter-x) * 0.5);
+  padding-left: calc(var(--gutter-x) * 0.5);
+  margin-top: var(--gutter-y);
+}
+
+// Миксин make-col
+@mixin make-col($size: false, $columns: $grid-columns) {
+  @if $size {
+    flex: 0 0 auto;
+    width: calc(100% * #{calc($size / $columns)});
+  } @else {
+    flex: 1 1 0;
+    max-width: 100%;
+  }
+}
+
+// Миксин make-col-auto
+@mixin make-col-auto() {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+// Миксин make-col-offset
+@mixin make-col-offset($size, $columns: $grid-columns) {
+  $num: calc($size / $columns);
+
+  margin-left: if($num == 0, 0, calc(100% * #{$num}));
+}
+
+// Миксин row-cols
+@mixin row-cols($count) {
+  > * {
+    flex: 0 0 auto;
+    width: 100% / $count;
+  }
+}
+
+// Миксин make-grid-columns
+@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint, $value in $breakpoints {
+    $infix: if($breakpoint == 'xs', '', "-#{$breakpoint}");
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      @for $i from 1 through $columns {
+        .col#{$infix}-#{$i} {
+          @include make-col($i, $columns);
+        }
+
+        .offset#{$infix}-#{$i} {
+          @include make-col-offset($i, $columns);
+        }
+      }
+    }
+  }
+}
+
+// Генерация классов контейнера и ряда
+.container,
+.container-fluid {
+  @include make-container($container-max-widths, $grid-gutter-width);
+}
+
+.row {
+  @include make-row;
+
+  > * {
+    @include make-col-ready;
+  }
+}
+
+// Генерация классов столбцов и смещений
+@include make-grid-columns($grid-columns, $grid-breakpoints);

src/styles/_imports.scss

@@ -1,8 +0,0 @@
-@import 'globals';
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/variables-dark';
-@import 'bootstrap/scss/maps';
-@import 'bootstrap/scss/vendor/rfs';
-@import 'bootstrap/scss/mixins/breakpoints';
-@import 'bootstrap/scss/mixins/grid';

src/styles/_inject.scss

@@ -0,0 +1,2 @@
+@import 'vars';
+@import 'grid';

src/styles/_vars.scss

@@ -15,3 +15,16 @@ $grid-breakpoints: (
 $default-color: #141414;
 $link-color: #2638d9;
 $container-padding-x: $grid-gutter-width * 0.5 !default;
+
+// Additional variables needed
+$container-max-widths: $grid-breakpoints;
+$gutters: (
+  0: 0,
+  1: 0.25rem,
+  2: 0.5rem,
+  3: 1rem,
+  4: 1.5rem,
+  5: 3rem
+) !default;
+$grid-row-columns: 6 !default;
+$prefix: '' !default;

src/styles/app.scss

@@ -1,12 +1,4 @@
 @import 'fonts';
-@import 'bootstrap/scss/mixins/lists';
-@import 'bootstrap/scss/mixins/container';
-@import 'bootstrap/scss/mixins/utilities';
-@import 'bootstrap/scss/containers';
-@import 'bootstrap/scss/grid';
-@import 'bootstrap/scss/bootstrap-utilities';
-@import 'bootstrap/scss/forms';
-@import 'bootstrap/scss/buttons';
 
 :root {
   --background-color: #fff;
@@ -148,35 +140,31 @@ h2 {
 }
 
 h1 {
-  @include font-size(4.8rem);
+  font-size:4.8rem;
-
   line-height: 1.1;
 }
 
 h2 {
-  @include font-size(4rem);
+  font-size:4rem;
-
   line-height: 1.1;
   margin-bottom: 0.5em;
   margin-top: 1.5em;
 }
 
 h3 {
-  @include font-size(3.2rem);
+  font-size:3.2rem;
-
   line-height: 1.1;
   margin-bottom: 0.5em;
 }
 
 h4 {
-  @include font-size(2.6rem);
+  font-size:2.6rem;
-
   line-height: 1.2;
   margin-bottom: 0.5em;
 }
 
 h5 {
-  @include font-size(2.2rem);
+  font-size:2.2rem;
 }
 
 main {
@@ -293,8 +281,7 @@ button {
 }
 
 .button--light {
-  @include font-size(1.5rem);
+  font-size:1.5rem;
-
   background-color: #f6f6f6;
   border-radius: 0.8rem;
   color: #000;
@@ -393,8 +380,7 @@ button {
 
 .button--submit,
 .button--outline {
-  @include font-size(2rem);
+  font-size:2rem;
-
   padding: 1.6rem 2rem;
 }
 
@@ -479,8 +465,7 @@ form {
     &:-webkit-autofill,
     &:not(:placeholder-shown) {
       & ~ label {
-        @include font-size(1.2rem);
+        font-size:1.2rem;
-
         color: var(--black-400);
         transform: translateY(-1.8em) !important;
       }
@@ -495,7 +480,7 @@ form {
   }
 
   .form-message {
-    @include font-size(1.2rem);
+    font-size:1.2rem;
   }
 
   .pretty-form__item {
@@ -595,20 +580,18 @@ figure {
 .ta-video-container,
 figure {
   figcaption {
-    @include font-size(1.2rem);
+    font-size:1.2rem;
-
     color: rgb(0 0 0 / 60%);
     line-height: 1.5;
   }
 }
 
 .view-switcher {
-  @include font-size(1.4rem);
-
   @include media-breakpoint-up(md) {
     flex-wrap: wrap;
   }
 
+  font-size:1.4rem;
   display: flex;
   font-weight: 500;
   list-style: none;
@@ -782,8 +765,7 @@ figure {
   }
 
   h2 {
-    @include font-size(4.4rem);
+    font-size:4.4rem;
-
     text-align: center;
   }
 
@@ -871,8 +853,6 @@ figure {
 }
 
 .container--static-page {
-  @include font-size(1.7rem);
-
   @include media-breakpoint-up(md) {
     padding-top: 1.5em;
 
@@ -883,6 +863,7 @@ figure {
     }
   }
 
+  font-size:1.7rem;
   color: #404040;
   position: relative;
 
@@ -916,11 +897,11 @@ figure {
 }
 
 .mode-switcher {
-  @include font-size(1.5rem);
-
   @include media-breakpoint-up(md) {
     text-align: right;
   }
+
+  font-size:1.5rem;
 }
 
 .mode-switcher__control {
@@ -930,13 +911,12 @@ figure {
 }
 
 .content-index {
-  @include font-size(1.4rem);
-
   @include media-breakpoint-up(md) {
     position: sticky;
     top: 14rem;
   }
 
+  font-size:1.4rem;
   line-height: 1.4;
   margin: 0 3.6rem 2em 0;
 
@@ -953,7 +933,7 @@ figure {
   }
 
   h4 {
-    @include font-size(1.6rem);
+    font-size:1.6rem;
   }
 }
 
@@ -1011,14 +991,13 @@ details {
   display: -webkit-box !important;
   overflow: hidden;
   position: relative;
-  -webkit-line-clamp: 2;
+  line-clamp: 2;
   -webkit-box-orient: vertical;
   white-space: normal;
 }
 
 .description {
-  @include font-size(1.4rem);
+  font-size:1.4rem;
-
   color: rgba(0 0 0 / 40%);
 
   .pretty-form__item + & {
@@ -1061,8 +1040,7 @@ iframe {
 }
 
 .lead {
-  @include font-size(2rem);
+  font-size:2rem;
-
   font-weight: bold;
   line-height: 1.5;
 }

src/styles/views/AllAuthors.module.scss

@@ -1,10 +1,9 @@
 .group {
-  @include font-size(1.6rem);
-
   @include media-breakpoint-down(sm) {
     margin-bottom: 6.4rem;
   }
 
+  font-size:1.6rem;
   margin: 3em 0 9.6rem;
 
   h2 {
@@ -45,8 +44,7 @@
 }
 
 .alphabet {
-  @include font-size(1.5rem);
+  font-size:1.5rem;
-
   color: rgba(0 0 0 / 20%);
   display: flex;
   flex-wrap: wrap;
@@ -65,8 +63,7 @@
 }
 
 .articlesCounter {
-  @include font-size(1.2rem);
+  font-size:1.2rem;
-
   margin-left: 0.5em;
   vertical-align: super;
 }
@@ -90,8 +87,7 @@
   }
 
   .loading {
-    @include font-size(1.4rem);
+    font-size:1.4rem;
-
     display: flex;
     align-items: center;
     justify-content: center;

src/styles/views/AllTopics.module.scss

@@ -1,10 +1,9 @@
 .group {
-  @include font-size(1.6rem);
-
   @include media-breakpoint-down(sm) {
     margin-bottom: 6.4rem;
   }
 
+  font-size:1.6rem;
   margin: 3em 0 9.6rem;
 
   h2 {
@@ -46,8 +45,7 @@
 }
 
 .alphabet {
-  @include font-size(1.5rem);
+  font-size:1.5rem;
-
   color: rgba(0 0 0 / 20%);
   display: flex;
   flex-wrap: wrap;
@@ -66,8 +64,7 @@
 }
 
 .articlesCounter {
-  @include font-size(1.2rem);
+  font-size:1.2rem;
-
   margin-left: 0.5em;
   vertical-align: super;
 }

src/styles/views/Author.module.scss

@@ -29,15 +29,13 @@
 }
 
 .ratingContainer {
-  @include font-size(1.5rem);
+  font-size:1.5rem;
-
   display: inline-flex;
   vertical-align: top;
 }
 
 .ratingControl {
-  @include font-size(1.5rem);
+  font-size:1.5rem;
-
   display: inline-flex;
   margin-left: 1em;
   vertical-align: middle;
@@ -105,8 +103,7 @@
 }
 
 .longBioExpandedControl {
-  @include font-size(1.6rem);
+  font-size:1.6rem;
-
   border-radius: 1.2rem;
   display: block;
   height: auto;

src/styles/views/EditView.module.scss

@@ -10,8 +10,7 @@
   position: relative;
 
   .headingActions {
-    @include font-size(1.2rem);
+    font-size:1.2rem;
-
     margin-bottom: 0.5rem;
     display: flex;
     flex-direction: row;
@@ -48,8 +47,7 @@
     margin-top: auto;
 
     .additionalInput {
-      @include font-size(1.4rem);
+      font-size:1.4rem;
-
       appearance: textfield;
       font-weight: 600;
       padding: 0;
@@ -170,8 +168,7 @@
 }
 
 .scrollTopButtonLabel {
-  @include font-size(1.4rem);
+  font-size:1.4rem;
-
   display: none;
   font-weight: bold;
   left: 100%;

src/styles/views/Feed.module.scss

@@ -9,8 +9,7 @@
 }
 
 .feedNavigation {
-  @include font-size(1.4rem);
+  font-size:1.4rem;
-
   font-weight: 500;
 
   h4 {
@@ -46,8 +45,7 @@
   margin-top: -1.1em;
 
   h4 {
-    @include font-size(2.2rem);
+    font-size:2.2rem;
-
     font-weight: bold;
     margin-bottom: 2rem;
   }
@@ -60,8 +58,7 @@
 }
 
 .topic {
-  @include font-size(1.2rem);
+  font-size:1.2rem;
-
   background: transparentize(#2638d9, 0.95);
   display: inline-block;
   font-weight: bold;
@@ -97,8 +94,7 @@
   }
 
   ul {
-    @include font-size(1.4rem);
+    font-size:1.4rem;
-
     font-weight: bold;
     margin: 1rem 0 0;
     line-height: 1.3;
@@ -136,8 +132,7 @@
 }
 
 .comment {
-  @include font-size(1.5rem);
+  font-size:1.5rem;
-
   line-height: 1.4;
   margin-bottom: 2.4rem;
 
@@ -158,8 +153,7 @@
 }
 
 .commentBody {
-  @include font-size(1.4rem);
+  font-size:1.4rem;
-
   margin-bottom: 1.2rem;
   line-clamp: 3;
   -webkit-line-clamp: 3;
@@ -190,8 +184,7 @@
 
 .commentArticleTitle,
 .commentAuthor {
-  @include font-size(1.2rem);
+  font-size:1.2rem;
-
   font-weight: 500;
 }
 

src/styles/views/FourOuFour.module.scss

@@ -41,14 +41,13 @@
 }
 
 .errorText {
-  @include font-size(3rem);
-
   @include media-breakpoint-up(sm) {
     left: 80px;
     position: absolute;
     text-align: center;
   }
 
+  font-size:3rem;
   font-weight: 300;
   left: 52px;
   margin: 0 60px 1em 0;
@@ -56,8 +55,7 @@
   top: -2.25em;
 
   .big {
-    @include font-size(7rem);
+    font-size:7rem;
-
     font-weight: 900;
     letter-spacing: 4px;
   }

src/styles/views/Inbox.module.scss

@@ -37,7 +37,7 @@ main {
   flex-direction: column;
   padding: 10px;
 
-  $fadeHeight: 10px;
+  $fade-height: 10px;
 
   .sidebarHeader {
     display: flex;
@@ -49,7 +49,7 @@ main {
     overflow: hidden;
     flex: 1;
     position: relative;
-    padding: $fadeHeight 0;
+    padding: $fade-height 0;
 
     .dialogs {
       scroll-behavior: smooth;
@@ -138,8 +138,7 @@ main {
     }
 
     time {
-      @include font-size(1.5rem);
+      font-size:1.5rem;
-
       background: #fff;
       color: #9fa1a7;
       padding: 0 0.5em;

src/styles/views/ProfileSettings.module.scss

@@ -4,12 +4,11 @@ h5 {
 }
 
 h4 {
-  @include font-size(2.4rem);
+  font-size: 2.4rem;
 }
 
 h5 {
-  @include font-size(1.7rem);
+  font-size:1.7rem;
-
   margin: 0 0 0.8rem;
 }
 
@@ -18,8 +17,7 @@ h5 {
 }
 
 .error {
-  @include font-size(1.6rem);
+  font-size: 1.6rem;
-
   text-align: center;
   color: var(--danger-color);
   margin-top: 1.6rem;
@@ -118,7 +116,7 @@ h5 {
 
 .topicsList {
   label {
-    @include font-size(1.7rem);
+    font-size:1.7rem;
   }
 }
 
@@ -206,8 +204,7 @@ h5 {
 }
 
 .userpic {
-  @include font-size(1.2rem);
+  font-size:1.2rem;
-
   position: relative;
   width: 180px;
   height: 180px;

src/styles/views/Search.module.scss

@@ -15,16 +15,14 @@
   }
 
   input {
-    @include font-size(4rem);
+    font-size:4rem;
-
     border: none;
     border-bottom: 1px solid #ccc;
     height: 100%;
   }
 
   button {
-    @include font-size(2rem);
+    font-size:2rem;
-
     line-height: 4rem;
   }
 }

vite.config.ts

@@ -27,8 +27,8 @@ export default {
       '~': path.resolve('./src'),
       '@': path.resolve('./public'),
       '/icons': path.resolve('./public/icons'),
-      '/fonts': path.resolve('./public/fonts'),
+      '/fonts': path.resolve('./public/fonts')
-      bootstrap: path.resolve('./node_modules/bootstrap')
+      // bootstrap: path.resolve('./node_modules/bootstrap')
     }
   },
   envPrefix: 'PUBLIC_',
@@ -37,7 +37,7 @@ export default {
     preprocessorOptions: {
       scss: {
         silenceDeprecations: ['mixed-decls'],
-        additionalData: '@import "~/styles/imports";\n',
+        additionalData: '@import "~/styles/inject";\n',
         includePaths: ['./public', './src/styles', './node_modules']
       }
     } as CSSOptions['preprocessorOptions']