Added base styling to pages

cmda-minor-web · Feb 5, 2024 · 986e92d · 986e92d
1 parent 486db01
commit 986e92d
Show file tree

Hide file tree

Showing 6 changed files with 346 additions and 4 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,4 +1,5 @@
 # Changelog
 ## Week 1
 ### 05/02/2024
-- Tabel met teams en beschrijving toegevoegd
+- Tabel met teams en beschrijving toegevoegd
+- Overzicht pagina basic styling gegeven
diff --git a/docs/index.html b/docs/index.html
@@ -5,10 +5,33 @@
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="./styles/index.css" rel="stylesheet"/>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Playfair+Display:[email protected]&display=swap"
+          rel="stylesheet">
+
     <title>Web App From Scratch 23-24</title>
 </head>
 <body>
-<h1>Hello World</h1>
+<header class="content-grid">
+    <img src="./logo-minor.svg" role="presentation" alt="" width="80px"/>
+    <h1>
+        <span>Web App From Scratch</span>
+        <span>2023 / 2024</span>
+    </h1>
+</header>
+<main class="content-grid">
+    <h2>Teams</h2>
+    <section data-students class="full-width">
+
+    </section>
+    <footer>
+        <p>© 2023 / 2024</p>
+        <p>License: MIT</p>
+    </footer>
+</main>
+<script src="scripts/index.js" async type="application/javascript"></script>
 </body>
 </html>
diff --git a/docs/logo-minor.svg b/docs/logo-minor.svg
diff --git a/docs/scripts/index.js b/docs/scripts/index.js
@@ -0,0 +1,34 @@
+main().then(() => console.log('done'))
+
+async function main() {
+    const students = await getStudents();
+    renderStudents(students.sort(() => 0.5 - Math.random()))
+}
+
+function renderStudents(students) {
+    const container = document.querySelector('[data-students]');
+    const list = document.createElement('ul')
+
+    students.map(student => {
+        const item = document.createElement('li')
+        const anchor = document.createElement('a');
+        const description = document.createElement('p')
+        const avatar = document.createElement('img')
+        anchor.href = `https://${student.login}.github.io/web-app-from-scratch-2324/`
+        anchor.alt = `WAFS fork from ${student.login}`
+        anchor.target = '_blank'
+        anchor.textContent = student.login
+        avatar.src = student.avatar_url
+        item.append(avatar)
+        item.append(anchor)
+        list.append(item)
+    })
+    container.append(list)
+}
+
+async function getStudents() {
+    const res = await fetch('https://api.github.com/repos/cmda-minor-web/web-app-from-scratch-2324/forks')
+    const teams = await res.json()
+    console.log(teams);
+    return teams.map(({owner}) => owner)
+}
diff --git a/docs/styles/content-grid.css b/docs/styles/content-grid.css
@@ -0,0 +1,38 @@
+:root {
+    --padding-inline: 2rem;
+    --max-width: 1440px;
+    --breakout-max-width: calc(var(--max-width) - (var(--padding-inline) * 2));
+    --content-max-width: calc(var(--breakout-max-width) - (var(--padding-inline) * 2));
+    --row-gap: 1rem;
+}
+
+.content-grid {
+    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
+
+    display: grid;
+    grid-template-columns:
+        [full-width-start] minmax(var(--padding-inline), 1fr)
+        [breakout-start] minmax(0, var(--breakout-size))
+        [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width))
+        [content-end]
+        minmax(0, var(--breakout-size)) [breakout-end]
+        minmax(var(--padding-inline), 1fr) [full-width-end];
+    grid-row-gap: var(--row-gap);
+}
+
+
+.content-grid > :not(.breakout, .full-width),
+.full-width > :not(.breakout, .full-width) {
+    grid-column: content;
+}
+
+.content-grid > .breakout {
+    grid-column: breakout;
+}
+
+.content-grid > .full-width {
+    grid-column: full-width;
+
+    display: grid;
+    grid-template-columns: inherit;
+}
diff --git a/docs/styles/index.css b/docs/styles/index.css
@@ -1,3 +1,196 @@
+@import url("./content-grid.css");
+
+
+:root {
+    --background: #000;
+    --foreground: #fff;
+    --layer: 255 255 255;
+    --layer-1: rgb(var(--layer)/ .05);
+    --layer-2: rgb(var(--layer)/ .07);
+    --green: #00d68a;
+    --green-alt: #61d723;
+    --blue: #089cf2;
+    --yellow: #f3f318;
+    --gradient: radial-gradient(circle at top left, var(--green) 35%, var(--blue) 50%, var(--yellow) 60%, var(--green-alt) 80%);
+}
+
 html {
-    background: red;
-}
+    font-family: 'Inter', sans-serif;
+    background: var(--background);
+    color: var(--foreground);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+h1 {
+    height: 100%;
+    display: inline-flex;
+    flex-wrap: wrap;
+    column-gap: 1rem;
+    justify-content: center;
+    text-align: center;
+    font-size: 5rem;
+    font-family: 'Playfair Display', serif;
+    font-weight: 700;
+    background: var(--gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+
+a {
+    font-size: 1.5rem;
+    font-weight: 200;
+    color: var(--foreground);
+    text-decoration: none;
+
+    :visited {
+        color: var(--foreground);
+    }
+}
+
+
+header {
+    position: relative;
+    padding-block-start: 3rem;
+    padding-block-end: 10rem;
+    display: grid;
+    grid-template-rows: 2fr 1fr;
+    place-items: center;
+    margin: 0;
+
+    &:before {
+        z-index: -1;
+        content: '';
+        position: absolute;
+        left: 30%;
+        top: 10%;
+        width: 5%;
+        aspect-ratio: 1;
+        background: radial-gradient(circle, var(--yellow) 35%, var(--green-alt) 50%, transparent 70%);
+        filter: blur(10px);
+        animation: orbit 30s ease-in-out alternate infinite;
+    }
+
+    :after {
+        z-index: -1;
+        content: '';
+        position: absolute;
+        right: 30%;
+        top: 10%;
+        width: 5%;
+        aspect-ratio: 1;
+        background: radial-gradient(circle, var(--green) 35%, var(--blue) 50%, transparent 70%);
+        filter: blur(10px);
+        animation: orbit 25s ease-in-out alternate-reverse infinite;
+    }
+}
+
+
+ul {
+    display: grid;
+    flex-wrap: wrap;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+}
+
+li {
+    transition-property: box-shadow, transform, border-color;
+    transition-duration: .15s;
+    transition-timing-function: ease-in-out;
+    display: grid;
+    place-items: center;
+    gap: 1rem;
+    padding: 1rem;
+    max-width: max-content;
+    background: var(--layer-1);
+    border-radius: 2px;
+    box-shadow: 0 0 5px rgb(0 0 0 / .6);
+    position: relative;
+    border: 1px solid;
+
+    &:nth-child(3n+3) {
+        border-color: rgb(from var(--yellow) r g b / .2);
+
+        &:hover, &:focus-within {
+            border-color: rgb(from var(--yellow) r g b / .5);
+        }
+
+        &:focus-within {
+            outline: 2px solid var(--yellow);
+        }
+    }
+
+    &:nth-child(3n+2) {
+        border-color: rgb(from var(--blue) r g b / .2);
+
+        &:hover, &:focus-within {
+            border-color: rgb(from var(--blue) r g b / .5);
+        }
+
+        &:focus-within {
+            outline: 2px solid var(--blue);
+        }
+    }
+
+    &:nth-child(3n+1) {
+        border-color: rgb(from var(--green) r g b / .2);
+
+        &:hover, &:focus-within {
+            border-color: rgb(from var(--green) r g b / .5);
+        }
+
+        &:focus-within {
+            outline: 2px solid var(--green);
+        }
+    }
+
+    &:hover, &:focus-within {
+        transform: translateY(-2px);
+        box-shadow: 0 0 15px rgb(0 0 0 / .4);
+    }
+}
+
+
+li img {
+    aspect-ratio: 1;
+    max-width: 100%;
+    overflow: hidden;
+    border-radius: 50%;
+}
+
+li a {
+    &:focus {
+        outline: none;
+    }
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+    }
+}
+
+
+footer {
+    display: inline-flex;
+    justify-content: space-evenly;
+    width: 100%;
+    padding: 2rem;
+    color: darkgray;
+}
+
+
+@keyframes orbit {
+    from{
+        top: 30%;
+        left: 40%;
+    }
+    to {
+        top: 10%;
+        left: 55%;
+    }
+}