Skip to content

Commit d0d4356

Browse files
0x7C2f0x7C2f
0x7C2f
authored and
0x7C2f
committed
Add modernized startpage with search functionality and enhanced bookmarks
1 parent 09ca4c0 commit d0d4356

File tree

3 files changed

+396
-0
lines changed

3 files changed

+396
-0
lines changed

‎assets/startpage.css‎

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,303 @@
1+
:root {
2+
/* Color palette */
3+
--color-bg: #282828;
4+
--color-fg: #EADBB2;
5+
--color-link: #8F9191;
6+
--color-link-visited: #668F8B;
7+
--color-link-hover: #FA7921;
8+
--color-focus: #FA7921;
9+
--color-input-bg: #3c3836;
10+
--color-input-border: #504945;
11+
12+
/* Spacing */
13+
--spacing-xs: 5px;
14+
--spacing-sm: 20px;
15+
--spacing-md: 60px;
16+
--spacing-lg: 80px;
17+
18+
/* Typography */
19+
--font-family: "Fira Code", monospace, sans-serif;
20+
--font-size-base: 16px;
21+
--font-size-title: 20px;
22+
--font-size-header: 40px;
23+
24+
/* Layout */
25+
--container-gap: 80px;
26+
--category-width: 180px;
27+
--left-container-width: 460px;
28+
--right-container-width: 600px;
29+
}
30+
31+
html, body {
32+
background: var(--color-bg);
33+
color: var(--color-fg);
34+
font-family: var(--font-family);
35+
font-size: var(--font-size-base);
36+
height: 100%;
37+
width: 100%;
38+
margin: 0;
39+
padding: 0;
40+
}
41+
42+
/* Smooth scrolling for better UX */
43+
html {
44+
scroll-behavior: smooth;
45+
}
46+
47+
/* Respect user's motion preferences */
48+
@media (prefers-reduced-motion: reduce) {
49+
*,
50+
*::before,
51+
*::after {
52+
animation-duration: 0.01ms !important;
53+
animation-iteration-count: 1 !important;
54+
transition-duration: 0.01ms !important;
55+
scroll-behavior: auto !important;
56+
}
57+
}
58+
59+
.container {
60+
display: grid;
61+
grid-template-columns: 1fr var(--left-container-width) var(--right-container-width) 1fr;
62+
grid-template-areas:
63+
". left right .";
64+
gap: var(--container-gap);
65+
justify-items: center;
66+
align-items: center;
67+
min-height: 100%;
68+
padding: var(--spacing-sm);
69+
box-sizing: border-box;
70+
}
71+
72+
/* Responsive layout for tablets */
73+
@media (max-width: 1200px) {
74+
.container {
75+
grid-template-columns: 1fr;
76+
grid-template-areas:
77+
"left"
78+
"right";
79+
gap: var(--spacing-md);
80+
padding: var(--spacing-md) var(--spacing-sm);
81+
}
82+
}
83+
84+
/* Responsive layout for mobile */
85+
@media (max-width: 768px) {
86+
.container {
87+
gap: var(--spacing-sm);
88+
padding: var(--spacing-sm);
89+
}
90+
}
91+
92+
.left-container {
93+
grid-area: left;
94+
aspect-ratio: 1/1;
95+
max-width: 100%;
96+
}
97+
98+
@media (max-width: 1200px) {
99+
.left-container {
100+
max-width: 400px;
101+
}
102+
}
103+
104+
@media (max-width: 768px) {
105+
.left-container {
106+
max-width: 300px;
107+
}
108+
}
109+
110+
.right-container {
111+
grid-area: right;
112+
height: 50%;
113+
width: 100%;
114+
max-width: var(--right-container-width);
115+
}
116+
117+
@media (max-width: 1200px) {
118+
.right-container {
119+
height: auto;
120+
max-width: 100%;
121+
}
122+
}
123+
124+
.gif img {
125+
max-width: 100%;
126+
max-height: 100%;
127+
display: block;
128+
height: auto;
129+
/* Performance optimization */
130+
will-change: auto;
131+
}
132+
133+
.head {
134+
display: flex;
135+
flex-direction: column;
136+
align-items: center;
137+
font-size: var(--font-size-header);
138+
padding-top: var(--spacing-md);
139+
}
140+
141+
@media (max-width: 768px) {
142+
.head {
143+
font-size: 28px;
144+
padding-top: var(--spacing-sm);
145+
}
146+
}
147+
148+
.search {
149+
display: flex;
150+
justify-content: center;
151+
margin: var(--spacing-sm) 0;
152+
}
153+
154+
.search-form {
155+
display: flex;
156+
align-items: center;
157+
background: var(--color-input-bg);
158+
border: 1px solid var(--color-input-border);
159+
border-radius: 4px;
160+
padding: var(--spacing-xs) var(--spacing-sm);
161+
width: 100%;
162+
max-width: 400px;
163+
}
164+
165+
.prompt {
166+
color: var(--color-fg);
167+
margin-right: var(--spacing-xs);
168+
}
169+
170+
.search-input {
171+
background: transparent;
172+
border: none;
173+
color: var(--color-fg);
174+
font-family: var(--font-family);
175+
font-size: var(--font-size-base);
176+
outline: none;
177+
flex: 1;
178+
}
179+
180+
.search-input::placeholder {
181+
color: var(--color-link);
182+
}
183+
184+
.search-input:focus {
185+
outline: none;
186+
}
187+
188+
.category {
189+
display: flex;
190+
flex-direction: column;
191+
width: var(--category-width);
192+
min-width: 0;
193+
}
194+
195+
@media (max-width: 768px) {
196+
.category {
197+
width: 100%;
198+
max-width: 180px;
199+
}
200+
}
201+
202+
.bookmarks {
203+
display: flex;
204+
justify-content: center;
205+
gap: var(--spacing-sm);
206+
flex-wrap: wrap;
207+
}
208+
209+
@media (max-width: 768px) {
210+
.bookmarks {
211+
gap: var(--spacing-sm);
212+
}
213+
}
214+
215+
.links {
216+
display: flex;
217+
flex-direction: column;
218+
align-items: center;
219+
padding: var(--spacing-sm) 0;
220+
gap: var(--spacing-xs);
221+
list-style: none;
222+
margin: 0;
223+
}
224+
225+
.title {
226+
font-size: var(--font-size-title);
227+
font-weight: bold;
228+
}
229+
230+
@media (max-width: 768px) {
231+
.title {
232+
font-size: 18px;
233+
}
234+
}
235+
236+
li {
237+
font-size: var(--font-size-base);
238+
list-style-type: none;
239+
padding: var(--spacing-xs);
240+
}
241+
242+
@media (max-width: 768px) {
243+
li {
244+
font-size: 14px;
245+
}
246+
}
247+
248+
a:link {
249+
text-decoration: none;
250+
color: var(--color-link);
251+
transition: color 0.2s ease;
252+
}
253+
254+
a:visited {
255+
color: var(--color-link-visited);
256+
}
257+
258+
a:hover {
259+
color: var(--color-link-hover);
260+
}
261+
262+
/* Keyboard focus accessibility */
263+
a:focus {
264+
outline: 2px solid var(--color-focus);
265+
outline-offset: 2px;
266+
color: var(--color-link-hover);
267+
}
268+
269+
/* High contrast mode support */
270+
@media (prefers-contrast: high) {
271+
a:focus {
272+
outline-width: 3px;
273+
}
274+
}
275+
276+
.blinking {
277+
animation: opacity 1s ease-in-out infinite;
278+
opacity: 1;
279+
/* Performance optimization */
280+
will-change: opacity;
281+
}
282+
283+
/* Respect reduced motion preference */
284+
@media (prefers-reduced-motion: reduce) {
285+
.blinking {
286+
animation: none;
287+
opacity: 1;
288+
}
289+
}
290+
291+
@keyframes opacity {
292+
0% {
293+
opacity: 1;
294+
}
295+
296+
50% {
297+
opacity: 0;
298+
}
299+
300+
100% {
301+
opacity: 1;
302+
}
303+
}

‎images/pp.gif‎

11.2 MB
Loading

‎startpage/index.md‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
---
2+
layout: false
3+
title: Startpage
4+
permalink: /startpage/
5+
---
6+
7+
<!DOCTYPE html>
8+
<html lang="en">
9+
10+
<head>
11+
<meta charset="UTF-8">
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
13+
<meta name="description" content="Personal startpage with bookmarks and search">
14+
<title>~/startpage</title>
15+
<link rel="stylesheet" type="text/css" href="/assets/startpage.css">
16+
</head>
17+
18+
<body>
19+
<div class="container">
20+
<div class="left-container">
21+
<div class="gif">
22+
<img src="/images/pp.gif" alt="Animated character illustration" />
23+
</div>
24+
</div>
25+
26+
<div class="right-container">
27+
<header class="head">
28+
<p>> cd ~/<span class="blinking" aria-label="cursor">_</span></p>
29+
</header>
30+
<div class="search">
31+
<form action="https://duckduckgo.com/" method="get" class="search-form">
32+
<span class="prompt">> search </span>
33+
<input type="text" name="q" placeholder="query..." class="search-input" autocomplete="off" id="search-input">
34+
</form>
35+
</div>
36+
<hr>
37+
<nav class="bookmarks" aria-label="Quick links">
38+
<div class="category">
39+
<ul class="links">
40+
<li class="title" aria-label="Social category">Social</li>
41+
<li><a href="https://4chan.org">4Chan</a></li>
42+
<li><a href="https://reddit.com">Reddit</a></li>
43+
<li><a href="https://twitter.com">Twitter</a></li>
44+
</ul>
45+
</div>
46+
<div class="category">
47+
<ul class="links">
48+
<li class="title" aria-label="Development category">Dev</li>
49+
<li><a href="https://github.com/">GitHub</a></li>
50+
<li><a href="https://wiki.archlinux.org/">Arch Wiki</a></li>
51+
<li><a href="https://mankier.com/">Mankier</a></li>
52+
<li><a href="https://devdocs.io/">DevDocs</a></li>
53+
<li><a href="https://stackoverflow.com/">Stack Overflow</a></li>
54+
</ul>
55+
</div>
56+
<div class="category">
57+
<ul class="links">
58+
<li class="title" aria-label="Media category">Media</li>
59+
<li><a href="https://open.spotify.com/">Spotify</a></li>
60+
<li><a href="https://youtube.com/">YouTube</a></li>
61+
<li><a href="https://twitch.tv/">Twitch</a></li>
62+
<li><a href="https://netflix.com/">Netflix</a></li>
63+
</ul>
64+
</div>
65+
<div class="category">
66+
<ul class="links">
67+
<li class="title" aria-label="News category">News</li>
68+
<li><a href="https://bbc.com/news">BBC News</a></li>
69+
<li><a href="https://reuters.com/">Reuters</a></li>
70+
<li><a href="https://theguardian.com/">The Guardian</a></li>
71+
</ul>
72+
</div>
73+
<div class="category">
74+
<ul class="links">
75+
<li class="title" aria-label="Tools category">Tools</li>
76+
<li><a href="https://gmail.com/">Gmail</a></li>
77+
<li><a href="https://drive.google.com/">Google Drive</a></li>
78+
<li><a href="https://notion.so/">Notion</a></li>
79+
<li><a href="https://chat.openai.com/">ChatGPT</a></li>
80+
</ul>
81+
</div>
82+
</nav>
83+
</div>
84+
</div>
85+
<script>
86+
document.addEventListener('DOMContentLoaded', function() {
87+
const searchInput = document.getElementById('search-input');
88+
searchInput.focus();
89+
});
90+
</script>
91+
</body>
92+
93+
</html>

0 commit comments

Comments
 (0)