From fd8a5a7819fc60e540f3d3d6bec789e51955515b Mon Sep 17 00:00:00 2001
From: Untone <anton.rewin@gmail.com>
Date: Sun, 6 Oct 2024 22:35:39 +0300
Subject: [PATCH] app-scss-refactored

---
 src/styles/README.md              |  56 +-
 src/styles/_base.scss             | 460 +++++++++++++++
 src/styles/_buttons.scss          | 106 ++++
 src/styles/_grid.scss             |  89 ++-
 src/styles/_switcher.scss         | 117 ++++
 src/styles/app.scss               | 909 +-----------------------------
 src/styles/views/Feed.module.scss |  74 ++-
 7 files changed, 907 insertions(+), 904 deletions(-)
 create mode 100644 src/styles/_base.scss
 create mode 100644 src/styles/_buttons.scss
 create mode 100644 src/styles/_switcher.scss

diff --git a/src/styles/README.md b/src/styles/README.md
index 09d1d6d0..8a426127 100644
--- a/src/styles/README.md
+++ b/src/styles/README.md
@@ -1,3 +1,45 @@
+# _base.scss - Base Styling
+
+This file provides a set of base styles and normalizations for consistent rendering across different browsers and devices.
+
+## Key Features
+
+- Box-sizing reset
+- Custom selection styling
+- Base HTML and body styles
+- Typography defaults
+- Link styling
+- Form element styling
+- Custom scrollbar styling (WebKit browsers)
+- Utility classes
+
+## Notable restyled base HTML tags
+
+- Base font size set to `62.5%` (`10px`) for easy rem calculations
+- Heading styles (h1-h5) with custom line heights
+- Custom styling for form `input`s, `textarea`s, and `select`s
+- Floating labels
+- Custom `checkbox` styling
+- Responsive `figure` and `img` styling
+- Custom styling for `<details>` and `<summary>` elements
+
+### Custom Utility Classes
+
+- `.pretty-form__item`: Wrapper for form elements
+- `.input--short`: For short input fields
+- `.fixed`: Applied to body to prevent scrolling
+- `.wide-container`: A container with responsive padding
+- `.wrapped`: For highlighted text within headings
+- `.lead`: For larger, bold introductory text
+- `.nodash`: Unstyled list
+- `.description`: For smaller, muted text
+- `.cursorPointer`: To indicate clickable elements
+
+### Custom Scrollbar
+
+- Customized scrollbar styling for WebKit browsers (Chrome, Safari, etc.)
+
+
 # _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.
@@ -25,21 +67,25 @@ This grid system is a lightweight alternative to Bootstrap's grid, providing ess
 
 - `media-breakpoint-{up|down}($breakpoint)` - Applies styles at a minimum or maximum width of the specified breakpoint
 - `media-breakpoint-between($lower, $upper)` - Applies styles between two breakpoints.
+- `make-container($max-widths, $gutter)`
+- `make-row($gutter)`
+- `make-col($size, $columns)`
+- `make-col-auto()`
+- `make-col-offset($size, $columns)`
+- `row-cols($count)`
 
 ### Justify Content
 - `.justify-content-{breakpoint}-{start|end|center|between|around|evenly}`
 
+### Order
+- `.order-{breakpoint}-{first|last|0|1|2|3|4|5}`
+
 ### Display
 - `.d-{breakpoint}-{none|inline|inline-block|block|table|table-row|table-cell|flex|inline-flex}`
 - `.d-print-{none|inline|inline-block|block|table|table-row|table-cell|flex|inline-flex}`
 
 `{breakpoint}` can be `xs`, `sm`, `md`, `lg`, `xl` or `xxl`.
 
-
-### `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`:
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
new file mode 100644
index 00000000..46102753
--- /dev/null
+++ b/src/styles/_base.scss
@@ -0,0 +1,460 @@
+* {
+    box-sizing: border-box;
+}
+
+::selection {
+    background: var(--selection-background);
+    color: var(--selection-color);
+}
+
+html {
+    color: var(--default-color);
+    font-size: 62.5%;
+    height: 100%;
+    -webkit-font-smoothing: antialiased;
+    overscroll-behavior-y: none;
+    overflow-y: scroll;
+}
+
+body {
+    background: var(--background-color);
+    color: var(--default-color);
+    font-family: Muller, Arial, Helvetica, sans-serif;
+    font-size: 2rem;
+    line-height: 1.6;
+    min-height: 100%;
+    text-size-adjust: 100%;
+
+    &.fixed {
+        overflow: hidden;
+        position: fixed;
+        width: 100%;
+    }
+}
+
+html,
+body,
+main,
+section {
+    border: 0;
+    padding: 0;
+    margin: 0;
+}
+
+.wide-container {
+    @include media-breakpoint-up(sm) {
+        padding: 0 $container-padding-x;
+    }
+
+    @include media-breakpoint-up(xl) {
+        padding: 0 $grid-gutter-width;
+    }
+
+    margin: 0 auto;
+    max-width: 1500px;
+    padding: 0 divide($container-padding-x, 2);
+    width: 100%;
+}
+
+h1,
+h2 {
+    line-height: 1.3;
+
+    .wrapped {
+        background: var(--background-color-invert);
+        color: var(--default-color-invert);
+        margin-left: -0.15em;
+        padding: 0 0.15em;
+        -webkit-box-decoration-break: clone;
+        box-decoration-break: clone;
+
+        &::selection {
+            background: var(--selection-background);
+            color: var(--selection-color);
+        }
+    }
+}
+
+h1 {
+    font-size: 4.8rem;
+    line-height: 1.1;
+}
+
+h2 {
+    font-size: 4rem;
+    line-height: 1.1;
+    margin-bottom: 0.5em;
+    margin-top: 1.5em;
+}
+
+h3 {
+    font-size: 3.2rem;
+    line-height: 1.1;
+    margin-bottom: 0.5em;
+}
+
+h4 {
+    font-size: 2.6rem;
+    line-height: 1.2;
+    margin-bottom: 0.5em;
+}
+
+h5 {
+    font-size: 2.2rem;
+}
+
+main {
+    box-sizing: border-box;
+    flex: 1;
+    padding-bottom: 2em;
+}
+
+body,
+span,
+a,
+p,
+h1,
+h2,
+h3,
+h4,
+h5 {
+    &:first-child {
+        margin-top: 0;
+    }
+}
+
+a,
+a:hover,
+a:visited,
+a:link,
+.link {
+    border-bottom: 2px solid var(--link-color);
+    text-decoration: none;
+    cursor: pointer;
+}
+
+a:visited,
+a:link,
+.link {
+    color: var(--link-color);
+    transition:
+        color 0.2s,
+        background-color 0.2s;
+
+    &:hover {
+        background-color: var(--link-hover-background);
+        color: var(--link-hover-color);
+    }
+}
+
+ul {
+    margin-bottom: 1.5em;
+}
+
+.nodash {
+    list-style: none;
+    margin: 0 0 1.5em;
+    padding: 0;
+
+    li {
+        margin: 0 0 0.5em;
+        padding: 0;
+    }
+}
+
+button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-family: inherit;
+    padding: 0;
+
+    &[disabled] {
+        cursor: default;
+        opacity: 0.5 !important;
+    }
+}
+
+
+form {
+    input[type='text'],
+    input[type='email'],
+    input[type='password'],
+    input[type='search'],
+    input[type='tel'],
+    input[type='date'],
+    textarea,
+    select {
+        border: 2px solid var(--black-100);
+        border-radius: 2px;
+        display: block;
+        font-family: inherit;
+        font-size: 1.7rem;
+        margin-bottom: 1.6rem;
+        padding: 2.5rem 1.2rem 1rem;
+        width: 100%;
+
+        &::placeholder {
+            color: transparent;
+        }
+
+        &~label {
+            box-sizing: border-box;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-touch-callout: none;
+            color: var(--black-400);
+            position: absolute;
+            left: 1.2rem;
+            display: block;
+            text-align: left;
+            padding: 0;
+            pointer-events: none;
+            top: 50%;
+            transform: translateY(-50%);
+            transform-origin: 0 0;
+            transition:
+                transform 0.1s 0.1s,
+                color 0.5s,
+                font-size 0.1s 0.1s;
+            transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
+            user-select: none;
+        }
+
+        &+.form-message {
+            margin-top: -1.2rem;
+        }
+
+        &.nolabel {
+            padding-bottom: 1.8rem;
+            padding-top: 1.7rem;
+        }
+    }
+
+    .form-message--error {
+        color: var(--danger-color) !important;
+    }
+
+    select {
+        padding-bottom: 1.65rem;
+        padding-top: 1.65rem;
+    }
+
+    input,
+    select,
+    textarea {
+        &:focus,
+        &:-webkit-autofill,
+        &:not(:placeholder-shown) {
+            &~label {
+                font-size: 1.2rem;
+                color: var(--black-400);
+                transform: translateY(-1.8em) !important;
+            }
+        }
+    }
+
+    textarea {
+        &~label {
+            left: 1.6rem;
+            top: 3.2rem;
+        }
+    }
+
+    .form-message {
+        font-size: 1.2rem;
+    }
+
+    .pretty-form__item {
+        margin-bottom: 2em;
+        position: relative;
+
+        input {
+            padding-top: 1.4em;
+        }
+
+        textarea {
+            line-height: 1.4;
+        }
+    }
+
+    .pretty-form__item--error {
+        input {
+            border-color: var(--danger-color);
+        }
+    }
+
+    .pretty-form__item--with-button {
+        @include media-breakpoint-up(sm) {
+            display: flex;
+        }
+
+        margin-bottom: 1.6rem;
+
+        input {
+            @include media-breakpoint-up(sm) {
+                margin-bottom: 0 !important;
+            }
+
+            flex: 1;
+        }
+
+        *:first-child {
+            @include media-breakpoint-up(sm) {
+                margin-right: 1em;
+            }
+
+            flex: 1;
+        }
+    }
+}
+
+.input--short {
+    display: inline-block !important;
+    width: 4em !important;
+}
+
+input[type='checkbox'] {
+    display: none;
+
+    &+label {
+        padding-left: 30px;
+        position: relative;
+
+        &::before {
+            // background: url('/icons/checkbox.svg') no-repeat;
+            content: '';
+            height: 2rem;
+            left: 0;
+            position: absolute;
+            top: 0.2em;
+            width: 2rem;
+        }
+    }
+
+    &:checked+label {
+        &::before {
+            // background-image: url('/icons/checkbox-checked.svg');
+            position: relative;
+        }
+    }
+}
+
+figure {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+    margin: 2em auto;
+    gap: 0.6rem;
+
+    img {
+        display: block;
+        max-height: 90vh;
+        margin: auto;
+        width: 100%;
+    }
+
+    figcaption {
+        font-size: 1.2rem;
+        color: var(--black-400);
+        line-height: 1.5;
+    }
+}
+
+details {
+    @include media-breakpoint-down(md) {
+        padding-left: 3rem;
+    }
+
+    margin-bottom: 1.5em;
+
+    summary {
+        display: block;
+        position: relative;
+
+        &::marker {
+            display: none;
+        }
+
+        h3 {
+            display: inline-block;
+            cursor: pointer;
+            margin-bottom: 0;
+
+            &::before {
+                content: '';
+                background: url('/icons/expand.svg') no-repeat;
+                background-size: contain;
+                height: 1.3rem;
+                margin-right: 0.5em;
+                position: absolute;
+                right: 100%;
+                top: 0.35em;
+                transition: transform 0.3s;
+                width: 2rem;
+            }
+        }
+    }
+
+    &[open] {
+        h3::before {
+            transform: rotate(180deg);
+        }
+    }
+}
+
+.description {
+    font-size: 1.4rem;
+    color: var(--black-400);
+
+    .pretty-form__item+& {
+        margin-top: -2rem;
+    }
+}
+
+[data-custom-scroll='on'] {
+    /* Customize website's scrollbar like Mac OS
+    Not supports in Firefox and IE */
+
+    /* total width */
+    &::-webkit-scrollbar {
+        color: var(--default-color);
+        background: var(--background-color);
+        width: 16px;
+    }
+
+    /* background of the scrollbar except button or resizer */
+    &::-webkit-scrollbar-track {
+        color: var(--default-color);
+        background: var(--background-color);
+    }
+
+    /* scrollbar itself */
+    &::-webkit-scrollbar-thumb {
+        color: var(--default-color);
+        background: var(--background-color);
+        border-radius: 16px;
+        border: 4px solid var(--white-500);
+    }
+
+    /* set button(top and bottom of the scrollbar) */
+    &::-webkit-scrollbar-button {
+        display: none;
+    }
+}
+
+iframe {
+    border: none;
+    color: var(--default-color);
+    max-width: 100%;
+}
+
+.lead {
+    font-size: 2rem;
+    font-weight: bold;
+    line-height: 1.5;
+}
+
+.cursorPointer {
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/styles/_buttons.scss b/src/styles/_buttons.scss
new file mode 100644
index 00000000..19d7c92a
--- /dev/null
+++ b/src/styles/_buttons.scss
@@ -0,0 +1,106 @@
+.button {
+    color: var(--default-color-invert);
+    background: var(--background-color-invert);
+    box-sizing: border-box;
+    font-size: 100%;
+    font-weight: 500;
+    padding: 0.6rem 1.2rem;
+    text-align: center;
+
+    &:hover {
+        color: var(--black-300);
+        opacity: 1;
+    }
+
+    &:active {
+        color: var(--black-300);
+    }
+}
+
+.button--subscribe {
+    background: var(--background-color);
+    color: var(--default-color);
+    border: 2px solid var(--black-100);
+    font-size: 1.5rem;
+    justify-content: center;
+    padding: 0.6rem 1.2rem;
+    transition: background-color 0.2s;
+
+    img {
+        height: auto;
+        transition: filter 0.2s;
+    }
+
+    &:hover {
+        background: var(--background-color-invert);
+        color: var(--default-color-invert);
+
+        img {
+            filter: invert(1);
+        }
+    }
+}
+
+.button--light {
+    font-size: 1.5rem;
+    background-color: var(--black-100);
+    border-radius: 0.8rem;
+    color: var(--default-color);
+    font-weight: 500;
+    height: auto;
+    padding: 0.6rem 1.2rem 0.6rem 1rem;
+
+    &:hover {
+        background: var(--black-300);
+    }
+}
+
+.button--subscribe-topic {
+    background: var(--background-color);
+    color: var(--default-color);
+    border: 2px solid var(--default-color);
+    border-radius: 0.8rem;
+    font-size: 1.4rem;
+    line-height: 2.8rem;
+    height: 3.2rem;
+    padding: 0 1rem;
+
+    &:hover {
+        background: var(--background-color-invert);
+        color: var(--default-color-invert);
+        opacity: 1;
+
+        .icon {
+            filter: invert(1);
+        }
+    }
+
+    &[disabled]:hover {
+        background: var(--background-color);
+        color: var(--default-color);
+    }
+
+    .icon {
+        display: inline-block;
+        margin-right: 0.3em;
+        vertical-align: text-bottom;
+        width: 1.4em;
+    }
+}
+
+
+.button--submit,
+.button--outline {
+    font-size: 2rem;
+    padding: 1.6rem 2rem;
+}
+
+.button--outline {
+    background: none;
+    box-shadow: inset 0 0 0 2px #000;
+    color: #000;
+
+    &:hover {
+        box-shadow: inset 0 0 0 2px var(--black-300);
+    }
+}
\ No newline at end of file
diff --git a/src/styles/_grid.scss b/src/styles/_grid.scss
index 91ea986c..147aefa0 100644
--- a/src/styles/_grid.scss
+++ b/src/styles/_grid.scss
@@ -104,12 +104,12 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-col-offset($size, $columns: $grid-columns) {
   $num: calc($size / $columns);
 
-  margin-left: if($num == 0, 0, calc(100% * #{$num}));
+  margin-left: if($num ==0, 0, calc(100% * #{$num}));
 }
 
 // Миксин row-cols
 @mixin row-cols($count) {
-  > * {
+  >* {
     flex: 0 0 auto;
     width: 100% / $count;
   }
@@ -118,7 +118,7 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 // Миксин make-grid-columns
 @mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
   @each $breakpoint in map-keys($breakpoints) {
-    $infix: if($breakpoint == 'xs', '', "-#{$breakpoint}");
+    $infix: if($breakpoint =='xs', '', "-#{$breakpoint}");
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Добавляем класс col-auto
@@ -143,14 +143,31 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-justify-content($breakpoints: $grid-breakpoints) {
   @each $breakpoint in map-keys($breakpoints) {
     @include media-breakpoint-up($breakpoint, $breakpoints) {
-      $infix: if($breakpoint == 'xs', "", "-#{$breakpoint}");
+      $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
 
-      .#{$prefix}justify-content#{$infix}-start   { justify-content: flex-start !important; }
-      .#{$prefix}justify-content#{$infix}-end     { justify-content: flex-end !important; }
-      .#{$prefix}justify-content#{$infix}-center  { justify-content: center !important; }
-      .#{$prefix}justify-content#{$infix}-between { justify-content: space-between !important; }
-      .#{$prefix}justify-content#{$infix}-around  { justify-content: space-around !important; }
-      .#{$prefix}justify-content#{$infix}-evenly  { justify-content: space-evenly !important; }
+      .#{$prefix}justify-content#{$infix}-start {
+        justify-content: flex-start !important;
+      }
+
+      .#{$prefix}justify-content#{$infix}-end {
+        justify-content: flex-end !important;
+      }
+
+      .#{$prefix}justify-content#{$infix}-center {
+        justify-content: center !important;
+      }
+
+      .#{$prefix}justify-content#{$infix}-between {
+        justify-content: space-between !important;
+      }
+
+      .#{$prefix}justify-content#{$infix}-around {
+        justify-content: space-around !important;
+      }
+
+      .#{$prefix}justify-content#{$infix}-evenly {
+        justify-content: space-evenly !important;
+      }
     }
   }
 }
@@ -159,10 +176,12 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-display-classes($breakpoints: $grid-breakpoints) {
   @each $breakpoint in map-keys($breakpoints) {
     @include media-breakpoint-up($breakpoint, $breakpoints) {
-      $infix: if($breakpoint == 'xs', "", "-#{$breakpoint}");
+      $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
 
       @each $value in $displays {
-        .#{$prefix}d#{$infix}-#{$value} { display: $value !important; }
+        .#{$prefix}d#{$infix}-#{$value} {
+          display: $value !important;
+        }
       }
     }
   }
@@ -172,11 +191,48 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
 @mixin make-print-display-classes() {
   @media print {
     @each $value in $displays {
-      .#{$prefix}d-print-#{$value} { display: $value !important; }
+      .#{$prefix}d-print-#{$value} {
+        display: $value !important;
+      }
     }
   }
 }
 
+// Добавляем новый миксин для генерации классов порядка
+@mixin make-order-classes($breakpoints: $grid-breakpoints) {
+  @each $breakpoint in map-keys($breakpoints) {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      $infix: if($breakpoint =='xs', "", "-#{$breakpoint}");
+
+      .order#{$infix}-first {
+        order: -1 !important;
+      }
+
+      .order#{$infix}-last {
+        order: 9999 !important;
+      }
+
+      .order#{$infix}-0 {
+        order: 0 !important;
+      }
+
+      @for $i from 1 through 5 {
+        .order#{$infix}-#{$i} {
+          order: $i !important;
+        }
+      }
+    }
+  }
+}
+
+// Добавляем вызов нового миксина в конец файла
+@include make-grid-columns($grid-columns, $grid-breakpoints);
+@include make-display-classes;
+@include make-print-display-classes;
+@include make-justify-content;
+@include make-order-classes;
+
+
 // Генерация классов контейнера и ряда
 .container,
 .container-fluid {
@@ -189,9 +245,4 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex
   > * {
     @include make-col-ready;
   }
-}
-
-@include make-grid-columns($grid-columns, $grid-breakpoints);
-@include make-display-classes;
-@include make-print-display-classes;
-@include make-justify-content;
+}
\ No newline at end of file
diff --git a/src/styles/_switcher.scss b/src/styles/_switcher.scss
new file mode 100644
index 00000000..f37a667b
--- /dev/null
+++ b/src/styles/_switcher.scss
@@ -0,0 +1,117 @@
+.view-switcher {
+    @include media-breakpoint-up(md) {
+        flex-wrap: wrap;
+    }
+
+    font-size:1.4rem;
+    display: flex;
+    font-weight: 500;
+    list-style: none;
+    margin: 3.6rem -1rem 0;
+    overflow: auto;
+    padding: 0 1rem;
+
+    li {
+        @include media-breakpoint-up(md) {
+            margin-right: 2.4rem;
+        }
+
+        display: inline-block;
+        margin-right: 2rem;
+        margin-bottom: 0.6em;
+        white-space: nowrap;
+
+        .link {
+            border-bottom: none;
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        height: auto !important;
+        font-size: inherit !important;
+        padding: 0 !important;
+    }
+
+    a,
+    .link,
+    .linkReplacement,
+    button {
+        border-bottom: 1px solid transparent;
+        color: var(--link-color);
+        cursor: pointer;
+        font-weight: inherit;
+
+        &:hover {
+            background: var(--link-hover-background);
+            color: var(--link-hover-color);
+        }
+    }
+
+    .view-switcher__item--selected {
+        font-weight: bold;
+
+        a,
+        .link,
+        .linkReplacement,
+        button {
+            border-bottom: 2px solid var(--default-color);
+            color: var(--default-color);
+            cursor: default;
+
+            &:hover {
+                background: transparent;
+            }
+        }
+    }
+}
+
+.view-switcher__counter {
+    align-items: center;
+    background: #f7f7f8;
+    border-radius: 0.8rem;
+    display: inline-flex;
+    font-size: 1.2rem;
+    font-weight: bold;
+    height: 2.2rem;
+    justify-content: center;
+    line-height: 2.2rem;
+    margin-left: 0.4rem;
+    min-width: 2.2rem;
+    padding: 0 0.6rem;
+    text-align: center;
+
+    .view-switcher__item--selected & {
+        background: var(--background-color-invert);
+        color: var(--default-color-invert);
+    }
+}
+
+.view-switcher__search {
+    @include media-breakpoint-up(sm) {
+        flex: 1;
+        margin-left: 2em;
+    }
+
+    flex: 1 100%;
+    text-align: right;
+    white-space: nowrap;
+
+    .icon {
+        display: inline-block;
+        margin-right: 0.2em;
+        vertical-align: middle;
+    }
+
+    a:hover {
+        .icon {
+            filter: invert(1);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 61144851..3ee670a0 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1,743 +1,10 @@
 @import 'fonts';
 @import 'vars';
-@import 'theme';
-@import 'grid';
-
-* {
-  box-sizing: border-box;
-}
-
-::selection {
-  background: var(--selection-background);
-  color: var(--selection-color);
-}
-
-html {
-  color: var(--default-color);
-  font-size: 62.5%;
-  height: 100%;
-  -webkit-font-smoothing: antialiased;
-  overscroll-behavior-y: none;
-  overflow-y: scroll;
-}
-
-body {
-  background: var(--background-color);
-  color: var(--default-color);
-  font-family: Muller, Arial, Helvetica, sans-serif;
-  font-size: 2rem;
-  line-height: 1.6;
-  min-height: 100%;
-  text-size-adjust: 100%;
-
-  &.fixed {
-    overflow: hidden;
-    position: fixed;
-    width: 100%;
-  }
-}
-
-html,
-body,
-main,
-section {
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-
-#svelte {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-.wide-container {
-  @include media-breakpoint-up(sm) {
-    padding: 0 $container-padding-x;
-  }
-
-  @include media-breakpoint-up(xl) {
-    padding: 0 $grid-gutter-width;
-  }
-
-  margin: 0 auto;
-  max-width: 1500px;
-  padding: 0 divide($container-padding-x, 2);
-  width: 100%;
-}
-
-h1,
-h2 {
-  line-height: 1.3;
-
-  .wrapped {
-    background: var(--background-color-invert);
-    color: var(--default-color-invert);
-    margin-left: -0.15em;
-    padding: 0 0.15em;
-    -webkit-box-decoration-break: clone;
-    box-decoration-break: clone;
-
-    &::selection {
-      background: var(--selection-background);
-      color: var(--selection-color);
-    }
-  }
-}
-
-h1 {
-  font-size:4.8rem;
-  line-height: 1.1;
-}
-
-h2 {
-  font-size:4rem;
-  line-height: 1.1;
-  margin-bottom: 0.5em;
-  margin-top: 1.5em;
-}
-
-h3 {
-  font-size:3.2rem;
-  line-height: 1.1;
-  margin-bottom: 0.5em;
-}
-
-h4 {
-  font-size:2.6rem;
-  line-height: 1.2;
-  margin-bottom: 0.5em;
-}
-
-h5 {
-  font-size:2.2rem;
-}
-
-main {
-  box-sizing: border-box;
-  flex: 1;
-  padding-bottom: 2em;
-}
-
-body,
-span,
-a,
-p,
-h1,
-h2,
-h3,
-h4,
-h5 {
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-a,
-a:hover,
-a:visited,
-a:link,
-.link {
-  border-bottom: 2px solid var(--link-color);
-  text-decoration: none;
-  cursor: pointer;
-}
-
-a:visited,
-a:link,
-.link {
-  color: var(--link-color);
-  transition:
-    color 0.2s,
-    background-color 0.2s;
-
-  &:hover {
-    background-color: var(--link-hover-background);
-    color: var(--link-hover-color);
-  }
-}
-
-ul {
-  margin-bottom: 1.5em;
-}
-
-.nodash {
-  list-style: none;
-  margin: 0 0 1.5em;
-  padding: 0;
-
-  li {
-    margin: 0 0 0.5em;
-    padding: 0;
-  }
-}
-
-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-family: inherit;
-  padding: 0;
-
-  &[disabled] {
-    cursor: default;
-    opacity: 0.5 !important;
-  }
-}
-
-.button {
-  color: var(--default-color-invert);
-  background: var(--background-color-invert);
-  box-sizing: border-box;
-  font-size: 100%;
-  font-weight: 500;
-  padding: 0.6rem 1.2rem;
-  text-align: center;
-
-  &:hover {
-    color: var(--black-300);
-    opacity: 1;
-  }
-
-  &:active {
-    color: var(--black-300);
-  }
-}
-
-.button--subscribe {
-  background: var(--background-color);
-  color: var(--default-color);
-  border: 2px solid var(--black-100);
-  font-size: 1.5rem;
-  justify-content: center;
-  padding: 0.6rem 1.2rem;
-  transition: background-color 0.2s;
-
-  img {
-    height: auto;
-    transition: filter 0.2s;
-  }
-
-  &:hover {
-    background: var(--background-color-invert);
-    color: var(--default-color-invert);
-
-    img {
-      filter: invert(1);
-    }
-  }
-}
-
-.button--light {
-  font-size:1.5rem;
-  background-color: var(--black-100);
-  border-radius: 0.8rem;
-  color: var(--default-color);
-  font-weight: 500;
-  height: auto;
-  padding: 0.6rem 1.2rem 0.6rem 1rem;
-
-  &:hover {
-    background: var(--black-300);
-  }
-}
-
-.button--subscribe-topic {
-  background: var(--background-color);
-  color: var(--default-color);
-  border: 2px solid var(--default-color);
-  border-radius: 0.8rem;
-  font-size: 1.4rem;
-  line-height: 2.8rem;
-  height: 3.2rem;
-  padding: 0 1rem;
-
-  &:hover {
-    background: var(--background-color-invert);
-    color: var(--default-color-invert);
-    opacity: 1;
-
-    .icon {
-      filter: invert(1);
-    }
-  }
-
-  &[disabled]:hover {
-    background: var(--background-color);
-    color: var(--default-color);
-  }
-
-  .icon {
-    display: inline-block;
-    margin-right: 0.3em;
-    vertical-align: text-bottom;
-    width: 1.4em;
-  }
-}
-
-.button--content-index {
-  @include media-breakpoint-up(md) {
-    margin-top: -0.5rem;
-    position: sticky;
-    top: 135px;
-  }
-
-  @include media-breakpoint-up(sm) {
-    right: $container-padding-x;
-  }
-
-  background: none;
-  border: 2px solid var(--white-500);
-  height: 3.2rem;
-  float: right;
-  padding: 0;
-  position: absolute;
-  right: $container-padding-x * 0.5;
-  top: -0.5rem;
-  width: 3.2rem;
-  z-index: 1;
-
-  .icon {
-    background: #fff;
-    transition: filter 0.3s;
-  }
-
-  .icon,
-  img {
-    height: 100%;
-    vertical-align: middle;
-    width: auto;
-  }
-
-  &:hover {
-    .icon {
-      filter: invert(1);
-    }
-  }
-
-  .expanded {
-    border-radius: 100%;
-    overflow: hidden;
-
-    img {
-      height: auto;
-      margin-top: 0.8rem;
-    }
-  }
-}
-
-.button--submit,
-.button--outline {
-  font-size:2rem;
-  padding: 1.6rem 2rem;
-}
-
-.button--outline {
-  background: none;
-  box-shadow: inset 0 0 0 2px #000;
-  color: #000;
-
-  &:hover {
-    box-shadow: inset 0 0 0 2px var(--black-300);
-  }
-}
-
-form {
-  input[type='text'],
-  input[type='email'],
-  input[type='password'],
-  input[type='search'],
-  input[type='tel'],
-  input[type='date'],
-  textarea,
-  select {
-    border: 2px solid var(--black-100);
-    border-radius: 2px;
-    display: block;
-    font-family: inherit;
-    font-size: 1.7rem;
-    margin-bottom: 1.6rem;
-    padding: 2.5rem 1.2rem 1rem;
-    width: 100%;
-
-    &::placeholder {
-      color: transparent;
-    }
-
-    & ~ label {
-      box-sizing: border-box;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-touch-callout: none;
-      color: var(--black-400);
-      position: absolute;
-      left: 1.2rem;
-      display: block;
-      text-align: left;
-      padding: 0;
-      pointer-events: none;
-      top: 50%;
-      transform: translateY(-50%);
-      transform-origin: 0 0;
-      transition:
-        transform 0.1s 0.1s,
-        color 0.5s,
-        font-size 0.1s 0.1s;
-      transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
-      user-select: none;
-    }
-
-    & + .form-message {
-      margin-top: -1.2rem;
-    }
-
-    &.nolabel {
-      padding-bottom: 1.8rem;
-      padding-top: 1.7rem;
-    }
-  }
-
-  .form-message--error {
-    color: var(--danger-color) !important;
-  }
-
-  select {
-    padding-bottom: 1.65rem;
-    padding-top: 1.65rem;
-  }
-
-  input,
-  select,
-  textarea {
-    &:focus,
-    &:-webkit-autofill,
-    &:not(:placeholder-shown) {
-      & ~ label {
-        font-size:1.2rem;
-        color: var(--black-400);
-        transform: translateY(-1.8em) !important;
-      }
-    }
-  }
-
-  textarea {
-    & ~ label {
-      left: 1.6rem;
-      top: 3.2rem;
-    }
-  }
-
-  .form-message {
-    font-size:1.2rem;
-  }
-
-  .pretty-form__item {
-    margin-bottom: 2em;
-    position: relative;
-
-    input {
-      padding-top: 1.4em;
-    }
-
-    textarea {
-      line-height: 1.4;
-    }
-  }
-
-  .pretty-form__item--error {
-    input {
-      border-color: var(--danger-color);
-    }
-  }
-
-  .pretty-form__item--with-button {
-    @include media-breakpoint-up(sm) {
-      display: flex;
-    }
-
-    margin-bottom: 1.6rem;
-
-    input {
-      @include media-breakpoint-up(sm) {
-        margin-bottom: 0 !important;
-      }
-
-      flex: 1;
-    }
-
-    *:first-child {
-      @include media-breakpoint-up(sm) {
-        margin-right: 1em;
-      }
-
-      flex: 1;
-    }
-  }
-}
-
-.input--short {
-  display: inline-block !important;
-  width: 4em !important;
-}
-
-input[type='checkbox'] {
-  display: none;
-
-  & + label {
-    padding-left: 30px;
-    position: relative;
-
-    &::before {
-      // background: url('/icons/checkbox.svg') no-repeat;
-      content: '';
-      height: 2rem;
-      left: 0;
-      position: absolute;
-      top: 0.2em;
-      width: 2rem;
-    }
-  }
-
-  &:checked + label {
-    &::before {
-      // background-image: url('/icons/checkbox-checked.svg');
-      position: relative;
-    }
-  }
-}
-
-.hidden {
-  display: none !important;
-}
-
-figure {
-  display: flex;
-  flex-direction: column;
-  width: fit-content;
-  margin: 2em auto;
-  gap: 0.6rem;
-
-  img {
-    display: block;
-    max-height: 90vh;
-    margin: auto;
-    width: 100%;
-  }
-
-  figcaption {
-    font-size:1.2rem;
-    color: var(--black-400);
-    line-height: 1.5;
-  }
-}
-
-.view-switcher {
-  @include media-breakpoint-up(md) {
-    flex-wrap: wrap;
-  }
-
-  font-size:1.4rem;
-  display: flex;
-  font-weight: 500;
-  list-style: none;
-  margin: 3.6rem -1rem 0;
-  overflow: auto;
-  padding: 0 1rem;
-
-  li {
-    @include media-breakpoint-up(md) {
-      margin-right: 2.4rem;
-    }
-
-    display: inline-block;
-    margin-right: 2rem;
-    margin-bottom: 0.6em;
-    white-space: nowrap;
-
-    .link {
-      border-bottom: none;
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-
-  button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    height: auto !important;
-    font-size: inherit !important;
-    padding: 0 !important;
-  }
-
-  a,
-  .link,
-  .linkReplacement,
-  button {
-    border-bottom: 1px solid transparent;
-    color: var(--link-color);
-    cursor: pointer;
-    font-weight: inherit;
-
-    &:hover {
-      background: var(--link-hover-background);
-      color: var(--link-hover-color);
-    }
-  }
-
-  .view-switcher__item--selected {
-    font-weight: bold;
-
-    a,
-    .link,
-    .linkReplacement,
-    button {
-      border-bottom: 2px solid var(--default-color);
-      color: var(--default-color);
-      cursor: default;
-
-      &:hover {
-        background: transparent;
-      }
-    }
-  }
-}
-
-.view-switcher__counter {
-  align-items: center;
-  background: #f7f7f8;
-  border-radius: 0.8rem;
-  display: inline-flex;
-  font-size: 1.2rem;
-  font-weight: bold;
-  height: 2.2rem;
-  justify-content: center;
-  line-height: 2.2rem;
-  margin-left: 0.4rem;
-  min-width: 2.2rem;
-  padding: 0 0.6rem;
-  text-align: center;
-
-  .view-switcher__item--selected & {
-    background: var(--background-color-invert);
-    color: var(--default-color-invert);
-  }
-}
-
-.view-switcher__search {
-  @include media-breakpoint-up(sm) {
-    flex: 1;
-    margin-left: 2em;
-  }
-
-  flex: 1 100%;
-  text-align: right;
-  white-space: nowrap;
-
-  .icon {
-    display: inline-block;
-    margin-right: 0.2em;
-    vertical-align: middle;
-  }
-
-  a:hover {
-    .icon {
-      filter: invert(1);
-    }
-  }
-}
-
-.floor-header {
-  margin-bottom: 0 !important;
-}
-
-.floor {
-  @include media-breakpoint-up(md) {
-    margin-bottom: 6.4rem;
-  }
-
-  .container {
-    padding-left: $container-padding-x;
-    padding-right: $container-padding-x;
-  }
-}
-
-.floor--7 {
-  .col-md-12 {
-    @include media-breakpoint-down(lg) {
-      &:nth-child(1),
-      &:nth-child(2) {
-        margin-bottom: 1.6em;
-      }
-    }
-
-    @include media-breakpoint-down(md) {
-      &:nth-child(3),
-      &:nth-child(4) {
-        margin-bottom: 1.6em;
-      }
-    }
-  }
-}
-
-.floor--important {
-  @include media-breakpoint-up(md) {
-    padding-bottom: $grid-gutter-width;
-    padding-top: $grid-gutter-width;
-  }
-
-  @include media-breakpoint-down(md) {
-    margin-bottom: 5rem;
-  }
-
-  background: var(--background-color-invert);
-  color: var(--default-color-invert);
-  padding: $grid-gutter-width 0;
-  padding-bottom: $container-padding-x;
-  padding-top: $container-padding-x;
-
-  ::selection {
-    background: var(--background-color);
-    color: var(--default-color) !important;
-  }
-
-  h2 {
-    font-size:4.4rem;
-    text-align: center;
-  }
-
-  .all-materials {
-    a {
-      color: var(--default-color-invert) !important;
-    }
-  }
-
-  a:hover {
-    color: var(--default-color) !important;
-    background: var(--background-color);
-  }
-}
-
-.row {
-  @include media-breakpoint-down(md) {
-    > * {
-      margin-bottom: 2.4rem;
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    margin-left: divide(-$container-padding-x, 2);
-    margin-right: divide(-$container-padding-x, 2);
-
-    > * {
-      padding-left: divide($container-padding-x, 2);
-      padding-right: divide($container-padding-x, 2);
-    }
-  }
-}
+@import 'theme';  // color themes
+@import 'grid';   // bootstrap grid
+@import 'base';   // normalizer-like styles
+@import 'buttons'; // buttons (TODO: move to components)
+@import 'switcher'; // veiw-switcher
 
 #app {
   display: flex;
@@ -748,7 +15,7 @@ figure {
 
 .main-content {
   @include media-breakpoint-up(lg) {
-     padding-top: 130px;
+    padding-top: 130px;
   }
 
   flex: 1 100%;
@@ -761,7 +28,8 @@ figure {
   padding-top: 0;
 }
 
-.container {
+.container,
+.container-fluid {
   @include media-breakpoint-down(sm) {
     // padding: 0 $container-padding-x * 0.5;
   }
@@ -770,11 +38,29 @@ figure {
   width: auto;
 }
 
+.row {
+  @include media-breakpoint-down(md) {
+    >* {
+      margin-bottom: 2.4rem;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    margin-left: divide(-$container-padding-x, 2);
+    margin-right: divide(-$container-padding-x, 2);
+
+    >* {
+      padding-left: divide($container-padding-x, 2);
+      padding-right: divide($container-padding-x, 2);
+    }
+  }
+}
+
 .container--static-page {
   @include media-breakpoint-up(md) {
     padding-top: 1.5em;
 
-    > .row {
+    >.row {
       flex-wrap: nowrap;
       justify-content: space-between;
       margin-right: 0;
@@ -814,83 +100,7 @@ figure {
   height: 420px;
 }
 
-.content-index {
-  @include media-breakpoint-up(md) {
-    position: sticky;
-    top: 14rem;
-  }
-
-  font-size:1.4rem;
-  line-height: 1.4;
-  margin: 0 3.6rem 2em 0;
-
-  ul ul {
-    margin: 1em 0 0 1em;
-  }
-
-  li {
-    margin-bottom: 1em;
-  }
-
-  a {
-    border: none;
-  }
-
-  h4 {
-    font-size:1.6rem;
-  }
-}
-
-.load-more-container {
-  text-align: center;
-
-  button {
-    padding: 0.6em 1.5em;
-  }
-}
-
-details {
-  @include media-breakpoint-down(md) {
-    padding-left: 3rem;
-  }
-
-  margin-bottom: 1.5em;
-
-  summary {
-    display: block;
-    position: relative;
-
-    &::marker {
-      display: none;
-    }
-
-    h3 {
-      display: inline-block;
-      cursor: pointer;
-      margin-bottom: 0;
-
-      &::before {
-        content: '';
-        background: url('/icons/expand.svg') no-repeat;
-        background-size: contain;
-        height: 1.3rem;
-        margin-right: 0.5em;
-        position: absolute;
-        right: 100%;
-        top: 0.35em;
-        transition: transform 0.3s;
-        width: 2rem;
-      }
-    }
-  }
-
-  &[open] {
-    h3::before {
-      transform: rotate(180deg);
-    }
-  }
-}
-
+// used in FeedView, AuthorBadge, TopicCard, TopicBadge
 .text-truncate {
   display: -webkit-box !important;
   overflow: hidden;
@@ -900,67 +110,8 @@ details {
   white-space: normal;
 }
 
-.description {
-  font-size:1.4rem;
-  color: var(--black-400);
-
-  .pretty-form__item + & {
-    margin-top: -2rem;
-  }
-}
-
-[data-custom-scroll='on'] {
-  /* Customize website's scrollbar like Mac OS
-  Not supports in Firefox and IE */
-
-  /* total width */
-  &::-webkit-scrollbar {
-    color: var(--default-color);
-    background: var(--background-color);
-    width: 16px;
-  }
-
-  /* background of the scrollbar except button or resizer */
-  &::-webkit-scrollbar-track {
-    color: var(--default-color);
-    background: var(--background-color);
-  }
-
-  /* scrollbar itself */
-  &::-webkit-scrollbar-thumb {
-    color: var(--default-color);
-    background: var(--background-color);
-    border-radius: 16px;
-    border: 4px solid var(--white-500);
-  }
-
-  /* set button(top and bottom of the scrollbar) */
-  &::-webkit-scrollbar-button {
-    display: none;
-  }
-}
-
-iframe {
-  border: none;
-  color: var(--default-color);
-  max-width: 100%;
-}
-
-.lead {
-  font-size:2rem;
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-.cursorPointer {
-  cursor: pointer;
-}
-
+// used in SearchModal (docwrite classname string)
 .blackModeIntersection {
   color: var(--default-color);
   background: var(--background-color);
-}
-
-.img-align-column {
-  clear: both;
-}
+}
\ No newline at end of file
diff --git a/src/styles/views/Feed.module.scss b/src/styles/views/Feed.module.scss
index 8a009efc..ae5d19d0 100644
--- a/src/styles/views/Feed.module.scss
+++ b/src/styles/views/Feed.module.scss
@@ -245,4 +245,76 @@
 
   margin-bottom: 10px;
   padding: 0 5px;
-}
\ No newline at end of file
+}
+
+.floor-header {
+  margin-bottom: 0 !important;
+}
+
+.floor {
+  @include media-breakpoint-up(md) {
+    margin-bottom: 6.4rem;
+  }
+
+  .container {
+    padding-left: $container-padding-x;
+    padding-right: $container-padding-x;
+  }
+}
+
+.floor--7 {
+  .col-md-12 {
+    @include media-breakpoint-down(lg) {
+      &:nth-child(1),
+      &:nth-child(2) {
+        margin-bottom: 1.6em;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      &:nth-child(3),
+      &:nth-child(4) {
+        margin-bottom: 1.6em;
+      }
+    }
+  }
+}
+
+.floor--important {
+  @include media-breakpoint-up(md) {
+    padding-bottom: $grid-gutter-width;
+    padding-top: $grid-gutter-width;
+  }
+
+  @include media-breakpoint-down(md) {
+    margin-bottom: 5rem;
+  }
+
+  background: var(--background-color-invert);
+  color: var(--default-color-invert);
+  padding: $grid-gutter-width 0;
+  padding-bottom: $container-padding-x;
+  padding-top: $container-padding-x;
+
+  ::selection {
+    background: var(--background-color);
+    color: var(--default-color) !important;
+  }
+
+  h2 {
+    font-size: 4.4rem;
+    text-align: center;
+  }
+
+  .all-materials {
+    a {
+      color: var(--default-color-invert) !important;
+    }
+  }
+
+  a:hover {
+    color: var(--default-color) !important;
+    background: var(--background-color);
+  }
+}
+