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