more pictures, fix footer and planets position

src/inc_css/footer.css

@@ -0,0 +1,7 @@
+.footer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+
+    padding: 0 10px 10px;
+}

src/inc_css/planets.css

@@ -1,6 +1,6 @@
 .planets {
     overflow: hidden;
-    position: absolute;
+    position: fixed;
     height: 80vmax;
     width: 80vmax;
     right: 0;

src/inc_css/socials.css

@@ -0,0 +1,22 @@
+.socials {
+    margin-top: 16px;
+    margin-left: 10px;
+    background-color:var(--background);
+}
+
+.socials i {
+    font-size: 2em;
+    margin-left: 4px;
+    color: var(--foreground-inactive);
+    transition: transform 0.3s, color 0.3s;
+}
+.socials i:hover {
+    color: var(--accent);
+    transform: translateY(-20%);
+}
+
+.socials a {
+    text-decoration: none;
+
+    transition: color 0.3s;
+}

src/inc_html/footer.html

@@ -0,0 +1,3 @@
+<div class="footer">
+    #include socials.html
+</div>

src/inc_html/sidebar.html

@@ -8,13 +8,5 @@
             <li><a href="blog.html" class="fsText">/blog</a></li>
             <li><a href="contact.html" class="fsText">/contact</a></li>
         </ul>
-
-        <div class="socials">
-            <a href="https://github.com/ktyldev/"><i class="fab fa-github"></i></a>
-            <a href="https://ktyl.itch.io/"><i class="fab fa-itch-io"></i></a>
-            <a href="https://instragram.com/ktyldev"><i class="fab fa-instagram"></i></a>
-            <a href="https://discord.gg/fshnCe67bX"><i class="fab fa-discord"></i></a>
-        </div>
-
     </div>
 </div>

src/inc_html/socials.html

@@ -0,0 +1,6 @@
+<div class="socials">
+    <a href="https://github.com/ktyldev/"><i class="fab fa-github"></i></a>
+    <a href="https://ktyl.itch.io/"><i class="fab fa-itch-io"></i></a>
+    <a href="https://instragram.com/ktyldev"><i class="fab fa-instagram"></i></a>
+    <a href="https://discord.gg/fshnCe67bX"><i class="fab fa-discord"></i></a>
+</div>

src/root/graphics.html

@@ -21,6 +21,8 @@
     <img src="relanoise.png"></img>
     <img src="skeinring.png"></img>
     <img src="membrain.png"></img>
+    <img src="revival.png"></img>
+    <img src="lsd.png"></img>
 </div>
 
 </div>
@@ -28,5 +30,6 @@
 
 #include planets.html
 
+#include footer.html
 </body>
 </html>

src/root/styles.css

@@ -139,28 +139,7 @@ a.fsText:hover {
     margin-left: -20px;
 }
 
-.socials {
+#include socials.css
-    margin-top: 16px;
-    margin-left: 10px;
-    background-color:var(--background);
-}
-
-.socials i {
-    font-size: 2em;
-    margin-left: 4px;
-    color: var(--foreground-inactive);
-    transition: transform 0.3s, color 0.3s;
-}
-.socials i:hover {
-    color: var(--accent);
-    transform: translateY(-20%);
-}
-
-.socials a {
-    text-decoration: none;
-
-    transition: color 0.3s;
-}
-
 #include portfolio.css
 #include planets.css
+#include footer.css