Guams/guams_homepage
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

added some responsive

Browse Source
This commit is contained in:
guams 2025-06-13 21:09:30 +02:00
parent 341dd400a4
commit cce2ff6cfc
3 changed files with 54 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -12,20 +12,20 @@
<div class="title-bar window-border">
<div class="title-bar-text">Guams - Home</div>
<div class="title-bar-controls">
<button class="title-bar-button">
<button class="title-bar-button minimize-button">
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
</button>
<button class="title-bar-button">
<button class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button>
<button class="title-bar-button">
<button class="title-bar-button close-button">
<img alt="close button" src="/src/img/close.svg" aria-hidden="true">
</button>
</div>
</div>
<div class="window-border">
<div class="banner-div window-border">
<img src="/src/img/banner_about.png">
<img id="banner" alt="profile banner" src="/src/img/banner_about.png">
</div>
</div>
<div class="content window-border">
@ -40,14 +40,14 @@
<div class="title-bar window-border">
<div class="title-bar-text">Changelog</div>
<div class="title-bar-controls">
<button class="title-bar-button">
<button class="title-bar-button minimize-button">
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
</button>
<button class="title-bar-button">
<button class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button>
<button class="title-bar-button">
<img alt="close button" src="/src/img/close.svg" aria-hidden="true">
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
</button>
</div>
</div>

BIN
src/img/button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

48
src/style.css
View File

@ -1,6 +1,7 @@
* {
font-family: 'M PLUS 1p', sans-serif;
/*font-family: ms ui gothic, sans-serif;*/
text-align: justify;
margin: 0;
font-size: 16px;
}
@ -12,6 +13,10 @@
inset -4px -4px #C3C3C3, inset 4px 4px #C3C3C3;
}
h1 {
text-align: center;
}
.left-panel {
width: 100%;
display: flex;
@ -165,5 +170,46 @@ h1 {
width: 80%;
padding: 7px;
min-width: 70%;
text-align: center;
}
/* Responsive */
@media (max-width: 850px) {
* {
font-size: 12px;
}
.presentation {
word-break: break-word;
padding: 0;
}
.minimize-button {
width: 0;
height: 0;
visibility: hidden;
}
.maximize-button {
height: 0;
width: 0;
visibility: hidden;
}
#banner {
width: 100%;
height: 100%;
object-fit: fill;
}
main {
width:100%;
}
.banner-div {
display: block;
max-width: 100%;
height: auto;
background: rgba(0, 0, 0, 0.5);
}
}