Khmer Web | Creating Home Page

# mysite/multimedia/views.py

from django.shortcuts import render

from .models import Post

def index(request):
    posts = Post.objects.all()
    print(posts)
    context = {
        'site_title':'ពហុព័ត៌មាន',
        'page_title': 'ទំព័រដើម',
        'posts': posts,
        'route': '/',
    }

    return render(request, 'base.html', context)

<!--mysite/multimedia/templates/front/home.html-->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>{{ site_title }} | {{ page_title}}</title>
    {% load static %}
    <link href="{% static 'images/site_logo.png' %}" rel="icon" />
    <link href="{% static 'fonts/setup.css' %}" rel="stylesheet" />
    <link href="{% static 'styles/base.css' %}" rel="stylesheet" />
    <script src="{% static 'scripts/jquery.js' %}"></script>
  </head>
  <body>
    {% include 'header.html' %}
    {% if route == '/' %}
      {% include 'home.html' %}
    {% endif %}
  </body>
</html>

<!--mysite/multimedia/templates/home.html-->

{% load static %}
<link rel="stylesheet" href="{% static 'styles/home.css' %}" />

{% load static %}
<section class="Main">
    <div class="inner region">
        {% if posts  %}
        <ul class="list">
            {% for post in posts %}
            <li class="item">
                <div class="thumb">
                    <a href="/post/{{ post.id }}">
                        <img src="{{ post.featured_image}}" />
                        {% if post.video.all %}
                        <img class="play-icon" src="{% static '/images/play.png' %}" />
                        {% endif %}
                    </a>
                </div>

                <div class="content">
                    <a class="title" href="/post/{{ post.id }}">{{ post.title }}</a>
                    <p>
                        <script>
                        let date = new Date('{{ post.created_at }}').toLocaleDateString('it-IT')
                        $('.Main .inner ul li .content').append(date)
                        </script>
                    </p>
                    <div class="except">
                        {{ post.content|safe }}
                    </div>
                </div>
            </li>
            {% endfor %}
        </ul>
        {% endif %}
        <div class="sidebar">Sidebar</div>
    </div>
    
</section>

/* mysite/multimedia/static/styles/home.css */

.Main .inner{
    display: grid;
    grid-template-columns: 70% auto;
    grid-gap: 15px;
}

.Main .inner ul{
    list-style-type: none;
}

.Main .inner ul li{
    background-color: var(--widget-background);
    display: grid;
    grid-template-columns: 35% 65%;
}

.Main .inner ul li .thumb{
    position: relative;
    padding-top: 56.25%;
}

.Main .inner ul li .thumb a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.Main .inner ul li .thumb a img{
    width: 100%;
    height: 100%;
}

.Main .inner ul li .thumb a .play-icon{
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15%;
    height: auto;
}

.Main .inner ul li .content{
    padding: 2px 10px;
}

.Main .inner ul li .content a{
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font: 18px/1.5 StardosStencil, Limonf3;
}

.Main .inner ul li .content .except{
    padding-top: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font: 15px/1.5 Vidaloka, OdorMeanChey;
}

.Main .inner .sidebar{
    background-color: var(--widget-background);
    padding: 20px;
}

@media only screen and (max-width: 600px){
    .Main .inner{
        grid-template-columns: 100%;
        padding: 20px;
    }

    .Main .inner ul li{
        grid-template-columns: 100%;
    }

    .Main .inner ul li .content{
        padding: 15px;
    }
}

GitHub: https://github.com/Sokhavuth/django_multimedia

Vercel: https://khmerweb-mdjango.vercel.app