summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authordavidovski <david@davidovski.xyz>2024-05-23 00:40:01 +0100
committerdavidovski <david@davidovski.xyz>2024-05-23 00:40:01 +0100
commit96d83ab314b8df7cf2b815a9a29bb12d485d73ca (patch)
tree2c04638c0b65e3ada659c9de3fdaf349b1342967
parenteef42271c3aa88bcf46250950f129e8ba3198320 (diff)
make homepage more responsive
-rwxr-xr-xsite/index.html17
-rwxr-xr-xsite/page.sh2
-rw-r--r--site/style.css65
3 files changed, 54 insertions, 30 deletions
diff --git a/site/index.html b/site/index.html
index 964aa17..54c7cd4 100755
--- a/site/index.html
+++ b/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
diff --git a/site/page.sh b/site/page.sh
index 426eb59..9519f39 100755
--- a/site/page.sh
+++ b/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>
|
diff --git a/site/style.css b/site/style.css
index 7e5c0ee..d2cbe27 100644
--- a/site/style.css
+++ b/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;
-}
-.right {
- width: 45%;
- float: right;
+.main-image {
+ /*place-self: center;*/
+ grid-row-start: 1;
+ grid-row-end: 3;
+ grid-column-start: 2;
+ width: auto;
+
}
-.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%;
-}