Custom SCSS For Digital Garden

🧶 Tags:: #HTML_CSS
2024-09-27 - 02:42

/* General body settings */
body {
    font-family: 'M PLUS 1 Code', monospace; /* Applying the imported font */
    margin: 0;
    padding: 0;
    color: #333; /* General text color */
}

/* Sticky background image using ::before pseudo-element */
body::before {
    content: "";
    background-image: url('https://cdn.pixabay.com/photo/2023/09/06/12/21/waves-8236919_1280.jpg'); /* Replace with the image URL */
    background-size: cover; /* Ensures the image covers the full background */
    background-position: center center; /* Centers the image */
    position: fixed; /* Sticky effect */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Sends the background behind other content */
    background-attachment: fixed; /* Ensures it stays in place and doesn't scroll */

    /* Darken and blur the background */
    filter: blur(16px) brightness(0.4); /* 8px blur, and 60% brightness to darken */
}

h1 {
    font-size: 3rem; /* Large heading */
    color: red; /* Main text color */
}

h2 {
    font-size: 2.5rem; 
    color: #fff; /* Main text color */
}

h3 {
    font-size: 2rem; 
    color: #fff; /* Main text color */
}

h4, h5, h6 {
    font-size: 1.5rem;
    color: #fff; /* Main text color */
}



/* Facebook favicon */
a[href*="facebook.com"]::after {
    content: url('https://www.facebook.com/favicon.ico');
    margin-left: 5px;
    vertical-align: middle;
}

/* YouTube favicon */
a[href*="youtube.com"]::after {
    content: url('https://www.youtube.com/s/desktop/6b7e85f2/img/favicon.ico');
    margin-left: 5px;
    vertical-align: middle;
}

/* LinkedIn favicon */
a[href*="linkedin.com"]::after {
    content: url('https://www.linkedin.com/favicon.ico');
    margin-left: 5px;
    vertical-align: middle;
}

/* Twitter favicon */
a[href*="twitter.com"]::after {
    content: url('https://twitter.com/favicon.ico');
    margin-left: 5px;
    vertical-align: middle;
}

/* Instagram favicon */
a[href*="instagram.com"]::after {
    content: url('https://i.ibb.co/LNDWF4b/icons8-instagram-32.png');
    margin-left: 5px;
    vertical-align: middle;
}

Find Obsidian Snippets at r-u-s-h-i-k-e-s-h