Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues 2 Pull requests Releases 9 Packages Activity Actions

Repalced CSS Themes with styled-components on index, about and games

Browse source
This commit is contained in:
Neshura 2022-12-15 23:20:26 +01:00
parent dd1ab4bad9
commit d60c6ca3b5
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A
7 changed files with 166 additions and 197 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
components/styles/content.tsx Normal file
View file

@ -0,0 +1,98 @@
import Link from 'next/link'
import styled, { DefaultTheme } from 'styled-components'
import { CustomLink } from '../../interfaces/LinkTypes';
// needed for Online Status checks
// TODO: migrate to shared Status type for Games and Services
interface OnlinePropType {
status: string;
}
// replaces .title
export const PageTitle = styled.h1`
margin: 0;
line-height: 1.15;
font-size: 4rem;
text-align: center;
`
// replaces .description
export const PageDescription = styled.p`
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
text-align: center;
`
// replaces .grid
export const PageContentBox = styled.div`
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 80%;
`
// replaces .card & .contentcard
export const PageCard = styled.div`
margin: 1rem;
padding: 1rem;
text-align: center;
color: ${({ theme }) => theme.colors.primary};
text-decoration: none;
border: 1px solid;
border-radius: 10px;
border-color: ${({ theme }) => theme.colors.primary};
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
&:focus,:active,:hover {
color: ${({ theme }) => theme.colors.secondary};
border-color: ${({ theme }) => theme.colors.secondary};
}
`
const OnlineStatus = styled.p<OnlinePropType>`
color: ${props => {
let ret;
switch (props.status) {
case "Online":
ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.online;
break;
case "Loading":
ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.loading;
break;
case "Offline":
ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.offline;
break;
default:
ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.offline;
}
return ret;
}};
`
// Card Content Component for Games Page
export const PageCardContentGame = ({ content }: { content: CustomLink }) => {
return (
<>
<h2>{content.name}</h2>
<p>{content.desc}</p>
<p>{content.ip}</p>
<OnlineStatus status={content.status}>{content.status}</OnlineStatus>
</>
)
}
// Card Content Component for Services Page

14
components/themes.tsx
View file

@ -30,6 +30,9 @@ export const lightTheme: DefaultTheme = {
background: '#ffffff',
primary: '#00aaff',
secondary:'#ffaa00',
online: '#00ff00',
loading: '#ff5300',
offline: '#ff0000',
},
}
@ -40,7 +43,10 @@ export const darkTheme: DefaultTheme = {
background: '#1f1f1f',
primary: '#00aaff',
secondary:'#ffaa00',
},
online: '#00ff00',
loading: '#ff5300',
offline: '#ff0000',
},
}
export const amoledTheme: DefaultTheme = {
@ -50,6 +56,9 @@ export const amoledTheme: DefaultTheme = {
background: '#000000',
primary: '#00aaff',
secondary:'#ffaa00',
online: '#00ff00',
loading: '#ff5300',
offline: '#ff0000',
},
}
@ -60,5 +69,8 @@ export const amoled2Theme: DefaultTheme = {
background: '#000000',
primary: '#00ffaa',
secondary:'#aa00ff',
online: '#00ff00',
loading: '#ff5300',
offline: '#ff0000',
},
}

13
pages/about.tsx
View file

@ -1,20 +1,21 @@
import Head from 'next/head'
import styles from '/styles/Home.module.css'
import { PageDescription, PageTitle } from '../components/styles/content'
export default function About() {
return (
<>
<Head>
<title>Neshura Servers</title>
<title>Neshweb - About</title>
<meta charSet='utf-8' />
<link rel="icon" href="/favicon.ico" />
</Head>
<h1 className={styles.title}>
<PageTitle>
About
</h1>
<p className={styles.description}>
</PageTitle>
<PageDescription>
This website is primarily for managing my game servers in one spot
</p>
</PageDescription>
</>
)
}

39
pages/games.tsx
View file

@ -1,53 +1,50 @@
import Head from 'next/head'
import Link from 'next/link'
import styles from '/styles/Home.module.css'
import fsPromises from 'fs/promises'
import path from 'path'
import type { CustomLink, EntryList } from '../interfaces/LinkTypes'
import { PageContentBox, PageCard, PageDescription, PageTitle, PageCardContentGame } from '../components/styles/content'
import Link from 'next/link'
function Servers(props: EntryList) {
const serverList = props.games
return (
<>
<Head>
<title>Neshura Servers</title>
<title>Neshweb - Games</title>
<meta charSet='utf-8' />
<link rel="icon" href="/favicon.ico" />
</Head>
<h1 className={styles.title}>
<PageTitle>
Server List
</h1>
</PageTitle>
<p className={styles.description}>
<PageDescription>
Lists all available Services, probably up-to-date
</p>
<div className={styles.grid}>
</PageDescription>
<PageContentBox>
{Object.values(serverList).map((item: CustomLink) => {
if (item.href != null) {
return (
<Link className={styles.contentcard} key={item.name} href={item.href}>
<div className={styles.contenttitle}><h2>{item.name}</h2></div>
<div><p>{item.desc}</p></div>
<div><p>{item.ip}</p></div>
<div className={item.status == "Online" ? styles.contentonline : styles.contentoffline}><p>{item.status}</p></div>
</Link>
<PageCard key={item.name}>
<Link href={item.href}>
<PageCardContentGame content={item} />
</Link>
</PageCard>
)
}
else {
return (
<a key={item.name} className={styles.contentcardstatic}>
<div className={styles.contenttitle}><h2>{item.name}</h2></div>
<div><p>{item.desc}</p></div>
<div><p>{item.ip}</p></div>
<div className={item.status == "Online" ? styles.contentonline : styles.contentoffline}><p>{item.status}</p></div>
</a>
<PageCard key={item.name}>
<PageCardContentGame content={item} />
</PageCard>
)
}
}
)}
</div>
</PageContentBox>
</>
)
}

49
pages/index.tsx
View file

@ -1,39 +1,44 @@
import Head from 'next/head'
import Link from 'next/link'
import styles from '/styles/Home.module.css'
import Link from 'next/link';
import { PageTitle, PageDescription, PageContentBox, PageCard } from '../components/styles/content';
export default function Home() {
return (
<>
<Head>
<title>Neshweb - Home</title>
<title>Neshweb - Home</title>
<meta charSet='utf-8' />
<link rel="icon" href="/favicon.ico" />
</Head>
<h1 className={styles.title}>
<PageTitle>
Welcome to my Servers Webpage
</h1>
</PageTitle>
<p className={styles.description}>
<PageDescription>
Feel free to look around
</p>
<div className={styles.grid}>
<Link className={styles.card} key="about" href="/about">
<h2>About &rarr;</h2>
<p>Useless Info, don&apos;t bother</p>
</Link>
</PageDescription>
<PageContentBox>
<PageCard key="about">
<Link href="/about">
<h2>About &rarr;</h2>
<p>Useless Info, don&apos;t bother</p>
</Link>
</PageCard>
<Link className={styles.card} key="servers" href="/games">
<h2>Games &rarr;</h2>
<p>List of all available Servers</p>
</Link>
<PageCard key="servers">
<Link href="/games">
<h2>Games &rarr;</h2>
<p>List of all available Servers</p>
</Link>
</PageCard>
<Link className={styles.card} key="services" href="/services">
<h2>Services &rarr;</h2>
<p>List of available Services</p>
</Link>
</div>
<PageCard key="services">
<Link href="/services">
<h2>Services &rarr;</h2>
<p>List of available Services</p>
</Link>
</PageCard>
</PageContentBox>
</>
)
}

3
styled.d.ts vendored
View file

@ -8,6 +8,9 @@ declare module 'styled-components' {
background: string,
primary: string,
secondary: string,
online: string,
loading: string,
offline: string,
}
}
}

147
styles/Home.module.css
View file

@ -2,72 +2,6 @@
padding: 0 2rem;
}
.main {
color: var(--def-blue);
min-height: 100vh;
padding: 1rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.navbar {
display: flex;
flex: 1;
padding: 2rem 0;
border-bottom: 1px solid var(--def-blue);
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.navelem {
width: auto;
color: var(--def-blue);
margin: 0.2rem;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
flex-grow: 0.05;
}
.navelem:hover {
color: var(--def-orange);
background-color: var(--black-1e);
}
.navelem_active {
width: auto;
color: var(--def-orange);
margin: 0.2rem;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
flex-grow: 0.05;
}
.footer {
color: var(--def-blue);
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid var(--def-blue);
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.title a {
color: var(--def-orange);
text-decoration: none;
@ -79,23 +13,6 @@
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: var(--black-1e);
border-radius: 5px;
@ -105,39 +22,6 @@
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 80%;
}
.statusOffline {
color: var(--def-red);
}
.statusOnline {
color: var(--def-green);
}
.statusLoading {
color: var(--def-orange);
}
.contentcard {
margin: 1rem;
padding: 1rem;
text-align: center;
color: inherit;
text-decoration: none;
border: 1px solid var(--black-2d);
border-radius: 10px;
border-color: var(--def-blue);
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
.contentcardstatic {
margin: 1rem;
padding: 1rem;
@ -177,37 +61,6 @@
height: 1.5rem;
}
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid var(--black-2d);
border-radius: 10px;
border-color: var(--def-blue);
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
.card:hover,
.card:focus,
.card:active {
color: var(--def-orange);
border-color: var(--def-orange);
}
.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.cardwarn {
color: var(--def-orange);
}