Feat/adaptive

src/assets/styles/abstracts/variables/colors.scss

@@ -3,6 +3,7 @@ $color-neutral-700: #484554;
 $color-neutral-600: #666372;
 $color-neutral-500: #838090;
 $color-neutral-400: #ada9bb;
+$color-neutral-350: #bdbdbd;
 $color-neutral-300: #bbb;
 $color-neutral-150: #ececec;
 $color-neutral-100: #f4f4f4;

src/assets/styles/abstracts/variables/fonts.scss

@@ -12,6 +12,7 @@ $font-size-text-medium-small: 1.6rem;
 $font-size-text-medium-additional: 1.6rem;
 $font-size-text-small: 1.4rem;
 $font-size-text-small-extra: 1.2rem;
+$font-size-text-small-extra-extra: 0.9rem;
 $font-size-mobile-text-medium: 1.6rem;
 
 $font-line-height-huge: calc(8rem / $font-size-huge * 100%);
@@ -40,3 +41,4 @@ $font-line-height-mobile-text-medium: calc(
 );
 
 $font-letter-spacing-main: 0.4px;
+$font-letter-spacing-tablet: 0.2px;

src/components/cards/article-preview/article-preview.module.scss

@@ -46,6 +46,12 @@ $border: 1px solid
     }
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      padding: 16px;
+    }
+  }
+
   &--news,
   &--fullPageNews {
     max-width: 1208px;
@@ -79,6 +85,10 @@ $border: 1px solid
       row-gap: 16px;
     }
   }
+
+  @media screen and (max-width: calc($media-tablet-small-extra - 1px)) {
+    row-gap: 12px;
+  }
 }
 
 .imageWrapper {
@@ -157,6 +167,30 @@ $border: 1px solid
     }
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-large - 1px)) {
+      height: calc-fluid-element(
+        180,
+        320,
+        $media-desktop-small,
+        $media-desktop-large
+      );
+    }
+
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      > button {
+        &:last-child {
+          top: 7px;
+          right: 7px;
+        }
+      }
+    }
+
+    @media screen and (max-width: $media-desktop-small) {
+      height: 180px;
+    }
+  }
+
   &--fullPageNews,
   &--news {
     height: 292px;
@@ -243,6 +277,12 @@ $border: 1px solid
     }
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      min-height: 148px;
+    }
+  }
+
   &--fullPageNews,
   &--news {
     min-height: 243px;
@@ -281,6 +321,15 @@ $border: 1px solid
   @media screen and (max-width: calc($media-tablet-small - 1px)) {
     font-size: $font-size-text-medium;
   }
+
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      font-size: $font-size-text-medium;
+      font-weight: 600;
+      line-height: $font-line-height-text-medium;
+      letter-spacing: $font-letter-spacing-main;
+    }
+  }
 }
 
 .text {
@@ -346,6 +395,15 @@ $border: 1px solid
     margin-top: 16px;
   }
 
+  &--favorites {
+    @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+      height: 64px;
+      font-size: $font-size-text-small;
+      line-height: $font-line-height-text-small;
+      letter-spacing: $font-letter-spacing-main;
+    }
+  }
+
   &--fullPageArticle {
     @media screen and (max-width: $media-tablet-large) {
       height: 48px;

src/components/cards/article-preview/article-preview.tsx

@@ -25,7 +25,13 @@ interface ICardArticlePreviewProps {
     } | null;
     views_count: number;
   };
-  type: 'media' | 'news' | 'fullPageArticle' | 'fullPageNews' | 'default';
+  type:
+    | 'media'
+    | 'news'
+    | 'favorites'
+    | 'fullPageArticle'
+    | 'fullPageNews'
+    | 'default';
   hasFavoriteButton?: boolean;
   extraClass?: string;
   route: string;
@@ -84,7 +90,14 @@ const CardArticlePreview: FC<ICardArticlePreviewProps> = ({
               )}
             >
               <div className={styles.title}>
-                <h3 className={styles.heading}>{title}</h3>
+                <h3
+                  className={classNames(
+                    styles.heading,
+                    styles[`heading--${type}`]
+                  )}
+                >
+                  {title}
+                </h3>
                 <p className={classNames(styles.text, styles[`text--${type}`])}>
                   {converMdToHTML(annotation, true)}
                 </p>

src/components/entry/entry.module.scss

@@ -2,11 +2,17 @@
 @import 'assets/styles/abstracts/variables/fonts';
 @import 'assets/styles/abstracts/variables/wrappers';
 @import 'assets/styles/abstracts/placeholders';
+@import 'assets/styles/abstracts/variables/media-queries';
+@import 'assets/styles/abstracts/functions';
 
 .main {
   display: grid;
   grid-template-columns: 50.62% 49.38%;
   height: 100vh;
+
+  @media screen and (max-width: $media-tablet-large) {
+    grid-template-columns: 100%;
+  }
 }
 
 .columnLeft,
@@ -19,17 +25,33 @@
 .columnRight {
   background-color: $color-brand-primary-900;
 
+  @media screen and (max-width: $media-tablet-large) {
+    background-color: $color-neutral-0;
+    align-items: flex-start;
+    padding: 72px 0 0;
+  }
+
   &SignUp {
     padding: 64px 0;
-  }
-}
 
-.logo {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  @extend %text-size-large;
-  color: inherit;
+    @media screen and (max-width: calc($media-desktop-large - 1px)) {
+      padding: calc-fluid-element(
+          40px,
+          64px,
+          $media-desktop-small,
+          $media-desktop-large
+        )
+        0;
+    }
+
+    @media screen and (max-width: calc($media-desktop-small - 1px)) {
+      padding: 40px 0;
+    }
+
+    @media screen and (max-width: $media-tablet-large) {
+      padding: 72px 0 0;
+    }
+  }
 }
 
 .formWrapper {
@@ -40,6 +62,65 @@
   box-sizing: border-box;
   background-color: $color-neutral-0;
   border-radius: 24px;
+
+  @media screen and (max-width: calc($media-desktop-large - 1px)) {
+    max-width: calc-fluid-element(
+      480px,
+      $wrapper-entry-form-desktop,
+      $media-desktop-small,
+      $media-desktop-large
+    );
+  }
+
+  @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    max-width: 480px;
+  }
+
+  @media screen and (max-width: $media-tablet-large) {
+    max-width: 335px;
+    box-sizing: content-box;
+  }
+
+  &SignUp {
+    @media screen and (max-width: calc($media-desktop-large - 1px)) {
+      padding: calc-fluid-element(
+        32px,
+        48px,
+        $media-desktop-small,
+        $media-desktop-large
+      );
+    }
+
+    @media screen and (max-width: calc($media-desktop-small - 1px)) {
+      padding: 32px;
+    }
+
+    @media screen and (max-width: calc($media-mobile-large - 1px)) {
+      padding: 20px 20px 0;
+    }
+  }
+
+  &SignInAndReset {
+    composes: formWrapperSignUp;
+
+    @media screen and (max-width: $media-tablet-large) {
+      padding-top: 72px;
+    }
+
+    @media screen and (max-width: calc($media-mobile-large - 1px)) {
+      padding: 40px 20px 0;
+    }
+  }
+
+  &NotSignUpAndSignInAndReset {
+    @media screen and (max-width: $media-tablet-large) {
+      padding-top: 72px;
+    }
+
+    @media screen and (max-width: calc($media-mobile-large - 1px)) {
+      padding: 40px 20px 0;
+    }
+  }
 }
 
 .form {
@@ -50,9 +131,57 @@
 .heading {
   padding-bottom: 40px;
   @extend %heading-size-medium;
+
+  @media screen and (max-width: calc($media-desktop-large - 1px)) {
+    font-size: calc-fluid-element(
+      calc($font-size-heading-3 * 10),
+      calc($font-size-heading-2 * 10),
+      $media-desktop-small,
+      $media-desktop-large
+    );
+  }
+
+  @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+    line-height: $font-line-height-heading-3;
+    letter-spacing: $font-letter-spacing-main;
+    font-weight: 600;
+    padding-bottom: 16px;
+  }
+
+  @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    font-size: $font-size-heading-3;
+  }
+
+  &NotSignUp {
+    @media screen and (max-width: $media-tablet-large) {
+      text-align: center;
+    }
+  }
 }
 
 .commentary {
   @extend %text-size-small;
   color: $color-neutral-500;
+
+  @media screen and (max-width: calc($media-desktop-large - 1px)) {
+    font-size: calc-fluid-element(
+      calc($font-size-text-small-extra * 10),
+      calc($font-size-text-small * 10),
+      $media-desktop-small,
+      $media-desktop-large
+    );
+  }
+
+  @media screen and (max-width: calc($media-desktop-medium - 1px)) {
+    line-height: $font-line-height-text-small-extra;
+  }
+
+  @media screen and (max-width: calc($media-desktop-small - 1px)) {
+    font-size: $font-size-text-small-extra;
+  }
+}
+
+.button {
+  padding-left: 10px;
+  padding-right: 10px;
 }