Fix some styling for the nav and footer
This commit is contained in:
parent
a25926b4f6
commit
80d3d57c76
|
@ -1,22 +1,58 @@
|
||||||
.organizedContent {
|
.wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
line-height: calc(24 / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.organizedContent h1 {
|
.wrapper h1 {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
margin: 1rem 0 1rem 0;
|
margin: 1rem 0 1rem 0;
|
||||||
color: var(--blue-2);
|
color: var(--blue-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.content {
|
||||||
margin: 1rem 2rem 0 0.5rem;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navOption {
|
.nav {
|
||||||
|
margin: calc(8rem / 16) calc(32rem / 16) 0 0;
|
||||||
|
color: var(--purple-2);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navItem {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
border-bottom: 1px solid var(--blue-2-25);
|
||||||
|
align-items: center;
|
||||||
|
height: calc(40rem / 16);
|
||||||
|
width: calc(284rem / 16);
|
||||||
|
padding-left: calc(14rem / 16);
|
||||||
|
padding-right: calc(38rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
background-color: var(--blue-1-05);
|
||||||
|
color: var(--blue-2);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.readAll {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.marker {
|
||||||
|
display: none;
|
||||||
|
background-color: var(--blue-2);
|
||||||
|
height: calc(24rem / 16);
|
||||||
|
width: calc(4rem / 16);
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected .marker {
|
||||||
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navLink {
|
.navLink {
|
||||||
|
@ -25,61 +61,44 @@
|
||||||
padding: 0.5rem 2rem 0.5rem 0.5rem;
|
padding: 0.5rem 2rem 0.5rem 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navLinkSelected {
|
.selected .navLink {
|
||||||
/* smaller to account for marker width */
|
/* smaller to account for marker width */
|
||||||
padding: 0.5rem 1.15rem 0.5rem 0.5rem;
|
padding: 0.5rem 1.15rem 0.5rem 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.readAll {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
border-bottom: 1px solid var(--blue-2);
|
|
||||||
opacity: 0.25;
|
|
||||||
width: 100%,
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectedHeadingArea > .navOption {
|
|
||||||
color: var(--blue-2);
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectedHeadingArea {
|
|
||||||
background-color: var(--blue-1-05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.selectedMarker {
|
|
||||||
background-color: var(--blue-2);
|
|
||||||
width: calc(4rem / 16);
|
|
||||||
margin: 0.4rem 0.1rem 0.4rem 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
margin-top: 1rem;
|
margin-top: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footerSection {
|
.previous,
|
||||||
|
.next {
|
||||||
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
color: var(--purple-2);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.previous {
|
||||||
|
margin-right: calc(8rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.next {
|
||||||
|
justify-content: flex-end;
|
||||||
|
justify-self: flex-end;
|
||||||
|
text-align: end;
|
||||||
|
margin-left: calc(8rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrowHeading {
|
.arrowHeading {
|
||||||
color: var(--blue-2);
|
color: var(--blue-2);
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-decoration: underline;
|
border-bottom: calc(1.6rem / 16) solid var(--blue-2);
|
||||||
text-underline-offset: 0.5rem;
|
padding-bottom: calc(4rem / 16);
|
||||||
text-decoration-thickness: 0.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prevNext {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nextText {
|
|
||||||
text-align: end;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow {
|
.arrow {
|
||||||
|
@ -90,7 +109,6 @@
|
||||||
.prevArrow {
|
.prevArrow {
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
padding-right: 0.5rem;
|
padding-right: 0.5rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nextArrow {
|
.nextArrow {
|
||||||
|
@ -98,15 +116,6 @@
|
||||||
padding-left: 0.5rem;
|
padding-left: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footerSection {
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footerDivider {
|
|
||||||
width: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: calc(768rem / 16)) {
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
.nav {
|
.nav {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -36,15 +36,17 @@ export function OrganizedContent(props: Props) {
|
||||||
const isReadAll = section.id === READ_ALL_ID;
|
const isReadAll = section.id === READ_ALL_ID;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.organizedContent}>
|
<div className={styles.wrapper}>
|
||||||
<Nav sections={sections} currentIndex={currentIndex} link={props.link} />
|
<Nav sections={sections} currentIndex={currentIndex} link={props.link} />
|
||||||
<div>
|
<div className={styles.content}>
|
||||||
{isReadAll ? (
|
{isReadAll ? (
|
||||||
<section.Content />
|
<section.Content />
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
|
<div>
|
||||||
<h1>{section.title}</h1>
|
<h1>{section.title}</h1>
|
||||||
<section.Content />
|
<section.Content />
|
||||||
|
</div>
|
||||||
<Footer
|
<Footer
|
||||||
sections={sections}
|
sections={sections}
|
||||||
currentIndex={currentIndex}
|
currentIndex={currentIndex}
|
||||||
|
@ -66,35 +68,28 @@ interface NavProps {
|
||||||
function Nav({ sections, currentIndex, link: Link }: NavProps) {
|
function Nav({ sections, currentIndex, link: Link }: NavProps) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.nav}>
|
<div className={styles.nav}>
|
||||||
{sections.map((section, index) => (
|
{sections.map((section, index) => {
|
||||||
<div
|
const classNames = [styles.navItem];
|
||||||
className={index === currentIndex ? styles.selectedHeadingArea : ""}
|
|
||||||
|
if (index === currentIndex) {
|
||||||
|
classNames.push(styles.selected);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (section.id === READ_ALL_ID) {
|
||||||
|
classNames.push(styles.readAll);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
className={classNames.join(" ")}
|
||||||
|
id={section.id}
|
||||||
key={section.id}
|
key={section.id}
|
||||||
>
|
>
|
||||||
<div
|
<span className={styles.marker} />
|
||||||
className={
|
|
||||||
styles.navOption +
|
|
||||||
" " +
|
|
||||||
(section.title === "Read All" ? styles.readAll : "")
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{index === currentIndex && (
|
|
||||||
<span className={styles.selectedMarker} />
|
|
||||||
)}
|
|
||||||
<Link
|
|
||||||
className={
|
|
||||||
styles.navLink +
|
|
||||||
" " +
|
|
||||||
(index === currentIndex ? styles.navLinkSelected : "")
|
|
||||||
}
|
|
||||||
id={section.id}
|
|
||||||
>
|
|
||||||
{section.title}
|
{section.title}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
);
|
||||||
<div className={styles.divider}></div>
|
})}
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -119,28 +114,21 @@ function Footer({ sections, currentIndex, link: Link }: FooterProps) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.footer}>
|
<div className={styles.footer}>
|
||||||
{prevSection && (
|
{prevSection && (
|
||||||
<Link id={prevSection.id}>
|
<Link className={styles.previous} id={prevSection.id}>
|
||||||
<div className={styles.footerSection}>
|
|
||||||
<Arrow direction="left" />
|
<Arrow direction="left" />
|
||||||
<div>
|
<div>
|
||||||
<div className={styles.prevNext}>Previous</div>
|
<div>Previous</div>
|
||||||
<div className={styles.arrowHeading}>{prevSection.title}</div>
|
<div className={styles.arrowHeading}>{prevSection.title}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
<div className={styles.footerDivider}></div>
|
|
||||||
{nextSection && (
|
{nextSection && (
|
||||||
<Link id={nextSection.id}>
|
<Link className={styles.next} id={nextSection.id}>
|
||||||
<div className={styles.footerSection}>
|
|
||||||
<div>
|
<div>
|
||||||
<div className={styles.prevNext + " " + styles.nextText}>
|
<div>Next</div>
|
||||||
Next
|
|
||||||
</div>
|
|
||||||
<div className={styles.arrowHeading}>{nextSection.title}</div>
|
<div className={styles.arrowHeading}>{nextSection.title}</div>
|
||||||
</div>
|
</div>
|
||||||
<Arrow direction="right" />
|
<Arrow direction="right" />
|
||||||
</div>
|
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -12,6 +12,7 @@ body {
|
||||||
--blue-1-05: #5caff90d;
|
--blue-1-05: #5caff90d;
|
||||||
--blue-1-20: #5caff934;
|
--blue-1-20: #5caff934;
|
||||||
--blue-2: #1482e3;
|
--blue-2: #1482e3;
|
||||||
|
--blue-2-25: #1482e340;
|
||||||
--purple-1: #525284;
|
--purple-1: #525284;
|
||||||
--purple-2: #2a2a62;
|
--purple-2: #2a2a62;
|
||||||
--gradient-blue-green: linear-gradient(
|
--gradient-blue-green: linear-gradient(
|
||||||
|
|
Loading…
Reference in New Issue