scroll hidden and links fixed?

_data/links.yml

@@ -5,8 +5,11 @@
   alt: "image of mastodon logo"
 - name: listenbrainz 
   href: https://listenbrainz.org/user/beppev/
+  img: /img/listenbrainz.jpg
+  alt: "litsenbrainz image"
 - name: myanimelist 
   href: https://myanimelist.net/profile/BeppeV
+  img: /img/myanimelist.jpg
 - name: gitea 
   href: https://git.beppe.online/beppe
   img: /img/gitea.gif
@@ -16,3 +19,6 @@
 - name: goodreads
   href: https://www.goodreads.com/user/show/193197549-beppe-v
   img: /img/goodreads.png
+- name: newgrounds
+  href: https://8looper.newgrounds.com
+  img: /img/newgrounds.gif

_includes/footer.html

@@ -1,7 +1,9 @@
  <footer>
+   <div class="footerdiv">
+     <p class="footertitle">mylinks:</p>
    <ul class="mylinks">
      {% for link in site.data.links %}
-     <li>
+     <li class="footerlinks">
        <a href="{{ link.href }}" {{link.otherparams}}>
          {% if link.img %}
            <img src="{{ link.img }}" alt="{{ link.alt }}">
@@ -13,15 +15,19 @@
      {% endfor %}
 
    </ul>
+   <ul class="mybuttons">
  {% assign image_files = site.static_files | where: "buttons", true %}
    {% for button in image_files %}
-
+   <li class="button">
    {% if button.basename == "88x31" %}
    <a href="https://cyber.dabamos.de/88x31/index.html"><img src="{{ button.path }}"></a>
    {% else %}
    <img src="{{ button.path }}">
    {% endif %}
+   </li>
 {% endfor %}
+   </ul>
+   </div>
  </footer>
 
 

_includes/nav.html

@@ -1,21 +1,6 @@
-  <!-- <div class="sidebar">
-     <a href="/index.html">index</a>
-      <h2>my links:</h2>
-      <p><a rel="me" href="https://blorbo.social/@beppe">Mastodon(my art will be here)</a></p>
-      <p><a href="https://steamcommunity.com/id/bvanroll/">steam</a></p>
-      <p><a href="https://letterboxd.com/beppev/">letterboxd</a></p>
-      <p><a href="https://git.beppe.online/beppe">gitea</a></p>
-      <a href="#" onclick="toggle(1);" >blogposts</a>
-      <ul class="submenu">
-      {% for post in site.posts %}
-      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
-      {% endfor %}
-   </ul>
-    </div>-->
-
 <nav>
   {% for item in site.data.navigation %}
-  <a href="{{ iten.link }}" {% if page.url == item.link %}style="color: red;"{% endif %}>
+  <a class="navlink" href="{{ iten.link }}" {{ item.link }} {% if page.url == item.link %}style="color: red;"{% endif %}>
     {{ item.name }}
   </a>
   {% endfor %}

css/main.css

@@ -1,131 +1,3 @@
-/*
-@import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css);
-
-body {
-  font-family: "Fira Code", monospace;
-  color: black;
-  padding: 2em;
-  /*text-shadow: -1px -1px 0 #000, 1px -1px #000, -1px 1px #000, 1px 1px #000;*/
-  /*display: grid;*/
-  /*background: #2e2828;
-}
-
-a:link {
-  color: black;
-}
-
-a:visited {
-  color: #111;
-}
-
-
-a:hover {
-  color: #111;
-}
-
-
-a:active {
-  color: #111;
-}
-
-* {
-}
-*/
-/*.header {*/
-  /*height: 10vh;*/
-  /*float: left;*/
- /* text-align: center;
-  background: #DDD;
-  border-radius: 16px;
-  width:100%;
-  padding:1em;
-  padding-left: .2em;
-  padding-right:.2em;
-}
-
-.sidebar {
-  width:20%;
-  float: left;
-  background: #DDD;
-  border-radius:16px;
-  padding:1em;
-  margin-top: 2em;
-  
-}
-
-.content {
- float: right;
- width: 70%;
- margin-top: 2em;
- background: #DDD;
- padding:1em;
- border-radius: 16px;
-}
-*/
-
-/*.navbar_links {
-  /*display: grid;*/
-  /*grid-template-columns: auto auto;*/
- /* list-style: none;
-}*/
-/*
-iframe {
-}
-
-.navbar_link {
-  width:10em;
-  display: table-cell;
-  font-size: 22px;
-}
-
-* {
-  
-}
-
-#queen {
-  width: 20em;
-  border: black;
-  padding: .3em;
-  border-style: double;
-  background: white;
-
-
-}
-
-#susie {
-  height: 5em;
-}
-
-#glados {
-}
-
-iframe {
- width: 90%;
- height: 400px;
- margin: 3%;
-
-}
-
-@media only screen and (max-width: 600px){
-  .sidebar {width:100%}
-  .content {width:100%}
-
-}
-
-footer {
-  display: inline-block;
-  width: 98%;
-  border-radius: 16px;
-  padding:1em;
-  margin-left: 0%;
-  margin-top: 5em;
-  background: #DDD;
-  img {
-
-  }
-}
-*/
-
 body {
   background: #201b1a;
   background-attachment: local;
@@ -135,8 +7,6 @@ body {
 
 
 .header {
-  border: green;
-  border-style: double;
   padding: 2.5em;
 }
 
@@ -150,25 +20,49 @@ body {
 
 .container {
   display: flex;
+  justify-content: center;
+  padding: 2em;
 }
 
 nav {
-  border: green;
-  border-style: double;
 }
+
+.navlink {
+
+}
+
 .content {
-  border: green;
-  border-style: double;
   width: 30em;
   margin-left: 8em;
   height: 40em;
   overflow: scroll;
+  scrollbar-width: none;
   padding: 2em;
 
 }
 
 footer {
-  border: green;
-  border-style: double;
+  display: flex;
+  justify-content: center;
+  padding-top: 1em;
 
 }
+
+.footerdiv {
+  width: 50em;
+
+}
+
+.footerdiv > p {
+  text-align: center;
+
+}
+
+.footerlinks {
+  display: inline-block;
+
+}
+
+.button {
+  display: inline-block;
+}

index.html

@@ -3,26 +3,20 @@ layout: default
 title: home
 ---
 
-      <img src="img/queen.gif" id="queen">
+      <img src="img/queen.gif" id="queen" style="/* display: inline-block; */ width: 12em; float: right; margin-left: 2em;">
       <h1> Welcome! </h1>
-      <p>Welcome to my webpage! If you don't know me (how did you get here?) i'm beppe, a (currentyear - 1996) year old sysdamin from the ghent area in belgium! I like to draw/paint, play guitar, play games, read comics and manga, i like watching movies too, and anime and tv shows! Oh and i really like riding my bycicle! 
+      <p>If you don't know me (how did you get here?) i'm beppe, a sysdamin from belgium! I like to draw/paint, play guitar, play games, read comics and manga, i like watching movies too, and anime and tv shows! Oh and i really like riding my bycicle! 
    
     <h2> what's coming </h2>
-   
+
+    <img src="img/glados.gif" id="glados" style="/* display: inline-block; */ float: left; margin-right: 2em;">
     <p>
     I wanna spice up the website, but i'm really bad at doing visual stuff. at least when it's not code based. so maybe i'll write some code that makes the site look cooler :p but for now i'm bedrotting :p
     </p>
-    <img src="img/glados.gif" id="glados">
     <p> oh, and another thing i'm gonna do is just to write a bunch of paragraphs on this page and get a link system kindof like wikipedia when you read a huge article on that. something like that is the plan :p</p>
     <p>
     also i wanna make it so my pico8 games are playable in the browser here on a seperate page. so i'm gonna work on that too.
     </p>
 
-    <h2>
-    update: i did it!
-    <img src="img/susie.gif" id="susie">
-    </h2>
-    <p> here are all the pico 8 games i've hosted on my site so far: </p>
-    <a href="games/lou.html">lou</a>