commit fffbe598c8141f57e62835de7319cb6e951d89a6 · nel.pet/www.nelind.dk

+42

index.html

···

       1
       +
       <!DOCTYPE html>

     

       2
       +
       <html lang="en">

     

       3
       +
       <head>

     

       4
       +
           <meta charset="UTF-8">

     

       5
       +
           <meta name="viewport" content="width=device-width, initial-scale=1.0">

     

       6
       +
           <title>Nelind - Home Page</title>

     

       7
       +
           <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans">

     

       8
       +
           <link rel="stylesheet" href="style.css">

     

       9
       +
       </head>

     

       10
       +
       <body>

     

       11
       +
       

     

       12
       +
           <header class="page-header">

     

       13
       +
               <nav>

     

       14
       +
                   <a href="/" class="nav-item">Home</a>

     

       15
       +
                   <a href="/projects.html" class="nav-item">Projects</a>

     

       16
       +
               </nav>

     

       17
       +
           </header>

     

       18
       +
       

     

       19
       +
           <main class="page-main">

     

       20
       +
               <div class="intro">

     

       21
       +
                   <img class="pfp" src="lil_nelly_cropped.jpg" alt="nelind profile picture">

     

       22
       +
                   <h2>Nel / Nelind<br>(She/They)</h2>

     

       23
       +
                   <p>Self Hosting • Rust • Web Dev</p>

     

       24
       +
                   <p>Fabric/Quilt • Spigot/Paper </p>

     

       25
       +
                   <p>Conlanging • Lingustics</p>

     

       26
       +
                   <div class="card" style="--card-colour: var(--colour-green)">

     

       27
       +
                       <header class="card-header">

     

       28
       +
                           <h3>Hi! I'm Nel</h3>

     

       29
       +
                       </header>

     

       30
       +
                       <div class="card-body">

     

       31
       +
                           <p>

     

       32
       +
                               Im a nerdy lil goober from Denmark who likes to dable in Minecraft modding and plugin development,

     

       33
       +
                               I do self hosting of several services (including this here website!) in my homelab and I write some Rust here and there. <br>

     

       34
       +
                               I'm also a massive lingustics nerd (yay autism) and do conlanging every now and then.

     

       35
       +
                           </p>

     

       36
       +
                       </div>

     

       37
       +
                   </div>

     

       38
       +
               </div>

     

       39
       +
           </main>

     

       40
       +
       

     

       41
       +
       </body>

     

       42
       +
       </html>

lil_nelly_cropped.jpg

This is a binary file and will not be displayed.

+91

style.css

···

       1
       +
       /* CSS ordering broadly following: https://9elements.com/css-rule-order/ */

     

       2
       +
       

     

       3
       +
       :root {

     

       4
       +
           --colour-gray: #d7d7d7;

     

       5
       +
           --colour-dark-gray: #cccccc;

     

       6
       +
           

     

       7
       +
           --colour-red: #ffaaaa;

     

       8
       +
           --colour-orange: #ffc089;

     

       9
       +
           --colour-yellow: #ffe18b;

     

       10
       +
           --colour-green: #c8df91;

     

       11
       +
           --colour-turqoise: #98eccc;

     

       12
       +
           --colour-blue: #98eccc;

     

       13
       +
           --colour-purple: #c9c5ff;

     

       14
       +
           --colour-pink: #ffa4d0;

     

       15
       +
       }

     

       16
       +
       

     

       17
       +
       body {

     

       18
       +
           align-items: center;

     

       19
       +
           flex-direction: column;

     

       20
       +
           display: flex;

     

       21
       +
       

     

       22
       +
           font-family: 'Noto Sans', sans-serif;

     

       23
       +
       }

     

       24
       +
       

     

       25
       +
       .page-header {

     

       26
       +
           justify-content: center;

     

       27
       +
           display: flex;

     

       28
       +
           margin: 0.5rem;

     

       29
       +
           border-radius: 1em;

     

       30
       +
           border: 2px solid var(--colour-gray);

     

       31
       +
           width: clamp(320px, 80%, 50rem);

     

       32
       +
           background-color: var(--colour-gray);

     

       33
       +
       }

     

       34
       +
       

     

       35
       +
       .nav-item {

     

       36
       +
           border-radius: 1em;

     

       37
       +
           padding-left: 0.5em;

     

       38
       +
           padding-right: 0.5em;

     

       39
       +
       

     

       40
       +
           color: inherit;

     

       41
       +
           text-decoration: inherit;

     

       42
       +
       

     

       43
       +
           &:hover {

     

       44
       +
               background-color: var(--colour-dark-gray);

     

       45
       +
           }

     

       46
       +
       }

     

       47
       +
       

     

       48
       +
       .page-main {

     

       49
       +
           width: clamp(280px, 75%, 50rem);

     

       50
       +
       }

     

       51
       +
       

     

       52
       +
       .intro {

     

       53
       +
           align-items: center;

     

       54
       +
           flex-direction: column;

     

       55
       +
           display: flex;

     

       56
       +
       

     

       57
       +
           & .pfp {

     

       58
       +
               width: clamp(200px, 20%, 20%);

     

       59
       +
           }

     

       60
       +
       

     

       61
       +
           & h2 {

     

       62
       +
               margin-top: 10px;

     

       63
       +
               margin-bottom: 10px;

     

       64
       +
           }

     

       65
       +
       

     

       66
       +
           & p {

     

       67
       +
               margin-top: 0px;

     

       68
       +
               margin-bottom: 0px;

     

       69
       +
           }

     

       70
       +
       }

     

       71
       +
       

     

       72
       +
       .card {

     

       73
       +
           margin: 0.5rem;

     

       74
       +
           border-radius: 3px;

     

       75
       +
           border: 2px solid var(--card-colour, var(--colour-red));

     

       76
       +
       

     

       77
       +
           & .card-header {

     

       78
       +
               margin: 0px;

     

       79
       +
               padding: 0.2em;

     

       80
       +
       

     

       81
       +
               background-color: var(--card-colour, var(--colour-red));

     

       82
       +
       

     

       83
       +
               & h3 {

     

       84
       +
                   margin: 0px;

     

       85
       +
               }

     

       86
       +
           }

     

       87
       +
       

     

       88
       +
           & .card-body {

     

       89
       +
               padding: 0.2em;

     

       90
       +
           }

     

       91
       +
       }