feat: Use tailwind classes (#52)

* feat: Use tailwind classes

* fix: prose max length mobile

* feat: Use daisy

package.json

@@ -4,6 +4,7 @@
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/line-clamp": "^0.3.1",
     "@tailwindcss/typography": "^0.5.1",
+    "daisyui": "^4.4.13",
     "tailwind": "^4.0.0",
     "tailwindcss": "^3.0.19"
   },

pyproject.toml

@@ -1,10 +1,10 @@
 [build-system]
-requires = ["poetry>=0.12"]
-build-backend = "poetry.masonry.api"
+requires = ["poetry-core>=1.0.0"]
+build-backend = "poetry.core.masonry.api"
 
 [tool.poetry]
 name = "wagtail-code-blog"
-version = "0.4.3"
+version = "0.5.0"
 license = "MIT"
 description = "A wagtail code blog"
 authors = ["Dani Hodovic <[email protected]>"]

tailwind.config.js

@@ -1,20 +1,22 @@
 module.exports = {
-  content: [
-    './wagtail_code_blog/templates/**/*.html',
-  ],
+  content: ["./wagtail_code_blog/templates/**/*.html"],
   safelist: [],
   theme: {
     extend: {},
   },
   plugins: [
-      /**
-       * '@tailwindcss/forms' is the forms plugin that provides a minimal styling
-       * for forms. If you don't like it or have own styling for forms,
-       * comment the line below to disable '@tailwindcss/forms'.
-       */
-      require('@tailwindcss/forms'),
-      require('@tailwindcss/typography'),
-      require('@tailwindcss/line-clamp'),
-      require('@tailwindcss/aspect-ratio'),
+    /**
+     * '@tailwindcss/forms' is the forms plugin that provides a minimal styling
+     * for forms. If you don't like it or have own styling for forms,
+     * comment the line below to disable '@tailwindcss/forms'.
+     */
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/line-clamp"),
+    require("@tailwindcss/aspect-ratio"),
+    require("daisyui"),
   ],
-}
+  daisyui: {
+    darkTheme: false,
+  },
+};

wagtail_code_blog/static/wagtail_code_blog/css/blog_index_page.css

@@ -1,26 +1,9 @@
-h1 {
-  color: #F7F7F7;
-  font-weight: 800;
-  font-size: 2.9rem;
-}
-
-h3 {
-  font-size: 1.7em;
-  font-weight: 500;
-}
-
 .intro small {
-  color: #A0A4A8;
+  color: #a0a4a8;
   font-size: 14px;
   line-height: 22px;
 }
 
-p {
- color: #52575C;
- font-size: 1.1em;
- font-weight: 600;
-}
-
 .intro-container {
   margin-bottom: 4rem;
   display: flex;
@@ -38,115 +21,17 @@ p {
   max-width: 400px;
 }
 
-.post {
-  padding: 1rem;
-}
-
-.post a {
-  color: black;
-}
-
-.img-link {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 1.5rem;
-}
-
-.intro img {
-  height: auto;
-  max-width: 100%;
-}
-
-.post img {
-  border-radius: 6px;
-  width: 100%;
-}
-
-.post-content img {
-  border-radius: 30px;
-}
-
-
-.post-detail-text {
-  color: #25282B;
-}
-
-.post-detail-text, .post-date {
-  font-size: 0.95rem;
-  margin-bottom: 0;
-  margin-top:0;
-}
-
-.post-date {
-  color: #A0A4A8;
-}
-
 .post * {
   font-family: "Nunito Sans", serif;
 }
 
-.post-info {
-  width: 100%;
-}
-
-.post-intro-text {
-  margin-top: 0.5rem;
-}
-
-.post-content {
-  display: flex;
-  align-items: center;
-  margin-top: 1.5rem;
-}
-
-.post-detail {
-  width: 100%;
-}
-
-.post-content img {
-  margin-right: 1.5rem;
-}
-
 .post-readtime {
   float: right;
-  color: #52575C
-}
-
-a {
-  color: black;
-  text-decoration: none;
-}
-
-a:hover {
-  color: #484848;
-}
-
-hr {
-  border: 1px solid #E8E8E8;
-  max-width: 1000px;
-}
-
-.post-info img {
-  max-width: 45px;
+  color: #52575c;
 }
 
 /* Large devices (desktops, 992px and up) */
 @media (min-width: 700px) {
-
-  .post-info{
-    margin-left: 1rem;
-  }
-
-  .post {
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    justify-content: center;
-    max-width: 1000px;
-    margin: auto;
-  }
-
   .img-link {
     margin-bottom: 0rem;
     margin-right: 1.5rem;
@@ -167,9 +52,4 @@ hr {
     margin-top: 0;
     margin-left: 4rem;
   }
-
-  .post img {
-    height: auto;
-    width: 250px;
-  }
 }