added some responsive
This commit is contained in:
parent
341dd400a4
commit
cce2ff6cfc
14
index.html
14
index.html
@ -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
BIN
src/img/button.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.4 KiB |
@ -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);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user