+
+
+
+ {/* Projects Logo */}
+
+
+
at UC San Diego
+
+
+ {/* Nav Links */}
+
+
-
-
-
Connect With Us!
-
-
-
Newsletter
-
Receive weekly events and news!
-
- Subscribe!
-
-
- 
-
+
+ {/* Contact Buttons */}
+
+
+
+ {/* Bottom Horizontal Line */}
+
);
diff --git a/src/components/footer/styles.module.scss b/src/components/footer/styles.module.scss
new file mode 100644
index 0000000..99ce855
--- /dev/null
+++ b/src/components/footer/styles.module.scss
@@ -0,0 +1,226 @@
+@use "../../styles/vars.scss" as vars;
+
+$stmw: 834px; // small tablet max width
+$mmw: 530px; // mobile max width
+$mmmw: 375px; // medium mobile max width
+
+// Base styles (Regular desktop view)
+.footer {
+ width: 100%;
+ height: 100%;
+ background-color: vars.$footer-blue;
+ color: vars.$white;
+ z-index: 0;
+ position: relative;
+}
+
+.footerContainer {
+ padding: 3.625rem 7.5rem;
+
+ hr {
+ display: flex;
+ border: none; // this removes border control over styling
+ height: 1px;
+ background-color: vars.$white;
+ margin-bottom: 0;
+ }
+
+ .mainContent {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ gap: 5rem;
+
+ .logo {
+ display: flex;
+ align-items: center;
+ gap: 1.5625rem;
+
+ img {
+ width: 4.875rem;
+ height: 4.8125rem;
+ margin: 0;
+ }
+
+ h2 {
+ margin: 0;
+ white-space: nowrap;
+ font-size: 3.25rem;
+ font-weight: 700;
+ }
+ }
+
+ .navLinks {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ // finds gap size from line between points (1332px, 5rem) and
+ // (1844px, 15rem)
+ gap: vars.calc-relative-size(1332px, 5rem, 1844px, 15rem);
+ white-space: nowrap;
+ font-weight: 700;
+
+ h3 {
+ margin: 0;
+ font-size: 1.75rem;
+ color: vars.$white;
+ }
+
+ a {
+ font-size: 1.125rem;
+ color: vars.$white;
+ text-decoration: none;
+ }
+
+ .navSection {
+ display: flex;
+ flex-direction: column;
+ gap: 1.25rem;
+ }
+
+ .pageTitle {
+ a:hover {
+ // color change AND underline for accessibility reasons
+ color: #D6E2FF;
+ text-decoration: underline solid currentColor;
+ }
+ }
+ }
+ }
+
+ .contact {
+ display: flex;
+ gap: 0.9375rem;
+ margin-bottom: 1rem;
+
+ .contactIcon {
+
+ a {
+ display: flex;
+ }
+
+ img {
+ width: 2.625rem;
+ height: 2.625rem;
+ margin: 0;
+ }
+
+ a:hover img {
+ transform: scale(1.05);
+ transition: transform 0.2s;
+ }
+ }
+ }
+}
+
+// Medium tablet view
+@media only screen and (max-width: 1331px) {
+ .footerContainer {
+ .mainContent {
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: flex-start;
+ gap: 3.25rem;
+
+ .navLinks {
+ // finds gap size from line between points (835px, 8rem) and
+ // (1090px, 15rem)
+ gap: vars.calc-relative-size($stmw + 1px, 8rem, 1090px, 15rem);
+ margin-bottom: 3.625rem;
+ }
+ }
+ }
+}
+
+// Small tablet view (834px)
+@media only screen and (max-width: $stmw) {
+ .footerContainer {
+ display: flex;
+ flex-direction: column;
+ padding:
+ // finds top padding size from line between points (531px, 1.6875rem) and
+ // (834px, 3.625rem)
+ vars.calc-relative-size($mmw + 1px, 1.6875rem, $stmw, 3.625rem)
+ // finds side padding size from line between points (531px, 3.1875rem) and
+ // (834px, 7.5rem)
+ vars.calc-relative-size($mmw + 1px, 3.1875rem, $stmw, 7.5rem)
+ // finds bottom padding size from line between points (531px, 2.0625rem)
+ // and (834px, 3.625rem)
+ vars.calc-relative-size($mmw + 1px, 2.0625rem, $stmw, 3.625rem);
+
+ .mainContent {
+ .logo {
+ h2 {
+ // finds font size from line between points (531px, 1.25rem) and
+ // (834px, 3.25rem)
+ font-size:
+ vars.calc-relative-size($mmw + 1px, 1.25rem, $stmw, 3.25rem);
+ }
+ }
+
+ .navLinks {
+ // finds gap size from line between points (531px, 4rem) and
+ // (834px, 8rem)
+ gap: vars.calc-relative-size($mmw + 1px, 4rem, $stmw, 8rem);
+ margin-bottom: 3.625rem;
+ }
+ }
+ }
+}
+
+// Mobile view (530px)
+@media only screen and (max-width: $mmw) {
+ .footerContainer {
+ display: flex;
+ flex-direction: column;
+ gap: 3.625rem;
+ padding: 1.6875rem 3.1875rem 2.0625rem;
+
+ hr {
+ display: none;
+ }
+
+ .mainContent {
+ .logo {
+ gap: 1.5625rem;
+
+ h2 {
+ font-size: 1.25rem;
+ }
+ }
+
+ .navLinks {
+ flex-direction: column;
+ justify-content: flex-start;
+ gap: 3.125rem;
+ }
+ }
+
+ .contact {
+ margin: 0;
+ }
+ }
+}
+
+// Medium mobile view (375px)
+@media only screen and (max-width: $mmmw) {
+ .footerContainer {
+ .mainContent {
+ .logo {
+ // finds gap size from line between points (320px, 1rem) and
+ // (375px, 1.5625rem)
+ gap: vars.calc-relative-size(320px, 1rem, $mmmw, 1.5625rem);
+
+ img {
+ // finds width from line between points (320px, 3.03896103rem) and
+ // (375px, 4.875rem)
+ width: vars.calc-relative-size(320px, 3.03896103rem, $mmmw, 4.875rem);
+ // finds width from line between points (320px, 3rem) and
+ // (375px, 4.8125rem)
+ height: vars.calc-relative-size(320px, 3rem, $mmmw, 4.8125rem);
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/footer/styles.scss b/src/components/footer/styles.scss
deleted file mode 100644
index bdef7a4..0000000
--- a/src/components/footer/styles.scss
+++ /dev/null
@@ -1,299 +0,0 @@
-@use "src/styles/vars.scss" as colors;
-
-.footer {
- width: 100%;
- height: 100%;
- background-color: colors.$black;
- color: colors.$white;
- z-index: 0;
- position: relative;
- margin-top: 1rem;
-}
-.footerContainer {
- padding-bottom: 80px;
- display: flex;
- justify-content: center;
-}
-.footerContents {
- h2 {
- font-size: 42px;
- font-weight: 700;
- width: 100%;
- text-align: center;
- padding-top: 56px;
- }
- &__wrapper {
- display: flex;
- align-items: flex-start;
- @media only screen and (max-width: 985px) {
- flex-wrap: wrap;
- padding: 0 40px;
- }
- }
- &__contact {
- width: 100%;
- display: grid;
- grid-template-columns: 1fr 1fr;
- &__card {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 240px;
- height: 75px;
- margin: 10px 5px;
- a:hover img {
- transform: scale(1.05);
- transition: transform 0.2s;
- }
- img {
- float: left;
- width: 45px;
- margin: 10px;
- }
- div {
- margin: 10px;
- width: 140px;
- h3 {
- font-size: 20px;
- font-weight: 500;
- margin: 0px;
- }
- a {
- font-size: 20px;
- font-weight: 500;
- margin: 0px;
- color: white;
- text-decoration: none;
- }
- }
- }
- }
- &__newsletter {
- width: 80%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- flex-wrap: wrap;
- padding-left: 20px;
- h2 {
- font-size: 20px;
- font-weight: 700;
- width: 100%;
- text-align: left;
- padding-top: 20px;
- margin: 0px;
- }
- p {
- width: 100%;
- font-weight: 400;
- font-size: 16px;
- margin-bottom: 20px;
- }
- input {
- color: rgba(0, 0, 0, 0.5);
- padding: 2px 2px 2px 1em;
- width: 272px;
- margin-bottom: 24px;
- border-radius: 8px;
- border-color: colors.$black;
- border-style: none;
- font-weight: bold;
- font-size: 16px;
- outline: none;
- }
- .subscribe-btn {
- text-decoration: none;
- padding: 5px 30px;
- cursor: pointer;
- color: colors.$white;
- background-color: colors.$dark-grey;
- height: 2em;
- width: fit-content;
- height: 35px;
- border-radius: 8px;
- border-color: colors.$black;
- border-style: none;
- font-weight: bold;
- font-size: 20px;
- margin-bottom: 36px;
- outline: none;
- &:hover {
- cursor: pointer;
- color: colors.$black;
- background-color: colors.$hover-blue;
- transition-duration: 0.2s;
- }
- }
- .vercel-btn {
- text-decoration: none;
- cursor: pointer;
- color: colors.$white;
- background-color: none;
- height: 2em;
- width: 165px;
- height: 35px;
- border-radius: 8px;
- border-color: colors.$black;
- border-style: none;
- font-weight: bold;
- font-size: 20px;
- margin-bottom: 36px;
- outline: none;
- }
- }
-}
-.acmBlueFade {
- display: none;
- margin: 0 !important;
- position: absolute;
- bottom: 10px;
- right: 0px;
- z-index: 0;
-}
-.mobileFooterContainer {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
- margin-bottom: -7px !important;
- h2 {
- padding-top: 56px;
- text-align: center;
- font-size: 32px;
- margin-bottom: 40px;
- }
- a {
- text-align: center;
- font-size: 15px;
- font-weight: 400;
- margin-bottom: 35px;
- color: colors.$white;
- text-decoration: underline;
- }
- &__newsletter {
- width: 272px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- flex-wrap: wrap;
- margin-left: 0px !important;
- h2 {
- font-size: 20px;
- font-weight: 700;
- text-align: left;
- padding-top: 6px;
- margin: 0px;
- }
- p {
- font-size: 16px;
- margin-bottom: 11px;
- text-align: left;
- }
- input {
- color: rgba(0, 0, 0, 0.5);
- padding: 2px 2px 2px 1em;
- width: 100%;
- margin-top: 11px !important;
- margin-bottom: 23px !important;
- border-radius: 8px;
- border-color: colors.$black;
- border-style: none;
- font-weight: bold;
- font-size: 16px;
- outline: none;
- }
- .mobile-subscribe-btn {
- text-decoration: none;
- padding: 4px 0;
- color: colors.$white;
- background-color: colors.$blue;
- height: 2em;
- width: 165px;
- height: 35px;
- border-radius: 8px;
- border-color: colors.$black;
- border-style: none;
- font-weight: bold;
- font-size: 20px;
- margin-bottom: 36px;
- outline: none;
- }
- .mobile-vercel-btn {
- text-decoration: none;
- padding: 4px 0;
- color: colors.$white;
- background-color: none;
- height: 2em;
- width: 165px;
- height: 35px;
- border-radius: 8px;
- border-color: colors.$black;
- border-style: none;
- font-weight: bold;
- font-size: 20px;
- margin-bottom: 36px;
- outline: none;
- }
- .mobile-vercel-btn {
- text-decoration: none;
- padding: 4px 0;
- color: colors.$white;
- background-color: none;
- height: 2em;
- width: 165px;
- height: 35px;
- border-radius: 8px;
- border-color: colors.$black;
- border-style: none;
- font-weight: bold;
- font-size: 20px;
- margin-bottom: 36px;
- outline: none;
- }
- }
-}
-.community-links {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- flex-direction: row;
- padding-top: 4px;
- width: 272px;
- a {
- height: 50px;
- margin-bottom: 20px;
- border: none;
- background-color: transparent;
- outline: none;
- padding: 0px;
- img {
- width: 70%;
- height: unset;
- &:hover {
- transform: scale(1.05);
- }
- }
- }
- img {
- width: 45px;
- height: 45px;
- }
-}
-@media only screen and (min-width: 984px) {
- .acmBlueFade {
- display: block;
- }
- .mobileFooterContainer {
- display: none;
- }
-}
-@media only screen and (max-width: 986px) {
- .footerContainer {
- display: none;
- }
- .acmBlueFade {
- display: none;
- }
- .mobileFooterContainer {
- display: flex;
- }
-}
\ No newline at end of file
diff --git a/src/components/navbar/Navbar.module.scss b/src/components/navbar/Navbar.module.scss
index c267c71..d6351a8 100644
--- a/src/components/navbar/Navbar.module.scss
+++ b/src/components/navbar/Navbar.module.scss
@@ -1,5 +1,13 @@
@use "../../styles/vars.scss" as vars;
+$bottom-border-width: 4px;
+// the next 3 variables exist to calculate the initial position of the mobile nav dropdown (determined via its height relative to its contents) so that it is positioned off-screen
+$mobileNav-line-height: 3rem;
+$navItem-margin-bottom: 0.5rem;
+$num-navItems: 5; // change this according to how many navlinks there are
+$stmw: 956px; // small tablet max width
+
+// Base styles (Regular desktop view)
.navbarWrapper {
position: sticky;
top: 0;
@@ -7,41 +15,21 @@
width: 100%;
z-index: 10;
white-space: nowrap;
+ background-color: vars.$white; // this is a placeholder; the navbar bg color needs to match the page's bg color (bc of the gradient on the landing page)
// container for fixed navbar (desktop and mobile)
.navbar {
- background-color: vars.$white;
+ $vert-padding: 1.25rem;
+
+ background-color: vars.$white; // this is a placeholder; the navbar bg color needs to match the page's bg color (bc of the gradient on the landing page)
z-index: 20;
- font-size: 18px;
- width: 100vw;
- height: 78px;
+ width: 100%;
justify-content: space-between;
+ gap: 1rem;
align-items: center;
display: flex;
flex-direction: row;
-
- // left side of navbar is just the acm logo
- .left {
- height: 60px;
- margin-left: 2rem;
- display: flex;
- flex-flow: row nowrap;
- }
-
- .logoText {
- font-size: 16px;
- }
-
- .navLinks {
- display: flex;
- flex-flow: row nowrap;
- justify-content: flex-start;
- gap: 1rem;
-
- &.hidden {
- display: none;
- }
- }
+ padding: $vert-padding 4rem calc($vert-padding - $bottom-border-width);
a {
display: flex;
@@ -54,189 +42,153 @@
margin: 0;
}
> p {
- font-size: 18px;
- font-weight: 800;
+ font-size: 1.125rem;
+ font-weight: 700;
color: vars.$black;
- margin-left: 4px;
- margin-bottom: 2px;
+ margin: 0px;
}
}
a:hover {
cursor: pointer;
}
+ // left side of navbar is just the acm logo
+ .left {
+ display: flex;
+ flex-flow: row nowrap;
+
+ .logo {
+ width: 3.01644rem;
+ height: 3rem;
+ flex-shrink: 0;
+ }
+
+ .logoText {
+ font-size: 1.375rem;
+ font-weight: 700;
+ color: vars.$proj-blue;
+ margin: 0;
+ margin-left: 0.5rem;
+ }
+ }
+
// navbar right side contains all navlinks on desktop
.right {
display: flex;
flex-flow: row nowrap;
- margin-right: 2rem;
-
- // justify-content: center;
- // align-items: center;
-
- // a {
- // display: flex;
- // align-items: center;
- // text-decoration: none;
- // // padding: 0px 16px 0px 16px;
- // flex-shrink: 0;
-
- // > img {
- // height: 60px;
- // margin: 0;
- // }
- // > p {
- // font-size: 23px;
- // color: vars.$black;
- // margin-left: 4px;
- // margin-bottom: 2px;
- // }
- // }
- // a:hover {
- // cursor: pointer;
- // }
-
- // .divider {
- // display: flex;
- // align-items: center;
- // text-decoration: none;
- // padding-right: 16px;
- // span {
- // font-size: 23px;
- // color: vars.$black;
- // margin-left: 4px;
- // margin-bottom: 2px;
- // }
- // }
-
- // .navItem {
- // display: flex;
- // align-items: center;
- // flex-flow: row nowrap;
- // text-decoration: none;
- // color: vars.$black;
- // margin-right: 32px;
- // }
-
- // .loginButton {
- // height: 100%;
- // align-self: center;
-
- // display: flex;
- // justify-content: center;
- // align-items: center;
- // text-decoration: none;
-
- // height: 35px;
- // width: 150px;
-
- // color: vars.$white;
- // background-color: vars.$black;
- // border-radius: 0.5em;
- // margin-right: 32px;
-
- // &:hover {
- // opacity: 0.85;
- // transition: 0.3s;
- // }
- // }
- // &.hidden {
- // display: none;
- // }
- }
- // toggle button for mobile menu is only visible on mobile, otherwise hidden
- .toggleIcon {
- position: absolute;
- top: 30px;
- right: 0;
- width: 40px;
- height: 20px;
- margin: 0 30px;
- padding: 0;
- border: none;
- background-color: vars.$white;
-
- // the toggle icon is composed of two bars we can separately animate between a hamburger icon and an x icon (default is hamburger, we have .open class we can toggle to rotate into the shape of an x)
- .bar1 {
- width: 40px;
- height: 5px;
- border-radius: 2px;
- background-color: vars.$black;
- position: absolute;
- top: 1.5px;
- transition: 0.3s ease-in-out all;
-
- &.open {
- transform: rotate(-45deg) translateY(-10px);
- transform-origin: top right;
- }
+ .navLinks {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: flex-start;
+ // finds gap size from line between points (957px, 2rem) and
+ // (1488px, 5rem)
+ gap: vars.calc-relative-size($stmw + 1px, 2rem, 1488px, 5rem);
}
- .bar2 {
- width: 23px;
- height: 5px;
- border-radius: 2px;
- background-color: vars.$black;
- position: absolute;
- right: 0;
- bottom: 1.5px;
- transition: 0.3s ease-in-out all;
-
- &.open {
- width: 40px;
- transform: rotate(45deg) translateY(10px);
- transform-origin: bottom right;
- }
- }
- &.hidden {
+ // toggle button for mobile menu is only visible on mobile, otherwise hidden
+ .toggleIcon {
display: none;
+ flex-flow: column nowrap;
+ justify-content: flex-start;
+ width: 1.8125rem;
+ height: 2.0625rem;
+ padding: 0.64rem 0;
+ gap: 0.257813333rem;
+ border: none;
+ background-color: vars.$white;
+
+ // the toggle icon is composed of two bars we can separately animate between a hamburger icon and an x icon (default is hamburger, we have .open class we can toggle to rotate into the shape of an x)
+ .bar1 {
+ width: 1.8125rem;
+ height: 0.257813333rem;
+ border-radius: 4px;
+ background-color: vars.$black;
+ transition: 0.3s ease-in-out all;
+
+ &.open {
+ transform-origin: top right;
+ transform: rotate(-45deg) translateY(-0.49rem);
+ }
+ }
+
+ .bar2 {
+ width: 1.8125rem;
+ height: 0.257813333rem;
+ border-radius: 4px;
+ background-color: vars.$black;
+ transition: 0.3s ease-in-out all;
+
+ &.open {
+ transform-origin: bottom right;
+ transform: rotate(45deg) translateY(0.49rem);
+ }
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
}
}
}
.mobileNav {
- width: 100vw;
+ width: 100%;
background-color: vars.$white;
- position: relative;
+ position: absolute;
z-index: -1;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
- line-height: 300%;
- transition: 0.3s ease-in-out;
- // mobile menu is hidden by positioning under fixed navbar, we open it by sliding it out
- // if you want to add or remove nav options, change this
- margin-top: -17.5rem;
+ line-height: $mobileNav-line-height;
+ // mobile menu is hidden by positioning under fixed navbar by moving the top margin up; we open it by sliding it out w/ transition and changing margin-top to 0
+ margin-top:
+ -1 * $num-navItems * ($mobileNav-line-height + $navItem-margin-bottom);
+ border-bottom: $bottom-border-width solid vars.$proj-blue;
+ transition: margin-top 0.3s ease-in-out;
+
+ a {
+ text-decoration: none;
+ }
+
&.open {
margin-top: 0;
}
.navItem {
- width: 100%;
+ margin-bottom: $navItem-margin-bottom;
text-align: center;
+ font-size: 1.125rem;
+ font-weight: 700;
color: vars.$black;
- transition: 0.3s ease-in-out all;
- text-decoration: underline solid transparent;
+
&:hover {
text-decoration: underline solid currentColor;
}
}
}
+}
+
+// Small tablet view (956px)
+@media only screen and (max-width: $stmw) {
+ .navbarWrapper {
+ .navbar {
+ $vert-padding: 0.72rem;
- // rainbow bar is always visible below navbar, positioned to be at the bottom of the container even when mobile slides out and height changes
- .rainbow {
- width: 100vw;
- height: 0.4em;
- bottom: -0.4em;
- background: linear-gradient(
- 270deg,
- vars.$red 0%,
- vars.$orange 18.75%,
- vars.$green-success 36.98%,
- vars.$blue-ap 55.73%,
- vars.$blue 75%,
- vars.$purple 100%
- );
+ padding:
+ calc($vert-padding + 2.06rem)
+ 1.38rem
+ calc($vert-padding - $bottom-border-width);
+
+ .right {
+ .navLinks {
+ display: none;
+ }
+
+ .toggleIcon {
+ display: flex;
+ }
+ }
+ }
}
}
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
index 2a7adfe..4297c0f 100644
--- a/src/components/navbar/index.tsx
+++ b/src/components/navbar/index.tsx
@@ -2,30 +2,31 @@
import Link from "next/link";
import { useEffect, useState } from "react";
-import ProjLogo from "../../../public/assets/proj_logo.png";
import s from "./Navbar.module.scss";
import { Size, useWindowSize } from "../../utils/general";
-import Banner from "../banner";
+const ProjLogo = "/assets/proj_logo.svg";
+
+// Nav link properties
const navLinks = [
- { href: "/", label: "Home" },
- // { href: "/", label: "Apply" },
- { href: "/about", label: "About" },
{ href: "/archive", label: "Archive" },
+ { href: "/resources", label: "Resources" },
{ href: "/gallery", label: "Gallery" },
+ { href: "/events", label: "Events" },
+ { href: "/about", label: "About" },
];
+// Main navbar component
const NavigationBar: React.FC = () => {
const size: Size = useWindowSize();
+ // size.width !== undefined determines whether the viewport has rendered yet
+ const mobile = size.width !== undefined && size.width <= 956;
+
const [menuOpen, setMenuOpen] = useState(false);
- const [mobile, setMobile] = useState(false);
const toggleMenu = () => setMenuOpen(!menuOpen);
- useEffect(() => {
- size && size.width && setMobile(size.width <= 960);
- }, [size]);
-
+ // close the mobile menu if no longer within mobile viewport width
useEffect(() => {
if (!mobile) setMenuOpen(false);
}, [mobile]);
@@ -33,47 +34,46 @@ const NavigationBar: React.FC = () => {
return (
- {/* Navbar ACM Logo */}
+ {/* Projects Logo */}
-
+
at UC San Diego
+
+ {/* Main Navbar Content */}
-
+ {/* Nav Links */}
+
{navLinks.map((link, key) => (
{link.label}
))}
-
- {/* Mobile Navbar Toggle */}
-
+ {/* Mobile Navbar Toggle */}
+
+
{/* Mobile Menu Dropdown */}
{navLinks.map((link, key) => (
-
setMenuOpen(false)}>
+
setMenuOpen(false)}>
{link.label}
))}
-
- {/* Bottom Rainbow */}
-
-
);
};
diff --git a/src/sections/About-Projects/style.module.scss b/src/sections/About-Projects/style.module.scss
index a4fdd2a..3d1f8f7 100644
--- a/src/sections/About-Projects/style.module.scss
+++ b/src/sections/About-Projects/style.module.scss
@@ -1,4 +1,4 @@
-@use "/src/styles/vars.scss" as vars; // allows you to use pre-defined colors
+@use "../../styles/vars.scss" as vars; // allows you to use pre-defined colors
.aboutSection {
display: flex;
diff --git a/src/sections/Photo-Gallery/NextJsImage.tsx b/src/sections/Photo-Gallery/NextJsImage.tsx
index d2cc0d4..b71dbd5 100644
--- a/src/sections/Photo-Gallery/NextJsImage.tsx
+++ b/src/sections/Photo-Gallery/NextJsImage.tsx
@@ -1,22 +1,22 @@
import Image from "next/image";
import type { RenderPhotoProps } from "react-photo-album";
-import { CldImage } from 'next-cloudinary';
-import s from "./style.module.scss"
+import { CldImage } from "next-cloudinary";
+import s from "./style.module.scss";
export default function NextJsImage({
- photo,
- imageProps: { alt, title, sizes, className, onClick },
- wrapperStyle,
+ photo,
+ imageProps: { alt, title, sizes, className, onClick },
+ wrapperStyle,
}: RenderPhotoProps) {
- return (
-
-
-
- );
+ return (
+
+
+
+ );
}
diff --git a/src/sections/Photo-Gallery/index.tsx b/src/sections/Photo-Gallery/index.tsx
index 930a10b..290d928 100644
--- a/src/sections/Photo-Gallery/index.tsx
+++ b/src/sections/Photo-Gallery/index.tsx
@@ -2,106 +2,103 @@
import React, { useState, useEffect } from "react";
import s from "./style.module.scss";
-import PhotoAlbum from "react-photo-album";
+import PhotoAlbum, { Photo } from "react-photo-album";
import NextJsImage from "./NextJsImage";
const qtr_yr = [
- {value:"wtr_23", text: "Winter 2023", length: 16},
- {value: "spr_23", text: "Spring 2023", length: 24, vertical:[7, 24, 22]},
- // {value: "sum_23", text: "Summer 2023", length: 1}
-]
+ { value: "wtr_23", text: "Winter 2023", length: 16 },
+ { value: "spr_23", text: "Spring 2023", length: 24, vertical: [7, 24, 22] },
+ // {value: "sum_23", text: "Summer 2023", length: 1}
+];
const breakpoints = [1080, 640, 384, 256, 128, 96, 64, 48];
-type Photo = {
- src: string;
- width: number;
- height: number;
- srcSet: {
- src: string;
- width: number;
- height: number;
- }[];
- };
-
const options = qtr_yr.map((option, index) => {
- return
-})
+ return (
+
+ );
+});
const PhotoGallery: React.FC = () => {
- const [selectedOption, setSelectedOption] = useState(qtr_yr[0].value);
+ const [selectedOption, setSelectedOption] = useState(qtr_yr[0].value);
+
+ const handleChange = (e: React.ChangeEvent
) => {
+ setSelectedOption(e.target.value);
+ };
+ const [photos, setPhotos] = useState([]);
- const handleChange = (e: React.ChangeEvent) => {
- setSelectedOption(e.target.value);
+ useEffect(() => {
+ const rawPhotos = [];
+ //here i am trying to read the dimensions of the image from cloudinary, but doesn't work
+ // const cloudinary = require('cloudinary').v2;
+ // cloudinary.config({
+ // cloud_name: 'dgnecfapo',
+ // api_key: '',
+ // api_secret: ''
+ // });
+ const selectedQtrYr = qtr_yr.find((q) => q.value === selectedOption);
+ const numPhotos = selectedQtrYr?.length ?? 0;
+ const indexVertical = selectedQtrYr?.vertical ?? [];
+ for (let i = 1; i <= numPhotos; i++) {
+ const newPhoto = {
+ src: `${selectedOption}_showcase_${i}.jpg`,
+ width: 4032,
+ height: 3024,
+ };
+ if (indexVertical.includes(i)) {
+ newPhoto.width = 4000;
+ newPhoto.height = 6000;
+ }
+ // trying to dynamically read the images from cloudinary
+ // cloudinary.uploader.explicit(newPhoto.src, {type: 'fetch'}, function(error: string, result: any) {
+ // newPhoto.width = result.width;
+ // newPhoto.height = result.height;
+ // });
+ rawPhotos.push(newPhoto);
}
- const [photos, setPhotos] = useState([]);
- useEffect(() => {
- const rawPhotos = [];
- //here i am trying to read the dimensions of the image from cloudinary, but doesn't work
- // const cloudinary = require('cloudinary').v2;
- // cloudinary.config({
- // cloud_name: 'dgnecfapo',
- // api_key: '',
- // api_secret: ''
- // });
- const selectedQtrYr = qtr_yr.find(q => q.value === selectedOption);
- const numPhotos = selectedQtrYr?.length ?? 0;
- const indexVertical = selectedQtrYr?.vertical ?? [];
- for (let i = 1; i <= numPhotos; i++) {
- const newPhoto = {src: `${selectedOption}_showcase_${i}.jpg`, width:4032, height:3024};
- if (indexVertical.includes(i)) {
- newPhoto.width = 4000;
- newPhoto.height = 6000;
- }
- // trying to dynamically read the images from cloudinary
- // cloudinary.uploader.explicit(newPhoto.src, {type: 'fetch'}, function(error: string, result: any) {
- // newPhoto.width = result.width;
- // newPhoto.height = result.height;
- // });
- rawPhotos.push(newPhoto);
- }
+ const updatedPhotos = rawPhotos.map((photo) => ({
+ src: photo.src,
+ width: photo.width,
+ height: photo.height,
+ srcSet: breakpoints.map((breakpoint) => {
+ const height = Math.round((photo.height / photo.width) * breakpoint);
+ return {
+ src: photo.src,
+ width: breakpoint,
+ height,
+ };
+ }),
+ }));
- const updatedPhotos = rawPhotos.map((photo) => ({
- src: photo.src,
- width: photo.width,
- height: photo.height,
- srcSet: breakpoints.map((breakpoint) => {
- const height = Math.round((photo.height / photo.width) * breakpoint);
- return {
- src: photo.src,
- width: breakpoint,
- height,
- };
- }),
- }));
+ setPhotos(updatedPhotos);
+ }, [selectedOption]);
- setPhotos(updatedPhotos);
- }, [selectedOption]);
+ return (
+ <>
+
+
Photo Gallery
+
+
- return (
- <>
-
-
Photo Gallery
-
-
-
-
-
- );
-}
+
+
+ );
+};
-export default PhotoGallery;
\ No newline at end of file
+export default PhotoGallery;
diff --git a/src/sections/Photo-Gallery/style.module.scss b/src/sections/Photo-Gallery/style.module.scss
index d42090f..79f0b6b 100644
--- a/src/sections/Photo-Gallery/style.module.scss
+++ b/src/sections/Photo-Gallery/style.module.scss
@@ -1,4 +1,4 @@
-@use "/src/styles/vars.scss" as vars; // allows you to use pre-defined color
+@use "../../styles/vars.scss" as vars; // allows you to use pre-defined color
.container {
display: flex;
diff --git a/src/sections/WIP-Page/index.tsx b/src/sections/WIP-Page/index.tsx
new file mode 100644
index 0000000..6007eb8
--- /dev/null
+++ b/src/sections/WIP-Page/index.tsx
@@ -0,0 +1,12 @@
+"use client";
+import s from './styles.module.scss';
+
+const WIP: React.FC = () => {
+ return (
+
+
Sorry, this page is under construction.
+
+ );
+};
+
+export default WIP;
\ No newline at end of file
diff --git a/src/sections/WIP-Page/styles.module.scss b/src/sections/WIP-Page/styles.module.scss
new file mode 100644
index 0000000..1621805
--- /dev/null
+++ b/src/sections/WIP-Page/styles.module.scss
@@ -0,0 +1,9 @@
+.WIPNotice {
+ display: flex;
+ justify-content: center;
+ padding: 8rem;
+
+ h1 {
+ margin: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index ea7b549..ba9c293 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -1,597 +1,599 @@
html {
- -ms-text-size-adjust: 100%;
- -webkit-text-size-adjust: 100%;
- font: 112.5%/1.45em 'DM Sans', sans-serif;
- box-sizing: border-box;
- overflow-y: scroll;
- scroll-behavior: smooth;
- }
-
- * {
- scroll-margin-top: 88px;
- }
-
- body {
- margin: 0;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- color: hsla(0, 0%, 0%, 0.8);
- // font-family: 'DM Sans', sans-serif;
- font-weight: normal;
- word-wrap: break-word;
- font-kerning: normal;
- -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
- -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
- -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
- font-feature-settings: 'kern', 'liga', 'clig', 'calt';
- }
- article,
- aside,
- details,
- figcaption,
- figure,
- footer,
- header,
- main,
- menu,
- nav,
- section,
- summary {
- display: block;
- }
- audio,
- canvas,
- progress,
- video {
- display: inline-block;
- }
- audio:not([controls]) {
- display: none;
- height: 0;
- }
- progress {
- vertical-align: baseline;
- }
- [hidden],
- template {
- display: none;
- }
- a {
- background-color: transparent;
- -webkit-text-decoration-skip: objects;
- }
- a:active,
- a:hover {
- outline-width: 0;
- }
- abbr[title] {
- border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
- cursor: help;
- text-decoration: none;
- }
- b,
- strong {
- font-weight: inherit;
- font-weight: bolder;
- }
- dfn {
- font-style: italic;
- }
- h1 {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- color: inherit;
- // font-family: 'DM Sans', sans-serif;
- font-weight: bold;
- text-rendering: optimizeLegibility;
- font-size: 2.25rem;
- line-height: 1.1;
- }
- mark {
- background-color: #ff0;
- color: #000;
- }
- small {
- font-size: 80%;
- }
- sub,
- sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
- }
- sub {
- bottom: -0.25em;
- }
- sup {
- top: -0.5em;
- }
- img {
- border-style: none;
- max-width: 100%;
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- }
- svg:not(:root) {
- overflow: hidden;
- }
- code,
- kbd,
- pre,
- samp {
- font-family: monospace;
- font-size: 1em;
- }
- figure {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- }
- hr {
- box-sizing: content-box;
- overflow: visible;
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: calc(1.45rem - 1px);
- background: hsla(0, 0%, 0%, 0.2);
- border: none;
- height: 1px;
- }
- button,
- input,
- optgroup,
- select,
- textarea {
- font: inherit;
- margin: 0;
- }
- optgroup {
- font-weight: 700;
- }
- button,
- input {
- overflow: visible;
- }
- button,
- select {
- text-transform: none;
- }
- [type='reset'],
- [type='submit'],
- button,
- html [type='button'] {
- -webkit-appearance: button;
- }
- [type='button']::-moz-focus-inner,
- [type='reset']::-moz-focus-inner,
- [type='submit']::-moz-focus-inner,
- button::-moz-focus-inner {
- border-style: none;
- padding: 0;
- }
- [type='button']:-moz-focusring,
- [type='reset']:-moz-focusring,
- [type='submit']:-moz-focusring,
- button:-moz-focusring {
- outline: 1px dotted ButtonText;
- }
- fieldset {
- border: 1px solid silver;
- padding: 0.35em 0.625em 0.75em;
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- }
- legend {
- box-sizing: border-box;
- color: inherit;
- display: table;
- max-width: 100%;
- padding: 0;
- white-space: normal;
- }
- textarea {
- overflow: auto;
- }
- [type='checkbox'],
- [type='radio'] {
- box-sizing: border-box;
- padding: 0;
- }
- [type='number']::-webkit-inner-spin-button,
- [type='number']::-webkit-outer-spin-button {
- height: auto;
- }
- [type='search'] {
- -webkit-appearance: textfield;
- outline-offset: -2px;
- }
- [type='search']::-webkit-search-cancel-button,
- [type='search']::-webkit-search-decoration {
- -webkit-appearance: none;
- }
- ::-webkit-input-placeholder {
- color: inherit;
- opacity: 0.54;
- }
- ::-webkit-file-upload-button {
- -webkit-appearance: button;
- font: inherit;
- }
- * {
- box-sizing: inherit;
- }
- *:before {
- box-sizing: inherit;
- }
- *:after {
- box-sizing: inherit;
- }
- h2 {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- color: inherit;
- // font-family: 'DM Sans', sans-serif;
- font-weight: bold;
- text-rendering: optimizeLegibility;
- font-size: 1.62671rem;
- line-height: 1.1;
- }
- h3 {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- color: inherit;
- // font-family: 'DM Sans', sans-serif;
- font-weight: bold;
- text-rendering: optimizeLegibility;
- font-size: 1.38316rem;
- line-height: 1.1;
- }
- h4 {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- color: inherit;
- // font-family: 'DM Sans', sans-serif;
- font-weight: bold;
- text-rendering: optimizeLegibility;
- font-size: 1rem;
- line-height: 1.1;
- }
- h5 {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- color: inherit;
- // font-family: 'DM Sans', sans-serif;
- font-weight: bold;
- text-rendering: optimizeLegibility;
- font-size: 0.85028rem;
- line-height: 1.1;
- }
- h6 {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- color: inherit;
- // font-family: 'DM Sans', sans-serif;
- font-weight: bold;
- text-rendering: optimizeLegibility;
- font-size: 0.78405rem;
- line-height: 1.1;
- }
- hgroup {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- }
- ul {
- margin-left: 1.45rem;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- list-style-position: outside;
- list-style-image: none;
- }
- ol {
- margin-left: 1.45rem;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- list-style-position: outside;
- list-style-image: none;
- }
- dl {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- }
- dd {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- }
- p {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- }
- pre {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- margin-bottom: 1.45rem;
- font-size: 0.85rem;
- line-height: 1.42;
- background: hsla(0, 0%, 0%, 0.04);
- border-radius: 3px;
- overflow: auto;
- word-wrap: normal;
- padding: 1.45rem;
- }
- table {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- font-size: 1rem;
- line-height: 1.45rem;
- border-collapse: collapse;
- width: 100%;
- }
- blockquote {
- margin-left: 1.45rem;
- margin-right: 1.45rem;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- }
- form {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- }
- noscript {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- }
- iframe {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- }
- address {
- margin-left: 0;
- margin-right: 0;
- margin-top: 0;
- padding-bottom: 0;
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- margin-bottom: 1.45rem;
- }
- b {
- font-weight: bold;
- }
- strong {
- font-weight: bold;
- }
- dt {
- font-weight: bold;
- }
- th {
- font-weight: bold;
- }
- li {
- margin-bottom: calc(1.45rem / 2);
- }
- ol li {
- padding-left: 0;
- }
- ul li {
- padding-left: 0;
- }
- li > ol {
- margin-left: 1.45rem;
- margin-bottom: calc(1.45rem / 2);
- margin-top: calc(1.45rem / 2);
- }
- li > ul {
- margin-left: 1.45rem;
- margin-bottom: calc(1.45rem / 2);
- margin-top: calc(1.45rem / 2);
- }
- blockquote *:last-child {
- margin-bottom: 0;
- }
- li *:last-child {
- margin-bottom: 0;
- }
- p *:last-child {
- margin-bottom: 0;
- }
- li > p {
- margin-bottom: calc(1.45rem / 2);
- }
- code {
- font-size: 0.85rem;
- line-height: 1.45rem;
- }
- kbd {
- font-size: 0.85rem;
- line-height: 1.45rem;
- }
- samp {
- font-size: 0.85rem;
- line-height: 1.45rem;
- }
- abbr {
- border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
- cursor: help;
- }
- acronym {
- border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
- cursor: help;
- }
- thead {
- text-align: left;
- }
- td,
- th {
- text-align: left;
- border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
- font-feature-settings: 'tnum';
- -moz-font-feature-settings: 'tnum';
- -ms-font-feature-settings: 'tnum';
- -webkit-font-feature-settings: 'tnum';
- padding-left: 0.96667rem;
- padding-right: 0.96667rem;
- padding-top: 0.725rem;
- padding-bottom: calc(0.725rem - 1px);
- }
- th:first-child,
- td:first-child {
- padding-left: 0;
- }
- th:last-child,
- td:last-child {
- padding-right: 0;
- }
- tt,
- code {
- background-color: hsla(0, 0%, 0%, 0.04);
- border-radius: 3px;
- font-family: 'SFMono-Regular', Consolas, 'Roboto Mono', 'Droid Sans Mono', 'Liberation Mono', Menlo, Courier,
- monospace;
- padding: 0;
- padding-top: 0.2em;
- padding-bottom: 0.2em;
- }
- pre code {
- background: none;
- line-height: 1.42;
- }
- code:before,
- code:after,
- tt:before,
- tt:after {
- letter-spacing: -0.2em;
- content: ' ';
- }
- pre code:before,
- pre code:after,
- pre tt:before,
- pre tt:after {
- content: '';
- }
- @media only screen and (max-width: 480px) {
- html {
- font-size: 100%;
- }
- }
\ No newline at end of file
+ min-width: 320px;
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+ font: 112.5%/1.45em 'DM Sans', sans-serif;
+ box-sizing: border-box;
+ overflow-y: scroll;
+ scroll-behavior: smooth;
+}
+
+* {
+ scroll-margin-top: 88px;
+}
+
+body {
+ min-width: 320px;
+ margin: 0;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ color: hsla(0, 0%, 0%, 0.8);
+ // font-family: 'DM Sans', sans-serif;
+ font-weight: normal;
+ word-wrap: break-word;
+ font-kerning: normal;
+ -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
+ -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
+ -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
+ font-feature-settings: 'kern', 'liga', 'clig', 'calt';
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block;
+}
+audio,
+canvas,
+progress,
+video {
+ display: inline-block;
+}
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+progress {
+ vertical-align: baseline;
+}
+[hidden],
+template {
+ display: none;
+}
+a {
+ background-color: transparent;
+ -webkit-text-decoration-skip: objects;
+}
+a:active,
+a:hover {
+ outline-width: 0;
+}
+abbr[title] {
+ border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+ cursor: help;
+ text-decoration: none;
+}
+b,
+strong {
+ font-weight: inherit;
+ font-weight: bolder;
+}
+dfn {
+ font-style: italic;
+}
+h1 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ // font-family: 'DM Sans', sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 2.25rem;
+ line-height: 1.1;
+}
+mark {
+ background-color: #ff0;
+ color: #000;
+}
+small {
+ font-size: 80%;
+}
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+sub {
+ bottom: -0.25em;
+}
+sup {
+ top: -0.5em;
+}
+img {
+ border-style: none;
+ max-width: 100%;
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+svg:not(:root) {
+ overflow: hidden;
+}
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace;
+ font-size: 1em;
+}
+figure {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+hr {
+ box-sizing: content-box;
+ overflow: visible;
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: calc(1.45rem - 1px);
+ background: hsla(0, 0%, 0%, 0.2);
+ border: none;
+ height: 1px;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+ font: inherit;
+ margin: 0;
+}
+optgroup {
+ font-weight: 700;
+}
+button,
+input {
+ overflow: visible;
+}
+button,
+select {
+ text-transform: none;
+}
+[type='reset'],
+[type='submit'],
+button,
+html [type='button'] {
+ -webkit-appearance: button;
+}
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner,
+button::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring,
+button:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+fieldset {
+ border: 1px solid silver;
+ padding: 0.35em 0.625em 0.75em;
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+legend {
+ box-sizing: border-box;
+ color: inherit;
+ display: table;
+ max-width: 100%;
+ padding: 0;
+ white-space: normal;
+}
+textarea {
+ overflow: auto;
+}
+[type='checkbox'],
+[type='radio'] {
+ box-sizing: border-box;
+ padding: 0;
+}
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+ height: auto;
+}
+[type='search'] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px;
+}
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+::-webkit-input-placeholder {
+ color: inherit;
+ opacity: 0.54;
+}
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit;
+}
+* {
+ box-sizing: inherit;
+}
+*:before {
+ box-sizing: inherit;
+}
+*:after {
+ box-sizing: inherit;
+}
+h2 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ // font-family: 'DM Sans', sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 1.62671rem;
+ line-height: 1.1;
+}
+h3 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ // font-family: 'DM Sans', sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 1.38316rem;
+ line-height: 1.1;
+}
+h4 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ // font-family: 'DM Sans', sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 1rem;
+ line-height: 1.1;
+}
+h5 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ // font-family: 'DM Sans', sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 0.85028rem;
+ line-height: 1.1;
+}
+h6 {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ color: inherit;
+ // font-family: 'DM Sans', sans-serif;
+ font-weight: bold;
+ text-rendering: optimizeLegibility;
+ font-size: 0.78405rem;
+ line-height: 1.1;
+}
+hgroup {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+ul {
+ margin-left: 1.45rem;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ list-style-position: outside;
+ list-style-image: none;
+}
+ol {
+ margin-left: 1.45rem;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ list-style-position: outside;
+ list-style-image: none;
+}
+dl {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+dd {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+p {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+pre {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ margin-bottom: 1.45rem;
+ font-size: 0.85rem;
+ line-height: 1.42;
+ background: hsla(0, 0%, 0%, 0.04);
+ border-radius: 3px;
+ overflow: auto;
+ word-wrap: normal;
+ padding: 1.45rem;
+}
+table {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+ font-size: 1rem;
+ line-height: 1.45rem;
+ border-collapse: collapse;
+ width: 100%;
+}
+blockquote {
+ margin-left: 1.45rem;
+ margin-right: 1.45rem;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+form {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+noscript {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+iframe {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+address {
+ margin-left: 0;
+ margin-right: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ margin-bottom: 1.45rem;
+}
+b {
+ font-weight: bold;
+}
+strong {
+ font-weight: bold;
+}
+dt {
+ font-weight: bold;
+}
+th {
+ font-weight: bold;
+}
+li {
+ margin-bottom: calc(1.45rem / 2);
+}
+ol li {
+ padding-left: 0;
+}
+ul li {
+ padding-left: 0;
+}
+li > ol {
+ margin-left: 1.45rem;
+ margin-bottom: calc(1.45rem / 2);
+ margin-top: calc(1.45rem / 2);
+}
+li > ul {
+ margin-left: 1.45rem;
+ margin-bottom: calc(1.45rem / 2);
+ margin-top: calc(1.45rem / 2);
+}
+blockquote *:last-child {
+ margin-bottom: 0;
+}
+li *:last-child {
+ margin-bottom: 0;
+}
+p *:last-child {
+ margin-bottom: 0;
+}
+li > p {
+ margin-bottom: calc(1.45rem / 2);
+}
+code {
+ font-size: 0.85rem;
+ line-height: 1.45rem;
+}
+kbd {
+ font-size: 0.85rem;
+ line-height: 1.45rem;
+}
+samp {
+ font-size: 0.85rem;
+ line-height: 1.45rem;
+}
+abbr {
+ border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+ cursor: help;
+}
+acronym {
+ border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+ cursor: help;
+}
+thead {
+ text-align: left;
+}
+td,
+th {
+ text-align: left;
+ border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
+ font-feature-settings: 'tnum';
+ -moz-font-feature-settings: 'tnum';
+ -ms-font-feature-settings: 'tnum';
+ -webkit-font-feature-settings: 'tnum';
+ padding-left: 0.96667rem;
+ padding-right: 0.96667rem;
+ padding-top: 0.725rem;
+ padding-bottom: calc(0.725rem - 1px);
+}
+th:first-child,
+td:first-child {
+ padding-left: 0;
+}
+th:last-child,
+td:last-child {
+ padding-right: 0;
+}
+tt,
+code {
+ background-color: hsla(0, 0%, 0%, 0.04);
+ border-radius: 3px;
+ font-family: 'SFMono-Regular', Consolas, 'Roboto Mono', 'Droid Sans Mono', 'Liberation Mono', Menlo, Courier,
+ monospace;
+ padding: 0;
+ padding-top: 0.2em;
+ padding-bottom: 0.2em;
+}
+pre code {
+ background: none;
+ line-height: 1.42;
+}
+code:before,
+code:after,
+tt:before,
+tt:after {
+ letter-spacing: -0.2em;
+ content: ' ';
+}
+pre code:before,
+pre code:after,
+pre tt:before,
+pre tt:after {
+ content: '';
+}
+@media only screen and (max-width: 480px) {
+ html {
+ font-size: 100%;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/vars.scss b/src/styles/vars.scss
index 2b8ca23..d401e69 100644
--- a/src/styles/vars.scss
+++ b/src/styles/vars.scss
@@ -9,10 +9,35 @@ $red-warning: #ac303e;
$green-success: #30ac9e;
$blue-ap: #68b4fc;
$blue-dark: #001d36;
-$dark-grey: #8d8d8d;
+$dark-gray: #8d8d8d;
$hover-blue: #7cbdff;
$turquoise: #51c0c0;
$purple: #816dff;
$black: #333333;
$acm-blue-30: #a8d3ff;
$acm-blue: #62b0ff;
+$proj-blue: #5777C0;
+$footer-blue: #4E78C6;
+
+// find the size relative to the viewport width between a min and max size
+// size is calculated using a linear function between two points
+// x-axis/input: viewport width (px)
+// y-axis/output: size (rem)
+@function calc-relative-size($minVW, $minSize, $maxVW, $maxSize) {
+ @return clamp(
+ $minSize,
+ calc(
+ /* relativeSize = (% of progress on line) * (change in size) + minSize */
+ /* calculate fraction of progress between max and min viewport widths
+ relative to the current viewport width */
+ ((100vw - #{$minVW}) / (#{$maxVW} - #{$minVW}))
+ /* multiply the fraction by the change in size between the max and min
+ sizes */
+ * (#{$maxSize} - #{$minSize})
+ /* add the min size to get the final size relative to the progress made
+ on the line between the min and max viewport widths */
+ + #{$minSize}
+ ),
+ $maxSize
+ );
+}
diff --git a/tsconfig.json b/tsconfig.json
index c714696..b09cc80 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
{
"compilerOptions": {
"target": "es5",
- "lib": ["dom", "dom.iterable", "esnext"],
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -11,7 +15,7 @@
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
- "jsx": "preserve",
+ "jsx": "react-jsx",
"incremental": true,
"plugins": [
{
@@ -19,9 +23,19 @@
}
],
"paths": {
- "@/*": ["./*"]
+ "@/*": [
+ "./*"
+ ]
}
},
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
- "exclude": ["node_modules"]
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts",
+ ".next/dev/types/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
}
-