Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a8c94fc1cd | |||
| 0025a9cf1a | |||
| 60e1fc5d5d | |||
| 49fd21ead4 | |||
| 3baf6ecc01 | |||
| 11b445721f | |||
| deaaf7314c |
15
build.sh
Executable file
15
build.sh
Executable file
@ -0,0 +1,15 @@
|
||||
#!/bin/bash
|
||||
|
||||
echo "🔍 Checking for Tailwind CSS..."
|
||||
if ! [ -d "node_modules" ]; then
|
||||
echo "📦 Installing Tailwind CSS and dependencies..."
|
||||
npm install
|
||||
fi
|
||||
|
||||
echo "🚀 Building Tailwind CSS..."
|
||||
npx tailwindcss -i ./static/css/main.css -o ./static/css/output.css --minify
|
||||
|
||||
echo "🔨 Building Zola site..."
|
||||
zola build
|
||||
|
||||
echo "✅ Build complete!"
|
||||
@ -5,49 +5,12 @@ template = "index.html"
|
||||
+++
|
||||
|
||||
{{ hero3(
|
||||
announcement='<a href="#" class="font-semibold text-gray-300 hover:text-white">Read more →</a>',
|
||||
subheader="SUBHEADER",
|
||||
title="This is Hero1.html",
|
||||
title="This is Hero3.html",
|
||||
subtitle="This is smaller title h2",
|
||||
description="Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.",
|
||||
button1_text="Get started",
|
||||
button1_link="#",
|
||||
button2_text="Learn more",
|
||||
button2_link="#"
|
||||
) }}
|
||||
|
||||
{{ hero2(title="Welcome to Your Zola Site", subtitle="A modern, responsive website built with Zola and styled with Tailwind CSS", button_text="Learn More", button_link="/blog", bg_color="bg-blue-700") }}
|
||||
|
||||
## About This Site
|
||||
|
||||
This is a modern, responsive website built with [Zola](https://www.getzola.org/) and styled with [Tailwind CSS](https://tailwindcss.com/). It demonstrates the use of shortcodes and markdown together to create beautiful, reusable components.
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-12">
|
||||
{{ feature_card(title="Fast and Lightweight", description="Zola generates static HTML files that load quickly", icon="⚡") }}
|
||||
|
||||
{{ feature_card(title="Modern Design", description="Tailwind CSS provides utility classes for rapid UI development", icon="🎨") }}
|
||||
|
||||
{{ feature_card(title="Responsive Layout", description="Looks great on all devices, from mobile to desktop", icon="📱") }}
|
||||
|
||||
{{ feature_card(title="Markdown Content", description="Write your content in Markdown for easy formatting", icon="📝") }}
|
||||
|
||||
{{ feature_card(title="Syntax Highlighting", description="Code blocks are automatically highlighted", icon="💻") }}
|
||||
|
||||
{{ feature_card(title="Search Functionality", description="Built-in search for your content", icon="🔍") }}
|
||||
|
||||
</div>
|
||||
|
||||
### Getting Started
|
||||
|
||||
To add new content, create Markdown files in the `content` directory. Zola will automatically generate pages for each file.
|
||||
|
||||
For more information, check out the [Zola documentation](https://www.getzola.org/documentation/getting-started/overview/) and [Tailwind CSS documentation](https://tailwindcss.com/docs).
|
||||
|
||||
{{ cta(title="Ready to Get Started?", description="Create your own beautiful website with Zola and Tailwind CSS today.", button_text="View Blog", button_link="/blog") }}
|
||||
|
||||
{% raw %}
|
||||
```html
|
||||
<!-- Example of using the hero2 shortcode -->
|
||||
{{ hero2(title="Welcome", subtitle="A subtitle here", button_text="Click Me", button_link="/some-page", bg_color="bg-blue-700", image="/path/to/image.jpg") }}
|
||||
```
|
||||
{% endraw %}
|
||||
) }}
|
||||
@ -5,7 +5,7 @@
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build:css": "tailwindcss build ./sass/main.scss -o ./static/css/main.css",
|
||||
"watch:css": "tailwindcss build ./sass/main.scss -o ./static/css/main.css --watch",
|
||||
"watch:css": "tailwindcss build ./sass/main.scss -o ./static/css/output.css --watch",
|
||||
"build": "npm run build:css && zola build",
|
||||
"dev": "concurrently \"npm run watch:css\" \"zola serve\""
|
||||
},
|
||||
|
||||
107769
public/css/main.css
107769
public/css/main.css
File diff suppressed because it is too large
Load Diff
@ -1 +1 @@
|
||||
@tailwind base;@tailwind components;@tailwind utilities
|
||||
@tailwind base;@tailwind components;@tailwind utilities;
|
||||
File diff suppressed because one or more lines are too long
13
start.sh
Executable file
13
start.sh
Executable file
@ -0,0 +1,13 @@
|
||||
#!/bin/bash
|
||||
|
||||
echo "🔍 Checking for Tailwind CSS..."
|
||||
if ! [ -d "node_modules" ]; then
|
||||
echo "📦 Installing Tailwind CSS and dependencies..."
|
||||
npm install
|
||||
fi
|
||||
|
||||
echo "Starting Tailwind CSS watcher & Zola live server..."
|
||||
|
||||
npx tailwindcss -i ./static/css/main.css -o ./static/css/output.css --watch & zola serve
|
||||
|
||||
echo "🚀 Development server running!"
|
||||
107769
static/css/main.css
107769
static/css/main.css
File diff suppressed because it is too large
Load Diff
@ -3,24 +3,24 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Zola with Tailwind CSS{% endblock %}</title>
|
||||
<link rel="stylesheet" href="{{ get_url(path='css/main.css') }}">
|
||||
<title>{% block title %}TF Zola Template{% endblock %}</title>
|
||||
<link rel="stylesheet" href="{{ get_url(path='css/output.css') }}">
|
||||
<script src="{{ get_url(path='js/main.js') }}" defer></script>
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body class="bg-gray-100 min-h-screen flex flex-col min-h-screen">
|
||||
<body class="bg-gray-100 min-h-screen flex flex-col" role="banner">
|
||||
<header>
|
||||
{% include "partials/navigation.html" %}
|
||||
</header>
|
||||
<main>
|
||||
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||
<div class="w-full flex-grow px-6 lg:px-8">
|
||||
<div class="px-4 py-6 sm:px-0">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="bg-white shadow mt-auto">
|
||||
<div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
|
||||
<div class="w-full mx-auto py-4 px-4 sm:px-6 lg:px-8">
|
||||
<p class="text-center text-gray-500">
|
||||
© {{ now() | date(format="%Y") }} {{ config.title }}
|
||||
</p>
|
||||
|
||||
@ -1,18 +1,11 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 class="text-2xl font-bold text-gray-900">
|
||||
Welcome to {{ config.title }}
|
||||
</h2>
|
||||
<p class="mt-1 max-w-2xl text-sm text-gray-500">
|
||||
A beautiful site built with Zola and Tailwind CSS.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Content section (where Markdown content from _index.md appears) -->
|
||||
<div class="bg-white w-full shadow overflow-hidden">
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="prose prose-indigo lg:prose-xl">
|
||||
<div class="prose prose-indigo lg:prose-xl w-full">
|
||||
{% if section.content %}
|
||||
{{ section.content | safe }}
|
||||
{% else %}
|
||||
@ -24,11 +17,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
||||
<!-- Blog Section / List of Pages -->
|
||||
<div class="mt-8 grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
||||
{% for page in section.pages %}
|
||||
<a href="{{ page.permalink }}" class="bg-white overflow-hidden shadow rounded-lg hover:shadow-lg transition-shadow duration-300">
|
||||
<!-- Individual blog post card -->
|
||||
<a href="{{ page.permalink }}" class="bg-white overflow-hidden shadow rounded-lg hover:shadow-xl transition-shadow duration-300">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 truncate">{{ page.title }}</h3>
|
||||
<h3 class="text-lg lg:text-xl font-medium text-gray-900 truncate">{{ page.title }}</h3>
|
||||
{% if page.description %}
|
||||
<p class="mt-1 text-sm text-gray-500">{{ page.description }}</p>
|
||||
{% endif %}
|
||||
|
||||
@ -1,21 +1,29 @@
|
||||
<div class="fade-in">
|
||||
<div class="relative isolate px-6 pt-14 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
|
||||
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
|
||||
<div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-300 ring-1 ring-gray-700 hover:ring-gray-500">
|
||||
{{ announcement | safe }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-base/7 font-light tracking-wide">{{ subheader }}</p>
|
||||
<h1 class="lg:text-6xl text-4xl font-semibold tracking-tight text-balance">{{ title }}</h1>
|
||||
<h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight">{{ subtitle }}</h2>
|
||||
<p class="mt-8 lg:text-lg font-light text-gray-50 sm:text-xl/8">{{ description }}</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="{{ button1_link }}" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">{{ button1_text }}</a>
|
||||
<a href="{{ button2_link }}" class="text-sm/6 font-semibold hover:text-gray-300">{{ button2_text }} <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-center w-full bg-white">
|
||||
<div class="relative isolate px-4 px-6 lg:px-8 w-full lg:max-w-7xl mx-auto">
|
||||
<div class="mx-auto w-full py-24 lg:py-32">
|
||||
<!-- Subheader -->
|
||||
<p class="text-base/7 font-light text-center text-gray-500 tracking-wide">
|
||||
{{ subheader }}
|
||||
</p>
|
||||
<!-- Title -->
|
||||
<h1 class="lg:text-6xl text-4xl text-center font-semibold tracking-tight text-balance text-gray-900">
|
||||
{{ title }}
|
||||
</h1>
|
||||
<!-- Subtitle -->
|
||||
<h2 class="text-balance lg:text-5xl text-center text-4xl font-normal tracking-tight text-gray-700 mt-2">
|
||||
{{ subtitle }}
|
||||
</h2>
|
||||
<!-- Description -->
|
||||
<p class="mt-6 lg:text-lg text-sm font-light text-center text-gray-600 max-w-2xl mx-auto">
|
||||
{{ description }}
|
||||
</p>
|
||||
<!-- CTA Buttons -->
|
||||
<div class="mt-8 flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6">
|
||||
<a href="{{ button1_link }}" class="inline-block rounded-lg bg-gray-900 px-5 py-3 text-sm font-semibold text-white shadow-md hover:bg-gray-700 focus-visible:outline focus-visible:ring-2 focus-visible:ring-gray-700 focus-visible:ring-offset-2">
|
||||
{{ button1_text }}
|
||||
</a>
|
||||
<a href="{{ button2_link }}" class="text-sm font-semibold text-gray-900 hover:text-gray-600">{{ button2_text }} <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user