fix: add word wrap to prevent long links from breaking page (#27)

waycrate · Aug 28, 2024 · 4f27935 · 4f27935
1 parent 28473af
commit 4f27935
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 17 deletions.
diff --git a/themes/waycrate/assets/css/input.css b/themes/waycrate/assets/css/input.css
@@ -141,6 +141,10 @@ time {
   opacity: 0;
 }
 
+main, p {
+  word-wrap: break-word;
+}
+
 .btn-dark {
   cursor: pointer;
 }

diff --git a/themes/waycrate/assets/css/main.css b/themes/waycrate/assets/css/main.css
@@ -773,6 +773,10 @@ time:is(.dark *) {
   opacity: 0;
 }
 
+main, p {
+  word-wrap: break-word;
+}
+
 .btn-dark {
   cursor: pointer;
 }
@@ -835,6 +839,10 @@ time:is(.dark *) {
   top: 1.75rem;
 }
 
+.col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
 .ml-4 {
   margin-left: 1rem;
 }
@@ -891,10 +899,6 @@ time:is(.dark *) {
   min-width: 0px;
 }
 
-.max-w-2xl {
-  max-width: 42rem;
-}
-
 .-translate-x-80 {
   --tw-translate-x: -20rem;
   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));
@@ -908,6 +912,10 @@ time:is(.dark *) {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -940,10 +948,6 @@ time:is(.dark *) {
   overflow: visible;
 }
 
-.overflow-x-hidden {
-  overflow-x: hidden;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1045,6 +1049,10 @@ time:is(.dark *) {
     grid-column: span 2 / span 2;
   }
 
+  .md\:col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+
   .md\:my-0 {
     margin-top: 0px;
     margin-bottom: 0px;
@@ -1066,6 +1074,10 @@ time:is(.dark *) {
     width: 100%;
   }
 
+  .md\:max-w-2xl {
+    max-width: 42rem;
+  }
+
   .md\: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));
@@ -1087,10 +1099,6 @@ time:is(.dark *) {
     justify-content: flex-start;
   }
 
-  .md\:justify-center {
-    justify-content: center;
-  }
-
   .md\:p-0 {
     padding: 0px;
   }

diff --git a/themes/waycrate/layouts/_default/baseof.html b/themes/waycrate/layouts/_default/baseof.html
@@ -3,11 +3,11 @@
 <head>
   {{ partial "head.html" . }}
 </head>
-<body class="transition duration-300 bg-[#f5f5f5] dark:bg-[#262626] font-['UbuntuMonoRegular'] text-lg text-[#1b1b1b] dark:text-[#e5e5e5] overflow-x-hidden">
-  <container class="p-6 flex md:flex-row gap-6 md:justify-center flex-col">
+<body class="transition duration-300 bg-[#f5f5f5] dark:bg-[#262626] font-['UbuntuMonoRegular'] text-lg text-[#1b1b1b] dark:text-[#e5e5e5]">
+  <container class="p-6 flex md:flex-row gap-6 justify-center flex-col">
 
   {{ partial "header.html" . }}
-  <main class="min-w-0 max-w-2xl">
+  <main class="min-w-0 md:max-w-2xl">
     {{ block "main" . }}{{ end }}
   </main>
   </container>

diff --git a/themes/waycrate/layouts/partials/header.html b/themes/waycrate/layouts/partials/header.html
@@ -1,8 +1,8 @@
 <header class="flex md:flex-col flex-row justify-center md:justify-start items-center">
-    <div class="grid grid-cols-4 items-center md:grid-cols-2 md:mb-4">
+    <div class="grid grid-cols-6 items-center md:grid-cols-2 md:mb-4">
       <svg id="menuOpen" class="md:invisible w-8 h-8" viewBox="0 0 24 24"><path d="M5 6h14M5 12h14M5 18h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg>
       <img src="/waycrate.svg" alt="Waycrate Logo" class="md:h-40 h-24 md:my-0 md:col-span-2">
-      <div class="md:w-full text-3xl font-bold text-center items-center">{{ site.Title }}</div>
+      <div class="md:w-full text-3xl font-bold text-center items-center col-span-3 md:col-span-1">{{ site.Title }}</div>
       <svg version="1.1" class="btn-dark w-8 h-8 place-self-end self-center" id="btn-dark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60" xml:space="preserve" preserveAspectRatio="xMinYMin meet">
           <path class="circle stroke-current" d="M30,16c7.73,0,14,6.27,14,14c0,3.81-1.53,7.27-4,9.8c-2.54,2.59-6.08,4.2-10,4.2c-7.73,0-14-6.27-14-14C16,22.27,22.27,16,30,16z"></path>
           <g class="rays stroke-current" data-svg-origin="30 30">