Copy & Paste Webcode

This is a page of small code snippets that I'm often typing over and over again. Note: These are based off of how I personlly set up my webpages and file organization.

HTML

HTML skeleton:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./src/css/main.css">
        <link rel="shortcut icon" href="favicon.ico">
        <title>Title</title>
    </head>
    <body>
        <div id="page">
            <header>
                <h1></h1>
            </header>
            <main>
                <section>
                    <h2></h2>
                </section>
            </main>
            <footer></footer>
        </div>
    </body>
</html>

Anchor List:

<ul>
    <li><a href="#"></a></li>
    <li><a target="_blank" href="#"></a></li>
</ul>

Emoji favicon:

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦝</text></svg>">

CSS

Simple CSS variable set up:

:root {
    --bg-img        : url('');
    --bg-color      : black;
    --fg-img        : url('');
    --fg-color      : white;

    --font-color    : black;
    --font-title    : serif;
    --font-main     : sans-serif;
    --font-size     : calc(1rem + (1.2vw / 5));

    --outline       : ;

    --accent-color  : #333;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
    color: var(--accent-color);
}

a { color: var(--accent-color); }
a:hover { color: var(--font-color); }

body {
    background: var(--bg-img) var(--bg-color);
    background-attachment: fixed;
    font-size: var(--font-size);
    font-family: var(--font-main);
    color: var(--font-color);
}

#page {
    background: var(--fg-img) var(--fg-color);
    width: 60%;
    margin: 2em auto;
}

Media queries:

@media only screen and (max-width: 800px) {
    #page { width: 90% !important; }
}
@media only screen and (min-width: 1500px) {
    #page { width: 900px !important; }
}

Font-face definition:

@font-face {
    font-family: '';
    src: local(''),
    url("../fonts/.ttf") format("truetype");
}

JS

Dark/Light mode toggle:

    // // // // // // //
    // Dark and Light Mode functionality

    const toggleDiv = document.getElementById("darkmode-div");
    toggleDiv.classList.remove("NoJS");

    // // // //
    const userPref = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
    const currentTheme = localStorage.getItem('theme') ?? userPref;
    const toggleLabel = document.getElementById("darkmode-label");


    if (currentTheme) {
        document.documentElement.setAttribute('saved-theme', currentTheme);
    }

    const switchTheme = (e) => {
        if (e.target.checked) {
            document.documentElement.setAttribute('saved-theme', 'dark');
            localStorage.setItem('theme', 'dark');
            toggleLabel.innerHTML = "🌞";
        }
        else {
            document.documentElement.setAttribute('saved-theme', 'light')
            localStorage.setItem('theme', 'light');
            toggleLabel.innerHTML = "🌚";
        }
    }

    window.addEventListener('DOMContentLoaded', () => {
        // Darkmode toggle
        const toggleSwitch = document.querySelector('#darkmode-toggle')

        // listen for toggle
        toggleSwitch.addEventListener('change', switchTheme, false)

        if (currentTheme === 'dark') {
            toggleSwitch.checked = true;
            toggleLabel.innerHTML = "🌞";
        }
    })