hms/web
1
0
Fork 0
Code Activity Actions

feat: better image view

Browse source
This commit is contained in:
Henri Saudubray 2025-08-18 14:55:45 +02:00
parent 0084c62981
commit efdfb5c3e9
Signed by: hms
GPG key ID: 7065F57ED8856128
7 changed files with 35 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

14
css/base.css
View file

@ -22,12 +22,14 @@ html {
height: 20px; height: 20px;
} }
.color.red { background-color: rgb(228, 3, 3); height: 16.66%; } /* .color.red { background-color: rgb(228, 3, 3); height: 16.66%; } */
.color.orange { background-color: rgb(255, 140, 0); height: 16.66%; } /* .color.orange { background-color: rgb(255, 140, 0); height: 16.66%; } */
.color.yellow { background-color: rgb(255, 237, 0); height: 16.66%; } /* .color.green { background-color: rgb(0, 128, 38); height: 16.66%; } */
.color.green { background-color: rgb(0, 128, 38); height: 16.66%; } /* .color.blue { background-color: rgb(0, 76, 255); height: 16.66%; } */
.color.blue { background-color: rgb(0, 76, 255); height: 16.66%; } .color.yellow { background-color: #FFF433; height: 25%; }
.color.purple { background-color: rgb(115, 41, 130); height: 16.66%; } .color.white { background-color: #FFF8E7; height: 25%; }
.color.purple { background-color: #9B59D0; height: 25%; }
.color.black { background-color: #2D2D2D; height: 25%; }
header { padding-top: 25px; } header { padding-top: 25px; }

17
css/imgs.css
View file

@ -5,3 +5,20 @@ img {
header, div { header, div {
text-align: center; text-align: center;
} }
main {
display: flex;
flex-wrap: wrap;
}
div {
height: 40vh;
flex-grow: 1;
}
img {
max-height: 100%;
min-width: 100%;
object-fit: cover;
vertical-align: bottom;
}

6
fish.html
View file

@ -10,12 +10,10 @@
</head> </head>
<body> <body>
<div id="pride-banner"> <div id="pride-banner">
<div class="color red"></div>
<div class="color orange"></div>
<div class="color yellow"></div> <div class="color yellow"></div>
<div class="color green"></div> <div class="color white"></div>
<div class="color blue"></div>
<div class="color purple"></div> <div class="color purple"></div>
<div class="color black"></div>
</div> </div>
<header>THE FISH &gt;&lt;&gt;</header> <header>THE FISH &gt;&lt;&gt;</header>
<main> <main>

6
index.html
View file

@ -10,12 +10,10 @@
</head> </head>
<body> <body>
<div id="pride-banner"> <div id="pride-banner">
<div class="color red"></div>
<div class="color orange"></div>
<div class="color yellow"></div> <div class="color yellow"></div>
<div class="color green"></div> <div class="color white"></div>
<div class="color blue"></div>
<div class="color purple"></div> <div class="color purple"></div>
<div class="color black"></div>
</div> </div>
<header>HELLO THERE :)</header> <header>HELLO THERE :)</header>
<main> <main>

6
links.html
View file

@ -10,12 +10,10 @@
</head> </head>
<body> <body>
<div id="pride-banner"> <div id="pride-banner">
<div class="color red"></div>
<div class="color orange"></div>
<div class="color yellow"></div> <div class="color yellow"></div>
<div class="color green"></div> <div class="color white"></div>
<div class="color blue"></div>
<div class="color purple"></div> <div class="color purple"></div>
<div class="color black"></div>
</div> </div>
<header>THE LINKS</header> <header>THE LINKS</header>
<main> <main>

6
man.html
View file

@ -10,12 +10,10 @@
</head> </head>
<body> <body>
<div id="pride-banner"> <div id="pride-banner">
<div class="color red"></div>
<div class="color orange"></div>
<div class="color yellow"></div> <div class="color yellow"></div>
<div class="color green"></div> <div class="color white"></div>
<div class="color blue"></div>
<div class="color purple"></div> <div class="color purple"></div>
<div class="color black"></div>
</div> </div>
<header> <header>
<span>HENRI(1)</span> <span>HENRI(1)</span>

6
tiles.html
View file

@ -10,12 +10,10 @@
</head> </head>
<body> <body>
<div id="pride-banner"> <div id="pride-banner">
<div class="color red"></div>
<div class="color orange"></div>
<div class="color yellow"></div> <div class="color yellow"></div>
<div class="color green"></div> <div class="color white"></div>
<div class="color blue"></div>
<div class="color purple"></div> <div class="color purple"></div>
<div class="color black"></div>
</div> </div>
<header>THE TILES</header> <header>THE TILES</header>
<main> <main>