Styling changes to match Figma
This commit is contained in:
parent
fe754f09f0
commit
335594ce69
|
@ -2,19 +2,19 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.wrapper h1 {
|
||||
margin: 1rem 0;
|
||||
font-size: calc(24rem / 16);
|
||||
font-weight: 600;
|
||||
color: var(--blue-2);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
margin: 1rem 0;
|
||||
font-size: calc(24rem / 16);
|
||||
font-weight: 600;
|
||||
color: var(--blue-2);
|
||||
}
|
||||
|
||||
.nav {
|
||||
margin: calc(8rem / 16) calc(32rem / 16) 0 0;
|
||||
color: var(--purple-2);
|
||||
|
@ -112,79 +112,48 @@
|
|||
|
||||
.burger {
|
||||
position: fixed;
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
bottom: calc(32rem / 16);
|
||||
left: calc(16rem / 16);
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background: transparent;
|
||||
width: calc(62rem / 16);
|
||||
height: calc(57rem / 16);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
z-index: 10;
|
||||
background: var(--light-blue-2);
|
||||
border-radius: calc(5rem / 16);
|
||||
transition: bottom 0.6s;
|
||||
}
|
||||
|
||||
.hiddenBurger {
|
||||
bottom: -50px;
|
||||
}
|
||||
|
||||
.burger:focus {
|
||||
outline: none;
|
||||
bottom: calc(-94rem / 16);
|
||||
}
|
||||
|
||||
.burger > div {
|
||||
width: 2rem;
|
||||
height: 0.25rem;
|
||||
background: var(--blue-2);
|
||||
border-radius: 10px;
|
||||
transition: all 0.2s linear;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: calc(11rem / 16) calc(9rem / 16);
|
||||
}
|
||||
|
||||
.burger > div > div {
|
||||
border-radius: calc(5rem / 16);
|
||||
border: calc(2.5rem / 16) solid var(--blue-2);
|
||||
position: relative;
|
||||
transform-origin: 1px;
|
||||
}
|
||||
|
||||
.burgerLineOpen1 {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.burgerLineClosed1 {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.burgerLineOpen2 {
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.burgerLineClosed2 {
|
||||
transform: translateX(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.burgerLineOpen3 {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.burgerLineClosed3 {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.mobileNav {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: var(--light-blue-1);
|
||||
width: 80%;
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
padding: 2rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
|
@ -198,17 +167,24 @@
|
|||
|
||||
|
||||
.mobileNav > a {
|
||||
font-size: 2rem;
|
||||
font-size: calc(14rem / 16);
|
||||
text-transform: uppercase;
|
||||
padding: 2rem 0;
|
||||
padding: calc(32rem / 16) 0;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.5rem;
|
||||
letter-spacing: calc(7rem / 16);
|
||||
color: var(--blue-2);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s linear;
|
||||
|
||||
}
|
||||
|
||||
.mobileNavTitle {
|
||||
font-size: calc(24rem / 16);
|
||||
font-weight: 700;
|
||||
margin: calc(14rem / 16);
|
||||
margin-top: calc(39rem / 16);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.burger {
|
||||
display: flex;
|
||||
|
@ -216,6 +192,13 @@
|
|||
.wrapper > .nav {
|
||||
display: none;
|
||||
}
|
||||
.navItem {
|
||||
width: auto;
|
||||
padding: 0 calc(16rem / 16);
|
||||
}
|
||||
.nav {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
@ -27,6 +27,7 @@ export const READ_ALL_ID = "read-all";
|
|||
interface Props {
|
||||
sections: Section[];
|
||||
currentId: string;
|
||||
pageTitle: string;
|
||||
link: Link;
|
||||
}
|
||||
|
||||
|
@ -74,6 +75,7 @@ export function OrganizedContent(props: Props) {
|
|||
sections={sections}
|
||||
currentIndex={currentIndex}
|
||||
link={props.link}
|
||||
pageTitle={props.pageTitle}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
@ -83,11 +85,13 @@ interface NavProps {
|
|||
sections: Section[];
|
||||
currentIndex: number;
|
||||
link: Link;
|
||||
pageTitle?: string;
|
||||
}
|
||||
|
||||
function Nav({ sections, currentIndex, link: Link }: NavProps) {
|
||||
function Nav({ sections, currentIndex, link: Link, pageTitle }: NavProps) {
|
||||
return (
|
||||
<div className={styles.nav}>
|
||||
{pageTitle && <h1 className={styles.mobileNavTitle}>{pageTitle}</h1>}
|
||||
{sections.map((section, index) => {
|
||||
const classNames = [styles.navItem];
|
||||
|
||||
|
@ -161,6 +165,7 @@ interface MobileProps {
|
|||
sections: Section[];
|
||||
currentIndex: number;
|
||||
link: Link;
|
||||
pageTitle: string;
|
||||
}
|
||||
|
||||
function MobileWrapper(mobileProps: MobileProps) {
|
||||
|
@ -205,17 +210,16 @@ const Burger = ({ open, setOpen }: BurgerProps) => {
|
|||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, [debouncedPrevScrollPos, visible]);
|
||||
|
||||
const line1 = open ? styles.burgerLineOpen1 : styles.burgerLineClosed1;
|
||||
const line2 = open ? styles.burgerLineOpen2 : styles.burgerLineClosed2;
|
||||
const line3 = open ? styles.burgerLineOpen3 : styles.burgerLineClosed3; //BUG!!
|
||||
return (
|
||||
<div
|
||||
className={styles.burger + " " + (visible ? "" : styles.hiddenBurger)}
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<div className={line1} />
|
||||
<div className={line2} />
|
||||
<div className={line3} />
|
||||
<div>
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -225,15 +229,21 @@ interface MenuProps {
|
|||
sections: Section[];
|
||||
currentIndex: number;
|
||||
link: Link;
|
||||
pageTitle: string;
|
||||
}
|
||||
|
||||
const Menu = ({ open, sections, currentIndex, link }: MenuProps) => {
|
||||
const Menu = ({ open, sections, currentIndex, link, pageTitle }: MenuProps) => {
|
||||
const mobileNav = open
|
||||
? styles.mobileNav
|
||||
: styles.mobileNav + " " + styles.mobileNavClosed;
|
||||
return (
|
||||
<div className={mobileNav}>
|
||||
<Nav sections={sections} currentIndex={currentIndex} link={link} />
|
||||
<Nav
|
||||
sections={sections}
|
||||
currentIndex={currentIndex}
|
||||
link={link}
|
||||
pageTitle={pageTitle}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -214,6 +214,11 @@ export function OrganizedContentDemo() {
|
|||
}
|
||||
|
||||
return (
|
||||
<OrganizedContent sections={sections} currentId={id} link={FakeLink} />
|
||||
<OrganizedContent
|
||||
sections={sections}
|
||||
currentId={id}
|
||||
link={FakeLink}
|
||||
pageTitle="Constitution"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue