diff options
| -rwxr-xr-x | site/index.html | 20 | ||||
| -rwxr-xr-x | site/page.sh | 2 | ||||
| -rw-r--r-- | site/style.css | 65 |
3 files changed, 57 insertions, 30 deletions
diff --git a/site/index.html b/site/index.html index 926ddb7..f40a030 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,27 @@ for file in $entries; do cat << EOF </ul> +</div> EOF cat << EOF - <div class="left"> +<<<<<<< HEAD + <div class="main-image"> + <img src="/images/remotecontrol.gif"> + </div> + + <div> <h2 id="donate">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 id="contact">contact</h2> <p>if you want to contact me, you can message me on matrix <code>@ix:davidovski.xyz</code>, XMPP <code>ix@davidovski.xyz</code>, or via the email linked at the top of the page.</p> - </div> + </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%; -} |