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