update navbar style
This commit is contained in:
parent
02096d66a4
commit
da8b09d3ec
@ -8,6 +8,11 @@ static = [
|
||||
{
|
||||
"route" :"/css/<filepath:re:.*\.(css|sass|css.map)>",
|
||||
"root" :"./static/css"
|
||||
},
|
||||
# add javascript route
|
||||
{
|
||||
"route" :"/js/<filepath:re:.*\.(js)>",
|
||||
"root" :"./static/js"
|
||||
}
|
||||
]
|
||||
template.add(static, "templates")
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
title = "CostaPy"
|
||||
title = "CostaCoffe"
|
||||
|
||||
menu = {
|
||||
"public": {
|
||||
@ -10,19 +10,31 @@ menu = {
|
||||
"roles":["guest"]
|
||||
},
|
||||
{
|
||||
"name":"Our Product",
|
||||
"target":"_self",
|
||||
"href":"/product",
|
||||
"roles":["guest"]
|
||||
},
|
||||
{
|
||||
"name":"Blog",
|
||||
"target":"_self",
|
||||
"href":"/blog",
|
||||
"roles":["guest"]
|
||||
},
|
||||
{
|
||||
"name":"About",
|
||||
"target":"_self",
|
||||
"href":"/about",
|
||||
"roles":["guest"]
|
||||
},
|
||||
{
|
||||
"name":"Docs",
|
||||
"target":"_blank",
|
||||
"href":"https://costapy.ditaajipratama.net",
|
||||
{
|
||||
"name":"Contact",
|
||||
"target":"_self",
|
||||
"href":"/contact",
|
||||
"roles":["guest"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
copyright = "Copyright (C) 2022 Dita Aji Pratama"
|
||||
copyright = "Copyright (C) 2024 Amro Alfien S.N wkwwkss"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
host = "localhost"
|
||||
port = 11000
|
||||
reloader = False
|
||||
reloader = True
|
||||
debug = False
|
||||
server = 'gunicorn' # default = 'wsgiref'
|
||||
server = 'wsgiref' # default = 'wsgiref'
|
||||
|
||||
session_opts = {
|
||||
'session.type': 'file',
|
||||
|
||||
@ -9,8 +9,10 @@ class main:
|
||||
def html(self, params):
|
||||
return Template(params["mako"]["website"]['index']).render(
|
||||
title = globalvar.title,
|
||||
header = "Welcome to CostaPy",
|
||||
header = "Welcome to CostaCoffe",
|
||||
sub_header = "Best Place To Buy Coffe",
|
||||
navbar = Template(params["mako"]["website"]['navbar']).render(
|
||||
title = globalvar.title,
|
||||
menu = globalvar.menu['public']['navbar'],
|
||||
user_roles = ["guest"],
|
||||
active_page = "Home"
|
||||
|
||||
@ -1 +0,0 @@
|
||||
/* your style here */
|
||||
13
static/js/feather.min.js
vendored
Normal file
13
static/js/feather.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,20 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>${title}</title>
|
||||
<link rel="stylesheet" href="/templates/plain/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>${header}</h1>
|
||||
</header>
|
||||
<!-- <link rel="stylesheet" href="/css/index.sass"> -->
|
||||
<script src="/js/feather.min.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${navbar}
|
||||
<header>
|
||||
<h1>${header}</h1>
|
||||
</header>
|
||||
<main>
|
||||
${container}
|
||||
${container}
|
||||
</main>
|
||||
${footer}
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<script>
|
||||
feather.replace();
|
||||
</script>
|
||||
@ -1,9 +1,15 @@
|
||||
<nav class="navbar">
|
||||
% for item in menu:
|
||||
% if any(role in item['roles'] for role in user_roles):
|
||||
<a class="${'active' if item['name'] == active_page else ''}" href="${item['href']}" target="${item['target']}">
|
||||
${item['name']}
|
||||
</a>
|
||||
% endif
|
||||
% endfor
|
||||
</nav>
|
||||
<h2>${title}</h2>
|
||||
<div class="nav-links">
|
||||
% for item in menu:
|
||||
% if any(role in item['roles'] for role in user_roles):
|
||||
<a class="${'active' if item['name'] == active_page else ''}" href="${item['href']}" target="${item['target']}">
|
||||
${item['name']}
|
||||
</a>
|
||||
% endif
|
||||
% endfor
|
||||
</div>
|
||||
<div class="nav-menu-icons">
|
||||
<i data-feather="shopping-cart"></i>
|
||||
</div>
|
||||
</nav>
|
||||
@ -2,8 +2,6 @@ body {
|
||||
font-family: "Arial", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
header {
|
||||
@ -15,26 +13,40 @@ header {
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
background-color: #333;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 3.2rem;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: #fff;
|
||||
padding: 14px 20px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
.navbar .nav-links {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
background-color: #ddd;
|
||||
.navbar .nav-links a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0.4rem;
|
||||
font-size: 1.1rem;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar a.active {
|
||||
background-color: #4CAF50;
|
||||
color: #fff;
|
||||
.navbar .nav-links a::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: black;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.navbar .nav-links a:is(:hover, .active)::after {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
main {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user