moved styles outside the class and fixed react error #130 where site doesn't work on production mode
This commit is contained in:
parent
cdbe754071
commit
cd8cbba973
11 changed files with 431 additions and 438 deletions
|
|
@ -4,72 +4,72 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons"
|
|||
import styled from "styled-components"
|
||||
import theming from "../theming"
|
||||
|
||||
export default class Footer extends React.Component {
|
||||
StyledFooter = styled.footer`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1px; /* footer goes outside the page by 1 px for some reason */
|
||||
padding: 50px 10px;
|
||||
background-color: white;
|
||||
background-color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "white",
|
||||
dark: "black",
|
||||
})};
|
||||
const StyledFooter = styled.footer`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1px; /* footer goes outside the page by 1 px for some reason */
|
||||
padding: 50px 10px;
|
||||
background-color: white;
|
||||
background-color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "white",
|
||||
dark: "black",
|
||||
})};
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "black",
|
||||
dark: "white",
|
||||
})};
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.logo {
|
||||
color: gray;
|
||||
}
|
||||
`
|
||||
|
||||
const StyledLink = styled.a`
|
||||
width: 30px;
|
||||
font-size: 2rem;
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "lightgrey",
|
||||
dark: "grey",
|
||||
})};
|
||||
|
||||
&:hover {
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "black",
|
||||
dark: "white",
|
||||
})};
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.logo {
|
||||
color: gray;
|
||||
}
|
||||
`
|
||||
}
|
||||
`
|
||||
|
||||
StyledLink = styled.a`
|
||||
width: 30px;
|
||||
font-size: 2rem;
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "lightgrey",
|
||||
dark: "grey",
|
||||
})};
|
||||
|
||||
&:hover {
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "black",
|
||||
dark: "white",
|
||||
})};
|
||||
}
|
||||
`
|
||||
|
||||
StyledStrong = styled.strong`
|
||||
font-size: 1.1rem;
|
||||
`
|
||||
const StyledStrong = styled.strong`
|
||||
font-size: 1.1rem;
|
||||
`
|
||||
|
||||
export default class Footer extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<this.StyledFooter>
|
||||
<StyledFooter>
|
||||
<div className="logo">
|
||||
Copyright © develo
|
||||
<this.StyledStrong>p</this.StyledStrong>omp
|
||||
<StyledStrong>p</StyledStrong>omp
|
||||
</div>
|
||||
|
||||
<div className="icons">
|
||||
<this.StyledLink
|
||||
<StyledLink
|
||||
href="https://github.com/developomp/developomp-site"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faGithub} />
|
||||
</this.StyledLink>
|
||||
</StyledLink>
|
||||
</div>
|
||||
</this.StyledFooter>
|
||||
</StyledFooter>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,22 +8,22 @@ import theming from "../theming"
|
|||
|
||||
import { LanguageContext } from "../LangaugeContext"
|
||||
|
||||
const StyledThemeButton = styled.div<StyledThemeButtonProps>`
|
||||
${theming.styles.navbarButtonStyle}
|
||||
${(props) =>
|
||||
props.language == "en"
|
||||
? ""
|
||||
: "transform: scaleX(-1);\
|
||||
-moz-transform: scaleX(-1);\
|
||||
-webkit-transform: scaleX(-1);\
|
||||
-ms-transform: scaleX(-1);"};
|
||||
`
|
||||
|
||||
interface StyledThemeButtonProps {
|
||||
language: string
|
||||
}
|
||||
|
||||
export default class LanguageToggleButton extends React.Component {
|
||||
StyledThemeButton = styled.div<StyledThemeButtonProps>`
|
||||
${theming.styles.navbarButtonStyle}
|
||||
${(props) =>
|
||||
props.language == "en"
|
||||
? ""
|
||||
: "transform: scaleX(-1);\
|
||||
-moz-transform: scaleX(-1);\
|
||||
-webkit-transform: scaleX(-1);\
|
||||
-ms-transform: scaleX(-1);"};
|
||||
`
|
||||
|
||||
languageName = (language) => {
|
||||
let name = "English"
|
||||
if (language == "kr") name = "Korean"
|
||||
|
|
@ -35,14 +35,14 @@ export default class LanguageToggleButton extends React.Component {
|
|||
<LanguageContext.Consumer>
|
||||
{({ language, toggleLanguage }) => (
|
||||
<>
|
||||
<this.StyledThemeButton
|
||||
<StyledThemeButton
|
||||
data-tip
|
||||
data-for="language"
|
||||
onClick={toggleLanguage}
|
||||
language={language}
|
||||
>
|
||||
<FontAwesomeIcon icon={faLanguage} />
|
||||
</this.StyledThemeButton>
|
||||
</StyledThemeButton>
|
||||
<ReactTooltip id="language" type="dark" effect="solid">
|
||||
<span>
|
||||
Using {this.languageName(language)} language
|
||||
|
|
|
|||
|
|
@ -13,82 +13,83 @@ import Sidebar from "./Sidebar"
|
|||
import ThemeToggleButton from "./ThemeToggleButton"
|
||||
import LanguageToggleButton from "./LanguageToggleButton"
|
||||
|
||||
const StyledNav = styled.nav`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 2rem;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
background-color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: theming.light.backgroundColor0,
|
||||
dark: theming.dark.backgroundColor0,
|
||||
})};
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: theming.light.color0,
|
||||
dark: theming.dark.color0,
|
||||
})};
|
||||
box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
}
|
||||
`
|
||||
|
||||
const StyledNavLinks = styled.div`
|
||||
@media only screen and (max-width: ${theming.size.screen_size1}) {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
|
||||
const StyledImg = styled.img`
|
||||
height: 2rem;
|
||||
margin: 1rem;
|
||||
`
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
${theming.styles.navbarButtonStyle}
|
||||
`
|
||||
|
||||
const StyledALink = styled.a`
|
||||
${theming.styles.navbarButtonStyle}
|
||||
`
|
||||
|
||||
export default class Navbar extends React.Component {
|
||||
StyledNav = styled.nav`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 2rem;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
background-color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: theming.light.backgroundColor0,
|
||||
dark: theming.dark.backgroundColor0,
|
||||
})};
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: theming.light.color0,
|
||||
dark: theming.dark.color0,
|
||||
})};
|
||||
box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
|
||||
|
||||
.right {
|
||||
margin-left: auto;
|
||||
}
|
||||
`
|
||||
|
||||
StyledNavLinks = styled.div`
|
||||
@media only screen and (max-width: ${theming.size.screen_size1}) {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
|
||||
StyledImg = styled.img`
|
||||
height: 2rem;
|
||||
margin: 1rem;
|
||||
`
|
||||
|
||||
StyledLink = styled(Link)`
|
||||
${theming.styles.navbarButtonStyle}
|
||||
`
|
||||
|
||||
StyledALink = styled.a`
|
||||
${theming.styles.navbarButtonStyle}
|
||||
`
|
||||
render() {
|
||||
return (
|
||||
<this.StyledNav>
|
||||
<StyledNav>
|
||||
<Link to="/">
|
||||
<this.StyledImg
|
||||
<StyledImg
|
||||
src={process.env.PUBLIC_URL + "/icon/icon_circle.svg"}
|
||||
/>
|
||||
</Link>
|
||||
<this.StyledNavLinks>
|
||||
<StyledNavLinks>
|
||||
{NavbarData.map((item, index) => (
|
||||
<this.StyledLink key={index} to={item.path}>
|
||||
<StyledLink key={index} to={item.path}>
|
||||
{item.title}
|
||||
</this.StyledLink>
|
||||
</StyledLink>
|
||||
))}
|
||||
</this.StyledNavLinks>
|
||||
</StyledNavLinks>
|
||||
|
||||
<ThemeToggleButton />
|
||||
<LanguageToggleButton />
|
||||
|
||||
<this.StyledALink
|
||||
<StyledALink
|
||||
data-tip
|
||||
data-for="github"
|
||||
href="https://github.com/developomp/developomp-site"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faGithub} />
|
||||
</this.StyledALink>
|
||||
</StyledALink>
|
||||
<ReactTooltip id="github" type="dark" effect="solid">
|
||||
<span>View source code</span>
|
||||
</ReactTooltip>
|
||||
|
||||
<SearchBox />
|
||||
<Sidebar />
|
||||
</this.StyledNav>
|
||||
</StyledNav>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,57 +5,57 @@ import styled from "styled-components"
|
|||
|
||||
import theming from "../theming"
|
||||
|
||||
export default class Navbar extends React.Component {
|
||||
StyledSearchBoxContainer = styled.div`
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
margin: 0.5rem;
|
||||
align-items: center;
|
||||
const StyledSearchBoxContainer = styled.div`
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
margin: 0.5rem;
|
||||
align-items: center;
|
||||
background-color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "whitesmoke",
|
||||
dark: "#2F3136",
|
||||
})};
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "black",
|
||||
dark: "#CFD0D0",
|
||||
})};
|
||||
|
||||
&:hover {
|
||||
background-color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "whitesmoke",
|
||||
dark: "#2F3136",
|
||||
})};
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "black",
|
||||
dark: "#CFD0D0",
|
||||
light: "#eeeeee",
|
||||
dark: "#36393F",
|
||||
})};
|
||||
}
|
||||
`
|
||||
|
||||
&:hover {
|
||||
background-color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "#eeeeee",
|
||||
dark: "#36393F",
|
||||
})};
|
||||
}
|
||||
`
|
||||
const StyledSearchBox = styled.input`
|
||||
width: 80%;
|
||||
border: none;
|
||||
border-right: 1rem;
|
||||
outline: none;
|
||||
padding: 10px 10px;
|
||||
text-decoration: none;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
`
|
||||
|
||||
StyledSearchBox = styled.input`
|
||||
width: 80%;
|
||||
border: none;
|
||||
border-right: 1rem;
|
||||
outline: none;
|
||||
padding: 10px 10px;
|
||||
text-decoration: none;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
`
|
||||
|
||||
StyledSearchButton = styled(FontAwesomeIcon)`
|
||||
cursor: pointer;
|
||||
`
|
||||
const StyledSearchButton = styled(FontAwesomeIcon)`
|
||||
cursor: pointer;
|
||||
`
|
||||
|
||||
export default class Navbar extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<this.StyledSearchBoxContainer>
|
||||
<this.StyledSearchBox
|
||||
<StyledSearchBoxContainer>
|
||||
<StyledSearchBox
|
||||
type="text"
|
||||
name="search"
|
||||
placeholder="Search"
|
||||
/>
|
||||
<this.StyledSearchButton icon={faSearch} />
|
||||
</this.StyledSearchBoxContainer>
|
||||
<StyledSearchButton icon={faSearch} />
|
||||
</StyledSearchBoxContainer>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,73 @@ import NavbarData, { Item } from "../data/NavbarData"
|
|||
|
||||
import SubMenu from "./SubMenu"
|
||||
|
||||
const CommonSidebarToggleButtonStyle = css`
|
||||
${theming.styles.navbarButtonStyle}
|
||||
width: 1.5rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
@media only screen and (min-width: ${theming.size.screen_size1}) {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
|
||||
const StyledToggleSidebarButton = styled.div`
|
||||
${CommonSidebarToggleButtonStyle}
|
||||
`
|
||||
|
||||
const StyledToggleSidebarButton2 = styled.div`
|
||||
${CommonSidebarToggleButtonStyle}
|
||||
border-radius: 0;
|
||||
margin: auto;
|
||||
width: 90%;
|
||||
height: 2rem;
|
||||
font-size: 1.1rem;
|
||||
`
|
||||
|
||||
const StyledOverlay = styled.div<SidebarState>`
|
||||
display: ${(props) => (props.isSidebarOpen ? "block" : "none")};
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
transition-property: opacity;
|
||||
background-color: rgba(0, 0, 0, 25%);
|
||||
|
||||
* {
|
||||
overflow: scroll;
|
||||
}
|
||||
`
|
||||
|
||||
const SidebarNav = styled.nav<SidebarState>`
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: ${(props) => (props.isSidebarOpen ? "0" : "-100%")};
|
||||
transition: 350ms;
|
||||
z-index: 30;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
background-color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: theming.light.backgroundColor0,
|
||||
dark: theming.dark.backgroundColor0,
|
||||
})};
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: theming.light.color0,
|
||||
dark: theming.dark.color0,
|
||||
})};
|
||||
`
|
||||
|
||||
const SidebarWrap = styled.div`
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
interface SidebarProps {}
|
||||
interface SidebarState {
|
||||
isSidebarOpen: boolean
|
||||
|
|
@ -31,82 +98,15 @@ export default class Sidebar extends React.Component<
|
|||
document.body.style.overflow = this.state.isSidebarOpen ? "" : "hidden"
|
||||
}
|
||||
|
||||
CommonSidebarToggleButtonStyle = css`
|
||||
${theming.styles.navbarButtonStyle}
|
||||
width: 1.5rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
@media only screen and (min-width: ${theming.size.screen_size1}) {
|
||||
display: none;
|
||||
}
|
||||
`
|
||||
|
||||
StyledToggleSidebarButton = styled.div`
|
||||
${this.CommonSidebarToggleButtonStyle}
|
||||
`
|
||||
|
||||
StyledToggleSidebarButton2 = styled.div`
|
||||
${this.CommonSidebarToggleButtonStyle}
|
||||
border-radius: 0;
|
||||
margin: auto;
|
||||
width: 90%;
|
||||
height: 2rem;
|
||||
font-size: 1.1rem;
|
||||
`
|
||||
|
||||
StyledOverlay = styled.div<SidebarState>`
|
||||
display: ${(props) => (props.isSidebarOpen ? "block" : "none")};
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
transition-property: opacity;
|
||||
background-color: rgba(0, 0, 0, 25%);
|
||||
|
||||
* {
|
||||
overflow: scroll;
|
||||
}
|
||||
`
|
||||
|
||||
SidebarNav = styled.nav<SidebarState>`
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: ${(props) => (props.isSidebarOpen ? "0" : "-100%")};
|
||||
transition: 350ms;
|
||||
z-index: 30;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
background-color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: theming.light.backgroundColor0,
|
||||
dark: theming.dark.backgroundColor0,
|
||||
})};
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: theming.light.color0,
|
||||
dark: theming.dark.color0,
|
||||
})};
|
||||
`
|
||||
|
||||
SidebarWrap = styled.div`
|
||||
width: 100%;
|
||||
`
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<this.StyledOverlay
|
||||
<StyledOverlay
|
||||
isSidebarOpen={this.state.isSidebarOpen}
|
||||
onClick={this.toggleSidebar}
|
||||
/>
|
||||
|
||||
<this.StyledToggleSidebarButton
|
||||
<StyledToggleSidebarButton
|
||||
data-tip
|
||||
data-for="sidebar"
|
||||
onClick={this.toggleSidebar}
|
||||
|
|
@ -115,21 +115,21 @@ export default class Sidebar extends React.Component<
|
|||
<ReactTooltip id="sidebar" type="dark" effect="solid">
|
||||
<span>open sidebar</span>
|
||||
</ReactTooltip>
|
||||
</this.StyledToggleSidebarButton>
|
||||
</StyledToggleSidebarButton>
|
||||
|
||||
<this.SidebarNav isSidebarOpen={this.state.isSidebarOpen}>
|
||||
<this.SidebarWrap>
|
||||
<this.StyledToggleSidebarButton2
|
||||
<SidebarNav isSidebarOpen={this.state.isSidebarOpen}>
|
||||
<SidebarWrap>
|
||||
<StyledToggleSidebarButton2
|
||||
onClick={this.toggleSidebar}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTimes}></FontAwesomeIcon>{" "}
|
||||
Close
|
||||
</this.StyledToggleSidebarButton2>
|
||||
</StyledToggleSidebarButton2>
|
||||
{NavbarData.map((item: Item, index) => {
|
||||
return <SubMenu item={item} key={index} />
|
||||
})}
|
||||
</this.SidebarWrap>
|
||||
</this.SidebarNav>
|
||||
</SidebarWrap>
|
||||
</SidebarNav>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,78 @@
|
|||
import React from "react"
|
||||
import styled, { keyframes } from "styled-components"
|
||||
|
||||
const motion = keyframes`
|
||||
from {
|
||||
transform: scale(1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: scale(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
`
|
||||
|
||||
const spin = keyframes`
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
`
|
||||
|
||||
const Ball = styled.div<BallInterface>`
|
||||
float: left;
|
||||
clear: right;
|
||||
margin: ${(props) => props.size / 15}px;
|
||||
width: ${(props) => props.size / 5}px;
|
||||
height: ${(props) => props.size / 5}px;
|
||||
border-radius: 2px;
|
||||
background-color: lightgrey;
|
||||
animation-name: ${motion};
|
||||
animation-direction: alternate;
|
||||
animation-duration: 800ms;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
/* use a for loop here? */
|
||||
&:nth-child(1) {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: 600ms;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
animation-delay: 600ms;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
animation-delay: 800ms;
|
||||
}
|
||||
&:nth-child(7) {
|
||||
animation-delay: 600ms;
|
||||
}
|
||||
&:nth-child(8) {
|
||||
animation-delay: 800ms;
|
||||
}
|
||||
&:nth-child(9) {
|
||||
animation-delay: 1000ms;
|
||||
}
|
||||
`
|
||||
|
||||
const Wrapper = styled.div`
|
||||
margin: 5rem auto 0 auto;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
animation-timing-function: linear;
|
||||
animation: ${spin} 10s infinite;
|
||||
`
|
||||
|
||||
interface BallInterface {
|
||||
size: number
|
||||
key: string
|
||||
|
|
@ -18,78 +90,6 @@ interface SpinnerProps {
|
|||
export default class Spinner extends React.Component<SpinnerProps> {
|
||||
balls: unknown[] = []
|
||||
|
||||
motion = keyframes`
|
||||
from {
|
||||
transform: scale(1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: scale(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
`
|
||||
|
||||
spin = keyframes`
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
`
|
||||
|
||||
Ball = styled.div<BallInterface>`
|
||||
float: left;
|
||||
clear: right;
|
||||
margin: ${(props) => props.size / 15}px;
|
||||
width: ${(props) => props.size / 5}px;
|
||||
height: ${(props) => props.size / 5}px;
|
||||
border-radius: 2px;
|
||||
background-color: lightgrey;
|
||||
animation-name: ${this.motion};
|
||||
animation-direction: alternate;
|
||||
animation-duration: 800ms;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
/* use a for loop here? */
|
||||
&:nth-child(1) {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: 600ms;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
animation-delay: 600ms;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
animation-delay: 800ms;
|
||||
}
|
||||
&:nth-child(7) {
|
||||
animation-delay: 600ms;
|
||||
}
|
||||
&:nth-child(8) {
|
||||
animation-delay: 800ms;
|
||||
}
|
||||
&:nth-child(9) {
|
||||
animation-delay: 1000ms;
|
||||
}
|
||||
`
|
||||
|
||||
Wrapper = styled.div`
|
||||
margin: 5rem auto 0 auto;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
animation-timing-function: linear;
|
||||
animation: ${this.spin} 10s infinite;
|
||||
`
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
|
|
@ -99,7 +99,7 @@ export default class Spinner extends React.Component<SpinnerProps> {
|
|||
for (let i = 0; i < countBallsInLine; i++) {
|
||||
for (let j = 0; j < countBallsInLine; j++) {
|
||||
this.balls.push(
|
||||
<this.Ball
|
||||
<Ball
|
||||
size={this.props.size}
|
||||
key={keyValue.toString()}
|
||||
index={keyValue}
|
||||
|
|
@ -111,6 +111,6 @@ export default class Spinner extends React.Component<SpinnerProps> {
|
|||
}
|
||||
|
||||
render() {
|
||||
return <this.Wrapper>{this.balls}</this.Wrapper>
|
||||
return <Wrapper>{this.balls}</Wrapper>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,39 @@ import styled from "styled-components"
|
|||
import theming from "../theming"
|
||||
import { Item } from "../data/NavbarData"
|
||||
|
||||
const SidebarLink = styled(Link)`
|
||||
${theming.styles.navbarButtonStyle};
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
justify-content: space-between;
|
||||
height: 2rem;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
list-style: none;
|
||||
`
|
||||
|
||||
const SidebarLabel = styled.span`
|
||||
margin-left: 16px;
|
||||
`
|
||||
|
||||
const DropdownLink = styled(Link)`
|
||||
background: #414757;
|
||||
height: 60px;
|
||||
padding-left: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #f5f5f5;
|
||||
font-size: 18px;
|
||||
|
||||
&:hover {
|
||||
background: #632ce4;
|
||||
cursor: pointer;
|
||||
}
|
||||
`
|
||||
|
||||
interface SubMenuProps {
|
||||
item: Item
|
||||
}
|
||||
|
|
@ -16,39 +49,6 @@ export default class SubMenu extends React.Component<
|
|||
SubMenuProps,
|
||||
SubMenuState
|
||||
> {
|
||||
SidebarLink = styled(Link)`
|
||||
${theming.styles.navbarButtonStyle};
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
justify-content: space-between;
|
||||
height: 2rem;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
list-style: none;
|
||||
`
|
||||
|
||||
SidebarLabel = styled.span`
|
||||
margin-left: 16px;
|
||||
`
|
||||
|
||||
DropdownLink = styled(Link)`
|
||||
background: #414757;
|
||||
height: 60px;
|
||||
padding-left: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: #f5f5f5;
|
||||
font-size: 18px;
|
||||
|
||||
&:hover {
|
||||
background: #632ce4;
|
||||
cursor: pointer;
|
||||
}
|
||||
`
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
|
|
@ -61,15 +61,13 @@ export default class SubMenu extends React.Component<
|
|||
render() {
|
||||
return (
|
||||
<>
|
||||
<this.SidebarLink
|
||||
<SidebarLink
|
||||
to={this.props.item.path}
|
||||
onClick={this.props.item.subNav && this.showSubNav}
|
||||
>
|
||||
<div>
|
||||
{this.props.item.icon}
|
||||
<this.SidebarLabel>
|
||||
{this.props.item.title}
|
||||
</this.SidebarLabel>
|
||||
<SidebarLabel>{this.props.item.title}</SidebarLabel>
|
||||
</div>
|
||||
<div>
|
||||
{this.props.item.subNav && this.state.isSubNavOpen
|
||||
|
|
@ -78,7 +76,7 @@ export default class SubMenu extends React.Component<
|
|||
? this.props.item.iconClosed
|
||||
: null}
|
||||
</div>
|
||||
</this.SidebarLink>
|
||||
</SidebarLink>
|
||||
|
||||
{/* not used as of the moment */}
|
||||
{this.state.isSubNavOpen && // check if subNav is open
|
||||
|
|
@ -86,12 +84,10 @@ export default class SubMenu extends React.Component<
|
|||
this.props.item.subNav.map((item, index) => {
|
||||
// shows all items in subNav
|
||||
return (
|
||||
<this.DropdownLink to={item.path} key={index}>
|
||||
<DropdownLink to={item.path} key={index}>
|
||||
{item.icon}
|
||||
<this.SidebarLabel>
|
||||
{item.title}
|
||||
</this.SidebarLabel>
|
||||
</this.DropdownLink>
|
||||
<SidebarLabel>{item.title}</SidebarLabel>
|
||||
</DropdownLink>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -6,24 +6,25 @@ import ReactTooltip from "react-tooltip"
|
|||
|
||||
import theming from "../theming"
|
||||
|
||||
export default class Navbar extends React.Component {
|
||||
StyledThemeButton = styled.div`
|
||||
${theming.styles.navbarButtonStyle}
|
||||
${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "",
|
||||
dark: "transform: scaleX(-1);\
|
||||
const StyledThemeButton = styled.div`
|
||||
${theming.styles.navbarButtonStyle}
|
||||
${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "",
|
||||
dark: "transform: scaleX(-1);\
|
||||
-moz-transform: scaleX(-1);\
|
||||
-webkit-transform: scaleX(-1);\
|
||||
-ms-transform: scaleX(-1);",
|
||||
})};
|
||||
`
|
||||
})};
|
||||
`
|
||||
|
||||
export default class Navbar extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<ThemeConsumer>
|
||||
{({ currentTheme, setTheme }) => (
|
||||
<>
|
||||
<this.StyledThemeButton
|
||||
<StyledThemeButton
|
||||
data-tip
|
||||
data-for="theme"
|
||||
className="right"
|
||||
|
|
@ -39,7 +40,7 @@ export default class Navbar extends React.Component {
|
|||
{currentTheme == "light" && (
|
||||
<FontAwesomeIcon icon={faSun} />
|
||||
)}
|
||||
</this.StyledThemeButton>
|
||||
</StyledThemeButton>
|
||||
<ReactTooltip id="theme" type="dark" effect="solid">
|
||||
<span>Using {currentTheme} theme</span>
|
||||
</ReactTooltip>
|
||||
|
|
|
|||
|
|
@ -4,22 +4,22 @@ import { Helmet } from "react-helmet-async"
|
|||
|
||||
import theming from "../theming"
|
||||
|
||||
const StyledNotFound = styled.div`
|
||||
margin: auto;
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "#111111",
|
||||
dark: "#EEEEEE",
|
||||
})};
|
||||
`
|
||||
|
||||
const Styled404 = styled.h1`
|
||||
font-size: 3rem;
|
||||
`
|
||||
|
||||
export default class NotFound extends React.Component {
|
||||
StyledNotFound = styled.div`
|
||||
margin: auto;
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "#111111",
|
||||
dark: "#EEEEEE",
|
||||
})};
|
||||
`
|
||||
|
||||
Styled404 = styled.h1`
|
||||
font-size: 3rem;
|
||||
`
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -38,10 +38,10 @@ export default class NotFound extends React.Component {
|
|||
content="Page does not exist"
|
||||
/>
|
||||
</Helmet>
|
||||
<this.StyledNotFound className="card main-content">
|
||||
<this.Styled404>404</this.Styled404>
|
||||
<StyledNotFound className="card main-content">
|
||||
<Styled404>404</Styled404>
|
||||
the page you are looking for does not exist. :(
|
||||
</this.StyledNotFound>
|
||||
</StyledNotFound>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,13 +2,13 @@ import React from "react"
|
|||
import styled from "styled-components"
|
||||
import { Helmet } from "react-helmet-async"
|
||||
|
||||
const StyledPortfolio = styled.div``
|
||||
|
||||
const StyledH1 = styled.h1`
|
||||
font-size: 3rem;
|
||||
`
|
||||
|
||||
export default class Portfolio extends React.Component {
|
||||
StyledPortfolio = styled.div``
|
||||
|
||||
StyledH1 = styled.h1`
|
||||
font-size: 3rem;
|
||||
`
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -30,10 +30,10 @@ export default class Portfolio extends React.Component {
|
|||
content="developomp's Portfolio"
|
||||
/>
|
||||
</Helmet>
|
||||
<this.StyledPortfolio className="card main-content">
|
||||
<this.StyledH1>Portfolio</this.StyledH1>
|
||||
<StyledPortfolio className="card main-content">
|
||||
<StyledH1>Portfolio</StyledH1>
|
||||
My projects
|
||||
</this.StyledPortfolio>
|
||||
</StyledPortfolio>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,49 @@ import { Helmet } from "react-helmet-async"
|
|||
import theming from "../theming"
|
||||
import pages from "../pages.json"
|
||||
|
||||
const StyledPostList = styled.div`
|
||||
padding-top: 2rem;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "#111111",
|
||||
dark: "#EEEEEE",
|
||||
})};
|
||||
`
|
||||
|
||||
const StyledH1 = styled.h1`
|
||||
margin-bottom: 20px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
`
|
||||
|
||||
const StyledTitle = styled.h1`
|
||||
font-size: 2rem;
|
||||
font-style: bold;
|
||||
`
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
text-decoration: none;
|
||||
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "black",
|
||||
dark: "white",
|
||||
})};
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
`
|
||||
|
||||
const StyledPostCard = styled.div`
|
||||
box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
|
||||
text-align: left;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px 20px;
|
||||
`
|
||||
|
||||
interface HomeProps {
|
||||
title: string
|
||||
howMany?: number
|
||||
|
|
@ -16,49 +59,6 @@ export default class PostList extends React.Component<HomeProps> {
|
|||
h1Text: string
|
||||
PostCards: Array<unknown> = []
|
||||
|
||||
StyledPostList = styled.div`
|
||||
padding-top: 2rem;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "#111111",
|
||||
dark: "#EEEEEE",
|
||||
})};
|
||||
`
|
||||
|
||||
StyledH1 = styled.h1`
|
||||
margin-bottom: 20px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
`
|
||||
|
||||
StyledTitle = styled.h1`
|
||||
font-size: 2rem;
|
||||
font-style: bold;
|
||||
`
|
||||
|
||||
StyledLink = styled(Link)`
|
||||
text-decoration: none;
|
||||
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "black",
|
||||
dark: "white",
|
||||
})};
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
`
|
||||
|
||||
StyledPostCard = styled.div`
|
||||
box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
|
||||
text-align: left;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px 20px;
|
||||
`
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
|
|
@ -74,17 +74,14 @@ export default class PostList extends React.Component<HomeProps> {
|
|||
const post = pages[pagePath]
|
||||
|
||||
this.PostCards.push(
|
||||
<this.StyledPostCard
|
||||
key={pagePath}
|
||||
className="card main-content"
|
||||
>
|
||||
<this.StyledTitle>
|
||||
<this.StyledLink to={pagePath}>
|
||||
<StyledPostCard key={pagePath} className="card main-content">
|
||||
<StyledTitle>
|
||||
<StyledLink to={pagePath}>
|
||||
{post.meta?.title
|
||||
? post.meta.title
|
||||
: "Unknown title"}
|
||||
</this.StyledLink>
|
||||
</this.StyledTitle>
|
||||
</StyledLink>
|
||||
</StyledTitle>
|
||||
<small>
|
||||
Published on{" "}
|
||||
{post.meta?.date ? post.meta.date : "Unknown date"} by{" "}
|
||||
|
|
@ -103,11 +100,9 @@ export default class PostList extends React.Component<HomeProps> {
|
|||
}}
|
||||
></div>
|
||||
<small>
|
||||
<this.StyledLink to={pagePath}>
|
||||
Read more
|
||||
</this.StyledLink>
|
||||
<StyledLink to={pagePath}>Read more</StyledLink>
|
||||
</small>
|
||||
</this.StyledPostCard>
|
||||
</StyledPostCard>
|
||||
)
|
||||
howMany--
|
||||
}
|
||||
|
|
@ -129,11 +124,11 @@ export default class PostList extends React.Component<HomeProps> {
|
|||
<meta property="og:description" content="" />
|
||||
</Helmet>
|
||||
|
||||
<this.StyledPostList>
|
||||
<this.StyledH1>{this.h1Text}</this.StyledH1>
|
||||
<StyledPostList>
|
||||
<StyledH1>{this.h1Text}</StyledH1>
|
||||
<br />
|
||||
{this.PostCards}
|
||||
</this.StyledPostList>
|
||||
</StyledPostList>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue