add diff image formats and sized & tweaks

2024-11-23 21:11:21 +01:00 · 2024-11-23 21:11:21 +01:00 · e3919eb0c0
commit e3919eb0c0
parent 2c3f692beb
17 changed files with 44 additions and 12 deletions
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
@ -15,8 +15,8 @@
  <meta name="og:title" content="Javalsai's Website" />
  <meta property="og:description" content="🐧javalsai's personal website" />
  <meta property="og:image" content="https://javalsai.dynv6.net/logo.png">
-  <meta property="og:image:width" content="864">
-  <meta property="og:image:height" content="864">
+  <meta property="og:image:width" content="2048">
+  <meta property="og:image:height" content="2048">

  <meta name="profile:username" content="javalsai" />
  <meta name="profile:gender" content="male" />
@ -24,6 +24,9 @@
  <meta property="twitter:image" content="https://javalsai.dynv6.net/logo.png">

  <link rel="stylesheet" href="style.css">
+
+
+  <link rel="me" href="https://mastodon.social/@javalsai">
 </head>

 <body class="flex column">
@ -37,11 +40,20 @@
          has big downtimes sometimes.</p>
        <p>Not much to see, there's some subdomains in the top corner and this is just an intro to the domain and myself
          in a way, but hey, it's responsive and clean. No JS, pure clean HTML structure and simple CSS.
-          <b><u>Unless</u></b> it's an interactive thing, but that will only be for some optional perks.</p>
+          <b><u>Unless</u></b> it's an interactive thing, but that will only be for some optional perks.
+        </p>
      </div>
      <div>
        <a href="/logo.png" target="_blank" style="display: inline-block;">
-          <img class="logo" src="/logo.png" />
+          <picture>
+            <source srcset="/logos/logo_2048.avif 2048w, /logos/logo_1024.avif 1024w, /logos/logo_512.avif 512w"
+              type="image/avif" />
+            <source srcset="/logos/logo_2048.webp 2048w, /logos/logo_1024.webp 1024w, /logos/logo_512.webp 512w"
+              type="image/webp" />
+            <source srcset="/logos/logo_2048.png 2048w, /logos/logo_1024.png 1024w, /logos/logo_512.png 512w"
+              type="image/png" />
+            <img alt="logo image" class="logo" src="/logo.png" />
+          </picture>
        </a>
      </div>
    </div>
@ -57,8 +69,9 @@
        <p>I'm a huge Linux nerd and love messing around with the internals of my system, like filesystems, init
          systems, network settings...</p>
        <p>I also love hosting my own stuff like gitea, email, file server or http/s servers.</p>
-        <p>And about myself, well idk, I live in Spain 🇪🇸, I love skiing, and I also like maths and physics. Generally a
-          nerd of any scientific branch.</p>
+        <p>And about myself, well idk, I live in Spain 🇪🇸, I love skiing, and I also like maths and physics. Generally
+          a nerd of any scientific branch. I speak Spanish, English (of course) and a <i><u>little</u></i> of Italian.
+        </p>
      </div>
      <div>
        <h2><a class="reference" id="socials" href="#socials">Socials</a></h2>
@ -76,6 +89,7 @@
              style="--pre-icon: url(/assets/discord.svg); --scale-x: 1.2;">discord</a></li>
          <li><a href="https://reddit.com/user/javalsai/" target="_blank" class="pre-icon"
              style="--pre-icon: url(/assets/reddit.svg);">reddit</a></li>
+          <!-- TODO: add mastodon -->
        </ul>
        <p>Also, not really socials but related:</p>
        <ul>
@ -86,15 +100,20 @@
              48gGNbMVP2BZErXXB49AjVJvQDGFbyUyZd7fEMQe1weuPsrydbcaPftBggJddQP81U2ShS5Gju28oFhBGuhXiuMR8rsGZ4R
            </code></li>
        </ul>
+        <p>And also, idk, but I'll add steam, duolingo and chess profiles just bcs I'm bored later.</p>
      </div>
    </div>
  </main>
-  <footer>
-    <p>
-      I hate web-dev, but ig it's cool to have a website
-      <br />
-      and no, no <i>light</i> mode, I have enough with this
-    </p>
+  <footer class="flex row space-between">
+    <div></div>
+    <div>
+      <p>
+        I hate web-dev, but ig it's cool to have a website
+        <br />
+        and no, no <i>light</i> mode, I have enough with this
+      </p>
+    </div>
+    <div><a href="https://git.javalsai.dynv6.net/javalsai/website">source</a></div>
  </footer>
 </body>

--- a/logo-round.png
+++ b/logo-round.png
--- a/logo.png
+++ b/logo.png
--- a/logos/logo_1024.avif
+++ b/logos/logo_1024.avif
--- a/logos/logo_1024.png
+++ b/logos/logo_1024.png
--- a/logos/logo_1024.webp
+++ b/logos/logo_1024.webp
--- a/logos/logo_2048.avif
+++ b/logos/logo_2048.avif
--- a/logos/logo_2048.png
+++ b/logos/logo_2048.png
--- a/logos/logo_2048.webp
+++ b/logos/logo_2048.webp
--- a/logos/logo_512.avif
+++ b/logos/logo_512.avif
--- a/logos/logo_512.png
+++ b/logos/logo_512.png
--- a/logos/logo_512.webp
+++ b/logos/logo_512.webp
--- a/styles/bundles/markdown.css
+++ b/styles/bundles/markdown.css
@ -24,6 +24,10 @@ body {
  caret-color: var(--primary);
 }

+img {
+  width: 100%;
+}
+
 math {
  font-family: "Crimson Text";
 }
--- a/styles/classes/flex.css
+++ b/styles/classes/flex.css
@ -17,3 +17,7 @@
 .flex.same-width {
  flex: 1;
 }
+
+.flex.space-between {
+  justify-content: space-between;
+}
--- a/styles/classes/ul-directions.css
+++ b/styles/classes/ul-directions.css
@ -3,6 +3,7 @@
  margin: 0;
  padding: 0;
  gap: .3em;
+  line-height: 2em;
 }

 .row-ul > li {
--- a/styles/components/pre-icon.css
+++ b/styles/components/pre-icon.css
@ -10,10 +10,14 @@

 .pre-icon::before {
  content: '';
+  /*content: var(--pre-icon);*/
  mask: var(--pre-icon);
  mask-size: cover;
  background: var(--dark);
+  /*width: unset;*/
+  /*object-fit: cover;*/
  width: calc(1em * var(--scale-x));
+  /*height: .1em;*/
  height: calc(1em * var(--scale-y));
  margin-right: .3em;
  display: inline-block;