Better responsive design

_includes/footer.html

@@ -1 +1,2 @@
-<p>2024 - {{ 'now' | date: "%Y" }} hexaitos.com</p>
+<p>2024 - {{ 'now' | date: "%Y" }} hexaitos.com</p>
+<p>Made with Jekyll</p>

_layouts/home.html

@@ -18,7 +18,9 @@
             </div>
 
             <h1>Welcome to my website!</h1>
-            <p>Hello and welcome to my website :> My name is Hexaitos (or just Hex). I am a bateleur eagle from Germany. I like working with computers (especially Linux) and networks, playing (video) games, learning languages, taking photos and a bunch of other things, depending on what I am currently fixiated upon. </p>
+            <p>Hello and welcome to my website :> My name is Hexaitos (or just Hex). I am a bateleur eagle from Germany. I like working with computers (especially Linux) and networks, playing (video) games, learning languages, taking photos and a bunch of other things, depending on what I am currently fixiated upon. If you want to get in touch, look at the <a href="contact.html">contact</a> page!</p>
+
+            <p>This website is still very much a work-in-progress. I will be adding a <a href="blog.html">blog</a> where I will be posting things mostly about computers and games. </p>
         </div>
 </body>
 

_site/art.html

@@ -26,6 +26,7 @@
 
 <footer>
     <p>2024 - 2024 hexaitos.com</p>
+<p>Made with Jekyll</p>
 </footer>
 
 </html> 

_site/assets/css/styles.css

@@ -123,12 +123,13 @@ div.main {
 div.menu {
   /* background: #ae4e26; */
   background: #2b2623; 
-  padding: 1em;
+  padding: .5em;
   margin-bottom: 2em;
   overflow: hidden;
   text-align: center;
   border-radius: 10px;
-  height: 3em;
+  min-height: 3em;
+  height: auto;
 }
 
 .menu p {
@@ -152,6 +153,8 @@ div.menu {
   display:inline-block;
   font-size: medium;
   border-radius: 10px;
+  margin-bottom: .5em;
+  margin-top: .5em;
 }
 
 .menu a:hover, .contact a:hover {
@@ -204,11 +207,17 @@ footer p {
   color: white;
 }
 
+footer p:first-of-type {
+  float: left;
+}
+
+footer p:last-of-type {
+  float: right;
+}
+
 /* Responsive design stuff */
 @media only screen and (max-width: 900px) {
   .menu a {
-    margin-bottom: .5em;
-    margin-top: .5em;
     font-size: medium;
     min-width: 80px;
   }

_site/blog.html

@@ -25,6 +25,7 @@
 
 <footer>
     <p>2024 - 2024 hexaitos.com</p>
+<p>Made with Jekyll</p>
 </footer>
 
 </html> 

_site/contact.html

@@ -34,6 +34,7 @@
 
 <footer>
     <p>2024 - 2024 hexaitos.com</p>
+<p>Made with Jekyll</p>
 </footer>
 
 </html> 

_site/index.html

@@ -24,12 +24,15 @@
             </div>
 
             <h1>Welcome to my website!</h1>
-            <p>Hello and welcome to my website :> My name is Hexaitos (or just Hex). I am a bateleur eagle from Germany. I like working with computers (especially Linux) and networks, playing (video) games, learning languages, taking photos and a bunch of other things, depending on what I am currently fixiated upon. </p>
+            <p>Hello and welcome to my website :> My name is Hexaitos (or just Hex). I am a bateleur eagle from Germany. I like working with computers (especially Linux) and networks, playing (video) games, learning languages, taking photos and a bunch of other things, depending on what I am currently fixiated upon. If you want to get in touch, look at the <a href="contact.html">contact</a> page!</p>
+
+            <p>This website is still very much a work-in-progress. I will be adding a <a href="blog.html">blog</a> where I will be posting things mostly about computers and games. </p>
         </div>
 </body>
 
 <footer>
     <p>2024 - 2024 hexaitos.com</p>
+<p>Made with Jekyll</p>
 </footer>
 
 </html> 

_site/refsheet.html

@@ -20,16 +20,17 @@
     <div class="main">
       <h1 id="my-ref-sheet">My ref sheet</h1>
 <p><a href="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur.png" target="_blank">
-    <img src="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur.png" />
+    <img src="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur_thumb.png" />
 </a></p>
 
-<p>Drawn by <a href="https://faultyarts.carrd.co/">FaultyArts</a>.</p>
+<p>Drawn by <a href="https://faultyarts.carrd.co/">FaultyArts</a>. Click the image to enlargen it (opens it in a new tab, roughly 4 MB).</p>
 
     </div>
 </body>
 
 <footer>
     <p>2024 - 2024 hexaitos.com</p>
+<p>Made with Jekyll</p>
 </footer>
 
 </html> 

assets/css/styles.css

@@ -123,12 +123,13 @@ div.main {
 div.menu {
   /* background: #ae4e26; */
   background: #2b2623; 
-  padding: 1em;
+  padding: .5em;
   margin-bottom: 2em;
   overflow: hidden;
   text-align: center;
   border-radius: 10px;
-  height: 3em;
+  min-height: 3em;
+  height: auto;
 }
 
 .menu p {
@@ -152,6 +153,8 @@ div.menu {
   display:inline-block;
   font-size: medium;
   border-radius: 10px;
+  margin-bottom: .5em;
+  margin-top: .5em;
 }
 
 .menu a:hover, .contact a:hover {
@@ -204,11 +207,17 @@ footer p {
   color: white;
 }
 
+footer p:first-of-type {
+  float: left;
+}
+
+footer p:last-of-type {
+  float: right;
+}
+
 /* Responsive design stuff */
 @media only screen and (max-width: 900px) {
   .menu a {
-    margin-bottom: .5em;
-    margin-top: .5em;
     font-size: medium;
     min-width: 80px;
   }

refsheet.md

@@ -5,7 +5,7 @@ title: "Hexaitos.com – Ref Sheet"
 
 # My ref sheet
 <a href="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur.png" target="_blank">
-    <img src="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur.png">
+    <img src="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur_thumb.png">
 </a>
 
-Drawn by [FaultyArts](https://faultyarts.carrd.co/). 
+Drawn by [FaultyArts](https://faultyarts.carrd.co/). Click the image to enlargen it (opens it in a new tab, roughly 4 MB).