update blog images
This commit is contained in:
parent
b4c5ce2c25
commit
45a10fff2f
@ -2,7 +2,7 @@
|
||||
base_url = "http://template.com"
|
||||
|
||||
# Site title and description
|
||||
title = "Zola template"
|
||||
title = "THREEFOLD"
|
||||
description = "A modern static site built with Zola and Tailwind CSS"
|
||||
|
||||
# Whether to automatically compile all Sass files in the sass directory
|
||||
|
||||
@ -1,59 +1,31 @@
|
||||
+++
|
||||
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"
|
||||
title = "Reflecting on Africa Regenerative Futures Summits"
|
||||
date = 2023-11-21
|
||||
description = "Reflecting on Africa Regenerative Futures Summits : Shaping a better digital future in Africa"
|
||||
[extra]
|
||||
image = "/images/blog/africa_future_summit1.png"
|
||||
+++
|
||||
|
||||
# Getting Started with Zola and Tailwind CSS
|
||||
In 2023, we had the pleasure of hosting two summits in Zanzibar – one in July and another in [November](https://www.threefold.io/newsroom/africa-regen-ii/), named the Africa Regenerative Future Summit. These events brought together leading innovators and investors committed to advancing human flourishing, with a specific emphasis on science and technology shaping the trajectory of Africa's future.
|
||||
|
||||
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.
|
||||
<br>
|
||||
|
||||
## Why Zola?
|
||||
During the inaugural summit in July, Zanzibar's President, Dr. Hussein Mwinyi, honored us with his presence. In a formal declaration, he publicly expressed the government's dedication to establishing a digital free zone, a locally-owned Internet infrastructure, and an incubator to support young local innovators – all in collaboration with ThreeFold – and their commitment to the ICT sector as a whole.
|
||||
|
||||
Zola offers several advantages:
|
||||
<br>
|
||||
|
||||
- **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
|
||||
The second summit saw the birth of Dunia Yetu (meaning "Our World" in Swahili), a collaborative movement forged in partnership with a cohort of tech developers and innovators from Dar Es Salaam. This initiative is driven by a shared commitment to reshape the digital landscape in Tanzania and Africa. Its goals include empowering coders, fostering economic development, and constructing a sovereign, autonomous digital ecosystem for a more promising digital future.
|
||||
|
||||
## Why Tailwind CSS?
|
||||
<br>
|
||||
|
||||
Tailwind CSS provides:
|
||||
Looking ahead to 2024, our vision includes a continued series of gatherings focused on OurWorld, ThreeFold, and other projects and individuals prioritizing a planet-first, people-first approach to support Tanzania and the broader African continent.
|
||||
|
||||
- **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
|
||||
<br>
|
||||
|
||||
## Code Example
|
||||
More information:
|
||||
|
||||
Here's a simple example of a Zola template using Tailwind CSS:
|
||||
<br>
|
||||
|
||||
```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!
|
||||
- **Summit I:** Read [Zanzibar Seeks to Become a Digital FreeZone](https://www.thecitizen.co.tz/tanzania/zanzibar/zanzibar-seeks-to-become-digital-freezone--4316150) (via The Citizen) and [Mwinyi Commits to Improvement of Digital Spaces](https://dailynews.co.tz/mwinyi-commits-to-improvement-of-digital-spaces/) (via Daily News Tanzania) for further details.
|
||||
- **Summit II:** Learn more about [Dunia Yetu](https://www.threefold.io/newsroom/duniayetulaunchdar/)
|
||||
- **Dunia Yetu:** Read [Sovereign Internet - A game changer for Tanzania](https://www.thecitizen.co.tz/tanzania/news/national/sovereign-internet-a-game-changer-to-tanzania-startups-ecosystem-growth-449806) (via The Citizen)
|
||||
@ -1,118 +1,26 @@
|
||||
+++
|
||||
title = "Customizing Your Tailwind CSS Theme"
|
||||
title = "Empowering Tanzania's Digital Future: The Dunia Yetu Initiative"
|
||||
date = 2025-03-17
|
||||
description = "Learn how to customize Tailwind CSS to match your brand"
|
||||
description = "Dunia Yetu (Our World) is a collaborative and co-owned movement to redefine the digital landscape in Tanzania and East Africa, empower coders spur economic development, and build a self-reliant autonomous digital ecosystem for a better digital future."
|
||||
[extra]
|
||||
image = "/images/blog/dunia_yetu1.png"
|
||||
+++
|
||||
|
||||
# Customizing Your Tailwind CSS Theme
|
||||
## Vision of Collective Empowerment
|
||||
|
||||
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.
|
||||
In the heart of Tanzania, a transformative movement is underway, known as Dunia Yetu, Swahili for "Our World.". More than just a name; it embodies a vision of collective empowerment and digital self-reliance. Dunia Yetu is a beacon of unity, encouraging Tanzanians to take control of their digital destiny. It seeks to redefine the nation's digital landscape, fostering a future where citizens are not just users but architects of their online world.
|
||||
|
||||
## The tailwind.config.js File
|
||||
<br>
|
||||
|
||||
The `tailwind.config.js` file is where all your customizations live. Here's a basic example of customizing colors and fonts:
|
||||
## Empowering Tanzania's Youth and Future
|
||||
|
||||
```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'],
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
At its core, Dunia Yetu is about empowering Tanzanians to reclaim ownership of their digital infrastructure. It envisions a future where the benefits of the Internet are harnessed by the people, for the people. For millions of Tanzanians, Dunia Yetu could represent more than just connectivity; it's a gateway to education, opportunity, and economic empowerment. By democratizing access to the Internet, Dunia Yetu will open doors for entrepreneurship, innovation, and collaboration, especially for the youth.
|
||||
With this project, Tanzania's youth are empowered to shape their digital future, harnessing technology to overcome challenges and seize opportunities. It's not just about connectivity; it's about unlocking the full potential of Tanzania's next generation.
|
||||
|
||||
## Extending vs. Overriding
|
||||
<br>
|
||||
|
||||
When customizing Tailwind, you have two options:
|
||||
## Looking Ahead to 2024:
|
||||
|
||||
1. **Extending** - Add new values while keeping the defaults
|
||||
2. **Overriding** - Replace the defaults entirely
|
||||
As Dunia Yetu gains momentum, stay tuned for exciting updates and milestones. In 2024, this transformative project will see the light, ushering in a new era of digital empowerment for Tanzania.
|
||||
|
||||
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.
|
||||
**Together, through Dunia Yetu, Tanzanians are building a brighter, more inclusive future—one where the digital world truly belongs to us all.**
|
||||
BIN
static/images/blog/africa_future_summit1.png
Normal file
BIN
static/images/blog/africa_future_summit1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
BIN
static/images/blog/dunia_yetu1.png
Normal file
BIN
static/images/blog/dunia_yetu1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
BIN
static/images/blog/tailwind-theme.jpg
Normal file
BIN
static/images/blog/tailwind-theme.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
static/images/blog/zola-tailwind.jpg
Normal file
BIN
static/images/blog/zola-tailwind.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
@ -28,6 +28,11 @@
|
||||
<div class="mt-8 grid gap-6 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">
|
||||
{% if page.extra.image %}
|
||||
<div class="h-48 w-full overflow-hidden">
|
||||
<img src="{{ page.extra.image }}" alt="{{ page.title }}" class="w-full h-full object-cover">
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 truncate">{{ page.title }}</h3>
|
||||
{% if page.description %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user