<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title><%= siteTitle %></title>
    <script src="/scripts/jQuery.js"></script>
    <link href="/images/site_logo.png" rel="icon" ></link>
    <link href="/fonts/setup.css" rel="stylesheet"></link>
    <link href="/styles/global.css" rel="stylesheet"></link>
    <link href="/styles/header.css" rel="stylesheet"></link>
  </head>
  <body>

    <header class='Header'>
      <div class='wrapper region'>
        <div class='datetime'>
          <div class='date'><%= date %></div>
          <div class='time' id='kh-clock'>Time</div>
          <script src="/scripts/header.js"></script>
        </div>

        <div class='title-desc'>
          <div class='title'><%= siteTitle %></div>
          <div class='description'>ព័ត៌មាន ចំណេះដឹង វប្បធម៌ កំសាន្ត</div>
        </div>

        <form class='search' method='post' action='/search'>
          <input type='text' name='q' placeholder="Search" />
          <input type='submit' value='បញ្ជូន' />
        </form>
      </div>
    </header>

    <%- include('menu.ejs') %>

 

.Header{
    background: var(--background-dark);
    padding: 10px 0;
    border-top: 10px solid var(--menu);
}

.Header .wrapper{
    display: grid;
    grid-template-columns: 25% auto 25%;
    align-items: center;
    text-align: center;
}

.Header .wrapper .date{
    font: 20px/1.5 Oswald, Bayon;
}

.Header .wrapper .time{
    padding-top: 10px;
}

.Header .wrapper .title{
    font: 45px/1.5 Anton, Moul;
    text-shadow: 0 0 0 #e7e7e7, 1px 1px 0 #d8d8d8, 2px 2px 0 #cacaca, 3px 3px 0 #bbb, 
    4px 4px 0 #adadad, 5px 5px 0 #9e9e9e, 6px 6px 0 #909090, 7px 7px 6px rgb(0 0 0 / 60%), 
    7px 7px 1px rgb(0 0 0 / 50%), 0 0 6px rgb(0 0 0 / 20%);
}

.Header .wrapper .description{
    font-size: 18px;
    padding-top: 15px;
}

.Header .wrapper form{
    display: grid;
    grid-template-columns: 65% 20%;
}

.Header .wrapper form input{
    font: var(--body-font);
    padding: 0 10px;
}

@media only screen and (max-width: 800px){
    .Header .wrapper{
        grid-template-columns: 100%;
    }

    .Header .wrapper form{
        grid-template-columns: 80% 20%;
        padding: 0 10px;
    }
}

 

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

Heroku: https://khmerweb-tv.herokuapp.com/

Responsive: http://www.responsinator.com