Better responsive design

This commit is contained in:
Hexaitos 2024-09-30 15:13:37 +02:00
parent 4be9265b69
commit 7cd4c7fad3
12 changed files with 43 additions and 15 deletions

View File

@ -1 +1,2 @@
<p>2024 - {{ 'now' | date: "%Y" }} hexaitos.com</p>
<p>Made with Jekyll</p>

View File

@ -18,7 +18,9 @@
</div>
<h1>Welcome to my website!</h1>
<p>Hello and welcome to my website :> My name is Hexaitos (or just Hex). I am a bateleur eagle from Germany. I like working with computers (especially Linux) and networks, playing (video) games, learning languages, taking photos and a bunch of other things, depending on what I am currently fixiated upon. </p>
<p>Hello and welcome to my website :> My name is Hexaitos (or just Hex). I am a bateleur eagle from Germany. I like working with computers (especially Linux) and networks, playing (video) games, learning languages, taking photos and a bunch of other things, depending on what I am currently fixiated upon. If you want to get in touch, look at the <a href="contact.html">contact</a> page!</p>
<p>This website is still very much a work-in-progress. I will be adding a <a href="blog.html">blog</a> where I will be posting things mostly about computers and games. </p>
</div>
</body>

View File

@ -26,6 +26,7 @@
<footer>
<p>2024 - 2024 hexaitos.com</p>
<p>Made with Jekyll</p>
</footer>
</html>

View File

@ -123,12 +123,13 @@ div.main {
div.menu {
/* background: #ae4e26; */
background: #2b2623;
padding: 1em;
padding: .5em;
margin-bottom: 2em;
overflow: hidden;
text-align: center;
border-radius: 10px;
height: 3em;
min-height: 3em;
height: auto;
}
.menu p {
@ -152,6 +153,8 @@ div.menu {
display:inline-block;
font-size: medium;
border-radius: 10px;
margin-bottom: .5em;
margin-top: .5em;
}
.menu a:hover, .contact a:hover {
@ -204,11 +207,17 @@ footer p {
color: white;
}
footer p:first-of-type {
float: left;
}
footer p:last-of-type {
float: right;
}
/* Responsive design stuff */
@media only screen and (max-width: 900px) {
.menu a {
margin-bottom: .5em;
margin-top: .5em;
font-size: medium;
min-width: 80px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 836 KiB

View File

@ -25,6 +25,7 @@
<footer>
<p>2024 - 2024 hexaitos.com</p>
<p>Made with Jekyll</p>
</footer>
</html>

View File

@ -34,6 +34,7 @@
<footer>
<p>2024 - 2024 hexaitos.com</p>
<p>Made with Jekyll</p>
</footer>
</html>

View File

@ -24,12 +24,15 @@
</div>
<h1>Welcome to my website!</h1>
<p>Hello and welcome to my website :> My name is Hexaitos (or just Hex). I am a bateleur eagle from Germany. I like working with computers (especially Linux) and networks, playing (video) games, learning languages, taking photos and a bunch of other things, depending on what I am currently fixiated upon. </p>
<p>Hello and welcome to my website :> My name is Hexaitos (or just Hex). I am a bateleur eagle from Germany. I like working with computers (especially Linux) and networks, playing (video) games, learning languages, taking photos and a bunch of other things, depending on what I am currently fixiated upon. If you want to get in touch, look at the <a href="contact.html">contact</a> page!</p>
<p>This website is still very much a work-in-progress. I will be adding a <a href="blog.html">blog</a> where I will be posting things mostly about computers and games. </p>
</div>
</body>
<footer>
<p>2024 - 2024 hexaitos.com</p>
<p>Made with Jekyll</p>
</footer>
</html>

View File

@ -20,16 +20,17 @@
<div class="main">
<h1 id="my-ref-sheet">My ref sheet</h1>
<p><a href="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur.png" target="_blank">
<img src="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur.png" />
<img src="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur_thumb.png" />
</a></p>
<p>Drawn by <a href="https://faultyarts.carrd.co/">FaultyArts</a>.</p>
<p>Drawn by <a href="https://faultyarts.carrd.co/">FaultyArts</a>. Click the image to enlargen it (opens it in a new tab, roughly 4 MB).</p>
</div>
</body>
<footer>
<p>2024 - 2024 hexaitos.com</p>
<p>Made with Jekyll</p>
</footer>
</html>

View File

@ -123,12 +123,13 @@ div.main {
div.menu {
/* background: #ae4e26; */
background: #2b2623;
padding: 1em;
padding: .5em;
margin-bottom: 2em;
overflow: hidden;
text-align: center;
border-radius: 10px;
height: 3em;
min-height: 3em;
height: auto;
}
.menu p {
@ -152,6 +153,8 @@ div.menu {
display:inline-block;
font-size: medium;
border-radius: 10px;
margin-bottom: .5em;
margin-top: .5em;
}
.menu a:hover, .contact a:hover {
@ -204,11 +207,17 @@ footer p {
color: white;
}
footer p:first-of-type {
float: left;
}
footer p:last-of-type {
float: right;
}
/* Responsive design stuff */
@media only screen and (max-width: 900px) {
.menu a {
margin-bottom: .5em;
margin-top: .5em;
font-size: medium;
min-width: 80px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 836 KiB

View File

@ -5,7 +5,7 @@ title: "Hexaitos.com Ref Sheet"
# My ref sheet
<a href="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur.png" target="_blank">
<img src="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur.png">
<img src="/assets/images/Hexaitos/FaultyArts/hexaitos_bateleur_thumb.png">
</a>
Drawn by [FaultyArts](https://faultyarts.carrd.co/).
Drawn by [FaultyArts](https://faultyarts.carrd.co/). Click the image to enlargen it (opens it in a new tab, roughly 4 MB).