Skip to content

Commit 271b4c2

Browse files
zesamerizesameri
committed
Update NYC Weekend Guide layout and styling; change font, colors, and header structure for improved aesthetics and readability.
1 parent cde19bd commit 271b4c2

File tree

2 files changed

+51
-40
lines changed

2 files changed

+51
-40
lines changed

‎css/nyc.css‎

Lines changed: 46 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
22

33
body {
4-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
4+
font-family: "Trebuchet MS", Helvetica, sans-serif !important;
55
font-size: 15px;
66
line-height: 1.6;
7-
color: #1a1a1a;
8-
background: #f5f4f0;
7+
color: #f8f8f6;
8+
background: #111;
9+
}
10+
11+
.header-img {
12+
height: 1em;
13+
padding: 0 0.2em;
914
}
1015

1116
/* ── Layout ── */
@@ -18,17 +23,18 @@
1823
/* ── Header ── */
1924
.site-header {
2025
margin-bottom: 2.5rem;
21-
border-bottom: 1px solid #ddd;
26+
border-bottom: 1px solid #555;
2227
padding-bottom: 1.5rem;
2328
}
2429
.site-header h1 {
2530
font-size: 28px;
2631
font-weight: 600;
27-
letter-spacing: -0.02em;
32+
letter-spacing: 5px;
2833
margin-bottom: 0.4rem;
34+
color: #f8f8f6;
2935
}
3036
.site-header p {
31-
color: #666;
37+
color: #a6a9ac;
3238
font-size: 14px;
3339
}
3440

@@ -41,16 +47,16 @@
4147
font-weight: 600;
4248
text-transform: uppercase;
4349
letter-spacing: 0.08em;
44-
color: #888;
50+
color: #a6a9ac;
4551
margin-bottom: 0.75rem;
4652
}
4753
.map-embed {
4854
width: 100%;
4955
height: 420px;
50-
border: 1px solid #ddd;
56+
border: 1px solid #555;
5157
border-radius: 10px;
5258
overflow: hidden;
53-
background: #eee;
59+
background: #333;
5460
}
5561
.map-embed iframe {
5662
width: 100%;
@@ -65,7 +71,7 @@
6571
align-items: center;
6672
justify-content: center;
6773
gap: 12px;
68-
color: #888;
74+
color: #a6a9ac;
6975
font-size: 14px;
7076
text-align: center;
7177
padding: 2rem;
@@ -75,7 +81,7 @@
7581
opacity: 0.4;
7682
}
7783
.map-placeholder a {
78-
color: #1a73e8;
84+
color: #dbeafe;
7985
font-weight: 500;
8086
}
8187

@@ -89,12 +95,14 @@
8995
gap: 10px;
9096
margin-bottom: 0.75rem;
9197
padding-bottom: 0.6rem;
92-
border-bottom: 1px solid #e0ddd8;
98+
border-bottom: 1px solid #555;
9399
}
94100
.section-header h2 {
95101
font-size: 17px;
96102
font-weight: 600;
97-
letter-spacing: -0.01em;
103+
letter-spacing: 3px;
104+
text-transform: lowercase;
105+
color: #f8f8f6;
98106
}
99107
.section-tag {
100108
font-size: 11px;
@@ -106,21 +114,21 @@
106114
}
107115

108116
/* tag colors */
109-
.tag-stay { background: #e6f4d7; color: #2e6b11; }
110-
.tag-gp { background: #ede9fd; color: #4a33b5; }
111-
.tag-dtbk { background: #dbeafe; color: #1d4ed8; }
112-
.tag-bush { background: #fde8e0; color: #992d1b; }
113-
.tag-mht { background: #d9f5ec; color: #0e6b50; }
114-
.tag-ktown { background: #fef0d4; color: #7c4a0a; }
115-
.tag-xtra { background: #eeeceb; color: #4a4947; }
117+
.tag-stay { background: #ffdead; color: #333; }
118+
.tag-gp { background: #E1904E; color: #fff; }
119+
.tag-dtbk { background: paleturquoise; color: #333; }
120+
.tag-bush { background: navy; color: #fff; }
121+
.tag-mht { background: #ffdead; color: #333; }
122+
.tag-ktown { background: #E1904E; color: #fff; }
123+
.tag-xtra { background: paleturquoise; color: #333; }
116124

117125
/* ── Subsections ── */
118126
.subsection-label {
119127
font-size: 11px;
120128
font-weight: 600;
121129
text-transform: uppercase;
122130
letter-spacing: 0.07em;
123-
color: #999;
131+
color: #a6a9ac;
124132
margin: 1.2rem 0 0.5rem;
125133
}
126134

@@ -132,36 +140,37 @@
132140
}
133141

134142
.card {
135-
background: #fff;
136-
border: 1px solid #e4e2dd;
143+
background: #333;
144+
border: 1px solid #555;
137145
border-radius: 10px;
138146
padding: 11px 13px;
139147
display: flex;
140148
flex-direction: column;
141149
gap: 5px;
142150
transition: border-color 0.15s;
143151
}
144-
.card:hover { border-color: #bbb; }
152+
.card:hover { border-color: #777; }
145153

146154
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
147155

148156
.card-name {
149157
font-size: 14px;
150158
font-weight: 600;
151-
color: #1a73e8;
159+
letter-spacing: 2px;
160+
color: #dbeafe;
152161
text-decoration: none;
153162
}
154163
.card-name:hover { text-decoration: underline; }
155164

156165
.card-type {
157166
font-size: 11.5px;
158-
color: #888;
167+
color: #a6a9ac;
159168
margin-top: 1px;
160169
}
161170

162171
.card-note {
163172
font-size: 12.5px;
164-
color: #444;
173+
color: #dcdcde;
165174
line-height: 1.5;
166175
}
167176

@@ -179,20 +188,20 @@
179188
border-radius: 99px;
180189
border: 1px solid transparent;
181190
}
182-
.badge-res { background: #e6f4d7; color: #2e6b11; border-color: #b4daa0; }
183-
.badge-walkin { background: #f0efed; color: #5a5855; border-color: #d4d2ce; }
184-
.badge-early { background: #fde8e0; color: #992d1b; border-color: #f5bfae; }
185-
.badge-cash { background: #fef0d4; color: #7c4a0a; border-color: #f9d498; }
186-
.badge-tickets { background: #ede9fd; color: #4a33b5; border-color: #c9bef8; }
191+
.badge-res { background: #ffdead; color: #333; border-color: #e6c9a8; }
192+
.badge-walkin { background: paleturquoise; color: #333; border-color: #a8d4d4; }
193+
.badge-early { background: #E1904E; color: #fff; border-color: #c67a3d; }
194+
.badge-cash { background: navy; color: #fff; border-color: #000080; }
195+
.badge-tickets { background: #C0C0C0; color: #333; border-color: #a8a8a8; }
187196

188197
/* ── Intro note ── */
189198
.intro-note {
190199
font-size: 13px;
191-
color: #555;
200+
color: #dcdcde;
192201
line-height: 1.6;
193202
padding: 10px 14px;
194-
background: #fff;
195-
border: 1px solid #e4e2dd;
203+
background: #333;
204+
border: 1px solid #555;
196205
border-radius: 8px;
197206
margin-bottom: 1.5rem;
198207
}
@@ -202,9 +211,9 @@
202211
footer {
203212
margin-top: 3rem;
204213
padding-top: 1.5rem;
205-
border-top: 1px solid #ddd;
214+
border-top: 1px solid #555;
206215
font-size: 12px;
207-
color: #999;
216+
color: #a6a9ac;
208217
}
209218

210219
@media (max-width: 600px) {

‎nyc.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>NYC Weekend Guide</title>
6+
<title>nyc</title>
77
<link rel="stylesheet" href="css/nyc.css">
8+
<link href="./css/font.css" rel="stylesheet">
9+
<link rel="shortcut icon" href="./assets/images/icon.png" type="image/png">
810
</head>
911
<body>
1012
<div class="page">
1113

1214
<header class="site-header">
13-
<h1>NYC Weekend Guide</h1>
15+
<h1>nyc weekend guide <img class="header-img" src="assets/images/flower.svg" alt="Flower"></h1>
1416
<p>A personal guide to Brooklyn and Manhattan — food, nightlife, parks, and where to stay.</p>
1517
</header>
1618

@@ -465,7 +467,7 @@ <h2>Manhattan — Koreatown night</h2>
465467
<!-- ══ ELSEWHERE IN MANHATTAN ══ -->
466468
<div class="section">
467469
<div class="section-header">
468-
<h2>Wherever you happen to be in Manhattan</h2>
470+
<h2>Manhattan extras</h2>
469471
<span class="section-tag tag-xtra">Convenient spots</span>
470472
</div>
471473
<div class="cards">

0 commit comments

Comments
 (0)