Skip to content

Commit 488f923

Browse files
committed
moved menu to a top navigation bar to the homepage and updated CSS for improved layout and styling.
1 parent ba305e4 commit 488f923

File tree

2 files changed

+46
-18
lines changed

2 files changed

+46
-18
lines changed

css/main.css

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ section {
2424
width: calc(100vw - 20em);
2525
padding-top: 5vh;
2626
padding-left: 6vw;
27+
display: flex;
28+
flex-direction: column;
29+
gap: 2em;
2730
}
2831
.bio {
2932
padding-bottom: 10vh;
@@ -135,3 +138,35 @@ a {
135138
padding-left: 6vw;
136139
padding-bottom: 5em;
137140
}
141+
142+
.top-bar {
143+
display: flex;
144+
justify-content: space-between;
145+
align-items: center;
146+
width: 100%;
147+
padding-right: 5em;
148+
}
149+
150+
.header {
151+
display: flex;
152+
align-items: center;
153+
margin: 0;
154+
}
155+
156+
.top-nav {
157+
display: flex;
158+
gap: 2em;
159+
align-items: center;
160+
}
161+
162+
.nav-link {
163+
color: inherit;
164+
text-decoration: none;
165+
font-size: 0.8em;
166+
opacity: 0.8;
167+
transition: opacity 0.2s ease;
168+
}
169+
170+
.nav-link:hover {
171+
opacity: 1;
172+
}

index.html

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,17 @@
3434
</head>
3535
<body>
3636
<section class="hero">
37-
<h1 class="header">
38-
<a class="simple-link" href="./index.html"> zesameri </a>
39-
<a class="simple-link" href="./secrets.html"> <img class="header-img" src="assets/images/flower.svg" alt="Flower"></a>
40-
</h1>
37+
<div class="top-bar">
38+
<h1 class="header">
39+
<a class="simple-link" href="./index.html"> zesameri </a>
40+
<a class="simple-link" href="./secrets.html"> <img class="header-img" src="assets/images/flower.svg" alt="Flower"></a>
41+
</h1>
42+
<nav class="top-nav">
43+
<a class="nav-link" href="./essays.html">essays</a>
44+
<a class="nav-link" href="./poems.html">poems</a>
45+
<a class="nav-link" href="./recs.html">recs</a>
46+
</nav>
47+
</div>
4148
<div class="bio">
4249
<p>
4350
I felt intrigued to express a piece of me to the abyss of the Internet.
@@ -51,12 +58,6 @@ <h1 class="header">
5158
</p>
5259
</div>
5360
</section>
54-
<section class="menu" id="menu">
55-
<div><div><a class="simple-link" href="./essays.html"> essays </a></div></div>
56-
<div><div><a class="simple-link" href="./poems.html"> poems </a></div></div>
57-
<div><div><a class="simple-link" href="./recs.html"> recs </a></div></div>
58-
<div><div> tbd </div></div>
59-
</section>
6061
<footer class="footer hero-footer" id="footer">
6162
<a class="footer__link--email" href="mailto:zesameri@gmail.com">talk to me</a>
6263
<a class="footer__link--github" href="https://github.com/zesameri" target="_blank" rel="noopener noreferrer">i'm smart</a>
@@ -65,13 +66,5 @@ <h1 class="header">
6566
<a class="footer__link--instagram" href="https://www.instagram.com/eww.york/" target="_blank" rel="noopener noreferrer">eww</a>
6667
<div class="crumple" aria-hidden=""></div>
6768
</footer>
68-
<footer class="footer menu-footer" id="footer">
69-
<a class="footer__link--email" href="https://twitter.com/zesameri">talk to me</a>
70-
<a class="footer__link--github" href="https://github.com/zesameri" target="_blank" rel="noopener noreferrer">i'm smart</a>
71-
<a class="footer__link--playlists" href="https://open.spotify.com/user/1286649958" target="_blank" rel="noopener noreferrer">vibes</a>
72-
<a class="footer__link--linkedin" href="https://www.linkedin.com/in/merhoo/" target="_blank" rel="noopener noreferrer">love me</a>
73-
<a class="footer__link--instagram" href="https://www.instagram.com/eww.york/" target="_blank" rel="noopener noreferrer">eww</a>
74-
<div class="crumple" aria-hidden=""></div>
75-
</footer>
7669
</body>
7770
</html>

0 commit comments

Comments
 (0)