waveterm/docusaurus-og
0
0
Fork 0
mirror of https://github.com/wavetermdev/docusaurus-og.git synced 2026-08-05 13:46:35 -07:00
Code Issues Packages Projects Releases Wiki Activity

update footer css

Browse Source
This commit is contained in:
jinhojang6
2023-06-01 04:30:25 +09:00
parent e36f276a96
commit 5eb2db6860
4 changed files with 159 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docusaurus-playground/docusaurus.config.js
+77 -52
View File
@@ -64,11 +64,11 @@ const config = {
},
{
label: 'Blog',
href: 'https://vac.dev/research',
href: 'https://logos.co/',
},
{
label: 'Github',
href: 'https://github.com/waku-org',
href: 'https://github.com/logos-co',
},
{
type: 'localeDropdown',
@@ -77,85 +77,110 @@ const config = {
],
},
footer: {
copyright: 'Copyright @2023 Logos <br/> Built with Docusaurus.',
copyright: 'Logos @2023<br/>All Rights Reserved.',
links: [
{
title: 'Learn',
items: [
{
href: '/',
label: 'Introduction',
},
{
href: '/',
label: 'Installation',
},
{
href: '/',
label: 'Migrate from v1 to v2',
},
],
},
{
title: 'More',
items: [
{
href: '/',
label: 'Blog',
},
{
href: '/',
label: 'Changelog',
},
{
href: '/',
label: 'Github',
},
{
href: '/',
label: 'Twitter',
},
],
},
{
title: 'Community',
items: [
{
href: '/',
label: 'Stack Overflow',
},
{
href: '/',
label: 'Feature Requests',
},
{
href: '/',
label: 'Discord',
},
{
href: '/',
label: 'Help',
label: 'Docs',
},
{
href: '/',
label: 'Github',
},
],
},
{
title: 'Legal',
items: [
{
href: '/',
label: 'Privacy',
label: 'Contact us',
},
{
href: '/',
label: 'Terms',
label: 'Work with us',
},
{
href: '/',
label: 'Data policy',
label: 'Privacy policy',
},
{
href: '/',
label: 'Cookie policy',
label: 'Temrs & conditions',
},
],
},
{
title: 'Research',
items: [
{
href: '/',
label: 'VacP2P',
},
{
href: '/',
label: 'AFAIK',
},
],
},
{
title: 'Infrastructure',
items: [
{
href: '/',
label: 'Waku',
},
{
href: '/',
label: 'Nimbus',
},
{
href: '/',
label: 'Codex',
},
{
href: '/',
label: 'Nomos',
},
],
},
{
title: 'Creative Studio',
items: [
{
href: '/',
label: 'Acid.info',
},
],
},
{
title: 'Movement',
items: [
{
href: '/',
label: 'Logos',
},
],
},
{
title: 'User-facing products',
items: [
{
href: '/',
label: 'Status',
},
{
href: '/',
label: 'Keycard',
},
],
},
packages/logos-docusaurus-theme/src/client/css/custom.scss
+29 -20
View File
@@ -555,10 +555,6 @@ small {
display: none;
}
.footer {
padding: 24px 16px;
}
.desktop {
display: none;
}
@@ -597,7 +593,7 @@ small {
.footer {
> div {
display: flex !important;
flex-direction: column-reverse;
flex-direction: column;
gap: 72px !important;
}
}
@@ -711,29 +707,48 @@ small {
}
.footer {
border-top: 1px solid rgb(var(--lsd-text-primary));
margin-bottom: 40px;
width: 100% !important;
padding-inline: 0;
> div {
max-width: unset;
padding: unset;
margin: unset;
width: 100% !important;
padding: 16px;
display: grid;
grid-template-columns: repeat(18, 1fr);
grid-template-columns: repeat(24, 1fr);
gap: 1rem;
}
}
.footer__bottom {
text-align: unset;
grid-column: 1 / 12;
grid-row: 1 / 1;
& > div:first-of-type {
display: none;
}
}
.footer__title {
@include lsd.typography('label1');
margin-bottom: 4px;
}
.footer__links {
.footer > div:nth-child(1) > .footer__links {
display: grid;
margin-bottom: 0;
grid-column: 5 / 19;
grid-column: 13 / 25;
grid-row: 1 / 1;
gap: 12px;
}
.footer > div:nth-child(2) > .footer__links {
margin-bottom: 0;
grid-column: 13 / 25;
grid-row: 1 / 1;
display: grid;
@@ -745,6 +760,10 @@ small {
grid-template-columns: span 1;
}
.col.footer__col {
padding: 0;
}
.footer__items {
display: flex;
flex-direction: row;
@@ -774,16 +793,6 @@ small {
}
}
.footer__bottom {
text-align: unset;
grid-column: 1 / 4;
grid-row: 1 / 1;
& > div:first-of-type {
display: none;
}
}
.footer__copyright {
@include lsd.typography('body2');
}
packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx
+32
View File
@@ -0,0 +1,32 @@
import React from 'react'
import clsx from 'clsx'
import styles from './styles.module.scss'
export default function FooterLayout({ style, links, logo, copyright }) {
const firstRow = [...links.props.links.slice(0, 2)]
const secondRow = [...links.props.links.slice(2)]
return (
<footer
className={clsx('footer', {
'footer--dark': style === 'dark',
})}
>
<div className={clsx('container', 'container-fluid', styles.firstRow)}>
{(logo || copyright) && (
<>
<div className="footer__bottom text--center">
{logo && <div className="margin-bottom--sm">{logo}</div>}
{copyright}
</div>
</>
)}
{React.cloneElement(links, { links: firstRow })}
</div>
<div className={styles.secondRow}>
<div className="footer__bottom text--center">Logos Collective</div>
{React.cloneElement(links, { links: secondRow })}
</div>
</footer>
)
}
packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/styles.module.scss
+21
View File
@@ -0,0 +1,21 @@
@use '../../../css/utils';
.firstRow {
border-top: 1px solid rgb(var(--lsd-text-primary));
display: flex;
flex-direction: row;
margin-bottom: 96px !important;
}
.secondRow {
display: flex;
flex-direction: row;
border-top: 1px solid rgb(var(--lsd-border-primary));
}
@include utils.responsive('lg', 'down') {
.firstRow {
width: 100vw;
margin-left: -16px !important;
}
}