Styling the Base Template
#controllers/index.py
from flask import render_template
from flask_classful import FlaskView, route
class Index(FlaskView):
def __init__(self):
super().__init__()
@route('/')
def index(self):
return render_template('index.html', data={'siteTitle':'ទូរទស្សន៍យើង'})
<!--templates/base.html-->
<!DOCTYPE html>
<html>
<head>
{% block head %}
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{{data['siteTitle']}}</title>
<script src="/static/scripts/jQuery.js"></script>
<script src='/static/scripts/base.js'></script>
<link href="/static/styles/base.css" rel="stylesheet">
<link href="/static/fonts/setup.css" rel='stylesheet'>
<link href="/static/images/site_logo.png" rel="icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
{% endblock %}
</head>
<body>
<section>
{% block header %}
<nav id='menu'>
<div class="menu-outer region">
<div id="logo">
<a href="/"><img src="/static/images/site_logo.png" /></a>
<a href="/">{{ data['siteTitle'] }}</a>
</div>
<div class="topnav " id="myTopnav">
<a href="#">ព័ត៌មាន</a>
<a href="#">កំសាន្ត</a>
<a href="#">កីឡា</a>
<a href="#">រឿងភាគ</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<form id="search">
<input type="text" placeholder="Search" required />
<input type="submit" value="ស្វែងរក" />
</form>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</nav>
{% endblock %}
</section>
<section id="main" class="main region">
{% block main %}
<div id="content">
{% block content %}
Content
{% endblock %}
</div>
<div id="sidebar">
{% block sidebar %}
Sidebar
{% endblock %}
</div>
{% endblock %}
</section>
<section id="footer" class="footer region">
{% block footer %}
© Copyright 2020 by <a href="https://www.khmerweb.app/">Khmer Web</a>
<script></script>
{% endblock %}
</section>
</body>
</html>
/*static/styles/base.css*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: orange;
}
a:hover{
opacity: .7;
}
.region{
max-width: 1200px;
margin: 0 auto;
}
body{
font: 14px/1.5 Vidaloka, OdorMeanChey;
background: rgb(22, 22, 22);
color: white;
}
#menu{
background: rgb(48, 48, 48);
}
.menu-outer{
display: grid;
grid-template-columns: 25% auto 20%;
align-items: center;
}
.menu-outer #logo{
display: grid;
grid-template-columns: 50px auto;
align-items: center;
grid-gap: 5px;
font: 26px/1.5 Oswald, Moul;
}
.menu-outer #logo img{
width: 100%;
}
.menu-outer #search{
text-align: right;
display: grid;
grid-template-columns: auto 25%;
}
.menu-outer #search input{
font: 14px/1.5 Vidaloka, OdorMeanChey;
padding: 0 5px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
font: 16px/1.5 Oswald, Bayon;
}
/* Add an active class to highlight the current page */
.topnav a.active {
color: orangered;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
@media only screen and (max-width: 600px){
.menu-outer{
grid-template-columns: 100%;
padding: 10px;
}
}
GitHub: "https://github.com/Sokhavuth/ETV
Heroku: https://khmerweb-etv.herokuapp.com/
Comments
Post a Comment