#routes/frontend/index.py
import config
from bottle import Bottle, static_file

app = Bottle()

@app.route('/static/images/<filename>')
def loadImage(filename):
    return static_file(filename, root='./asset/img')

@app.route('/static/styles/<filename>')
def loadStyle(filename):
    return static_file(filename, root='./asset/css')

@app.route('/static/styles/partials/<filename>')
def loadStylePartial(filename):
    return static_file(filename, root='./asset/css/partials')

@app.route('/static/styles/highlight/styles/<filename>')
def loadHighLightStylesScript(filename):
    return static_file(filename, root='./asset/js/highlight/styles')

@app.route('/static/scripts/<filename>')
def loadScript(filename):
    return static_file(filename, root='./asset/js')

@app.route('/static/scripts/ckeditor/<filename>')
def loadCKEditorScript(filename):
    return static_file(filename, root='./asset/js/ckeditor')

@app.route('/static/fonts/<filename>')
def loadFont(filename):
    return static_file(filename, root='./asset/font')

@app.route('/static/uploads/<filename>')
def loadFont(filename):
    return static_file(filename, root='./asset/uploads')

@app.route('/')
def index():
    from controllers.frontend import front
    return front.call()

#routes/frontend/front.py
from bottle import Bottle

app = Bottle()

@app.route('/')
def index():
    from controllers.frontend import front
    front.call()

#controllers/frontend/front.py
import config
from copy import deepcopy
from bottle import template

def call():
    kdict = deepcopy(config.kdict)
    kdict['pageTitle'] = 'ទំព័រ​ដើម'
    kdict['route'] = 'front'

    return template('frontend/index', data=kdict)

<!--views/frontend/front.tpl-->
% rebase('base.tpl')

<link href="/static/styles/partials/header.css" rel="stylesheet"></link>
<script src="/static/scripts/paginate.js"></script>
<section class='Head'>
    <header class='region'>
        <div class='site-logo'>{{ data['pageTitle'] }}</div>

        <form action='/backend/search' method='post'>
            <select name="select">
                <option>ការផ្សាយ</option>
                <option>សៀវភៅ</option>
                
            </select>
            <input type='text' name="q" placeholder="Search" required />
            <input type="submit" value='បញ្ជូន'​ />
        </form>

        <div class='logout'><a href='/login'>ចូល​ក្នុង</a> | <a href='/login/register'>ចុះ​ឈ្មោះ</a></div>
    </header>
</section>

<link href="/static/styles/partials/frontend_body.css" rel="stylesheet"></link>
<section class='Body region'>
</section>

/*asset/css/partials/header.css*/
.Head{
    background: var(--foreground);
    padding: 7px;
    border-bottom: 7px solid white;
}

.Head header{
    display: grid;
    grid-template-columns: 25% auto 25%;
    align-items: center;
}

.Head .site-logo{
    font: 22px/1.5 Limonf3;
}

.Head form{
    display: grid;
    grid-template-columns: 20% auto 15%;
}

.Head form input, .Head form select{
    font: 14px/1.5 Vidaloka, OdorMeanChey;
    padding: 0 5px;
}

.Head .logout{
    text-align: right;
    font-size: 18px;
}

.Head .logout a{
    color: white;
}

@media only screen and (max-width: 600px){
    .Head header{
        grid-template-columns: 100%;
        text-align: center;
    }

    .Head .logout{
        text-align: center;
    }
}

GitHub: https://github.com/Sokhavuth/khmerweb-multimedia

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

Responsive: https://khmerweb-multimedia.vercel.app/