quad
/
nimblog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial CSS base

This commit is contained in:
Quad 2022-04-11 14:36:29 +02:00
parent a43e45b237
commit 44cbd19a8d
7 changed files with 88 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/modules/blog.nim
View File

@ -10,6 +10,7 @@ proc runWebsite(settings: Table) =
var website = newApp(settings = prologueSettings)
website.get("/", getIndex)
website.get("/about", getAbout)
website.use(staticFileMiddleware("static"))
website.run()

5
src/modules/views.nim
View File

@ -7,4 +7,7 @@ proc renderTemplate(templateName: static[string]): string =
proc getIndex*(ctx: Context) {.async.} =
resp renderTemplate(templateName="index.nwt")
export getIndex
proc getAbout*(ctx: Context) {.async.} =
resp renderTemplate(templateName="about.nwt")
export getIndex, getAbout

20
src/templates/about.nwt Normal file
View File

@ -0,0 +1,20 @@
{% extends templates/components/master.nwt %}
{% block styles %}<link rel="stylesheet" type="text/css" href="/static/css/article.css" />{% endblock %}
{% block content %}
<article>
<p>
Hi there! This is my blog and you're currently reading placeholder text which has been left here so I can test formatting a bit.
</p>
<h1>
Hello world
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
{% endblock %}

7
src/templates/components/master.nwt
View File

@ -4,13 +4,16 @@
<title>Example</title>
<link rel="stylesheet" type="text/css" href="/static/css/base.css" />
<link rel="stylesheet" type="text/css" href="/static/css/master.css" />
{% block styles %}{% endblock %}
</head>
<body>
<div id="header-block">
<h1> Example </h1>
</div>
<div id="content-block">
{% block content %}{% endblock %}
<div id="site-block">
<div id="content-block">
{% block content %}{% endblock %}
</div>
</div>
</body>
</html>

16
static/css/article.css Normal file
View File

@ -0,0 +1,16 @@
article {
font-size: 12pt;
line-height: 1.20;
}
article p {
margin-top: calc(var(--font-margin) / 5);
margin-bottom: var(--font-margin);
}
article h1 {
font-weight: 300;
font-size: 175%;
margin-top: calc(var(--font-margin) * 1.75);
margin-bottom: calc(var(--font-margin) / 5);
}

20
static/css/base.css
View File

@ -1,4 +1,4 @@
div {
div, body {
box-sizing: border-box;
}
@ -10,13 +10,25 @@ body, html, div, p, h1, h2, h3, h4, h5 {
:root {
--site-width: 960px;
--site-font-size: 13pt;
--bgcolor-1: rgb(225,220,220);
--bgcolor-2: rgb(250,250,250);
--bgcolor-3: rgb(245,65,45);
--bgcolor-1: rgb(195,180,180);
--bgcolor-2: rgb(225,220,220);
--bgcolor-3: rgb(250,250,250);
--fgcolor-1: rgb(0,0,0);
--fgcolor-2: rgb(245,245,245);
--highlight-1: rgb(195,55,55);
--highlight-2: rgb(175,25,5);
--font-margin: 12px;
--header-height: 50px;
--header-half-height: calc(var(--header-height) / 2);
--shadow-size: 8px;
--shadow-color: rgba(0,0,0,0.35);
--border-size: 2px;
}

31
static/css/master.css
View File

@ -1,23 +1,44 @@
body {
background-color: var(--bgcolor-1);
background-color: var(--bgcolor-2);
color: var(--fgcolor-1);
}
#header-block {
display: block;
position: fixed;
width: 100vw;
color: var(--fgcolor-2);
height: var(--header-height);
background-color: var(--bgcolor-3);
box-shadow: 0px 0px var(--shadow-size) var(--shadow-color);
padding: 5px;
padding-top: var(--header-half-height);
background-color: var(--highlight-1);
border-bottom: solid var(--border-size) var(--highlight-2);
margin-bottom: translateY(-100%);
}
#header-block h1 {
transform: translateY(-50%);
}
#site-block {
display: block;
padding-top: calc(var(--header-height) - var(--border-size));
}
#content-block {
display: block;
max-width: var(--site-width);
width: 100vw;
padding: 10px;
background-color: var(--bgcolor-2);
background-color: var(--bgcolor-3);
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px var(--shadow-size) var(--shadow-color);
border: solid var(--border-size) var(--bgcolor-1);
}
@media only screen and (max-width: 960px) {
#content-block {
border-left: none;
border-right: none;
}
}