Skip to content

Commit 9bb4c3c

Browse files
enisgulerenisguler
authored
Add index.html for dark mode blog layout
This HTML file creates a minimal dark-mode blog layout with sections for about, posts, and contact information.
1 parent 60513a7 commit 9bb4c3c

File tree

1 file changed

+191
-0
lines changed

1 file changed

+191
-0
lines changed

‎index.html‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
<title>an oldschool notebook — dark mode</title>
7+
<style>
8+
:root {
9+
--bg: #0d0d0d;
10+
--paper: #151515;
11+
--ink: #e5e5e5;
12+
--muted: #888;
13+
--accent: #ff914d;
14+
--border: #222;
15+
font-family: "Courier New", Courier, monospace;
16+
font-size: 16px;
17+
}
18+
19+
html, body {
20+
margin: 0;
21+
height: 100%;
22+
background: var(--bg);
23+
color: var(--ink);
24+
}
25+
26+
.wrap {
27+
max-width: 780px;
28+
margin: 40px auto;
29+
padding: 32px;
30+
background: var(--paper);
31+
border: 1px solid var(--border);
32+
box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
33+
border-radius: 6px;
34+
}
35+
36+
header h1 {
37+
margin: 0;
38+
font-size: 28px;
39+
color: var(--accent);
40+
}
41+
42+
header p {
43+
margin: 8px 0 20px;
44+
color: var(--muted);
45+
}
46+
47+
nav a {
48+
margin-right: 14px;
49+
color: var(--accent);
50+
text-decoration: none;
51+
font-weight: bold;
52+
transition: color 0.2s;
53+
}
54+
55+
nav a:hover {
56+
color: #ffd8b2;
57+
}
58+
59+
article {
60+
margin-top: 20px;
61+
line-height: 1.6;
62+
}
63+
64+
.post-meta {
65+
color: var(--muted);
66+
font-size: 13px;
67+
margin-bottom: 8px;
68+
}
69+
70+
footer {
71+
margin-top: 30px;
72+
border-top: 1px dashed var(--border);
73+
padding-top: 14px;
74+
color: var(--muted);
75+
font-size: 13px;
76+
text-align: center;
77+
}
78+
79+
.post-list {
80+
margin: 10px 0;
81+
padding-left: 18px;
82+
}
83+
84+
.post-list li {
85+
margin: 8px 0;
86+
}
87+
88+
.post-list a {
89+
color: var(--ink);
90+
text-decoration: none;
91+
}
92+
93+
.post-list a:hover {
94+
color: var(--accent);
95+
}
96+
97+
.badge {
98+
display: inline-block;
99+
padding: 2px 6px;
100+
border-radius: 4px;
101+
font-size: 12px;
102+
background: rgba(255, 145, 77, 0.1);
103+
border: 1px solid rgba(255, 145, 77, 0.3);
104+
color: var(--accent);
105+
}
106+
107+
code {
108+
background: #1e1e1e;
109+
padding: 2px 5px;
110+
border-radius: 4px;
111+
font-size: 90%;
112+
color: #ffc89f;
113+
}
114+
115+
@media (max-width: 520px) {
116+
.wrap {
117+
margin: 20px;
118+
padding: 20px;
119+
}
120+
}
121+
</style>
122+
</head>
123+
<body>
124+
<div class="wrap">
125+
<header>
126+
<h1>an oldschool notebook</h1>
127+
<p>a minimal dark-mode blog for thoughts, code, and late-night ideas.</p>
128+
<nav>
129+
<a href="#about">about</a>
130+
<a href="#posts">posts</a>
131+
<a href="#contact">contact</a>
132+
</nav>
133+
</header>
134+
135+
<main>
136+
<section id="about">
137+
<article>
138+
<div class="post-meta">
139+
<span class="badge">dark mode</span> — last updated:
140+
<time datetime="2025-10-12">oct 12, 2025</time>
141+
</div>
142+
<h2>welcome</h2>
143+
<p>
144+
this site is built the oldschool way — pure html, no frameworks,
145+
no javascript. it’s a quiet corner for notes and experiments.
146+
</p>
147+
</article>
148+
</section>
149+
150+
<section id="posts">
151+
<h3>recent posts</h3>
152+
<ul class="post-list">
153+
<li>
154+
<a href="posts/2025-10-12-hypnagogic-state.html">
155+
hypnagogic state — the creative edge before sleep
156+
</a>
157+
<span class="post-meta">— oct 12, 2025</span>
158+
</li>
159+
<li>
160+
<a href="posts/2025-07-07-project-notes.html">
161+
pocket hologram — early tests
162+
</a>
163+
<span class="post-meta">— jul 7, 2025</span>
164+
</li>
165+
<li>
166+
<a href="posts/2025-04-17-compdoc.html">
167+
compdoc experiments
168+
</a>
169+
<span class="post-meta">— apr 17, 2025</span>
170+
</li>
171+
</ul>
172+
<p>add new posts manually in <code>posts/</code> — no automation, just oldschool html.</p>
173+
</section>
174+
175+
<section id="contact">
176+
<h3>contact</h3>
177+
<p>
178+
got feedback or ideas? open an issue on this repo, or leave a note in
179+
<code>contact.txt</code>.
180+
</p>
181+
</section>
182+
</main>
183+
184+
<footer>
185+
<div>
186+
made under dim light with coffee and static noise — github pages / retro dark mode blog
187+
</div>
188+
</footer>
189+
</div>
190+
</body>
191+
</html>

0 commit comments

Comments
 (0)