kloeckner.com.ar

Index Commits Files Refs README LICENSE

commit 20b43e240dda9e0387e23e03a5535739f1689865
parent c77128d49862fa02f10f3f906be77ff912c90ae7
Author: mjkloeckner <martinjkloeckner@gmail.com>
Date:   Sat, 17 Feb 2024 21:29:06 -0300

Renamed webpage title and make it shorter on narrow viewports

The main title changes as follows:
                Old    New
    Martin Klöckner -> Martin Klöckner's Webpage (if viewport > 800px)
    Martin Klöckner -> Martin's Webpage (if viewport <= 800px)

Diffstat:
M
common/header.shtml
 | 
3
++-
M
css/style.css
 | 
45
+++++++++++++++++++++++++++------------------

2 files changed, 29 insertions(+), 19 deletions(-)
diff --git a/common/header.shtml b/common/header.shtml
@@ -1,7 +1,8 @@
 <header>
     <div class="header_flex_div">
         <h1 id="header_title">
-            <a href="/" id="header_link">Martin Klöckner</a>
+            <a href="/" id="header_link">Martin Klöckner's Webpage</a>
+            <a href="/" id="header_link_short">Martin's Webpage</a>
         </h1>
          <ul class="header_buttons">
              <li class="header_button" style="padding-right: 10px"><a href="https://git.kloeckner.com.ar/" style="text-decoration: none;">git</a></li>
diff --git a/css/style.css b/css/style.css
@@ -67,11 +67,11 @@ body {
 header {
     color: crimson;
 
-    max-width: 40em;
+    max-width: 39em;
 
     margin-left: auto;
     margin-right: auto;
-    margin-top: 1em;
+    margin-top: .5em;
     margin-bottom: .25em;
 
     text-align: center;
@@ -84,7 +84,7 @@ header {
 
 .header_flex_div {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     flex-wrap: wrap;
     align-items: baseline;
 }
@@ -100,14 +100,14 @@ header {
     height: 0px;
     margin-left: auto;
     margin-right: auto;
-    margin-top: 0;
-    margin-bottom: 0;
+    margin-top: .5em;
+    margin-bottom: .5em;
     padding-top: 0;
     padding-bottom: 0;
     border-top: 1px dashed peru;
 }
 
-#header_link {
+#header_link, #header_link_short {
     text-decoration: none;
     color: inherit;
     transition: .75;
@@ -115,25 +115,30 @@ header {
     font-family: inconsolata, "Futura Medium";
 }
 
+#header_link_short {
+    display: none;
+}
+
 #header_link:hover {
     color: peru;
 }
 
 #header_title {
-    margin-bottom: 0em;
-    font-size: 2.5em;
+    margin-bottom: .150em;
+    font-size: 2.25em;
+    width: 100%;
 }
 
 article {
     color: antiquewhite;
 
-    max-width: 40em;
+    max-width: 39em;
 
     margin-left: auto;
     margin-right: auto;
     margin-bottom: .9em;
 
-    text-align: left;
+    text-align: justify;
 
     padding-left: 0.5em;
     padding-right: 0.5em;
@@ -155,7 +160,7 @@ article {
 
     margin-left: auto;
     margin-right: auto;
-    margin-top: 1.5em;
+    margin-top: 1em;
     margin-bottom: 0;
 
     padding-top: 0;
@@ -234,10 +239,12 @@ ul {
 }
 
 .header_buttons {
-    margin: 0;
+    margin: 0 0 .100em 0;
     padding-bottom: 0em;
     font-size: 1.5em;
     display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     list-style-type: none;
 }
 
@@ -414,9 +421,7 @@ time {
         margin-top: 1em;
     }
     #header_title {
-        font-size: 2.75em;
-        padding-left: .5em;
-        padding-right: .5em;
+        font-size: 2.50em;
         line-height: 1.10em;
         padding-bottom: .10em;
     }
@@ -428,13 +433,17 @@ time {
         padding-bottom: .25em;
     }
     p { padding-bottom: .5em; }
+    #header_link {
+        display: none;
+    }
+    #header_link_short {
+        display: initial;
+    }
 }
 
 @media (max-width: 400px) {
     #header_title {
-        font-size: 2.5em;
-        padding-left: .25em;
-        padding-right: .25em;
+        font-size: 2.25em;
     }
     .header_buttons {
         padding-bottom: .25em;