jaytux/jaytux.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling for mobile

Browse Source
This commit is contained in:
jay-tux
2025-07-05 22:04:32 +02:00
parent b844dc9007
commit e0fcefb3a3
3 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -182,6 +182,10 @@
<p class="date">2025-04-13</p> <p class="date">2025-04-13</p>
</header> </header>
<div class="header-container"> <div class="header-container">
<div class="mobile-image">
<img src="./picture.jpg" alt="A picture of me" class="header-image" />
<img src="./pfp.png" alt="My typical profile picture" class="header-image" />
</div>
<img src="./picture.jpg" alt="A picture of me" class="header-image left" /> <img src="./picture.jpg" alt="A picture of me" class="header-image left" />
<div class="header-details"> <div class="header-details">
<h1> <h1>

4
jaytux.com.md
View File

@ -11,6 +11,10 @@ header-includes:
--- ---
<div class="header-container"> <div class="header-container">
<div class="mobile-image">
<img src="./picture.jpg" alt="A picture of me" class="header-image" />
<img src="./pfp.png" alt="My typical profile picture" class="header-image" />
</div>
<img src="./picture.jpg" alt="A picture of me" class="header-image left" /> <img src="./picture.jpg" alt="A picture of me" class="header-image left" />
<div class="header-details"> <div class="header-details">
<h1>Jonas Sys</h1> <h1>Jonas Sys</h1>

15
overrides.css
View File

@ -32,3 +32,18 @@ header {
vertical-align: middle; vertical-align: middle;
height: 1em; height: 1em;
} }
.mobile-image {
display: none;
}
@media(max-width: 700px) {
.mobile-image {
display: flex;
flex-direction: column;
}
.left, .right {
display: none;
}
}