Changed icon to SVG + Menu works across pages
This commit is contained in:
DrMint
parent
8571e77ad6
commit
864c6cde32
|
|
@ -1,73 +0,0 @@
|
|||
.menu {
|
||||
border: 1px solid black;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
max-height: 100vh;
|
||||
scrollbar-width: none;
|
||||
grid-row-gap: 0.5em;
|
||||
}
|
||||
|
||||
.menuLogo {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menuLogo > h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.menuLogo > img {
|
||||
width: 50%;
|
||||
height: auto;
|
||||
place-self: start center;
|
||||
}
|
||||
|
||||
.menu > hr {
|
||||
height: 0;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-top: 0.3rem dotted black;
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.menuOption {
|
||||
justify-self: start;
|
||||
display: grid;
|
||||
grid-template-areas: 'img title' '. subtitle';
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
grid-column-gap: 1em;
|
||||
cursor: pointer;
|
||||
padding: 0.4em 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menuOption:hover {
|
||||
background-color: var(--color-main-base);
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.menuOption > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menuOption > img {
|
||||
width: 1.2em;
|
||||
height: auto;
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.menuOption > h3 {
|
||||
grid-area: title;
|
||||
font-size: 150%;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.menuOption > p {
|
||||
grid-area: subtitle;
|
||||
}
|
||||
|
|
@ -1,75 +1,67 @@
|
|||
import Link from 'next/link'
|
||||
import styles from './mainmenu.module.css'
|
||||
import styles from '../styles/mainmenu.module.css'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
export default function MainMenu() {
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function generateMenuOption(url: string, icon: string, title: string, subtitle?: string) {
|
||||
const classActive = router.asPath === url ? styles.active : null;
|
||||
return (
|
||||
<Link href={url} passHref>
|
||||
<div className={styles.menuOption + " " + classActive}>
|
||||
<img src={icon} alt="" />
|
||||
<h3>{title}</h3>
|
||||
<p>{subtitle}</p>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
<div className={styles.menu}>
|
||||
|
||||
<Link href="/" passHref>
|
||||
<div className={styles.menuLogo}>
|
||||
<img src="/icons/accords.png" alt="" />
|
||||
<img src="/icons/accords.svg" alt="" />
|
||||
<h2>Accord's Library</h2>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<button>Change language</button>
|
||||
|
||||
<hr></hr>
|
||||
<hr />
|
||||
|
||||
<Link href="/library" passHref>
|
||||
<div className={styles.menuOption}>
|
||||
<img src="/icons/books.png" alt="" />
|
||||
<h3>Library</h3>
|
||||
<p>Browse all physical and digital media</p>
|
||||
{generateMenuOption("/library", "/icons/book-solid.svg", "Library", "Browse all physical and digital media")}
|
||||
{generateMenuOption("/hubs", "/icons/hubs.svg", "Hubs", "Explore all content of a specific game/series")}
|
||||
{generateMenuOption("/chronology", "/icons/timeline-solid.svg", "Chronology", "Follow all events in chronological order")}
|
||||
|
||||
<hr />
|
||||
|
||||
{generateMenuOption("/archive", "/icons/box-archive-solid.svg", "Archive")}
|
||||
{generateMenuOption("/news", "/icons/newspaper-solid.svg", "News")}
|
||||
{generateMenuOption("/gallery", "/icons/images-solid.svg", "Gallery")}
|
||||
{generateMenuOption("/about-us", "/icons/circle-info-solid.svg", "About us")}
|
||||
|
||||
<hr />
|
||||
|
||||
<div className={styles.menuFooter}>
|
||||
<p>This website’s content is made available under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a> unless otherwise noted.</p>
|
||||
<a href="https://creativecommons.org/licenses/by-sa/4.0/">
|
||||
<div className={styles.menuFooterCC}>
|
||||
<img src="/icons/creative-commons-brands.svg" alt="" />
|
||||
<img src="/icons/creative-commons-by-brands.svg" alt="" />
|
||||
<img src="/icons/creative-commons-sa-brands.svg" alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<p>Accord’s Library is not affiliated with or endorsed by SQUARE ENIX CO. LTD. All game assets and promotional materials belongs to © SQUARE ENIX CO. LTD.</p>
|
||||
<div className={styles.menuFooterSocials}>
|
||||
<a href="https://github.com/Accords-Library"><img src="/icons/github-brands.svg" alt="" /></a>
|
||||
<a href="https://accords-library.com/discord"><img src="/icons/discord-brands.svg" alt="" /></a>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/hubs" passHref>
|
||||
<div className={styles.menuOption}>
|
||||
<img src="/icons/hubs.png" alt="" />
|
||||
<h3>Hubs</h3>
|
||||
<p>Explore all content of a specific game/series</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/chronology" passHref>
|
||||
<div className={styles.menuOption}>
|
||||
<img src="/icons/chronology.png" alt="" />
|
||||
<h3>Chronology</h3>
|
||||
<p>Follow all events in chronological order</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<Link href="/archive" passHref>
|
||||
<div className={styles.menuOption}>
|
||||
<img src="/icons/archive.png" alt="" />
|
||||
<h3>Archive</h3>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/news" passHref>
|
||||
<div className={styles.menuOption}>
|
||||
<img src="/icons/news.png" alt="" />
|
||||
<h3>News</h3>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/gallery" passHref>
|
||||
<div className={styles.menuOption}>
|
||||
<img src="/icons/gallery.png" alt="" />
|
||||
<h3>Gallery</h3>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/about-us" passHref>
|
||||
<div className={styles.menuOption}>
|
||||
<img src="/icons/info.png" alt="" />
|
||||
<h3>About us</h3>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import MainMenu from './mainmenu'
|
||||
import SubMenu from './submenu'
|
||||
import styles from '../styles/menu.module.css'
|
||||
|
||||
export default function Menu() {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<MainMenu></MainMenu>
|
||||
<SubMenu></SubMenu>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import Link from 'next/link'
|
||||
import styles from '../styles/submenu.module.css'
|
||||
|
||||
export default function MainMenu() {
|
||||
return (
|
||||
<div className={styles.menu}>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import type { NextPage } from 'next'
|
||||
import Head from 'next/head'
|
||||
import Menu from '../../components/menu'
|
||||
|
||||
const Chronology: NextPage = () => {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Library</title>
|
||||
<meta name="description" content="Generated by create next app" />
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
</Head>
|
||||
|
||||
<Menu></Menu>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Chronology
|
||||
|
|
@ -1,26 +1,19 @@
|
|||
import type { NextPage } from 'next'
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Home.module.css'
|
||||
import MainMenu from '../components/mainmenu'
|
||||
import Menu from '../components/menu'
|
||||
|
||||
const Home: NextPage = () => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<>
|
||||
<Head>
|
||||
<title>Create Next App</title>
|
||||
<title>Accord’s Library - Discover • Analyse • Translate • Archive</title>
|
||||
<meta name="description" content="Generated by create next app" />
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
</Head>
|
||||
|
||||
<MainMenu></MainMenu>
|
||||
|
||||
<div className={styles.submenu}></div>
|
||||
|
||||
<main className={styles.main}>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
<Menu></Menu>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,26 +1,19 @@
|
|||
import type { NextPage } from 'next'
|
||||
import Head from 'next/head'
|
||||
import styles from '../styles/Home.module.css'
|
||||
import MainMenu from '../components/mainmenu'
|
||||
import Menu from '../components/menu'
|
||||
|
||||
const Home: NextPage = () => {
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<>
|
||||
<Head>
|
||||
<title>Library</title>
|
||||
<meta name="description" content="Generated by create next app" />
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
</Head>
|
||||
|
||||
<MainMenu></MainMenu>
|
||||
<Menu></Menu>
|
||||
|
||||
<div className={styles.submenu}></div>
|
||||
|
||||
<main className={styles.main}>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="box-archive" class="svg-inline--fa fa-box-archive" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M32 432C32 458.5 53.49 480 80 480h352c26.51 0 48-21.49 48-48V160H32V432zM160 236C160 229.4 165.4 224 172 224h168C346.6 224 352 229.4 352 236v8C352 250.6 346.6 256 340 256h-168C165.4 256 160 250.6 160 244V236zM480 32H32C14.31 32 0 46.31 0 64v48C0 120.8 7.188 128 16 128h480C504.8 128 512 120.8 512 112V64C512 46.31 497.7 32 480 32z"></path></svg>
|
||||
|
After Width: | Height: | Size: 564 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-info" class="svg-inline--fa fa-circle-info" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"></path></svg>
|
||||
|
After Width: | Height: | Size: 596 B |
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="creative-commons" class="svg-inline--fa fa-creative-commons" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M245.8 214.9l-33.22 17.28c-9.43-19.58-25.24-19.93-27.46-19.93-22.13 0-33.22 14.61-33.22 43.84 0 23.57 9.21 43.84 33.22 43.84 14.47 0 24.65-7.09 30.57-21.26l30.55 15.5c-6.17 11.51-25.69 38.98-65.1 38.98-22.6 0-73.96-10.32-73.96-77.05 0-58.69 43-77.06 72.63-77.06 30.72-.01 52.7 11.95 65.99 35.86zm143.1 0l-32.78 17.28c-9.5-19.77-25.72-19.93-27.9-19.93-22.14 0-33.22 14.61-33.22 43.84 0 23.55 9.23 43.84 33.22 43.84 14.45 0 24.65-7.09 30.54-21.26l31 15.5c-2.1 3.75-21.39 38.98-65.09 38.98-22.69 0-73.96-9.87-73.96-77.05 0-58.67 42.97-77.06 72.63-77.06 30.71-.01 52.58 11.95 65.56 35.86zM247.6 8.05C104.7 8.05 0 123.1 0 256c0 138.5 113.6 248 247.6 248 129.9 0 248.4-100.9 248.4-248 0-137.9-106.6-248-248.4-248zm.87 450.8c-112.5 0-203.7-93.04-203.7-202.8 0-105.4 85.43-203.3 203.7-203.3 112.5 0 202.8 89.46 202.8 203.3-.01 121.7-99.68 202.8-202.8 202.8z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="creative-commons-by" class="svg-inline--fa fa-creative-commons-by" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M314.9 194.4v101.4h-28.3v120.5h-77.1V295.9h-28.3V194.4c0-4.4 1.6-8.2 4.6-11.3 3.1-3.1 6.9-4.7 11.3-4.7H299c4.1 0 7.8 1.6 11.1 4.7 3.1 3.2 4.8 6.9 4.8 11.3zm-101.5-63.7c0-23.3 11.5-35 34.5-35s34.5 11.7 34.5 35c0 23-11.5 34.5-34.5 34.5s-34.5-11.5-34.5-34.5zM247.6 8C389.4 8 496 118.1 496 256c0 147.1-118.5 248-248.4 248C113.6 504 0 394.5 0 256 0 123.1 104.7 8 247.6 8zm.8 44.7C130.2 52.7 44.7 150.6 44.7 256c0 109.8 91.2 202.8 203.7 202.8 103.2 0 202.8-81.1 202.8-202.8 .1-113.8-90.2-203.3-202.8-203.3z"></path></svg>
|
||||
|
After Width: | Height: | Size: 750 B |
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="creative-commons-sa" class="svg-inline--fa fa-creative-commons-sa" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M247.6 8C389.4 8 496 118.1 496 256c0 147.1-118.5 248-248.4 248C113.6 504 0 394.5 0 256 0 123.1 104.7 8 247.6 8zm.8 44.7C130.2 52.7 44.7 150.6 44.7 256c0 109.8 91.2 202.8 203.7 202.8 103.2 0 202.8-81.1 202.8-202.8 .1-113.8-90.2-203.3-202.8-203.3zM137.7 221c13-83.9 80.5-95.7 108.9-95.7 99.8 0 127.5 82.5 127.5 134.2 0 63.6-41 132.9-128.9 132.9-38.9 0-99.1-20-109.4-97h62.5c1.5 30.1 19.6 45.2 54.5 45.2 23.3 0 58-18.2 58-82.8 0-82.5-49.1-80.6-56.7-80.6-33.1 0-51.7 14.6-55.8 43.8h18.2l-49.2 49.2-49-49.2h19.4z"></path></svg>
|
||||
|
After Width: | Height: | Size: 757 B |
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord" class="svg-inline--fa fa-discord" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M524.5 69.84a1.5 1.5 0 0 0 -.764-.7A485.1 485.1 0 0 0 404.1 32.03a1.816 1.816 0 0 0 -1.923 .91 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.14-30.6 1.89 1.89 0 0 0 -1.924-.91A483.7 483.7 0 0 0 116.1 69.14a1.712 1.712 0 0 0 -.788 .676C39.07 183.7 18.19 294.7 28.43 404.4a2.016 2.016 0 0 0 .765 1.375A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.063-.676A348.2 348.2 0 0 0 208.1 430.4a1.86 1.86 0 0 0 -1.019-2.588 321.2 321.2 0 0 1 -45.87-21.85 1.885 1.885 0 0 1 -.185-3.126c3.082-2.309 6.166-4.711 9.109-7.137a1.819 1.819 0 0 1 1.9-.256c96.23 43.92 200.4 43.92 295.5 0a1.812 1.812 0 0 1 1.924 .233c2.944 2.426 6.027 4.851 9.132 7.16a1.884 1.884 0 0 1 -.162 3.126 301.4 301.4 0 0 1 -45.89 21.83 1.875 1.875 0 0 0 -1 2.611 391.1 391.1 0 0 0 30.01 48.81 1.864 1.864 0 0 0 2.063 .7A486 486 0 0 0 610.7 405.7a1.882 1.882 0 0 0 .765-1.352C623.7 277.6 590.9 167.5 524.5 69.84zM222.5 337.6c-28.97 0-52.84-26.59-52.84-59.24S193.1 219.1 222.5 219.1c29.67 0 53.31 26.82 52.84 59.24C275.3 310.1 251.9 337.6 222.5 337.6zm195.4 0c-28.97 0-52.84-26.59-52.84-59.24S388.4 219.1 417.9 219.1c29.67 0 53.31 26.82 52.84 59.24C470.7 310.1 447.5 337.6 417.9 337.6z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,32 @@
|
|||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="534.000000pt" height="534.000000pt" viewBox="0 0 534.000000 534.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<g transform="translate(0.000000,534.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M4182 5201 c-201 -50 -377 -191 -472 -380 -62 -124 -74 -183 -74
|
||||
-361 -1 -173 8 -221 61 -347 35 -81 35 -83 17 -107 -25 -32 -504 -594 -527
|
||||
-619 -21 -21 -24 -20 -113 17 -118 49 -169 58 -363 63 -266 7 -391 -19 -588
|
||||
-123 -100 -53 -87 -56 -228 66 -166 145 -150 110 -150 333 0 216 -6 246 -72
|
||||
355 -77 126 -192 219 -325 263 -64 21 -90 24 -223 23 -129 0 -159 -4 -215 -23
|
||||
-191 -67 -350 -242 -389 -429 -16 -79 -14 -277 4 -347 28 -105 74 -184 155
|
||||
-265 133 -133 232 -170 456 -170 115 0 154 4 209 21 37 11 77 18 89 15 20 -6
|
||||
238 -190 264 -223 18 -25 15 -51 -16 -128 -58 -141 -67 -201 -67 -425 1 -229
|
||||
11 -284 80 -444 l35 -81 -93 -87 c-128 -121 -119 -118 -219 -75 -141 60 -193
|
||||
70 -378 70 -139 0 -177 -3 -243 -21 -203 -57 -375 -184 -483 -357 -91 -147
|
||||
-133 -334 -120 -539 8 -126 27 -208 71 -303 99 -214 275 -368 510 -443 98 -32
|
||||
345 -40 465 -16 169 35 306 111 426 237 115 122 178 242 210 399 26 129 16
|
||||
366 -21 479 -14 46 -24 93 -21 106 3 12 49 62 102 109 108 98 97 96 209 35 91
|
||||
-49 228 -94 334 -110 53 -7 143 -10 245 -6 179 6 271 26 415 93 44 20 85 33
|
||||
96 30 29 -7 175 -160 175 -182 -1 -11 -7 -46 -15 -79 -20 -82 -19 -280 1 -359
|
||||
52 -202 225 -374 425 -421 84 -19 274 -19 358 0 199 47 373 219 426 421 20 78
|
||||
20 290 0 368 -53 204 -227 374 -431 422 -54 12 -100 15 -209 10 -77 -3 -160
|
||||
-8 -184 -12 l-44 -6 -72 75 c-40 42 -76 85 -80 97 -4 14 8 52 39 118 74 159
|
||||
87 221 93 424 8 276 -14 382 -127 595 -60 113 -60 115 -43 138 16 21 449 529
|
||||
509 598 28 31 53 34 134 12 85 -23 336 -20 432 4 206 53 375 192 472 388 57
|
||||
116 69 177 70 358 0 140 -3 170 -23 235 -80 260 -270 445 -526 510 -104 27
|
||||
-325 27 -433 1z m-1382 -2182 c181 -50 338 -178 418 -339 80 -164 90 -283 35
|
||||
-441 -69 -201 -216 -347 -417 -414 -110 -37 -176 -41 -278 -16 -251 59 -435
|
||||
240 -499 489 -25 100 -24 152 7 258 41 144 114 254 222 339 164 129 340 172
|
||||
512 124z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="images" class="svg-inline--fa fa-images" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M528 32H144c-26.51 0-48 21.49-48 48v256c0 26.51 21.49 48 48 48H528c26.51 0 48-21.49 48-48v-256C576 53.49 554.5 32 528 32zM223.1 96c17.68 0 32 14.33 32 32S241.7 160 223.1 160c-17.67 0-32-14.33-32-32S206.3 96 223.1 96zM494.1 311.6C491.3 316.8 485.9 320 480 320H192c-6.023 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.332-16.68l70-96C252.1 194.4 256.9 192 262 192c5.111 0 9.916 2.441 12.93 6.574l22.35 30.66l62.74-94.11C362.1 130.7 367.1 128 373.3 128c5.348 0 10.34 2.672 13.31 7.125l106.7 160C496.6 300 496.9 306.3 494.1 311.6zM456 432H120c-39.7 0-72-32.3-72-72v-240C48 106.8 37.25 96 24 96S0 106.8 0 120v240C0 426.2 53.83 480 120 480h336c13.25 0 24-10.75 24-24S469.3 432 456 432z"></path></svg>
|
||||
|
After Width: | Height: | Size: 908 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="newspaper" class="svg-inline--fa fa-newspaper" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M480 32H128C110.3 32 96 46.33 96 64v336C96 408.8 88.84 416 80 416S64 408.8 64 400V96H32C14.33 96 0 110.3 0 128v288c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V64C512 46.33 497.7 32 480 32zM272 416h-96C167.2 416 160 408.8 160 400C160 391.2 167.2 384 176 384h96c8.836 0 16 7.162 16 16C288 408.8 280.8 416 272 416zM272 320h-96C167.2 320 160 312.8 160 304C160 295.2 167.2 288 176 288h96C280.8 288 288 295.2 288 304C288 312.8 280.8 320 272 320zM432 416h-96c-8.836 0-16-7.164-16-16c0-8.838 7.164-16 16-16h96c8.836 0 16 7.162 16 16C448 408.8 440.8 416 432 416zM432 320h-96C327.2 320 320 312.8 320 304C320 295.2 327.2 288 336 288h96C440.8 288 448 295.2 448 304C448 312.8 440.8 320 432 320zM448 208C448 216.8 440.8 224 432 224h-256C167.2 224 160 216.8 160 208v-96C160 103.2 167.2 96 176 96h256C440.8 96 448 103.2 448 112V208z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="timeline" class="svg-inline--fa fa-timeline" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M608 224h-64V153.2C572.2 140.9 592 112.8 592 80C592 35.82 556.2 0 512 0c-44.18 0-80 35.82-80 80c0 32.79 19.77 60.89 48 73.25V224H160V153.2C188.2 140.9 208 112.8 208 80C208 35.82 172.2 0 128 0C83.82 0 48 35.82 48 80c0 32.79 19.77 60.89 48 73.25V224H32C14.33 224 0 238.3 0 256s14.33 32 32 32h256v70.75C259.8 371.1 240 399.2 240 432c0 44.18 35.82 80 80 80c44.18 0 80-35.82 80-80c0-32.79-19.77-60.89-48-73.25V288h256c17.67 0 32-14.33 32-32S625.7 224 608 224zM512 48c17.64 0 32 14.36 32 32s-14.36 32-32 32s-32-14.36-32-32S494.4 48 512 48zM128 48c17.64 0 32 14.36 32 32s-14.36 32-32 32s-32-14.36-32-32S110.4 48 128 48zM320 464c-17.64 0-32-14.36-32-32s14.36-32 32-32s32 14.36 32 32S337.6 464 320 464z"></path></svg>
|
||||
|
After Width: | Height: | Size: 921 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
|
|
@ -1,35 +1,57 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@400;500;600;700;800;900&display=swap');
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
|
||||
|
||||
|
||||
:root {
|
||||
--color-main-light: #ffedd8;
|
||||
--color-main-base: #e6ccb2;
|
||||
--color-main-dark: #9c6644;
|
||||
--color-main-black: #1B1811;
|
||||
--filter-color-main-dark: invert(44%) sepia(29%) saturate(806%) hue-rotate(340deg) brightness(91%) contrast(85%);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
background-color: var(--color-main-light);
|
||||
color: var(--color-main-black);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Vollkorn";
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
text-decoration: underline dotted var(--color-main-dark);
|
||||
transition: .1s color;
|
||||
text-underline-offset: 0.15em;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-main-dark);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: "Zen Maru Gothic";
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
button {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
border: .1rem solid var(--color-main-dark);
|
||||
color: var(--color-main-dark);
|
||||
background: var(--color-main-light);
|
||||
border-radius: 100vmax;
|
||||
padding: 0.4em 1em;
|
||||
cursor: pointer;
|
||||
transition: .1s color, .1s background-color;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
.menu {
|
||||
border-right: 1px solid black;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
max-height: 100vh;
|
||||
grid-row-gap: 0.5em;
|
||||
place-content: start;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.menu::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu > hr {
|
||||
height: 0;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-top: 0.3rem dotted black;
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.menuLogo {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menuLogo > h2 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.menuLogo > img {
|
||||
width: 50%;
|
||||
height: auto;
|
||||
place-self: start center;
|
||||
}
|
||||
|
||||
.menuOption {
|
||||
justify-self: start;
|
||||
display: grid;
|
||||
grid-template-areas: 'img title' '. subtitle';
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
border-radius: 1em;
|
||||
grid-column-gap: 1em;
|
||||
cursor: pointer;
|
||||
padding: 0.6em 1.2em;
|
||||
width: 100%;
|
||||
transition: .1s background-color;
|
||||
}
|
||||
|
||||
.menuOption:hover, .menuOption.active {
|
||||
background-color: var(--color-main-base);
|
||||
}
|
||||
|
||||
.menuOption > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menuOption > img {
|
||||
width: 1.2em;
|
||||
height: auto;
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.menuOption > h3 {
|
||||
grid-area: title;
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
.menuOption > p {
|
||||
grid-area: subtitle;
|
||||
}
|
||||
|
||||
.menuFooter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menuFooterCC {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
display: grid;
|
||||
height: 1rem;
|
||||
grid-auto-flow: column;
|
||||
place-content: center;
|
||||
grid-gap: .2rem;
|
||||
}
|
||||
|
||||
.menuFooterCC img {
|
||||
height: 1.5rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.menuFooterCC:hover img {
|
||||
filter: var(--filter-color-main-dark);
|
||||
}
|
||||
|
||||
|
||||
.menuFooterSocials {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
display: grid;
|
||||
height: 1rem;
|
||||
grid-auto-flow: column;
|
||||
place-content: center;
|
||||
grid-gap: 2rem;
|
||||
}
|
||||
|
||||
.menuFooterSocials img {
|
||||
height: 2rem;
|
||||
width: auto;
|
||||
transition: .1s filter;
|
||||
}
|
||||
|
||||
.menuFooterSocials img:hover {
|
||||
filter: var(--filter-color-main-dark);
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 20rem 1fr 5fr;
|
||||
grid-template-columns: 20rem 20rem 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
.menu {
|
||||
border-right: 1px solid black;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
max-height: 100vh;
|
||||
grid-row-gap: 0.5em;
|
||||
place-content: start;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
Loading…
Reference in New Issue