gists
/
minifantasytheater
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: suggested changes 

It's been a long time since I edited a XHTML document instead of HTML5.
I like it!

The modern CSS is gravitating towards CSS Logical Properties:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values

Therefore I have the habit to use it, since the support is quite good.
It doesn't hurt to have the old way of doing it in the line above, so
that the design is progressively enhanced.

Next, <center> element is deprecated:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

The CSS class is doing the same thing (place items in the center,
horizontally and vertically). CSS Tricks also has a handy guide:
https://css-tricks.com/centering-css-complete-guide/

Finally, Images must have an alt-attribute. Even if it is empty.
Since the image is linked below I decided to not add a description here.
I don't know what David's intention with the image is. To me, this goes
into the direction of Art Direction.

Speaking of which, there is a lot you can do these days with responsive
images: https://web.dev/articles/responsive-images?hl=fr

Even to the point to combine aspect-ratio with object-fit and
object-position: https://henry.codes/writing/pure-css-focal-points/

I'm not sure whether this is interesting to David, but I leave it here
for others to pick up. Right now, I dynamically scale the image.
A trick I've learned from Bootstrap:
https://getbootstrap.com/docs/4.0/content/images/#responsive-images

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2024-04-02 09:54:02 +02:00
parent c078a1c8c7
commit 5e3f8e5892
No known key found for this signature in database
GPG Key ID: 5A668E771F1ED854
1 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
Mini Fantasy Theater.html
View File

@ -17,6 +17,7 @@ body {
#wrapper {
padding: 3em;
padding-top: 0;
padding-inline-start: 0;
}
h1 {
color: #f4eba6;
@ -26,25 +27,28 @@ h1 {
a {
color: #c67140;
}
img {
display: block;
max-width: 100%;
height: auto;
}
.center {
display: grid;
place-items: center;
}
</style>
<style></style></head>
<body data-emoji-to-english-hide-emojis="0">
<center>
</head>
<body>
<article class="center">
<div id="wrapper">
<p>
</p><h1>~ Mini Fantasy Theater ~</h1>
<h1>~ Mini Fantasy Theater ~</h1>
Welcome here! Sorry, you won't find anything on this page.<br>
I just made it to reserve the namespace.<br>
<br>
You can read more about this project <a href="https://www.davidrevoy.com/article1020/">in this blog post.</a>
<br><br>
<img src="Mini%20Fantasy%20Theater-Dateien/2022-05-06_Fediverse-Doom-Grey-color-challenge_by-David-Revo.jpg"><br>
<img src="Mini%20Fantasy%20Theater-Dateien/2022-05-06_Fediverse-Doom-Grey-color-challenge_by-David-Revo.jpg" alt=""><br>
<a href="https://www.peppercarrot.com/en/viewer/misc__2022-05-06_Fediverse-Doom-Grey-color-challenge_by-David-Revoy.html">"Fediverse Doom Grey color challenge"</a> by David Revoy− <a href="https://creativecommons.org/licenses/by/4.0/deed.en">CC-BY 4.0</a>
<p></p>
</div>
</center>
</body></html>
</article>
</body></html>