Skip to content

Commit e5a7a03

Browse files
ScottAgirsScottAgirs
committed
[edit] title + minor styling tweaks
Signed-off-by: ScottAgirs <[email protected]>
1 parent 676560c commit e5a7a03

File tree

3 files changed

+55
-51
lines changed

3 files changed

+55
-51
lines changed

‎components/Header.js‎

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,32 @@ import Link from "next/link";
33
export const Header = () => {
44
return (
55
<header>
6+
<Link href="/">
7+
<a>
8+
<span className="logo">
9+
<span className="i">i</span>
10+
<span className="js">JS</span>
11+
</span>
12+
</a>
13+
</Link>
14+
615
<div>
716
<Link href="/">
8-
<a className="ijs-link">
9-
<span className="ijs">
10-
i<span className="js-font">JS</span>
11-
</span>
12-
</a>
13-
</Link>
14-
</div>
15-
<div>
16-
<Link href="/">
17-
<a>Home</a>
17+
<a className="menu-item">Home</a>
1818
</Link>
1919
<Link href="/books">
20-
<a>Books</a>
20+
<a className="menu-item">Books</a>
2121
</Link>
2222
<Link href="/about">
23-
<a>About</a>
23+
<a className="menu-item">About</a>
2424
</Link>
2525
</div>
2626

2727
<style jsx>{`
2828
header {
2929
align-items: center;
30-
background: #ff6666;
31-
border-color: white;
30+
background: white;
31+
border-bottom: 2px solid #333644;
3232
display: flex;
3333
height: 64px;
3434
justify-content: space-between;
@@ -38,50 +38,52 @@ export const Header = () => {
3838
top: 0;
3939
width: 100%;
4040
}
41+
header * {
42+
text-decoration: none;
43+
}
4144
header div,
42-
header a {
45+
.menu-item {
4346
text-transform: uppercase;
4447
font-size: 0.9em;
4548
letter-spacing: 1px;
4649
padding: 2rem;
47-
text-decoration: none;
4850
}
49-
header a:hover {
51+
.menu-item:hover {
5052
color: #1c2b6d;
51-
text-shadow: 1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 10px #fff,
52-
1px 1px 0 #fff;
53+
text-shadow: 1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 10px rgba(119, 102, 119, 0.25),
54+
1px 1px 0 orange;
5355
font-weight: 800;
5456
}
55-
56-
.ijs-link {
57-
text-decoration: none;
57+
58+
.logo {
59+
background-color: #B838F0;
60+
font-size: 1.25rem;
61+
letter-spacing: 0px;
62+
padding: 0.76rem 0 0 0.75rem;
63+
position: absolute;
64+
top: 16px;
5865
}
59-
60-
.js-font {
61-
font-family: "Source Sans Pro", sans-serif;
62-
color: #776677;
63-
font-size: 2rem;
64-
margin-right: 4px;
66+
.logo:hover {
67+
background: #333644;
6568
}
66-
.js-font:hover {
67-
color: white;
69+
.logo:hover .js{
70+
color: #B838F0;
6871
}
69-
70-
.ijs {
71-
font-weight: 700;
72-
font-size: 1.25rem;
73-
color: white;
74-
background-color: #ff8866;
75-
margin: 0.75rem 0;
76-
padding: 1.55rem 0 0 0.75rem;
72+
.i {
73+
color: #f7f7f7;
74+
font-weight: bolder;
75+
text-transform: lowercase;
7776
}
78-
79-
.ijs:hover .js-font {
77+
.js {
78+
font-family: "Source Sans Pro", sans-serif;
8079
color: white;
80+
font-size: 2rem;
81+
margin-right: 4px;
8182
}
82-
.ijs:hover {
83-
background-color: #776677;
83+
.js:hover {
84+
color: #333644;
8485
}
86+
8587
`}</style>
8688
</header>
8789
);

‎components/Meta.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ export const Meta = () => {
44
return (
55
<>
66
<Head>
7-
<title>iJS.to - Modern Javascript Courses</title>
7+
<title>
8+
iNext.js Layout | iJS Boilerplate for Next.js with a dynamic layout
9+
</title>
810

911
<link
1012
href="https://fonts.googleapis.com/css?family=Space+Mono|Source+Sans+Pro:700&display=swap"

‎pages/index.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
export default () => (
22
<>
33
<div>
4-
<h1>Your first NextJS app</h1>
5-
<div>Have fun and build stuff!</div>
4+
<h1>Next.js starter</h1>
5+
<div style={{marginBottom: 64}}>Have fun and build stuff - dynamic layouts are already done!</div>
66

7-
<a href="https://ijs.to/courses/" target="_blank">
8-
<h2>Learn code on iJS.to</h2>
7+
<a href="https://ijs.to/" rel="noopener noreferrer" target="_blank">
8+
<p>Learn code on iJS.to</p>
99
</a>
1010
<ul>
1111
<li>
12-
<a href="https://ijs.to/courses/nextjs" target="_blank">
12+
<a href="https://ijs.to/courses/nextjs" rel="noopener noreferrer" target="_blank">
1313
NextJS
1414
</a>
1515
</li>
1616
<li>
17-
<a href="https://ijs.to/courses/react" target="_blank">
17+
<a href="https://ijs.to/courses/react" rel="noopener noreferrer" target="_blank">
1818
React
1919
</a>
2020
</li>
2121
<li>
22-
<a href="https://ijs.to/courses/graphql" target="_blank">
22+
<a href="https://ijs.to/courses/graphql" rel="noopener noreferrer" target="_blank">
2323
GraphQL
2424
</a>
2525
</li>
2626
<li>
27-
<a href="https://ijs.to/courses/" target="_blank">
27+
<a href="https://ijs.to/courses/" rel="noopener noreferrer" target="_blank">
2828
and other courses
2929
</a>
3030
</li>

0 commit comments

Comments
 (0)