Styling the App (part 1)

Styling the App (part 1)

Let us make the blog look professional with proper CSS styling. We will start with the overall layout, navbar, and article cards.

The Stylesheet

/* static/style.css */

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f4f4f4;
    color: #333;
}

/* Navbar */
nav {
    background: #0c4b33;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .brand {
    color: white;
    font-size: 1.4em;
    font-weight: bold;
    text-decoration: none;
}

nav .nav-links a {
    color: #ccc;
    margin-left: 20px;
    text-decoration: none;
    transition: color 0.3s;
}

nav .nav-links a:hover {
    color: white;
}

Content Container

/* Content Area */
.content {
    max-width: 960px;
    margin: 30px auto;
    padding: 0 20px;
}

/* Page Headings */
.content h1 {
    margin-bottom: 20px;
    color: #0c4b33;
}

Article Cards

/* Article Cards */
.article-card {
    background: white;
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s;
}

.article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.article-card h2 {
    margin-bottom: 10px;
}

.article-card h2 a {
    color: #0c4b33;
    text-decoration: none;
}

.article-card .meta {
    color: #888;
    font-size: 0.9em;
    margin-bottom: 10px;
}

.article-card .snippet {
    color: #555;
    line-height: 1.6;
}

Key Takeaways

• Use a clean, modern design with subtle shadows and hover effects
• Django green (#0c4b33) as the brand color ties the design to the framework
• Card-based layouts with shadows create depth and visual hierarchy
• Transitions on hover make the interface feel responsive and alive