✨ Modernize a bit

Drop bootstrap Remove fabfile in favor of bin/deploy
2022-02-22 00:26:48 +01:00
parent e204229519
commit 4e6924d055
14 changed files with 629 additions and 1296 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -10,6 +10,7 @@ root = true
 # Change these settings to your own preference
 indent_style = space
 indent_size = 4
+max_line_length = 120

 # We recommend you to keep these unchanged
 end_of_line = lf
@@ -23,7 +24,3 @@ trim_trailing_whitespace = false
 [package.json]
 indent_style = space
 indent_size = 2
-
-[bower.json]
-indent_style = space
-indent_size = 2
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,5 @@ bower_components
 *.swp
 .idea
 *.pyc
+app/main.css
+app/main.css.map
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -0,0 +1,28 @@
+variables:
+  PIP_CACHE_DIR: "${CI_PROJECT_DIR}/.cache/pip"
+
+default:
+  image: node:16-slim
+
+lint:
+  stage: test
+  script:
+    - bin/lint
+
+deploy:
+  stage: deploy
+  before_script:
+     # Install ssh if not already
+     - 'command -v ssh-agent >/dev/null || ( apt-get update -y && apt-get install openssh-client -y )'
+     - eval $(ssh-agent -s)
+     # Make SSH key available
+     - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
+     - mkdir -p ~/.ssh
+     - chmod 700 ~/.ssh
+     # Add known host keys
+     - echo "$SSH_KNOWN_HOSTS" >> ~/.ssh/known_hosts
+     - chmod 644 ~/.ssh/known_hosts
+  script:
+    - ssh gitdeploy@dreamcast.neuf.no "$(< bin/deploy)"
+  only:
+    - main
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
--- a/.nvmrc
+++ b/.nvmrc
@@ -0,0 +1 @@
+v16
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}
--- a/app/index.html
+++ b/app/index.html
@@ -1,15 +1,15 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="utf-8">
-        <title>EDB-gjengen, Medieavdelingen, Chateau Neuf, Det Norske Studentersamfund</title>
-        <meta name="description" content="">
-        <meta name="viewport" content="width=device-width, initial-scale=1">

-        <link rel="stylesheet" href="main.css">
+<head>
+    <meta charset="utf-8" />
+    <title>EDB-gjengen, Medieavdelingen, Chateau Neuf, Det Norske Studentersamfund</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="main.css" />
+</head>

-    </head>
-    <body>
+<body>
    <!--
                Bli med i EDB! BLI NINJA!
                https://edb.neuf.no/
@@ -39,71 +39,89 @@
          `......:::::::::;iof688888888888888888888888888888b.
            `....:::;iof688888888888888888888888888888888899fT!
    -->
-    <!--[if lt IE 11]>
-        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-    <![endif]-->
-
-
-    <div class="container">
-        <header class="page-header">
-            <h1 class="brand"><img src="images/edb_brick.png" class="edb-brick" alt="EDB-gjengen logo"> EDB-gjengen</h1>Medieavdelingen, <a href="http://studentersamfundet.no/">Det Norske Studentersamfund</a>, Chateau Neuf, Oslo
-        </header>
-        <section class="row">
-            <div class="col-md-12">
-                <h3>Kontaktinfo</h3>
-                <ul class="contact-info">
-                    <li><a href="mailto:kak-edb@studentersamfundet.no">kak-edb@studentersamfundet.no</a></li>
-                    <li>Leder: Jonas Braathen +47 454 80 454</li>
-                    <li>IRC: <a href="irc://irc.oftc.net/edb">#EDB@OFTC</a></li>
-                    <li>M&oslash;tetid: Hver onsdag kl. 18.13.37 p&aring; KAK (<a href="https://viteboka.studentersamfundet.no/4._etasje">4. etg</a>)</li>
-                    <li>Twitter: <a href="http://twitter.com/edbgjengen">@edbgjengen</a> eller <a href="http://twitter.com/KAK_DNS">@KAK_DNS</a></li>
-
-                </ul>
-            </div>
-        </section>
-        <section class="row cta">
-            <div class="col-md-12">
-                <div class="form-link">
-                    <h3>Interressert i EDB?</h3>
-                    <a href="#form" class="btn btn-primary btn-lg">Meld din interesse!</a>
-                </div>
-            </div>
-        </section>
-        <section class="row">
-            <div class="col-md-12">
-                <h3>Verktøy</h3>
-                <ul class="tool-list">
-                    <li class="tool-item"><a href="https://edb.neuf.no/wiki/"><h4>EDBWiki</h4><img src="images/wiki.jpg" alt="EDBWiki" /></a></li>
-                    <li class="tool-item"><a href="https://mdb.neuf.no/"><h4>MDB</h4><img src="images/mdb.jpg" alt="MDB" /></a></li>
-                    <li class="tool-item"><a href="https://observium.neuf.no/"><h4>Observium</h4><img src="images/observium.jpg" alt="Observium" /></a></li>
-                    <li class="tool-item"><a href="https://git.neuf.no/"><h4>Gitlab</h4><img src="images/gitlab.jpg" alt="Gitlab" /></a></li>
-                    <li class="tool-item"><a href="https://galtinn.neuf.no/"><h4>Galtinn</h4><img src="images/galtinn.jpg" alt="Galtinn" /></a></li>
-                    <li class="tool-item"><a href="https://aktiv.neuf.no/"><h4>aktiv.neuf.no</h4><img src="images/aktiv.neuf.no.jpg" alt="aktiv.neuf.no" /></a></li>
-                </ul>
-            </div>
-        </section>
-        <section class="row" id="form">
-            <div class="col-md-12">
-                <h3>Bli med</h3>
-                <div class="form-wrap"><iframe id="contact_form" src="https://docs.google.com/spreadsheet/embeddedform?formkey=dFZnWGE4NjFTemdvVFYxeWtXMGNKbGc6MQ" width="440" height="917">Loading...</iframe></div>
-            </div>
-        </section>
-        <section class="row">
-            <div class="col-md-12">
-                <div class="credits">Laget med <span class="love" title="kærlighed">♥</span> av <span title="EDB-gjengen">EDB-gjengen</span></div>
-            </div>
-        </section>
-    </div>
-
-    <!-- Google Analytics -->
-    <script>
-        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
-        function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
-        e=o.createElement(i);r=o.getElementsByTagName(i)[0];
-        e.src='//www.google-analytics.com/analytics.js';
-        r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
-        ga('create','UA-52914-10');ga('send','pageview');
-    </script>
-
+    <header>
+        <h1 class="brand">
+            <img src="images/edb_brick.png" class="edb-brick" alt="EDB-gjengen logo" /> EDB-gjengen
+        </h1>
+        Medieavdelingen, <a href="http://studentersamfundet.no/">Det Norske Studentersamfund</a>, Chateau Neuf,
+        Oslo
+    </header>
+    <section>
+        <h2>Kontaktinfo</h2>
+        <ul class="contact-info">
+            <li><a href="mailto:edb@neuf.no">edb@neuf.no</a></li>
+            <li>Leder: Jonas Braathen +47 454 80 454</li>
+            <li>IRC: <a href="irc://irc.oftc.net/edb">#EDB@OFTC</a></li>
+            <li>
+                M&oslash;tetid: Hver onsdag kl. 18.13.37 p&aring; KAK (<a
+                    href="https://viteboka.studentersamfundet.no/4._etasje">4. etg</a>)
+            </li>
+            <li>
+                Twitter: <a href="http://twitter.com/edbgjengen">@edbgjengen</a> eller
+                <a href="http://twitter.com/KAK_DNS">@KAK_DNS</a>
+            </li>
+        </ul>
+    </section>
+    <section class="cta">
+        <div class="form-link">
+            <h2>Interressert i EDB?</h2>
+            <a href="#form" class="btn btn-primary btn-lg">Meld din interesse!</a>
+        </div>
+    </section>
+    <section>
+        <h2>Verktøy</h2>
+        <ul class="tool-list">
+            <li>
+                <a href="https://edb.neuf.no/wiki/">
+                    <h3>EDBWiki</h3>
+                    <img src="images/wiki.jpg" alt="EDBWiki" />
+                </a>
+            </li>
+            <li>
+                <a href="https://mdb.neuf.no/">
+                    <h3>MDB</h3>
+                    <img src="images/mdb.jpg" alt="MDB" />
+                </a>
+            </li>
+            <li>
+                <a href="https://observium.neuf.no/">
+                    <h3>Observium</h3>
+                    <img src="images/observium.jpg" alt="Observium" />
+                </a>
+            </li>
+            <li>
+                <a href="https://git.neuf.no/">
+                    <h3>Gitlab</h3>
+                    <img src="images/gitlab.jpg" alt="Gitlab" />
+                </a>
+            </li>
+            <li>
+                <a href="https://galtinn.neuf.no/">
+                    <h3>Galtinn</h3>
+                    <img src="images/galtinn.jpg" alt="Galtinn" />
+                </a>
+            </li>
+            <li>
+                <a href="https://aktiv.neuf.no/">
+                    <h3>aktiv.neuf.no</h3>
+                    <img src="images/aktiv.neuf.no.jpg" alt="aktiv.neuf.no" />
+                </a>
+            </li>
+        </ul>
+        </div>
+    </section>
+    <section id="form">
+        <h2>Bli med</h2>
+        <div class="form-wrap">
+            <iframe id="contact-form"
+                src="https://docs.google.com/spreadsheet/embeddedform?formkey=dFZnWGE4NjFTemdvVFYxeWtXMGNKbGc6MQ"
+                width="440" height="917">Loading...</iframe>
+        </div>
+    </section>
+    <section class="credits">
+        Laget med <span class="love" title="kærlighed">♥</span> av
+        <span title="EDB-gjengen">EDB-gjengen</span>
+    </section>
 </body>
-</html>
+
+</html>
--- a/app/main.css
+++ b/app/main.css
--- a/app/main.scss
+++ b/app/main.scss
@@ -1,39 +1,76 @@
-@import "../node_modules/bootstrap/scss/bootstrap.scss";
+:root {
+    --container-width: 1140px;
+    --primary-color: #007bff;
+    --primary-color-light: hsl(211, 100%, 60%);
+}

 body {
+    font-family: monospace;
    text-align: center;
-    @include media-breakpoint-up(sm) {
+    font-size: 110%;
+    margin: 1rem;
+
+    @media screen and (min-width: 540px) {
        text-align: left;
    }
 }

-.page-header {
-    margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
+h1, h2, h3, h4, h5 {
+    margin-bottom: 0.5em;
+}
+
+ul {
+    margin: 0;
+}
+
+li {
+    line-height: 1.5;
+}
+
+section {
+    margin-bottom: 2rem;
+}
+
+a {
+    &:link {
+        color: var(--primary-color);
+        text-decoration: none;
+    }
+    &:hover {
+        text-decoration: underline;
+    }
+    &:active,
+    &:focus {
+        color: var(--primary-color-light);
+    }
+    &:visited {
+        color: var(--primary-color);
+    }
+
 }

 .brand {
    line-height: 1;
+    font-size: 1.2;
+
    img {
        position: relative;
-        top: -4px;
+        top: 8px;
    }
 }

-section {
-    margin-bottom: 1.5rem;
-}
+
 .cta {
    display: block;

-    @include media-breakpoint-up(sm) {
-        display:none;
+    @media screen and (min-width: 540px) {
+        display: none;
    }
 }

 .edb-brick {
-	height: 40px;
-	width: auto;
+    height: 40px;
+    width: auto;
 }

 .contact-info {
@@ -47,37 +84,28 @@ section {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
-    justify-content: space-evenly;
+    max-width: var(--container-width);

-    @include media-breakpoint-up(sm) {
-        justify-content: flex-start;
+    @media screen and (min-width: 540px) {
+        display: grid;
+        gap: 2rem;
+        grid-template-columns: repeat(2, 1fr);
    }

-}
-
-.tool-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-	padding-bottom: 0;
-    margin-bottom: 20px;
-    max-width: 196px;
-
-    img {
-        max-width: 92%;
+    @media screen and (min-width: 992px) {
+        grid-template-columns: repeat(3, 1fr);
    }

-    @include media-breakpoint-up(sm) {
-        max-width: 230px;
-    }
+    > li {
+        align-items: center;
+        justify-content: center;
+        padding-bottom: 0;
+        margin-bottom: 20px;

-    @include media-breakpoint-up(lg) {
-        max-width: 310px;
+        img {
+            max-width: 100%;
+        }
    }
-    @include media-breakpoint-up(xl) {
-        max-width: none;
-    }
-
 }

 .form-wrap {
@@ -85,25 +113,17 @@ section {
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
-
-    iframe {
-        position: absolute;
-        top:0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
+    max-width: var(--container-width);
 }
-#contact_form {
+
+#contact-form {
    border: 0;
    margin: 0;
-}
-
-.browsehappy {
-    margin: 0.2em 0;
-    background: #ccc;
-    color: #000;
-    padding: 0.2em 0;
+    position: absolute;
+    top:0;
+    left: 0;
+    width: 100%;
+    height: 100%;
 }

 .love {
@@ -116,4 +136,5 @@ section {
    text-align: center;
    color: #666;
    font-size: 12px;
+    max-width: var(--container-width);
 }
--- a/bin/deploy
+++ b/bin/deploy
@@ -0,0 +1,11 @@
+#!/bin/bash
+set -eu
+
+PROJECT_PATH=/var/www/neuf.no/edb
+
+echo "Deploying bbs to ${PROJECT_PATH}"
+cd "$PROJECT_PATH" || exit 1
+git pull
+
+npm run i
+npm run build
--- a/fabfile.py
+++ b/fabfile.py
@@ -1,11 +0,0 @@
-from fabric.api import cd, env, run
-
-env.use_ssh_config = True
-env.hosts = ['dreamcast.neuf.no']
-env.project_path = '/var/www/neuf.no/edb/edb-www'
-env.user = 'gitdeploy'
-
-
-def deploy():
-    with cd(env.project_path):
-        run('git pull')
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,407 @@
+{
+  "name": "edb-www",
+  "version": "0.0.1",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "edb-www",
+      "version": "0.0.1",
+      "devDependencies": {
+        "prettier": "2.5.1",
+        "sass": "^1.49.8"
+      },
+      "engines": {
+        "node": ">=16",
+        "npm": ">=8"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
+      "dev": true
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
+      "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.49.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.8.tgz",
+      "integrity": "sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    }
+  },
+  "dependencies": {
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "optional": true
+    },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
+      "dev": true
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true
+    },
+    "prettier": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
+      "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
+      "dev": true
+    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "sass": {
+      "version": "1.49.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.8.tgz",
+      "integrity": "sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@@ -2,19 +2,18 @@
  "name": "edb-www",
  "version": "0.0.1",
  "private": true,
-  "dependencies": {
-    "bootstrap": "^4.3.1",
-    "jquery": "^3.2.1",
-    "popper.js": "^1.14.7"
-  },
  "scripts": {
    "build": "sass --no-source-map --style=compressed app/main.scss app/main.css",
+    "format": "prettier --write app",
+    "lint": "prettier --check app",
    "watch": "sass --watch app/main.scss app/main.css"
  },
  "devDependencies": {
-    "sass": "^1.20.1"
+    "prettier": "2.5.1",
+    "sass": "^1.49.8"
  },
  "engines": {
-    "node": ">=10"
+    "node": ">=16",
+    "npm": ">=8"
  }
-}
+}
--- a/yarn.lock
+++ b/yarn.lock