Contact page favicon

axum_server/src/main.rs

@@ -54,8 +54,11 @@ async fn main() {
 
 // TODO Socials
 // - fotos
-// TODO go live pipeline
+// consulting session link
+// TODO Change DNS system
+// THINK deploy to alula? rather then katelyn? can be change whenever
 // TODO after release
+// OG tags
 // Remove old web completely
 // Restructure repository
 // - contact

axum_server/src/pages/blog_post_list.rs

@@ -64,7 +64,7 @@ pub async fn render_blog_post_list(
     };
 
     Ok(PostListTemplate {
-        title: "Posts".to_owned(),
+        title: "Blog posts".to_owned(),
         posts,
         tag,
         header_props,

axum_server/styles/input.css

@@ -69,11 +69,11 @@
 }
 
 a {
-  @apply text-pink-800 underline underline-offset-2;
+  @apply text-pink-800 underline underline-offset-2 hover:transition hover:text-blue-500;
 
-  &:hover {
-    @apply transition text-blue-500;
-  }
+  /* &:hover { */
+  /* @apply transition text-blue-500; */
+  /* } */
 }
 
 strong {
@@ -103,9 +103,11 @@ img[height] {
   p {
     @apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
   }
+
   pre {
     @apply p-4 my-1 overflow-auto text-sm mx-auto max-w-read;
   }
+
   figure {
     @apply p-4;
 
@@ -164,6 +166,10 @@ img[height] {
   }
 }
 
+article a {
+  @apply visited:text-purple-700;
+}
+
 .video-embed {
   @apply m-4 mx-auto max-w-image aspect-video;
 }

axum_server/styles/output.css

@@ -815,6 +815,22 @@ video {
   max-width: 64rem;
 }
 
+.max-w-96 {
+  max-width: 24rem;
+}
+
+.max-w-\[64rem\] {
+  max-width: 64rem;
+}
+
+.max-w-\[48rem\] {
+  max-width: 48rem;
+}
+
+.max-w-\[32rem\] {
+  max-width: 32rem;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -877,6 +893,10 @@ video {
   gap: 1rem;
 }
 
+.self-start {
+  align-self: flex-start;
+}
+
 .self-center {
   align-self: center;
 }
@@ -944,6 +964,10 @@ video {
   fill: #0b2746;
 }
 
+.fill-blue-900 {
+  fill: #103e6a;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -1099,6 +1123,11 @@ video {
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
+.text-blue-800 {
+  --tw-text-opacity: 1;
+  color: rgb(12 73 128 / var(--tw-text-opacity));
+}
+
 .no-underline {
   text-decoration-line: none;
 }
@@ -1114,17 +1143,22 @@ a {
   color: rgb(146 22 110 / var(--tw-text-opacity));
   text-decoration-line: underline;
   text-underline-offset: 2px;
-  &:hover {
+}
+
+a:hover {
   --tw-text-opacity: 1;
   color: rgb(23 137 224 / var(--tw-text-opacity));
-  }
-  &:hover {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+
+a {
+  /* &:hover { */
+  /* @apply transition text-blue-500; */
+  /* } */
 }
 
 strong {
@@ -1752,6 +1786,10 @@ img[height] {
   }
 }
 
+article a:visited {
+  color: rgb(68 30 115 );
+}
+
 .video-embed {
   margin: 1rem;
   margin-left: auto;
@@ -1760,11 +1798,36 @@ img[height] {
   max-width: min(70rem, 95vw);
 }
 
+.visited\:text-purple-700:visited {
+  color: rgb(68 30 115 );
+}
+
 .hover\:bg-pink-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 207 247 / var(--tw-bg-opacity));
 }
 
+.hover\:fill-blue-400:hover {
+  fill: #42a6f0;
+}
+
+.hover\:text-blue-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(66 166 240 / var(--tw-text-opacity));
+}
+
+@media (min-width: 640px) {
+  .sm\:my-4 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .sm\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}
+
 @media (min-width: 768px) {
   .md\:my-8 {
     margin-top: 2rem;
@@ -1853,6 +1916,16 @@ img[height] {
     grid-row-start: 2;
   }
 
+  .lg\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .lg\:my-6 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
   .lg\:mt-20 {
     margin-top: 5rem;
   }

axum_server/templates/base.html

@@ -21,8 +21,8 @@
 
     <link rel="manifest" href="/manifest.json" />
 
-    <link rel="icon" type="image/svg+xml" href="/m-logo.svg" />
-    <link rel="icon" type="image/png" href="/m-logo-192.png" />
+    <link rel="icon" type="image/svg+xml" href="/images/m-logo.svg" />
+    <link rel="icon" type="image/png" href="/images/m-logo-192.png" />
   </head>
   <body class="bg-blue-50">
     {% include "site_header.html" %}

axum_server/templates/blog_post.html

@@ -21,6 +21,7 @@
 </article>
 
 <!-- TODO: Next recommendations for reading -->
+<!-- TODO: Bact to all posts -->
 
 {# footer #}
 {% endblock %}

axum_server/templates/components/blog_post_preview.html

@@ -11,7 +11,7 @@
 	</aside>
 	<header>
 		<h3 class="text-lg font-bold mb-1 md:text-3xl">
-		  <a rel="prefetch" href="/blog/{{post.slug}}" class="text-blue-950 no-underline">{{post.metadata.title}}</a>
+		  <a rel="prefetch" href="/blog/{{post.slug}}" class="text-blue-950 visited:text-purple-700 no-underline">{{post.metadata.title}}</a>
 		</h3>
 	</header>
 	<section class="text-base leading-5 text-slate-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>

axum_server/templates/components/project_preview_card.html

@@ -1,4 +1,4 @@
-<article class="border rounded-md bg-white m-4 p-4 break-inside-avoid">
+<section class="border rounded-md bg-white m-4 p-4 break-inside-avoid">
   <header class="px-4 mb-3"> 
     <h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
       {% match project.metadata.link %}
@@ -46,4 +46,4 @@
       {% endfor %}
     </ul>
 	</footer>
-</article>
+</section>

axum_server/templates/contact.html

@@ -1,19 +1,20 @@
 {% extends "base.html" %}
 {% block content %} 
 
-<h1 class="mx-6 mt-3 text-4xl text-blue-950 font-extrabold">
+<section id="contact-page">
+  <h1 class="mx-6 mt-3 text-4xl text-blue-950 font-extrabold lg:mx-auto max-w-read">
     Contact
   </h1>
 
   <ul class="mx-6">
     {% for link in links %}
-  <li class="my-6">
+    <li class="my-2 sm:my-4 lg:my-6 max-w-[32rem] mx-auto">
       <a
-      class="flex border-2 place-content-center items-center rounded-full border-blue-500 py-5 hover:bg-pink-200 transition-colors"
+        class="flex border-2 place-content-center items-center rounded-full text-blue-900 border-blue-500 py-2 sm:py-4 hover:bg-pink-200 fill-blue-900 hover:fill-blue-400 transition-colors no-underline"
         href="{{link.href}}"
         title="{{link.title}}"
       >
-      <svg aria-hidden="true" class="h-6 w-6 fill-blue-950 mx-2">
+        <svg aria-hidden="true" class="h-6 w-6 mx-2 self-start">
           <use xlink:href="/svg/icons-sprite.svg#{{link.svg}}" />
         </svg>
         <span class="text-lg font-semibold">{{link.label}}</span>
@@ -21,5 +22,6 @@
     </li>
     {% endfor %}
   </ul>
+</section>
 
 {% endblock %}

axum_server/templates/site_footer.html

@@ -14,7 +14,7 @@
     <a
       rel="cc:attributionURL dct:creator"
       property="cc:attributionName"
-      href="https://michalvanko.dev/"
+      href="/contact"
       >Michal Vanko</a
     >
     is licensed under