Add translations

assets/style.css

@@ -624,18 +624,10 @@ video {
   right: 0.75rem;
 }
 
-.right-6 {
-  right: 1.5rem;
-}
-
 .top-3 {
   top: 0.75rem;
 }
 
-.top-4 {
-  top: 1rem;
-}
-
 .z-10 {
   z-index: 10;
 }
@@ -662,10 +654,6 @@ video {
   margin-left: -0.125rem;
 }
 
-.-ml-2 {
-  margin-left: -0.5rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -706,10 +694,6 @@ video {
   margin-right: auto;
 }
 
-.mt-4 {
-  margin-top: 1rem;
-}
-
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -778,6 +762,10 @@ video {
   width: 100%;
 }
 
+.min-w-0 {
+  min-width: 0px;
+}
+
 .max-w-8 {
   max-width: 2rem;
 }
@@ -794,18 +782,8 @@ video {
   max-width: 1024px;
 }
 
-.max-w-\[20ch\] {
+.flex-1 {
-  max-width: 20ch;
+  flex: 1 1 0%;
-}
-
-.translate-x-0 {
-  --tw-translate-x: 0px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.translate-x-full {
-  --tw-translate-x: 100%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
 .transform {
@@ -864,14 +842,14 @@ video {
   gap: 0.75rem;
 }
 
-.gap-6 {
-  gap: 1.5rem;
-}
-
 .gap-4 {
   gap: 1rem;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .gap-x-4 {
   -moz-column-gap: 1rem;
        column-gap: 1rem;
@@ -961,9 +939,9 @@ video {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
 
-.from-gray-200 {
+.from-gray-500\/10 {
-  --tw-gradient-from: #e4e4e7 var(--tw-gradient-from-position);
+  --tw-gradient-from: rgb(113 113 122 / 0.1) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(228 228 231 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-to: rgb(113 113 122 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
@@ -1015,19 +993,15 @@ video {
   padding-bottom: 2rem;
 }
 
-.py-2 {
+.px-2 {
-  padding-top: 0.5rem;
+  padding-left: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-right: 0.5rem;
 }
 
 .pb-12 {
   padding-bottom: 3rem;
 }
 
-.pt-12 {
-  padding-top: 3rem;
-}
-
 .pt-24 {
   padding-top: 6rem;
 }
@@ -1094,6 +1068,14 @@ video {
   line-height: 1.5;
 }
 
+.leading-\[1\.5rem\] {
+  line-height: 1.5rem;
+}
+
+.tracking-\[1\.5rem\] {
+  letter-spacing: 1.5rem;
+}
+
 .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(82 82 91 / var(--tw-text-opacity));
@@ -1104,12 +1086,6 @@ video {
   color: rgb(24 24 27 / var(--tw-text-opacity));
 }
 
-.transition-transform {
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 :root {
   --color-gray-50: #fafafa;
   --color-gray-100: #f4f4f5;
@@ -1482,42 +1458,6 @@ html:not(.dark) .light\:hidden {
   z-index: 1;
 }
 
-@media (min-width: 1024px) {
-  .lg\:container {
-    width: 100%;
-  }
-
-  @media (min-width: 640px) {
-    .lg\:container {
-      max-width: 640px;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .lg\:container {
-      max-width: 768px;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .lg\:container {
-      max-width: 1024px;
-    }
-  }
-
-  @media (min-width: 1280px) {
-    .lg\:container {
-      max-width: 1280px;
-    }
-  }
-
-  @media (min-width: 1536px) {
-    .lg\:container {
-      max-width: 1536px;
-    }
-  }
-}
-
 .dark\:hidden:is(.dark *) {
   display: none;
 }
@@ -1541,12 +1481,6 @@ html:not(.dark) .light\:hidden {
   background-color: rgb(239 68 68 / 0.3);
 }
 
-.dark\:from-gray-800:is(.dark *) {
-  --tw-gradient-from: #27272a var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(39 39 42 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .dark\:text-gray-400:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(161 161 170 / var(--tw-text-opacity));
@@ -1593,15 +1527,6 @@ html:not(.dark) .light\:hidden {
 }
 
 @media (min-width: 1024px) {
-  .lg\:static {
-    position: static;
-  }
-
-  .lg\:mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
   .lg\:mb-4 {
     margin-bottom: 1rem;
   }
@@ -1614,53 +1539,12 @@ html:not(.dark) .light\:hidden {
     display: none;
   }
 
-  .lg\:translate-x-0 {
-    --tw-translate-x: 0px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .lg\:flex-row {
-    flex-direction: row;
-  }
-
-  .lg\:bg-transparent {
-    background-color: transparent;
-  }
-
-  .lg\:pb-2 {
-    padding-bottom: 0.5rem;
-  }
-
-  .lg\:pt-0 {
-    padding-top: 0px;
-  }
-
   .lg\:text-\[22px\] {
     font-size: 22px;
   }
-
-  .dark\:lg\:bg-transparent:is(.dark *) {
-    background-color: transparent;
-  }
 }
 
 @media (min-width: 1280px) {
-  .xl\:col-span-1 {
-    grid-column: span 1 / span 1;
-  }
-
-  .xl\:col-start-3 {
-    grid-column-start: 3;
-  }
-
-  .xl\:row-span-2 {
-    grid-row: span 2 / span 2;
-  }
-
-  .xl\:row-start-1 {
-    grid-row-start: 1;
-  }
-
   .xl\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }

i18n/cs.toml

@@ -135,3 +135,27 @@ other = "Další služby"
 
 [loading]
 other = "Načítám..."
+
+[footer_follow_us]
+other = "Sledujte nás:"
+
+[intro_our_services]
+other = "Naše služby"
+
+[intro_custom_services]
+other = "Individuální služby"
+
+[newsletter_subscribe]
+other = "Odebírejte náš newsletter"
+
+[newsletter_info]
+other = "Obecné informace o novinkách v NoLogu. Neposíláme časteji než čtyřikrát ročně."
+
+[newsletter_subscribe_button]
+other = "Odebírat"
+
+[intro_support]
+other = "Jak nás můžete podpořit?"
+
+[services_description]
+other = "Bezplatné alternativy, které respektují soukromí."

i18n/en.toml

@@ -138,3 +138,27 @@ other = "Other services"
 
 [loading]
 other = "Loading..."
+
+[footer_follow_us]
+other = "Follow us:"
+
+[intro_our_services]
+other = "Our services"
+
+[intro_custom_services]
+other = "Custom services"
+
+[newsletter_subscribe]
+other = "Subscribe to our newsletter"
+
+[newsletter_info]
+other = "Get latest news about NoLog. No more than four times a year."
+
+[newsletter_subscribe_button]
+other = "Odebírat"
+
+[intro_support]
+other = "How can you help us?"
+
+[services_description]
+other = "Free tools that protect privacy."

layouts/partials/footer.html

@@ -4,7 +4,7 @@
     </p>
 
     <nav class="flex flex-wrap gap-x-4">
-      <h2 class="mb-2 text-gray-600 dark:text-gray-400">Sledujte nás:</h2>
+      <h2 class="mb-2 text-gray-600 dark:text-gray-400">{{ i18n "footer_follow_us" }}</h2>
       <ul class="flex gap-x-4 flex-wrap">
         <li><a class="link" href="https://newsletter.nolog.cz/subscription/form">Newsletter</a></li>
         <li><a class="link" href="https://updates.nolog.cz/">Ticker</a></li>

layouts/partials/section-intro.html

@@ -1,4 +1,4 @@
-<div class="hero bg-gradient-to-b from-gray-200 to-transparent dark:from-gray-800">
+<div class="hero bg-gradient-to-b from-gray-500/10 to-transparent">
   {{ partial "header.html" . }}
 
   <section class="container mx-auto px-6 py-6 min-h-[min(100vh,30rem)] grid place-items-center">
@@ -6,8 +6,8 @@
       <p class="mb-2 text-xl text-gray-600 dark:text-gray-400">{{ .Params.before }}</p>
       <div class="text-4xl text-balance mb-8 max-w-[30ch]">{{ .Content }}</div>
       <div class="flex justify-center flex-wrap gap-3">
-        <a href="#services" class="button button--secondary">Naše služby</a>
+        <a href="#services" class="button button--secondary">{{ i18n "intro_our_services" }}</a>
-        <a href="/support" class="button button--primary">Podpořte nás</a>
+        <a href="/support" class="button button--primary">{{ i18n "intro_custom_services" }}</a>
       </div>
     </div>
   </section>
@@ -34,8 +34,8 @@
         <div class="max-w-8 mb-4">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2.24283 6.85435L11.4895 1.3086C11.8062 1.11865 12.2019 1.11872 12.5185 1.30878L21.7573 6.85433C21.9079 6.9447 22 7.10743 22 7.28303V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V7.28315C2 7.10748 2.09218 6.94471 2.24283 6.85435ZM4 8.13261V19H20V8.13214L12.0037 3.33237L4 8.13261ZM12.0597 13.6983L17.3556 9.23532L18.6444 10.7647L12.074 16.3017L5.36401 10.7717L6.63599 9.2283L12.0597 13.6983Z"></path></svg>
         </div>
-        <h2 class="text-lg font-bold mb-2">Odebírejte náš newsletter</h2>
+        <h2 class="text-lg font-bold">{{ i18n "newsletter_subscribe" }}</h2>
-        <p class="text-sm">Obecné informace o novinkách v NoLogu. Neposíláme časteji než čtyřikrát ročně.</p>
+        <p class="text-sm">{{ i18n "newsletter_info" }}</p>
       </header>
       <form method="post" action="https://newsletter.nolog.cz/subscription/form" class="listmonk-form">
         <input type="hidden" name="nonce" />
@@ -43,16 +43,16 @@
         <label class="block text-xs mb-2">
           E-mail
         </label>
-        <div class="flex items-end input-group">
+        <div class="flex input-group text-sm">
-          <input type="email" name="email" required placeholder="E-mail" class="input w-full max-w-[30ch]" />
+          <input type="email" name="email" required placeholder="E-mail" class="input w-full max-w-[30ch] text-sm min-w-0" />
-          <button class="button button--primary">Odebírat</button>
+          <button class="button button--primary">{{ i18n "newsletter_subscribe_button" }}</button>
         </div>
       </form>
     </div>
   </section>
   <section class="card md:col-span-2 px-6 md:px-8 py-8 flex flex-col justify-center">
     <header class="mb-8">
-      <h2 class="text-lg font-bold">Jak nás můžete podpořit?</h2>
+      <h2 class="text-lg font-bold">{{ i18n "intro_support"}}</h2>
     </header>
     <ul class="grid gap-x-6 gap-y-4" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))">
       {{ $steps := where site.RegularPages.ByWeight "Type" "support" }}

layouts/partials/section-services.html

@@ -2,7 +2,7 @@
   <div class="container mx-auto px-6">
     <header class="mb-16 text-balance">
       <h2 class="text-3xl mb-2 font-bold">{{ i18n "services" }}</h2>
-      <p class="text-lg">Bezplatné alternativy, které respektují soukromí.</p>
+      <p class="text-lg">{{ i18n "services_description" }}</p>
     </header>
     <div class="mb-12">
       {{ partial "services.html" }}