Various Changes

Added Support for Background Images, Inverted Buttons, More Color Options

components/styles/content.tsx

@@ -12,17 +12,23 @@ interface OnlinePropType {
 // replaces .title
 export const PageTitle = styled.h1`
   margin: 0;
+  padding: 0.25rem 1rem;
   line-height: 1.15;
   font-size: 4rem;
   text-align: center;
+  background-color: ${({ theme }) => theme.colors.background ? theme.colors.background : ""};
+  border-radius: 15px;
 `;
 
 // replaces .description
 export const PageDescription = styled.p`
+  background-color: ${({ theme }) => theme.colors.background ? theme.colors.background : ""};
+  padding: 0.25rem 0.5rem;
   margin: 4rem 0;
   line-height: 1.5;
   font-size: 1.5rem;
   text-align: center;
+  border-radius: 10px;
 `;
 
 // replaces .grid
@@ -54,14 +60,15 @@ const CardStyleWrap = styled.div`
 // replaces .card & .contentcard
 export const PageCard = styled.div`
   margin: 1rem;
-  padding: 1.5rem 0.7rem 1.5rem 0.7rem;
+  padding: 23px 10px;
   text-align: center;
   color: ${({ theme }) => theme.colors.primary};
+  background-color: ${({ theme }) => theme.colors.background};
   text-decoration: none;
-  border: 1px solid;
+  border: 2px solid;
   border-radius: 10px;
   border-color: ${({ theme }) => theme.colors.primary};
-  transition: color 0.15s ease, border-color 0.15s ease;
+  transition: all 0.1s linear;
   width: 300px;
   height: 200px;
   display: flex;
@@ -82,11 +89,15 @@ export const PageCard = styled.div`
   ${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & {
     color: ${({ theme }) => theme.colors.secondary};
     border-color: ${({ theme }) => theme.colors.secondary};
+    background-color: ${({ theme }) => theme.invertButtons ? 
+      theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
   }
 
   ${CardLink}:focus,${CardLink}:active,${CardLink}:hover & {
     color: ${({ theme }) => theme.colors.secondary};
     border-color: ${({ theme }) => theme.colors.secondary};
+    background-color: ${({ theme }) => theme.invertButtons ? 
+      theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
   }
 `;
 
@@ -110,7 +121,6 @@ const OnlineStatus = styled.p<OnlinePropType>`
     return ret;
   }};
   padding: 0.2rem;
-  background-color: ${({ theme }) => theme.colors.background};
   border: 1px solid;
   border-color: ${({ theme }) => theme.colors.primary};
   border-radius: 5px;
@@ -119,13 +129,25 @@ const OnlineStatus = styled.p<OnlinePropType>`
   top: 100; right: 50; bottom: 0; left: 50;
   offset-position: bottom 10px;
   transition: color 0.15s ease, border-color 0.15s ease;
+  background-color: ${({ theme }) => theme.colors.background};
+  background-image: ${({ theme }) => theme.backgroundImage ? 
+  "linear-gradient("
+  + theme.colors.background + "," + theme.colors.background +
+  "), url(" + theme.backgroundImage + ")" : ""};
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
 
   ${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & {
     border-color: ${({ theme }) => theme.colors.secondary};
+    background-color: ${({ theme }) => theme.invertButtons ? 
+      theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
   }
 
   ${CardLink}:focus,${CardLink}:active,${CardLink}:hover & {
     border-color: ${({ theme }) => theme.colors.secondary};
+    background-color: ${({ theme }) => theme.invertButtons ? 
+      theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
   }
 `;
 
@@ -136,16 +158,16 @@ const CardContentWarning = styled.p`
 `;
 
 // replaces .contentIcon
-const CardContentTitleIcon = styled.div`
+const CardContentTitleIcon = styled(Image)`
   object-fit: "contain";
-  margin-right: 0.4rem;
-  position: relative;
+  margin-right: 8px;
   aspect-ratio: 1;
-  height: 1.5rem;
+  height: 28px;
 `;
 
 // replaces .contentTitle
 const CardContentTitleWrap = styled.div`
+  position: relative;
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -163,9 +185,7 @@ const CardContentTitle = ({ content }: { content: Service | Game }) => {
     <CardContentTitleWrap>
       {
         content.icon ? (
-          <CardContentTitleIcon>
-            <Image alt="icon" src={content.icon} fill sizes='10vw'></Image>
-          </CardContentTitleIcon>
+          <CardContentTitleIcon alt="icon" src={content.icon} width="28" height="28" sizes='10vw'/>
         ) : (<></>)
       }
       <h2>{content.name}</h2>

components/styles/generic.tsx

@@ -10,6 +10,10 @@ export const StyledBody = styled.body`
 export const Page = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.colors.background};
+  background-image: ${({ theme }) => theme.backgroundImage ? "url(" + theme.backgroundImage + ")" : ""};
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
 `
 
 export const Main = styled.main`

components/styles/navbar.tsx

@@ -23,19 +23,34 @@ export const NavBar = styled.nav`
   align-items: center;
 `
 
-export const NavLink = styled(Link)<ActivePropType>`
-  color: ${props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary};
+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: 1px solid;
   border-radius: 5px;
-  padding: 0.2rem 0.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
-  transition: color 0.15s ease, border-color 0.15s ease;
+  transition: all 0.1s ease;
 
   &:hover {
-    color: ${({ theme }) => theme.colors.secondary};
-  }
+    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/themedropdown.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 interface DisplayPropType {
+  focus?: number,
   show?: number;
 }
 
@@ -18,20 +19,30 @@ export const ThemeDropDown = styled.div`
 
 export const ThemeDropDownButton = styled.button<DisplayPropType>`
   width: 160px;
-  border: 1px solid;
+  border: 2px solid;
   border-radius: 5px;
-  background-color: ${({ theme }) => theme.colors.background};
-  padding: 0.2rem 0.5rem;
+  background-color: ${props => props.focus ? 
+    ({ theme }) => theme.invertButtons ? theme.colors.secondary : theme.colors.background : 
+    ({ theme }) => theme.colors.background};
+  padding: 2px 6px;
   cursor: pointer;
-  color: ${({ theme }) => theme.colors.primary};
+  color: ${props => props.focus ? ({ theme }) => theme.invertButtons ? 
+    theme.colors.text ? theme.colors.text : theme.colors.primary : theme.colors.secondary : 
+    ({ theme }) => theme.colors.primary};
 
-  transition-property: color, border-bottom-left-radius, border-bottom-right-radius;
+  transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background;
   transition-timing-function: ease;
   transition-duration: 0.15s;
-  transition-delay: 0s, ${ props => props.show ? "0s, 0s" : "0.6s, 0.6s" };
+  transition-delay: 0s, ${ props => props.show ? "0s, 0s" : "0.6s, 0.6s" }, 0s;
 
   &:focus,:hover {
-    color: ${({ theme }) => theme.colors.secondary};
+    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};
   }
 
   border-bottom-left-radius: ${ props => props.show ? "0" : "" };
@@ -41,7 +52,16 @@ export const ThemeDropDownButton = styled.button<DisplayPropType>`
 export const ThemeDropDownOptions = styled.div<DisplayPropType>`
   position: absolute;
   color: ${({ theme }) => theme.colors.primary};
+
   background-color: ${({ theme }) => theme.colors.background};
+  background-image: ${({ theme }) => theme.backgroundImage ? 
+  "linear-gradient("
+  + theme.colors.background + "," + theme.colors.background +
+  "), url(" + theme.backgroundImage + ")" : ""};
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+
   display: flex;
   flex-direction: column;
   min-width: 160px;
@@ -62,7 +82,7 @@ export const ThemeDropDownOptions = styled.div<DisplayPropType>`
 
 export const ThemeDropDownOption = styled.button<ActivePropType>`
   color: ${ props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary };
-  background-color: ${({ theme }) => theme.colors.background};
+  background-color: transparent;
   cursor: pointer;
   align-self: center;
   border: 0px solid;