Responsive header with bubbles

Inspired by

• Easy Tutorials on YouTube
• Mark Bowley on Codepen

SCSS

The code is written in VS Code and using Live Sass Compiler to compile and autoprefix the SCSS files.

To configure Live Sass Compiler to utilise the dist folder this is my JSON Settings

"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
],
"liveSassCompile.settings.formats":[
    // This is Default.
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/dist/css"
    },
    // You can add more
    {
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": "/dist/css"
    },
],

I also like to hide the output window using this

"liveSassCompile.settings.showOutputWindow": false

So here is the full JSON file

{
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ],
    "liveSassCompile.settings.formats":[
        // This is Default.
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/dist/css"
        },
        // You can add more
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/dist/css"
        },
    ],
    "liveSassCompile.settings.showOutputWindow": false
}