title: {{ post.title }}
+ #} +{ title: {{ post.title }}
Article: {{ post.content | split(pat=" ") | slice(end=100) | join(sep=" ") }}
diff --git a/static/css/base.css b/static/css/base.css index 7d55ae4..364b4a1 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -18,6 +18,15 @@ header, nav { padding: 20px; } +@media (max-width: 640px) { + header, nav { + padding: 15px; + } + .logo { + font-size: 22px; + } +} + header a { color: #f0f0f0; text-decoration: none; @@ -58,7 +67,6 @@ nav a:hover { div.container { margin: auto; width: 80%; - min-height: calc(100vh - 9.2em); } strong { @@ -67,22 +75,24 @@ strong { } footer { + position: absolute; bottom: 0; + right: 0; + left: 0; display: grid; width: 100%; - margin-top: auto; background-color: #444444; color: #f0f0f0; font-family: monospace; - font-size: 15px; - grid-template-columns: auto 35em auto; - grid-template-rows: 4em; + font-size: 13px; + grid-template-columns: 1fr auto 1fr; + grid-template-rows: 3em; grid-template-areas: ". info ."; } footer span { grid-area: info; - margin-top: 1.5em; + margin-top: 1em; text-align: center; } diff --git a/static/css/index.css b/static/css/index.css index 24c06e8..90957d6 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -5,21 +5,30 @@ a.article { 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"; + "image title title" + "image body body" + "image . info"; +*/ + grid-gap: 5px; + grid-template-columns: 1fr 20em; + grid-template-rows: auto 1fr auto; + grid-template-areas: + "title title" + "body body" + ". info"; } +/* article > span:first-child { grid-area: image-key; margin: 0; } - article figure { grid-area: image; } @@ -30,19 +39,22 @@ article figure img { min-height: 10em; min-width: 10em; } +*/ .article-title { font-size: 20px; grid-area: title; + margin-bottom: 0; } .article-body { - font-size: 20px; grid-area: body; + margin: 0; } .article-info { grid-area: info; + text-align: right; } div.pagination { diff --git a/templates/base.html.tera b/templates/base.html.tera index 0140b05..2c22b75 100644 --- a/templates/base.html.tera +++ b/templates/base.html.tera @@ -1,12 +1,22 @@ +
+ +title: {{ post.title }}
+ #} +{ title: {{ post.title }}
Article: {{ post.content | split(pat=" ") | slice(end=100) | join(sep=" ") }}