make homepage more responsive

This commit is contained in:
davidovski 2024-05-23 00:40:01 +01:00
parent eef42271c3
commit 96d83ab314
3 changed files with 55 additions and 31 deletions

View file

@ -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

View file

@ -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>
|

View file

@ -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%;
}