Skip to content

Commit 182f629

Browse files
bcbbcb
committed
Add nav bar to home page
1 parent 7d431c1 commit 182f629

File tree

2 files changed

+106
-63
lines changed

2 files changed

+106
-63
lines changed

‎index.css‎

Lines changed: 98 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,36 @@ body {
99
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted",
1010
"Segoe UI", "Liberation Sans", sans-serif;
1111
background-color: #111;
12+
line-height: 170%;
13+
text-align: start;
14+
width: auto;
15+
word-break: break-word;
16+
@include media-query($on-palm) {
17+
font-size: 105%;
18+
}
19+
}
20+
21+
h1 {
22+
font-style: normal;
23+
letter-spacing: -0.5px;
24+
line-height: 130%;
25+
}
26+
27+
nav {
28+
background-color: #071039;
29+
padding: 0.5em 0 0.5em 0;
30+
text-align: right;
31+
a {
32+
color: white;
33+
text-decoration: none;
34+
padding-right: 2em;
35+
&:visited {
36+
color: hsl(330, 50, 50);
37+
}
38+
&:hover {
39+
color: orange;
40+
}
41+
}
1242
}
1343

1444
#start {
@@ -45,77 +75,82 @@ body {
4575
padding: 0 2em;
4676
}
4777

48-
#projects h1 {
49-
color: #eee;
50-
text-align: center;
51-
margin-top: 6em;
52-
}
78+
#projects {
5379

54-
section {
55-
margin: 0 auto;
56-
padding: 0 2em;
57-
display: flex;
58-
flex-direction: column;
59-
justify-content: center;
60-
align-items: center;
61-
}
80+
padding-top: 10em;
6281

63-
section.project {
64-
margin-top: 14rem;
65-
margin-bottom: 14rem;
66-
}
82+
h1 {
83+
color: #eee;
84+
text-align: center;
85+
}
6786

68-
section.project img {
69-
display: block;
70-
max-width: 100%;
71-
margin-bottom: 1em;
72-
}
87+
section {
88+
margin: 0 auto;
89+
padding: 0 2em;
90+
display: flex;
91+
flex-direction: column;
92+
justify-content: center;
93+
align-items: center;
94+
}
7395

74-
/* Project name */
75-
section.project h2 {
76-
color: #e9e9e9;
77-
font-size: 2rem;
78-
margin-bottom: 25px;
79-
}
96+
section.project {
97+
margin-top: 14rem;
98+
margin-bottom: 14rem;
99+
}
80100

81-
section.project .links {
82-
text-align: center;
83-
margin-bottom: 25px;
84-
}
101+
section.project img {
102+
display: block;
103+
max-width: 100%;
104+
margin-bottom: 1em;
105+
}
85106

86-
section.project .links a {
87-
color: cyan;
88-
}
107+
/* Project name */
108+
section.project h2 {
109+
color: #e9e9e9;
110+
font-size: 2rem;
111+
margin-bottom: 25px;
112+
}
89113

90-
/* Description */
91-
section.project h3 {
92-
margin: 0;
93-
max-width: 400px;
94-
font-size: 120%;
95-
font-weight: normal;
96-
font-style: italic;
97-
color: #eee;
98-
text-align: center;
99-
line-height: 140%;
100-
}
114+
section.project .links {
115+
text-align: center;
116+
margin-bottom: 25px;
117+
}
101118

119+
section.project .links a {
120+
color: cyan;
121+
}
102122

103-
/* GitHub icon before GitHub links */
104-
a[href*="github.com"]::before {
105-
content: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.385.6.11.82-.26.82-.577 0-.285-.01-1.04-.015-2.04-3.338.725-4.042-1.61-4.042-1.61-.546-1.38-1.332-1.747-1.332-1.747-1.09-.745.084-.73.084-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.805 1.305 3.49.997.108-.775.42-1.305.763-1.605-2.665-.3-5.467-1.335-5.467-5.932 0-1.31.465-2.38 1.235-3.22-.125-.303-.535-1.523.115-3.176 0 0 1.005-.322 3.3 1.23a11.48 11.48 0 013.003-.404c1.02.004 2.045.138 3.004.404 2.28-1.552 3.285-1.23 3.285-1.23.655 1.653.245 2.873.12 3.176.77.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.922.43.37.815 1.1.815 2.222 0 1.606-.015 2.896-.015 3.286 0 .32.21.694.825.577C20.565 21.795 24 17.295 24 12c0-6.63-5.37-12-12-12z"/></svg>');
106-
display: inline-block;
107-
vertical-align: middle;
108-
margin-right: 0.4em;
109-
width: 16px;
110-
height: 16px;
111-
}
123+
/* Description */
124+
section.project h3 {
125+
margin: 0;
126+
max-width: 400px;
127+
font-size: 120%;
128+
font-weight: normal;
129+
font-style: italic;
130+
color: #eee;
131+
text-align: center;
132+
line-height: 140%;
133+
}
134+
135+
136+
/* GitHub icon before GitHub links */
137+
a[href*="github.com"]::before {
138+
content: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.385.6.11.82-.26.82-.577 0-.285-.01-1.04-.015-2.04-3.338.725-4.042-1.61-4.042-1.61-.546-1.38-1.332-1.747-1.332-1.747-1.09-.745.084-.73.084-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.805 1.305 3.49.997.108-.775.42-1.305.763-1.605-2.665-.3-5.467-1.335-5.467-5.932 0-1.31.465-2.38 1.235-3.22-.125-.303-.535-1.523.115-3.176 0 0 1.005-.322 3.3 1.23a11.48 11.48 0 013.003-.404c1.02.004 2.045.138 3.004.404 2.28-1.552 3.285-1.23 3.285-1.23.655 1.653.245 2.873.12 3.176.77.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.922.43.37.815 1.1.815 2.222 0 1.606-.015 2.896-.015 3.286 0 .32.21.694.825.577C20.565 21.795 24 17.295 24 12c0-6.63-5.37-12-12-12z"/></svg>');
139+
display: inline-block;
140+
vertical-align: middle;
141+
margin-right: 0.4em;
142+
width: 16px;
143+
height: 16px;
144+
}
145+
146+
/* Docs icon before Docs links */
147+
a.docs-link::before {
148+
content: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="16"><path d="M6 2h9a2 2 0 012 2v16a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm0 2v16h9V4H6zm3 3h3v2H9V7zm0 3h3v2H9v-2z"/></svg>');
149+
display: inline-block;
150+
vertical-align: middle;
151+
margin-right: 0.4em;
152+
width: 16px;
153+
height: 16px;
154+
}
112155

113-
/* Docs icon before Docs links */
114-
a.docs-link::before {
115-
content: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="16"><path d="M6 2h9a2 2 0 012 2v16a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zm0 2v16h9V4H6zm3 3h3v2H9V7zm0 3h3v2H9v-2z"/></svg>');
116-
display: inline-block;
117-
vertical-align: middle;
118-
margin-right: 0.4em;
119-
width: 16px;
120-
height: 16px;
121156
}

‎index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@
88
<link rel="stylesheet" href="/index.css" />
99
</head>
1010
<body>
11+
12+
<nav>
13+
<div class="links">
14+
<a href="#projects">Projects</a>
15+
<a href="/posts/">Posts</a>
16+
</div>
17+
</nav>
18+
1119
<main>
1220
<div id="start">
1321
<img id="logo" src="/assets/logo.png" alt="Logo" data-aos="fade-up" />

0 commit comments

Comments
 (0)