make homepage more responsive

site/index.html

@@ -10,15 +10,11 @@ cat << EOF
 
 	</div>
 
-	<div class="image">
-		<img src="/images/remotecontrol.gif">
-	</div>
-</div>
 
 EOF
 
 cat << EOF
-    <div>
+<div class="posts">
     <h2>blog posts</h2>
 
     <ul>
@@ -40,19 +36,24 @@ for file in $entries; do
 
 cat << EOF
     </ul>
+</div>
 EOF
 
 cat << EOF
-	<div class="left">
+	<div class="main-image">
+		<img src="/images/remotecontrol.gif">
+	</div>
+
+	<div>
         <h2>donate</h2>
 
         <p>if you like what i do and you want to support me, consider donating <a href="https://www.getmonero.org/">Monero</a></p>
 
 		<code>49ECi71yshT6kvzFJKyvVDXLarVp9EGR54ZUw9ebqPetKn2kbaRavFG4FCG4MALkGXVZ16KM5c92MJ7vDWL7iwFs66Q1UQ2</code>
 	</div>
-	<div class="right">
+	<div>
         <h2>contact</h2>
 
 		<p>if you want to contact me, you can message me on matrix <code>@ix:davidovski.xyz</code> or via the email linked at the top of the page.</p>
-	</div>
+</div>
 EOF

site/page.sh

@@ -30,6 +30,8 @@ cat << EOF
 					<a color="#cc6666" style="color: var(--red);" href="/f">f</a>
 					|
 					<a color="#cc6666" style="color: var(--red);" href="/s">s</a> 
+					|
+					<a color="#cc6666" style="color: var(--red);" href="/x">x</a> 
 					||
 					<a color="#b5bd68" style="color: var(--green)" href="http://chat.davidovski.xyz/">chat</a>
 					|

site/style.css

@@ -34,7 +34,7 @@ body {
 	color: #fefefe;
 	font-family: mononoki;
 	font-size: 16px;
-	padding: 0;
+	padding: 2;
 	margin: 0;
 }
 
@@ -59,6 +59,7 @@ h1 {
 
 h2 {
 	color: #b4d6d1;
+    margin-top: 0;
 }
 
 h3 {
@@ -67,10 +68,21 @@ h3 {
 
 .small-window {
     width: 100%;
-	max-width: 1080px;
     height: 100%;
-	max-height: 607px;
 }
+
+@media(width > 1080px) {
+    .small-window {
+        max-height: 607px;
+    }
+}
+
+@media(width > 1080px) {
+    .small-window {
+        max-width: 1080px;
+    }
+}
+
 .regular-window {
     width: 70%;
 	max-width: 70%;
@@ -84,18 +96,23 @@ h3 {
 	background-color: #191919;
     margin-left: auto;
     margin-right: auto;
-    top: 50%;
-    left: 50%;
     transform: translate(-50%, -50%);
     position: absolute;
 
-	padding: 2%;
+	padding: 3%;
 	height: 100%;
+    left: 50%;
+    top: 50%;
 
     border-radius: 6px;
     box-shadow: 0px 0px 50px black;
 }
 
+@media(width < 70%) {
+    .main {
+    }
+}
+
 .content {
     overflow: auto;
     height: 80%;
@@ -151,32 +168,39 @@ code {
 
 pre {
 	background-color: #303030;
-        white-space: pre-wrap;
+    white-space: pre-wrap;
 	padding: 5px;
-
 }
 
 .grid {
-	display: inline;
+	display: grid;
+    grid-template-columns: 50% 50%;
+    /*a*/
+    /*grid-auto-rows: max-content;*/
+}
+
+.grid>div {
+    padding: 0.5em;
 }
 
 .about {
     width: auto;
 }
 
-.left {
-    width: 45%;
-    float: left;
+
+.main-image {
+    /*place-self: center;*/
+    grid-row-start: 1;
+    grid-row-end: 3;
+    grid-column-start: 2;
+    width: auto;
+
 }
 
-.right {
-    width: 45%;
-    float: right;
-}
-
-.image {
-	width: auto;
-    float: right;
+.main-image>img {
+    width: 60%;
+    margin-left: 20%;
+    margin-right: 20%;
 }
 
 ul {
@@ -185,6 +209,3 @@ ul {
     padding-left: 0;
 }
 
-img {
-	width: 100%;
-}