Min startsida 2026

Skrivet av Hund, den 13 Augusti 2026

Vanligtvis brukar jag använda buku för alla mina bokmärken. Det är fortfarande ett bra verktyg som jag kan rekommendera, men för min egen del kan det lätt fungera som ett stort svart hål där jag kastar in länkar för att aldrig mer se dem igen.

Därför bestämde jag mig för att göra en enkel HTML-sida med mina bokmärken, en sida som jag sedan har angett som min startsida i min webbläsare qutebrowser. Då ser jag alla mina bokmärken varje gång jag öppnar ny flik, och kan enkelt navigera till vilket bokmärke som jag nu vill besöka.

Min startsida är enkel och funktionell, både sett till kod och utseende. Jag är inte på något vis utbildad inom webbdesign, och om någon har synpunkter på min startsida (eller den här bloggen) får man mer än gärna lämna synpunkter, tips och råd.

Här är koden för min startsida:

<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Min startsida</title>
    <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E🏠%3C/text%3E%3C/svg%3E">

<!-- -------------------- CSS -------------------- -->
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family : sans-serif; background: #eee; color: #111; padding: 2rem; max-width: 1500px; margin: auto; }
    h1 { margin-bottom: .3rem; font-size: 2rem; }
    .subtitle { color: grey; margin-bottom: 2rem; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(340px,1fr)); gap: 1rem; }
    .card { background: white; border-radius: 5px; padding: 1.2rem; box-shadow: 0 2px 5px rgba(0,0,0,.08); }
    .card h2 { margin-bottom: 1rem; font-size: 1.2rem; }
    .link-list { margin-left: 1.5rem; }
    .link-list li { margin: .5rem 0; }
    .link-list a { color: #111; text-decoration: none; }
    .link-list a:hover { color: blue; text-decoration: underline; }
    
    @media (max-width: 768px) {
        body { padding: 0; }
        header { padding: 1rem 0 0 1rem; }
        .grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
        .card { border-radius: 0; }
    }
</style>
</head>

<!-- -------------------- BODY -------------------- -->
<body>
<header>
    <h1>Min startsida</h1>
    <p class="subtitle">Version 1.0</p>
</header>

<!-- -------------------- CONTENT -------------------- -->
<div class="grid">

    <!-- -------------------- CATEGORY #1 -------------------- -->
    <div class="card">
        <h2>Kategori #1</h2>
        <ul class="link-list">
        <li><a href="http://exempel.se">Exempellänk</a></li>
        </ul>
    </div>

    <!-- -------------------- CATEGORY #2 -------------------- -->
    <div class="card">
        <h2>Kategori #2</h2>
        <ul class="link-list">
        <li><a href="http://exempel.se">Exempellänk</a></li>
        </ul>
    </div>

    <!-- -------------------- CATEGORY #3 -------------------- -->
    <div class="card">
        <h2>Kategori #3</h2>
        <ul class="link-list">
        <li><a href="http://exempel.se">Exempellänk</a></li>
        </ul>
    </div>

</div>

</body>
</html>

Min startsida 2026

Meta

Kommentarer