I've started working on a new blog with a few pages including Home and New post.
My aim is to have different font sizes for the titles on these pages. Specifically, I want the "Home" title to be size 45 and the "New post" title to be size 24 on the "index" page. On the "new" page, I want this to be reversed. How can I achieve this? Should I specify something in the "base" file or do I need to make changes in the "new" file?
Here are some screenshots of the website: https://i.sstatic.net/oaRPV.png https://i.sstatic.net/QGi9l.png Below is the code:
__base.html
$def with (page)
<html>
<head>
<title>S. Gera | Vision</title>
<style>
#menu {
width: 200px;
float: right;
}
</style>
</head>
<body>
<ul id="menu">
<li><a style="font-size: 45; text-decoration: none" href="/">Home</a></li>
<li><a style="font-size: 24; text-decoration: none" href="/new">New Post</a></li>
</ul>
$:page
</body>
</html>
__index.html
$def with (posts)
<html>
<h1 style="color: Grey; font-family: Georgia; text-align: Left">Blog posts</h1>
<ul>
$for post in posts:
<li>
<strong> <a style="color: Black; text-decoration: none; font-size: 18" href="/view/$post.id">$post.title</a> </strong>
<a style="color: Blue; font-size: 15">| $datestr(post.posted_on)</a>
<a style="color: Red; font-size: 11; font-family: Arial; text-decoration: none" href="/edit/$post.id">(Edit)</a>
</li>
</ul>
</html>
__new.html
$def with (form)
<html>
<h1 style="color: Grey; font-family: Georgia; text-align: Left">New Blog Post</h1>
<form action="" method="post">
$:form.render()
</form>
<html>
__view.html
$def with (post)
<h1>$post.title</h1>
$datestr(post.posted_on)<br/>
$post.content
__edit.html
$def with (post, form)
<html>
<h1>Edit $form.d.title</h1>
<form action="" method="post">
$:form.render()
</form>
<h2>Delete post</h2>
<form action="/delete/$post.id" method="post">
<input type="submit" value="Delete post"/>
</form>
</html>