Fix/Commons (#9)

* mobile adaptation for home-page * updated footer * fix mobile-adaptation --------- Co-authored-by: Yehor Podporinov <[email protected]>
dl-solarity · Nov 6, 2023 · 529d003 · 529d003
1 parent d077133
commit 529d003
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 43 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -4,12 +4,6 @@
 const lightCodeTheme = require("prism-react-renderer/themes/github");
 const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 
-const createFooterLinkHTML = (label, href) => `
-  <a href="${href}" rel="noopener noreferrer" class="footer__link-item">
-    ${label}
-  </a>
-`;
-
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   plugins: [
@@ -97,13 +91,7 @@ const config = {
         style: "dark",
         links: [
           {
-            html: createFooterLinkHTML("Community link", "https://stage.solarity.dev/"),
-          },
-          {
-            html: createFooterLinkHTML("Community link", "https://stage.solarity.dev/"),
-          },
-          {
-            html: createFooterLinkHTML("Community link", "https://stage.solarity.dev/"),
+            html: "License: MIT",
           },
         ],
       },

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -11,7 +11,7 @@ export default function HomePage() {
   return (
     <Layout>
       <main className={styles["home-page"]}>
-        <div className={clsx(styles["home-page__content-wrp"], "padding--xl")}>
+        <div className={styles["home-page__content-wrp"]}>
           <h1 className={styles["home-page__primary-title"]}>{siteConfig.title}</h1>
           <h1 className={styles["home-page__primary-title"]}>documentation</h1>
           <p className={clsx(styles["home-page__secondary-title"], "margin-top--sm")}>

diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
@@ -2,6 +2,11 @@
   flex: 1;
   background-image: url('/static/img/bg.png');
   background-size: 100% 100%;
+  padding: toRem(80) toRem(40) toRem(120);
+
+  @include respond-to(medium) {
+    padding: toRem(40) toRem(20) toRem(60);
+  }
 }
 
 .home-page__content-wrp {
@@ -34,9 +39,22 @@
 .home-page__buttons {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: toRem(24);
+
+  @include respond-to(medium) {
+    gap: toRem(16);
+  }
+
+  @include respond-to(small) {
+    flex-direction: column-reverse;
+  }
 }
 
 .home-page__button {
   min-width: toRem(210);
+
+  @include respond-to(medium) {
+    min-width: toRem(170);
+  }
 }
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
@@ -40,6 +40,11 @@ $media-breakpoints: (
   font-weight: 400;
   line-height: toRem(72);
   letter-spacing: 0;
+
+  @include respond-to(medium) {
+    font-size: toRem(36);
+    line-height: toRem(48);
+  }
 }
 
 @mixin h2 {

diff --git a/src/styles/footer.scss b/src/styles/footer.scss
@@ -1,45 +1,26 @@
 .footer {
   background: var(--background-primary-main);
   box-shadow: 0 toRem(-1) var(--background-primary-light);
-  padding: 0;
+  padding: toRem(24) toRem(80);
 
-  .footer__links {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 0;
-    height: toRem(70);
+  .container {
+    padding: 0;
   }
 
-  span.footer__link-item {
-    padding: 0;
+  .footer__links {
+    text-align: left;
+    margin-bottom: 0;
   }
 
   .footer__link-item {
-    text-decoration: none;
-    outline: none;
+    display: block;
+    padding: 0;
     color: var(--text-primary-main);
-    padding: toRem(12) toRem(16);
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: none;
-    }
-
-    &:not([disabled]):hover {
-      color: var(--primary-light);
-    }
-
-    &:not([disabled]):focus,
-    &:not([disabled]):active {
-      color: var(--primary-main);
-    }
 
     @include p-14-semi-bold;
   }
 
-  .footer__link-separator {
-    display: none;
+  @include respond-to(medium) {
+    padding: toRem(16) var(--app-padding-right) toRem(16) var(--app-padding-left);
   }
 }