Clock

Khmer Web

Gateway to web application
Styling the Base Template
Edit 
<!--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['blog_title']}}</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/styles/menu.css" rel="stylesheet">
    <link href="/static/fonts/setup.css" rel='stylesheet'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="/static/images/site_logo.png" rel="icon">
    {% endblock %}
  </head>
  <body>
    <div id="header">
      {% block header %}
      <header id="blog-title" class="blog-title region">
        <div id="date-time">
          <div class="date" >
            <script>
              $(document).ready(function(){
                $('.date').append(base.setDate());
              });
            </script>
          </div>
          <div id="kh-clock">
            <script>
              $(document).ready(function(){
                base.setClock();
              });
            </script>
          </div>
        </div>
        <div id="title">
          {{data['blog_title']}}
          <div class="description">ចំណេះវិជ្ជា​ជាឃ្លាំងប្រាក់</div>
        </div>
        <div id="blog-search">
          <form class="search" action="/search/frontend" method="post">
            <input type="text"  placeholder="Search.." name="fquery" required>
            <button type="submit">ស្វែង​រក</button>
          </form>
        </div>
      </header>
      <nav id="main-menu" class="main-menu ">
        <ul class="Menu region">
          
          <div class="topnav" id="myTopnav">
            <a href="#home" class="active">ទំព័រដើម</a>
            <a href="#news">ព័ត៌មាន</a>
            <a href="#contact">ទំនាក់ទំនង</a>
            <a href="#about">អំពីយើង​ខ្ញុំ</a>
            <a href="javascript:void(0);" class="icon" onclick="base.mobileMenu()">
              <i class="fa fa-bars"></i>
            </a>
          </div>
        </ul>
      </nav>
      {% endblock %}
    </div>

    <div id="main" class="main region">
      {% block main %}
      <div id="content">{% block content %}{% endblock %}</div>
      <div id="sidebar">{% block sidebar %}{% endblock %}</div>
      {% endblock %}
    </div>

    <div id="footer" class="footer region">
      {% block footer %}
      &copy; Copyright 2020 by <a href="https://www.khmerweb.app/">Khmer Web</a>.
      <script>var base = new Base();</script>
      {% endblock %}
    </div>
  </body>
</html>

/*static/base.css*/
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a{
  text-decoration: none;
}
a img:hover{
  opacity: .7;
}
body{
  font: 14px/1.5 Vidalota, OdorMeanChey;
}
.region{
  max-width: 1100px;
  margin: 0 auto;
}
#blog-title{
  display: grid;
  grid-template-columns: 25% auto 25%;
  text-align: center;
  align-items: center;
  padding: 15px 0;
  color: darkblue;
}
#blog-title #title{
  font: 50px/1.5 Koulen;
}
#blog-title .description{
  font: Italic 20px/1.5 OdorMeanChey;
  margin-top: 10px;
}
#blog-title #date-time{
  text-align: left;
  line-height: 1.75;
}
#blog-title #blog-search{
  text-align: right;
}
#blog-search form{
  display: grid;
  grid-template-columns: 75% 25%;
}
#blog-search input,
#blog-search button{
  font: 14px/1.5 Vidalota, OdorMeanChey;
  padding: 5px;
  color: darkblue;
}
@media only screen and (max-width: 600px){
  #blog-title{
    grid-template-columns: 100%;
    padding: 10px;
  }
  #blog-title #date-time{
    text-align: center;
  }
  #blog-title #title{
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
#main-menu{
  background: darkblue;
  border-top: 5px solid orangered;
}
#main-menu ul li{
  list-style-type: none;
  display: inline-block;
}
#main-menu a{
  color: white;
  padding: 10px 15px;
  display: block;
  font: 16px/1.5 Bayon;
}
#main-menu a:hover{
  background: rgb(0, 0, 187);
}

/*static/menu.css*/
.topnav {
  overflow: hidden;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: rgb(0, 0, 187);
  color: white;
}

.topnav .icon {
  display: none !important;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none !important;}
  .topnav a.icon {
    float: right;
    display: block !important;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block !important;
    text-align: left;
  }
}

GitHub: "https://github.com/Sokhavuth/E-Learning
Heroku: https://khmerweb-elearning.herokuapp.com/