chore(website): sticky footer

salute-developers · Jun 21, 2024 · 8668d32 · 8668d32
1 parent 07db233
commit 8668d32
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/website/plasma-website/components/roster/Footer.tsx b/website/plasma-website/components/roster/Footer.tsx
@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 import { TextS } from '@salutejs/plasma-b2c';
 import { secondary } from '@salutejs/plasma-tokens-b2c';
 
+import { multipleMediaQuery } from '../../mixins';
 import { IconGitHub, MainCommunityMenu } from '../index';
 
 const community = [
@@ -16,7 +17,17 @@ const community = [
 const currentYear = new Date().getFullYear();
 
 const StyledFooter = styled.footer`
-    padding-bottom: 2rem;
+    padding: 0 4rem 2rem;
+
+    ${multipleMediaQuery(['M'])(css`
+        padding-right: 3.5rem;
+        padding-left: 3.5rem;
+    `)}
+
+    ${multipleMediaQuery(['S'])(css`
+        padding-right: 1rem;
+        padding-left: 1rem;
+    `)}
 `;
 
 const StyledMainCommunityMenu = styled(MainCommunityMenu)`

diff --git a/website/plasma-website/pages/icons.tsx b/website/plasma-website/pages/icons.tsx
@@ -5,6 +5,14 @@ import Head from 'next/head';
 
 import { Header, Main, SearchForm, IconsList, Footer } from '../components/roster';
 
+const StyledSection = styled.section`
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 100%;
+
+    min-height: 100vh;
+`;
+
 const StyledMain = styled(Main)`
     --common-transition-config: 120ms ease-in;
 
@@ -30,12 +38,14 @@ export default function Home() {
             <Head>
                 <title>Plasma Icons</title>
             </Head>
-            <Header />
-            <StyledMain>
-                <SearchForm onInput={onSearchInput} />
-                <IconsList searchQuery={searchQuery} />
+            <StyledSection>
+                <Header />
+                <StyledMain>
+                    <SearchForm onInput={onSearchInput} />
+                    <IconsList searchQuery={searchQuery} />
+                </StyledMain>
                 <Footer />
-            </StyledMain>
+            </StyledSection>
         </ToastProvider>
     );
 }