diff --git a/src/modules/blog.nim b/src/modules/blog.nim index fa1ee03..645b478 100644 --- a/src/modules/blog.nim +++ b/src/modules/blog.nim @@ -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() diff --git a/src/modules/views.nim b/src/modules/views.nim index 5324e32..7b04d7a 100644 --- a/src/modules/views.nim +++ b/src/modules/views.nim @@ -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 diff --git a/src/templates/about.nwt b/src/templates/about.nwt new file mode 100644 index 0000000..cce1fdd --- /dev/null +++ b/src/templates/about.nwt @@ -0,0 +1,20 @@ +{% extends templates/components/master.nwt %} + +{% block styles %}{% endblock %} + +{% block content %} +
+

+ 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. +

+

+ Hello world +

+

+ 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. +

+

+ 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. +

+
+{% endblock %} diff --git a/src/templates/components/master.nwt b/src/templates/components/master.nwt index 6e098ab..86993ec 100644 --- a/src/templates/components/master.nwt +++ b/src/templates/components/master.nwt @@ -4,13 +4,16 @@ Example + {% block styles %}{% endblock %}

Example

-
- {% block content %}{% endblock %} +
+
+ {% block content %}{% endblock %} +
diff --git a/static/css/article.css b/static/css/article.css new file mode 100644 index 0000000..e846a34 --- /dev/null +++ b/static/css/article.css @@ -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); +} diff --git a/static/css/base.css b/static/css/base.css index 8b58abe..b7f6ca1 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -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; } diff --git a/static/css/master.css b/static/css/master.css index 6050cc7..577a0de 100644 --- a/static/css/master.css +++ b/static/css/master.css @@ -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; + } }