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

Added navbar and theme selector styles

Browse source
This commit is contained in:
Neshura 2022-12-15 21:23:11 +01:00
parent aa2b288906
commit 3781b4ae10
No known key found for this signature in database
GPG key ID: ACDF5B6EBECF6B0A
3 changed files with 115 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
components/styles/generic.tsx
View file

@ -1,8 +1,36 @@
import styled from 'styled-components'
const Page = styled.div`
export const Page = styled.div`
width: 100%;
background-color: ${({ theme }) => theme.colors.background};
`
export { Page }
export const Main = styled.main`
color: ${({ theme }) => theme.colors.primary };
min-height: 100vh;
padding: 1rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
`
export const Footer = styled.footer`
color: ${({ theme }) => theme.colors.primary };
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid ${({ theme }) => theme.colors.primary };
justify-content: center;
align-items: center;
`
// TODO
/* .footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
} */

31
components/styles/navbar.tsx Normal file
View file

@ -0,0 +1,31 @@
import styled from 'styled-components'
import Link from 'next/link';
interface ActivePropType {
active?: false | true;
}
export const NavBar = styled.nav`
display: flex;
flex: 1;
padding: 2rem 0;
border-bottom: 1px solid ${({ theme }) => theme.colors.primary};
flex-wrap: nowrap;
justify-content: center;
align-items: center;
`
export const NavLink = styled(Link)<ActivePropType>`
color: ${props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary};
margin: 0.2rem;
border: 1px solid;
padding: 0.2rem 0.5rem;
display: flex;
justify-content: center;
align-items: center;
&:hover {
color: ${({ theme }) => theme.colors.secondary};
}
`

54
components/styles/themedropdown.tsx Normal file
View file

@ -0,0 +1,54 @@
import styled from 'styled-components';
interface DisplayPropType {
show?: false | true;
}
interface ActivePropType {
active?: false | true;
}
export const ThemeDropDown = styled.div`
min-width: 180px;
color: ${({ theme }) => theme.colors.primary}
display: flex;
flex-direction: column;
`
export const ThemeDropDownButton = styled.button`
width: 100%;
border: 1px solid;
background-color: ${({ theme }) => theme.colors.background};
padding: 0.2rem 0.5rem;
cursor: pointer;
color: ${({ theme }) => theme.colors.primary};
&:hover {
color: ${({ theme }) => theme.colors.secondary};
}
&:focus {
color: ${({ theme }) => theme.colors.secondary};
}
`
export const ThemeDropDownOptions = styled.div<DisplayPropType>`
color: ${({ theme }) => theme.colors.primary};
background-color: ${({ theme }) => theme.colors.background};
display: ${ props => props.show ? "flex" : "none" };
flex-direction: column;
min-width: 160px;
z-index: 1;
`
export const ThemeDropDownOption = styled.button<ActivePropType>`
color: ${ props => props.active ? ({ theme }) => theme.colors.secondary : ({ theme }) => theme.colors.primary };
background-color: ${({ theme }) => theme.colors.background};
border: 1px solid;
padding: 0.2rem 0.5rem;
text-decoration: none;
&:hover {
color: ${({ theme }) => theme.colors.secondary};
}
`