As we already setup everything to create a static folder on Heroku platform to collect all static files in Django app to put in that folder, now, we do not need to do anything, just create subfolders to store css, JavaScript, and font files that is all.
To start, we can create a base.css file to style the base.html file that will be used for all templates in Django app.
/* static/styles/base.css */
:root{
--background: skyblue;;
--background-dark: #2b2b2b;
--background-light: #f9dd89;
--body-font: 14px/1.5 Vidaloka, OdorMeanChey;
--link: lightgrey;
--color: white;
--item-listing: white;
--item-listing-color: grey;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: var(--link);
}
a:hover{
opacity: .7;
}
.region{
max-width: 1150px;
margin: 0 auto;
}
body{
color: var(--color);
font: var(--body-font);
background: var(--background);
}
In the template file base.html, we could include static files as below:
<!--home/templates/base.html-->
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{{ data.siteTitle }}</title>
<link rel="stylesheet" href="{% static 'styles/base.css' %}" />
<link rel="stylesheet" href="{% static 'fonts/setup.css' %}" />
<link rel="icon" href="{% static 'images/siteLogo.png' %}" />
</head>
<body>
<p>Welcome to Khmer Web Django!</p>
</body>
</html>
