Skip to content

Commit 243794e

Browse files
author
Eugene
committed
new styling
1 parent 60e2ba7 commit 243794e

23 files changed

Lines changed: 214 additions & 134 deletions

File tree

‎package.json‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,29 @@
11
{
22
"name": "stopwatch",
33
"version": "0.1.0",
4+
"scripts": {
5+
"start": "react-scripts start",
6+
"build": "BUILD_PATH='./docs' react-scripts build"
7+
},
48
"dependencies": {
5-
"@types/node": "^16.11.7",
6-
"@types/react": "^17.0.34",
7-
"@types/react-dom": "^17.0.11",
89
"classnames": "^2.3.1",
910
"node-sass": "4.14.1",
1011
"react": "^17.0.2",
12+
"react-document-title": "^2.0.3",
1113
"react-dom": "^17.0.2",
1214
"react-router-dom": "^6.2.1",
1315
"react-scripts": "4.0.3",
1416
"react-slotify": "^0.1.7",
1517
"typescript": "^4.4.4"
1618
},
17-
"scripts": {
18-
"start": "react-scripts start",
19-
"build": "BUILD_PATH='./docs' react-scripts build"
19+
"devDependencies": {
20+
"@types/react-document-title": "^2.0.5",
21+
"@types/redux-logger": "^3.0.9",
22+
"@types/node": "^16.11.7",
23+
"@types/react": "^17.0.34",
24+
"@types/react-dom": "^17.0.11",
25+
"redux-devtools-extension": "^2.13.9",
26+
"redux-logger": "^3.0.6"
2027
},
2128
"eslintConfig": {
2229
"extends": [
@@ -35,10 +42,5 @@
3542
"last 1 firefox version",
3643
"last 1 safari version"
3744
]
38-
},
39-
"devDependencies": {
40-
"@types/redux-logger": "^3.0.9",
41-
"redux-devtools-extension": "^2.13.9",
42-
"redux-logger": "^3.0.6"
4345
}
4446
}

‎src/assets/scss/fonts.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
@font-face {
22
font-family: "Pacifico";
3-
src: url('../fonts/Pacifico.ttf');
4-
}
3+
src: url("../fonts/Pacifico.ttf");
4+
}

‎src/assets/scss/variables.scss‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
// color
2-
$accent-color: #0070f3;
3-
$accent-color-mid: #a7cefb;
4-
$accent-color-pale: #dfedfe;
5-
$second-color: #aaa;
2+
$color-primary: #007aff; // Apple systemBlue light
3+
$color-secondary: #c7c7cc; // Apple systemGray3 light
4+
$color-substrate: #f2f2f7; // Apple systemGray6 light
5+
$color-text: #1c1c1e; // Apple systemGray6 dark
66

77
// duration
8-
$transition-duration: 0.25s;
9-
$animation-duration: 0.5s;
10-
11-
// opacity
12-
$disabled-opacity: 0.5;
8+
$duration-t: 0.25s; // for transitions
139

1410
// size
1511
$size-sm: 4px; // small
1612
$size-md: 8px; // medium
1713
$size-lg: 16px; // large
1814
$size-xl: 32px; // extra large
15+
$size-mx: 64px; // maximum
16+
17+
// font size
18+
$font-size-sm: 14px;
19+
$font-size-md: 18px;
20+
$font-size-lg: 24px;
1921

2022
// shadow
2123
$shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.1); // medium
22-
$shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.2); // large
23-
24+
$shadow-lg: 0 8px 16px 0 rgba(0, 0, 0, 0.25); // large
25+
$shadow-xl: 0 16px 32px 0 rgba(0, 0, 0, 0.5); // extra large

‎src/components/App/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
}
1010

1111
&__page {
12+
padding: $size-xl 0;
1213
flex: 1;
1314
}
1415
}

‎src/components/App/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FunctionComponent } from "react";
22
import { Routes, Route } from "react-router-dom";
33

4-
import MainConfig from "../../config/Main";
4+
import mainConfig from "../../config/Main";
55
import Header from "../Header";
66
import Footer from "../Footer";
77
import HomePage from "../../pages/HomePage";
@@ -20,7 +20,7 @@ const App: FunctionComponent = () => {
2020
<Routes>
2121
<Route path="*" element={<NotFoundPage />} />
2222
<Route path="/" element={<HomePage />} />
23-
{MainConfig.projects.map((project, projectIndex) => {
23+
{mainConfig.projects.map((project, projectIndex) => {
2424
return (
2525
<Route
2626
key={projectIndex}

‎src/components/Footer/index.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
margin: 64px 0 0;
77

88
&__copyright {
9-
color: $second-color;
10-
font-size: 14px;
9+
color: $color-secondary;
10+
font-size: $font-size-sm;
1111
}
1212
}

‎src/components/Header/index.scss‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,33 @@
55
padding: $size-xl 0;
66

77
&__logo {
8-
font: 42px/150% Pacifico;
9-
color: $accent-color;
8+
color: $color-primary;
109
text-decoration: none;
10+
position: relative;
11+
display: inline-block;
1112

12-
&--link {
13-
&:hover {
14-
text-decoration: underline;
13+
h1, span {
14+
font: 42px/150% Pacifico;
15+
display: block;
16+
}
17+
18+
&::after {
19+
content: "";
20+
left: 0;
21+
bottom: $size-sm;
22+
height: $size-sm;
23+
width: 0;
24+
background-color: $color-primary;
25+
position: absolute;
26+
border-radius: 2px;
27+
opacity: 0;
28+
transition: width $duration-t, opacity $duration-t;
29+
}
30+
31+
&:hover {
32+
&::after {
33+
width: 100%;
34+
opacity: 1;
1535
}
1636
}
1737
}
@@ -20,9 +40,10 @@
2040
list-style: none;
2141
display: flex;
2242
justify-content: center;
43+
margin-top: $size-md;
2344
}
2445

2546
&__link {
26-
margin: 0 8px;
47+
margin: 0 $size-md;
2748
}
2849
}

‎src/components/Header/index.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,22 @@ import { FunctionComponent } from "react";
22
import { useLocation } from "react-router-dom";
33
import { Link as RouterLink } from "react-router-dom";
44

5-
import MainConfig from "../../config/Main";
5+
import mainConfig from "../../config/Main";
66
import Link from "../Link";
77
import "./index.scss";
88

99
const Header: FunctionComponent = () => {
1010
const location = useLocation();
1111

12-
console.log(location);
13-
1412
return (
1513
<header className="header">
16-
{location.pathname === "/" ? (
17-
<h1 className="header__logo">
18-
{MainConfig.title}
19-
</h1>
20-
) : (
21-
<RouterLink to="/" className="header__logo header__logo--link">
22-
{MainConfig.title}
23-
</RouterLink>
24-
)}
14+
<RouterLink to="/" className="header__logo">
15+
{location.pathname === "/" ? (
16+
<h1>{mainConfig.title}</h1>
17+
) : (
18+
<span>{mainConfig.title}</span>
19+
)}
20+
</RouterLink>
2521
<ul className="header__links">
2622
<li className="header__link">
2723
<Link text="GitHub" href="https://github.com/ModuleArt" />

‎src/components/Link/index.scss‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,35 @@
33
.link {
44
display: inline-block;
55
text-decoration: none;
6-
color: $accent-color;
6+
color: $color-primary;
77
position: relative;
88

9+
&__text {
10+
transition: transform $duration-t;
11+
display: block;
12+
}
13+
914
&::before {
1015
content: "";
1116
position: absolute;
12-
top: 50%;
17+
top: calc(100% - $size-sm);
1318
left: 0;
1419
width: 100%;
15-
height: 0;
16-
background: $accent-color-pale;
17-
transition: height $transition-duration, top $transition-duration;;
18-
z-index: -1;
19-
border-radius: $size-md;
20+
height: 2px;
21+
border-radius: 1px;
22+
background: $color-primary;
23+
opacity: 0;
24+
transition: top $duration-t, opacity $duration-t;
25+
}
26+
27+
&:hover &__text {
28+
transform: translateY(-2px);
2029
}
2130

2231
&:hover {
2332
&::before {
24-
top: 0;
25-
height: 100%;
33+
opacity: 1;
34+
top: calc(100% - 2px);
2635
}
2736
}
28-
}
37+
}

‎src/components/Link/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const Link: FunctionComponent<Props> = ({
2121
})}
2222
to={href}
2323
>
24-
{text}
24+
<span className="link__text">{text}</span>
2525
</RouterLink>
2626
);
2727
} else {
@@ -33,7 +33,7 @@ const Link: FunctionComponent<Props> = ({
3333
})}
3434
href={href}
3535
>
36-
{text}
36+
<span className="link__text">{text}</span>
3737
</a>
3838
);
3939
}

0 commit comments

Comments
 (0)