title: Foo bar
+Article: Lorem Ipsum
+diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..3a18940 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,102 @@ +body{ + background-color: white; + padding: 0; + margin: 0; + border: 0; +} + + +.logo { + font-family: monospace; + font-size: 40px; +} + +header, nav { + background-color: #444444; + color: #f0f0f0; + text-align: center; + padding: 10px; +} + +nav { + display: grid; + grid-template-colums: auto 1em 1em 1em auto; + grid-template-areas: ". item1 item2 item3 ."; +} + +nav a:nth-child(1) { + grid-area: item1; +} + +nav a:nth-child(2) { + grid-area: item2; +} + +nav a:nth-child(3) { + grid-area: item3; +} + +nav a { + color: #f0f0f0; + padding: 10px; + font-family: monospace; + font-size: 20px; + text-decoration: none; +} + +nav a:hover { + background-color: #f0f0f0; + color: black; +} + +section { + margin: auto; + width: 80%; +} + +article { + display: grid; + grid-template-columns: 15em auto 20em; + grid-template-rows: 1em 1em auto 1em; + + grid-template-areas : + "image-key . ." + "image title title" + "image body body" + "image . info"; +} + +article > span:first-child { + grid-area: image-key; + margin: 0; +} + +article figure { + grid-area: image; +} + +article figure img { + max-height: 10em; + max-width: 10em; + min-height: 10em; + min-width: 10em; +} + +.article-title { + font-size: 20px; + grid-area: title; +} + +.article-body { + font-size: 20px; + grid-area: body; +} + +.article-info { + grid-area: info; +} + +article strong { + font-family: monospace; + font-size: 10px; +} diff --git a/templates/index.html.tera b/templates/index.html.tera new file mode 100644 index 0000000..bdf1699 --- /dev/null +++ b/templates/index.html.tera @@ -0,0 +1,32 @@ + + +
+ +title: Foo bar
+Article: Lorem Ipsum
+