update

content/blog/_index.md

@@ -0,0 +1,8 @@
++++
+title = "Blog"
+sort_by = "date"
+template = "section.html"
+page_template = "page.html"
++++
+
+Welcome to the blog section. Here you'll find all the latest articles and updates.

content/blog/first-post.md

@@ -0,0 +1,59 @@
++++
+title = "Getting Started with Zola and Tailwind CSS"
+date = 2025-03-18
+description = "Learn how to set up a static site using Zola and Tailwind CSS"
++++
+
+# Getting Started with Zola and Tailwind CSS
+
+Zola is a fast static site generator written in Rust, and Tailwind CSS is a utility-first CSS framework. Together, they make a powerful combination for building modern websites.
+
+## Why Zola?
+
+Zola offers several advantages:
+
+- **Speed**: Built in Rust, Zola is incredibly fast
+- **Simplicity**: Everything is included out of the box
+- **Flexibility**: Customize your site with Tera templates
+- **Live Reload**: See changes instantly during development
+
+## Why Tailwind CSS?
+
+Tailwind CSS provides:
+
+- **Utility-First**: Build custom designs without leaving your HTML
+- **Responsive**: Easily create responsive designs with responsive utility variants
+- **Component-Friendly**: Extract reusable components with @apply
+- **Customizable**: Tailor the framework to your design needs
+
+## Code Example
+
+Here's a simple example of a Zola template using Tailwind CSS:
+
+```html
+<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
+  <div class="md:flex">
+    <div class="md:flex-shrink-0">
+      <img class="h-48 w-full object-cover md:w-48" src="/img/example.jpg" alt="Example image">
+    </div>
+    <div class="p-8">
+      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
+      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding the perfect balance</a>
+      <p class="mt-2 text-gray-500">Getting the right mix of technology for your project can be challenging.</p>
+    </div>
+  </div>
+</div>
+```
+
+## Getting Started
+
+To create your own Zola site with Tailwind CSS:
+
+1. Install Zola and Node.js
+2. Create a new Zola site: `zola init my-site`
+3. Set up Tailwind CSS: `npm init -y && npm install -D tailwindcss postcss autoprefixer`
+4. Initialize Tailwind: `npx tailwindcss init -p`
+5. Configure your templates and styles
+6. Build and deploy your site
+
+Happy coding!

content/blog/second-post.md

@@ -0,0 +1,118 @@
++++
+title = "Customizing Your Tailwind CSS Theme"
+date = 2025-03-17
+description = "Learn how to customize Tailwind CSS to match your brand"
++++
+
+# Customizing Your Tailwind CSS Theme
+
+One of the greatest strengths of Tailwind CSS is its customizability. In this post, we'll explore how to tailor Tailwind to match your brand's design system.
+
+## The tailwind.config.js File
+
+The `tailwind.config.js` file is where all your customizations live. Here's a basic example of customizing colors and fonts:
+
+```js
+module.exports = {
+  theme: {
+    colors: {
+      primary: '#3490dc',
+      secondary: '#ffed4a',
+      danger: '#e3342f',
+      // ...
+    },
+    fontFamily: {
+      sans: ['Graphik', 'sans-serif'],
+      serif: ['Merriweather', 'serif'],
+    },
+    extend: {
+      spacing: {
+        '128': '32rem',
+        '144': '36rem',
+      },
+      borderRadius: {
+        '4xl': '2rem',
+      }
+    }
+  },
+  variants: {
+    extend: {
+      borderColor: ['focus-visible'],
+      opacity: ['disabled'],
+    }
+  }
+}
+```
+
+## Extending vs. Overriding
+
+When customizing Tailwind, you have two options:
+
+1. **Extending** - Add new values while keeping the defaults
+2. **Overriding** - Replace the defaults entirely
+
+For most projects, extending is the safer option as it preserves Tailwind's useful defaults.
+
+## Custom Plugins
+
+You can also create custom plugins to add more complex functionality:
+
+```js
+// tailwind.config.js
+const plugin = require('tailwindcss/plugin')
+
+module.exports = {
+  plugins: [
+    plugin(function({ addUtilities, theme }) {
+      const newUtilities = {
+        '.text-shadow-sm': {
+          textShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
+        },
+        '.text-shadow': {
+          textShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+        },
+        '.text-shadow-lg': {
+          textShadow: '0 15px 30px rgba(0, 0, 0, 0.11), 0 5px 15px rgba(0, 0, 0, 0.08)',
+        },
+      }
+      
+      addUtilities(newUtilities)
+    })
+  ]
+}
+```
+
+## Responsive Design
+
+Tailwind makes it easy to create responsive designs with breakpoint prefixes:
+
+```html
+<div class="text-center sm:text-left md:text-right lg:text-justify">
+  This text will be centered on mobile, left-aligned on small screens,
+  right-aligned on medium screens, and justified on large screens.
+</div>
+```
+
+## Dark Mode
+
+Tailwind v2.0 and later includes built-in dark mode support:
+
+```js
+// tailwind.config.js
+module.exports = {
+  darkMode: 'media', // or 'class'
+  // ...
+}
+```
+
+Then in your HTML:
+
+```html
+<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
+  This will be light mode by default and dark mode when the user's
+  system preferences are set to dark mode (or when the 'dark' class
+  is applied to an ancestor if you're using 'class' mode).
+</div>
+```
+
+By customizing Tailwind CSS, you can create a unique design system that perfectly matches your brand while still leveraging the productivity benefits of a utility-first CSS framework.