Addresses #29, #28, #26, #20, #19

components/styles/content.tsx

@@ -24,7 +24,7 @@ export const PageTitle = styled.h1`
 export const PageDescription = styled.p`
   background-color: ${({ theme }) => theme.colors.background ? theme.colors.background : ""};
   padding: 0.25rem 0.5rem;
-  margin: 4rem 0;
+  margin: 4rem 2rem;
   line-height: 1.5;
   font-size: 1.5rem;
   text-align: center;

components/styles/generic.tsx

@@ -45,6 +45,7 @@ export const Footer = styled.footer`
 `
 
 export const MobileFooter = styled(Footer)`
-  position: absolute;
-  bottom: 100%;
+  white-space: nowrap;
+  flex: 0.5;
+  width: 100%;
 `

components/styles/navbar.tsx

@@ -1,148 +0,0 @@
-import styled from 'styled-components'
-import Link from 'next/link';
-
-interface ActivePropType {
-  active?: number;
-}
-
-export const NavWrap = styled.div`
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.primary};
-`
-
-
-export const NavWrapMobile = styled(NavWrap)`
-  width: 100%;
-  flex-direction: row;
-  position: fixed;
-  z-index: 100;
-`
-
-export const NavWrapMobileGhost = styled.div`
-  position: relative;
-  width: 100%;
-  height: 57px;
-`
-
-export const NavSideMenu = styled.div <ActivePropType>`
-  position: fixed;
-  top: 0%; left: 0%; right: 0%; bottom: 0%;
-  max-width: ${ props => props.active ? "60%" : "0%"};
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-  z-index: 100;
-
-  background-color: ${({ theme }) => theme.colors.background};
-  visibility: ${ props => props.active ? "visible" : "hidden"};
-  width: ${ props => props.active ? "360px" : "0%"};
-  transition-delay: ${ props => props.active ? "0s, 0s" : "0s, 0.3s"};
-`
-
-export const NavSideMenuPanel = styled.div <ActivePropType>`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-`
-
-export const NavSideMenuButton = styled.button <ActivePropType>`
-  z-index: 100;
-  margin: 16px;
-  color: ${ props => props.active ? ({ theme }) => theme.colors.background : ({ theme }) => theme.colors.primary };
-  background-color: ${ props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.background };
-`
-
-export const NavSideMenuButtonPlaceholder = styled.div`
-  width: 48px;
-  margin: 16px;
-`
-
-export const NavSideMenuGhost = styled.div`
-  
-`
-
-export const NavBar = styled.nav`
-  margin-right: 1%;
-  display: flex;
-  flex: 1;
-  padding: 1rem 0;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-`
-
-export const NavBarMobile = styled(NavBar)`
-  flex-direction: column;
-`
-
-export const NavLink = styled(Link) <ActivePropType>`
-  color: ${props => props.active ?
-    ({ theme }) => theme.invertButtons ?
-      theme.colors.text ? theme.colors.text : theme.colors.secondary : theme.colors.secondary :
-    ({ theme }) => theme.colors.primary};
-  
-  background-color: ${props => props.active ?
-    ({ theme }) => theme.invertButtons ?
-      theme.colors.secondary : theme.colors.background :
-    ({ theme }) => theme.colors.background};
-
-  padding: 2px 6px;
-  border: 2px solid;
-
-  margin: 0.2rem;
-  border-radius: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.1s ease;
-
-  &:hover {
-    color: ${({ theme }) => theme.invertButtons ?
-    theme.colors.text ? theme.colors.text : theme.colors.primary :
-    theme.colors.secondary};
-
-    background-color: ${({ theme }) => theme.invertButtons ?
-    theme.colors.secondary :
-    theme.colors.background};
-  }
-`
-
-export const NavIndicators = styled.nav`
-  width: 100%;
-  display: flex;
-  flex: 1;
-  padding: 1rem 0;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
-`
-
-export const NavIndicator = styled(Link) <ActivePropType>`
-  margin: 0.2rem;
-  border-radius: 50%;
-  aspect-ratio: 1;
-  width: 10px;
-  border: 1px solid ${({ theme }) => theme.colors.primary};
-
-  background-color: ${props => props.active ?
-    ({ theme }) => theme.invertButtons ?
-      theme.colors.secondary : theme.colors.background :
-    ({ theme }) => theme.colors.background};
-
-  &:hover {
-    color: ${({ theme }) => theme.invertButtons ?
-    theme.colors.text ? theme.colors.text : theme.colors.primary :
-    theme.colors.secondary};
-
-    background-color: ${({ theme }) => theme.invertButtons ?
-    theme.colors.secondary :
-    theme.colors.background};
-  }
-`

components/styles/navbar/desktop.tsx

@@ -0,0 +1,54 @@
+import styled from 'styled-components'
+import Link from 'next/link';
+
+interface ActivePropType {
+  active?: number;
+}
+
+export const NavWrap = styled.div`
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.primary};
+`
+
+export const NavBar = styled.nav`
+  margin-right: 1%;
+  display: flex;
+  flex: 1;
+  padding: 1rem 0;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+`
+
+export const NavLink = styled(Link) <ActivePropType>`
+  color: ${props => props.active ?
+    ({ theme }) => theme.invertButtons ?
+      theme.colors.text ? theme.colors.text : theme.colors.secondary : theme.colors.secondary :
+    ({ theme }) => theme.colors.primary};
+  
+  background-color: ${props => props.active ?
+    ({ theme }) => theme.invertButtons ?
+      theme.colors.secondary : theme.colors.background :
+    ({ theme }) => theme.colors.background};
+
+  padding: 2px 6px;
+  border: 2px solid;
+
+  margin: 0.2rem;
+  border-radius: 5px;
+  display: flex;
+  transition: all 0.1s ease;
+
+  &:hover {
+    color: ${({ theme }) => theme.invertButtons ?
+    theme.colors.text ? theme.colors.text : theme.colors.primary :
+    theme.colors.secondary};
+
+    background-color: ${({ theme }) => theme.invertButtons ?
+    theme.colors.secondary :
+    theme.colors.background};
+  }
+`

components/styles/navbar/mobile.tsx

@@ -0,0 +1,247 @@
+import styled from 'styled-components'
+import Link from 'next/link';
+import { NavBar, NavLink, NavWrap } from './desktop';
+
+interface ActivePropType {
+  active?: number;
+}
+
+interface MultipliesPropType {
+  num?: number;
+}
+
+export const NavWrapMobile = styled(NavWrap)`
+  width: 100%;
+  flex-direction: row;
+  position: fixed;
+  z-index: 50;
+`
+
+export const NavWrapMobileGhost = styled.div`
+  position: relative;
+  width: 100%;
+  height: 50px;
+`
+
+export const NavSideMenu = styled.div <ActivePropType>`
+  position: fixed;
+  top: 0%; left: 0%; right: 0%; bottom: 0%;
+  max-width: ${props => props.active ? "240px" : "0px"};
+  max-height: ${props => props.active ? "100%" : "50px"};
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  height: 100%;
+  z-index: 100;
+  border-right: ${ props => ({ theme }) => {
+    let ret: string;
+    if(props.active) {
+      ret = "1px solid " + theme.colors.primary;
+    }
+    else {
+      ret = "0px solid";
+    }
+    return ret;
+  }};
+
+  background-color: ${ props => ({ theme }) => {
+    let ret: string;
+    if (props.active) {
+      ret = theme.colors.background;
+    }
+    else {
+      ret = "";
+    }
+    return ret;
+  }};
+
+  overflow-x: hidden;
+  transition-property: max-width, max-height, border-right, background-color;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.15s, 0s, 0s, 0s;
+  transition-delay: ${props => props.active ? "0s, 0s, 0s, 0s" : "0s, 0.15s, 0.15s, 0.15s"};
+`
+
+export const NavSideMenuPanel = styled.div <ActivePropType>`
+  height: 100%;
+  width: 240px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+`
+
+export const NavSideMenuButton = styled.button <ActivePropType>`
+  position: ${ props => props.active ? "absolute" : "fixed"};
+  z-index: 200;
+  left: ${ props => props.active ? "165px" : "0px"};
+  
+  transition-property: left, color, background-color, border-color;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.135s, 0.15s;
+  transition-delay: ${props => props.active ? "0.03s, 0s" : "0s, 0s"};
+
+  align-self: flex-end;
+  cursor: pointer;
+  margin: 12px;
+  color: ${props => ({ theme }) => {
+    let ret: string;
+    if (props.active) {
+      if (theme.invertButtons) {
+        ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
+      }
+      else {
+        ret = theme.colors.secondary;
+      }
+    }
+    else {
+      ret = theme.colors.primary;
+    }
+    return ret;
+  }};
+  background-color: ${props => ({ theme }) => {
+    let ret: string;
+    if (props.active) {
+      if (theme.invertButtons) {
+        ret = theme.colors.secondary;
+      }
+      else {
+        ret = theme.colors.background;
+      }
+    }
+    else {
+      ret = theme.colors.background;
+    }
+    return ret;
+  }};
+
+  border: 2px solid;
+  border-radius: 5px;
+  border-color: ${props => ({ theme }) => {
+    let ret: string;
+    if (props.active) {
+      if (theme.invertButtons) {
+        ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
+      }
+      else {
+        ret = theme.colors.secondary;
+      }
+    }
+    else {
+      ret = theme.colors.primary;
+    }
+    return ret;
+  }};
+
+  &:hover {
+    color: ${({ theme }) => {
+    let ret: string;
+    if (theme.invertButtons) {
+      ret = theme.colors.text ? theme.colors.text : theme.colors.primary;
+    }
+    else {
+      ret = theme.colors.secondary;
+    }
+    return ret;
+  }};
+
+    background-color: ${({ theme }) => {
+    let ret: string;
+    if (theme.invertButtons) {
+      ret = theme.colors.secondary;
+    }
+    else {
+      ret = theme.colors.background;
+    }
+    return ret;
+  }};
+
+  border-color: ${({ theme }) => {
+    let ret: string;
+      if (theme.invertButtons) {
+        ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
+      }
+      else {
+        ret = theme.colors.secondary;
+      }
+    return ret;
+  }};
+  }
+`
+
+export const NavSideMenuGhost = styled.div <MultipliesPropType>`
+  flex: ${ props => props.num ? props.num * 2 : 2 };
+`
+
+export const NavBarMobile = styled(NavBar)`
+  margin-top: 56px;
+  flex-direction: column;
+  align-items: flex-start;
+`
+
+export const NavLinkMobile = styled(NavLink)`
+  display: block;
+  margin-left: 1rem;
+  margin-top: 1rem;
+  padding: 0.5rem;
+  border: none;
+  border-top: 2px solid;
+  width: 80%;
+  text-align: center;
+
+  color: ${props => ({ theme }) => props.active ? theme.colors.secondary : theme.colors.primary};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.secondary };
+    background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
+  }
+`
+
+export const NavIndicators = styled.nav`
+  background-color: ${({ theme }) => theme.colors.background};
+  background-image: ${({ theme }) => theme.backgroundImage ? "url(" + theme.backgroundImage + ")" : ""};
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+  width: 100%;
+  display: flex;
+  flex: 1;
+  padding: 1rem 0;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+`
+
+export const NavIndicator = styled(Link) <ActivePropType>`
+  margin: 0.2rem;
+  border-radius: 50%;
+  aspect-ratio: 1;
+  width: 10px;
+  border: 1px solid; 
+  border-color: ${ props => ({ theme }) => props.active ? 
+    theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
+    theme.colors.primary
+  };
+
+  background-color: ${props => ({ theme }) => props.active ?
+    theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
+    theme.colors.background
+  };
+
+  &:hover {
+    border-color: ${ props => ({ theme }) =>
+      theme.invertButtons ? theme.colors.secondary : theme.colors.primary
+    };
+
+    color: ${({ theme }) => theme.invertButtons ?
+      theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
+      theme.colors.primary
+    };
+
+    background-color: ${({ theme }) => theme.invertButtons ?
+      theme.colors.secondary :
+      theme.colors.primary
+    };
+  }
+`

components/styles/themedropdown/mobile.tsx

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownOptions } from './desktop';
+
+export const ThemeDropDownMobile = styled(ThemeDropDown)`
+  width: 80%;
+  margin-left: 1rem;
+`; 
+
+export const ThemeDropDownButtonMobile = styled(ThemeDropDownButton)`
+  width: 100%;
+  padding: 0.5rem;
+  border: none;
+  border-top: 2px solid;
+  border-left: ${ props => props.show ? "2px solid" : "0px solid"};
+  border-right: ${ props => props.show ? "2px solid" : "0px solid"};
+
+  color: ${props => ({ theme }) => props.focus ? theme.colors.secondary : theme.colors.primary};
+  background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
+
+  &:focus,:hover  {
+    color: ${({ theme }) => theme.colors.secondary};
+
+    background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
+  }
+
+  transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background-color, border-left, border-right;
+  transition-timing-function: ease;
+  transition-duration: 0.15s;
+  transition-delay: 0s, ${ props => props.show ? "0s" : "0.6s, 0.6s, 0s, 0.6s, 0.6s" };
+`;
+
+export const ThemeDropDownOptionsMobile = styled(ThemeDropDownOptions)`
+  background-image: unset;
+  background-color: ${({ theme }) => theme.colors.background};
+  border: 2px solid ${props => ({ theme }) => props.focus ? theme.colors.secondary : theme.colors.primary};
+  border-top: 0;
+  max-height: ${ props => props.show ? "100%" : "0%"};
+  position: relative;
+  width: 100%;
+`;
+
+export const ThemeDropDownOptionMobile = styled(ThemeDropDownOption)`
+  text-align: left;
+  margin: 0.5rem;
+  padding: 0rem 0.5rem;
+  width: 80%;
+  border-left: 2px solid;
+  border-radius: 5px;
+`;