Django - Lesson 6: Static content

Any element that is not rendered by Django is considered static content. This includes images, stylesheets, and scripts. In this section we are going to see how to add static content, specifically a CSS file, to our application.

Create a style.css file in the static/css folder (you will need to create both folders) with the following content:

:root {
    /* Vibrant and modern color palette */
    --primary-color: #FF7EB6;    /* Modern pink */
    --secondary-color: #7AF2FF;  /* Light blue */
    --accent-color: #FF65A3;     /* More intense pink */
    --background-gradient: linear-gradient(45deg, #fff5f5 0%, #f7f9ff 100%);
    --text-color: #2E2E2E;
    --soft-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    --spacing-unit: 1.5rem;
    --border-radius: 20px;
    --transition-fast: 0.3s ease;
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    padding: var(--spacing-unit) 0;
    background-image: var(--background-gradient);
    color: var(--text-color);
    line-height: 1.6;
}

h1 {
    text-align: center;
    font-size: 2.8rem;
    margin: 1.5em 0;
    color: var(--primary-color);
    text-shadow: 2px 2px 0 rgba(255, 126, 182, 0.1);
    position: relative;
}

h1::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--accent-color);
    margin: 0.5em auto;
    border-radius: 2px;
}

h2 {
    color: var(--text-color);
    font-size: 1.8rem;
    margin-bottom: 1em;
    position: relative;
    padding-left: 1rem;
}

h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    height: 0.8em;
    width: 4px;
    background: var(--secondary-color);
    border-radius: 2px;
}

article {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    margin: var(--spacing-unit) auto;
    padding: calc(var(--spacing-unit) * 1.5);
    border-radius: var(--border-radius);
    box-shadow: var(--soft-shadow);
    max-width: 800px;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

article:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: var(--spacing-unit) 0;
    transition: transform var(--transition-fast);
}

img:hover {
    transform: scale(1.02);
}

/* Modern effects */
@media (prefers-reduced-motion: no-preference) {
    article {
        animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
}

/* Typography improvements */
p {
    font-size: 1.1rem;
    letter-spacing: 0.02em;
}

/* Link customization */
a {
    color: var(--accent-color);
    text-decoration: none;
    position: relative;
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width var(--transition-fast);
}

a:hover::after {
    width: 100%;
}

For the stylesheet to be found by the browser, we will need to add a couple of lines to the HTML template.

At the beginning of the article_list.html file, add {% load static % and <link rel="stylesheet" type="text/css" href=""> in the head tag:


<!DOCTYPE html>
<html>
<head>
    <title>Article list</title>
    <link rel="stylesheet" type="text/css" href="">
</head>
<body>
<h1>List of great women in the history of computing</h1>

    <article>
        <h2></h2>
        <img src="" alt="">
        <p></p>
    </article>

</body>
</html>

Finally, tell Django to serve the static files. Add the following line at the end of my_app/settings.py:

STATICFILES_DIRS = [BASE_DIR / 'static']

Reload the page and you should see the changes.

Well done!

It would be very interesting if we had individual pages for each article.

This work is under a Attribution-NonCommercial-NoDerivatives 4.0 International license.

Will you buy me a coffee?

This is how I keep writing without ads or paywalls.

Sure, it's on me!

Comments

There are no comments yet.

Desafíos de programación atemporales y multiparadigmáticos

Will you buy me a coffee?

Comments