diff options
| -rw-r--r-- | pages/blogpost.luax | 24 | ||||
| -rw-r--r-- | public/assets/app.css | 24 | ||||
| -rw-r--r-- | public/assets/blog.css | 21 | ||||
| -rw-r--r-- | public/assets/navbar.css | 25 |
4 files changed, 52 insertions, 42 deletions
diff --git a/pages/blogpost.luax b/pages/blogpost.luax index e7d7b86..daddf10 100644 --- a/pages/blogpost.luax +++ b/pages/blogpost.luax @@ -4,20 +4,16 @@ return function(props) local post = props.attrs.post local content = blog_cache(post) return - <div> - <div class="post"> - <div class="main-info"> - <div class="main-info-title"> - {$ post.title $} - </div> - <div class="post-date"> - {$ os.date('%Y-%m-%d', post.date) $} - </div> - <div class="post-description"> - {$ post.description $} - </div> - <div class="post-content">{$ content $}</div> + <div class="main-info"> + <div class="main-info-title"> + {$ post.title $} </div> + <div class="post-date"> + {$ os.date('%Y-%m-%d', post.date) $} + </div> + <div class="post-description"> + {$ post.description $} + </div> + <div class="post-content">{$ content $}</div> </div> - </div> end diff --git a/public/assets/app.css b/public/assets/app.css index 4b0ad1f..a45fc5e 100644 --- a/public/assets/app.css +++ b/public/assets/app.css @@ -5,6 +5,9 @@ padding: 1rem 1rem 1rem 1rem; text-align: center; display: flex; + flex-direction: column; + align-content: center; + align-items: center; flex-grow: 1; } @@ -48,12 +51,29 @@ animation: fade-in 0.2s ease-in; } -.main-info { - text-align: center; +@media (max-width: 480px) { + #app-main { + max-width: 100%; + padding: 0; + } + .main-info { + max-width: 90%; + } +} + +@media (max-width: 1150px) and (min-width: 480px) { + #app-main { + max-width: 100%; + padding: 0; + } + .main-info { + max-width: 80%; + } } @media (min-width: 1150px) { .main-info { + max-width: 1280px; margin-top: 72px; } } diff --git a/public/assets/blog.css b/public/assets/blog.css index 9d0180c..54a19b2 100644 --- a/public/assets/blog.css +++ b/public/assets/blog.css @@ -85,24 +85,3 @@ td.line-number { margin: 0; padding: 0; } - -@media (max-width: 480px) { - .post-content { - margin: auto; - max-width: 96%; - } -} - -@media (max-width: 1150px) and (min-width: 480px) { - .post-content { - margin: auto; - max-width: 80%; - } -} - -@media (min-width: 1150px) { - .post-content { - margin: auto; - max-width: 60%; - } -} diff --git a/public/assets/navbar.css b/public/assets/navbar.css index 1d80e35..42520d2 100644 --- a/public/assets/navbar.css +++ b/public/assets/navbar.css @@ -286,11 +286,8 @@ margin: auto; } -/* if #app-main is shorter than the viewport, push the footer to the bottom of the page */ -@media (max-height: 100vh) { - .footer-container { - position: static; - } +.footer-container { + position: static; } .footer { @@ -308,6 +305,24 @@ flex-direction: row; } +@media (max-width: 480px) { + .footer { + max-width: 90%; + } +} + +@media (max-width: 1300px) and (min-width: 480px) { + .footer { + max-width: 80%; + } +} + +@media (min-width: 1300px) { + .footer { + max-width: 1280px; + } +} + .footer-begin { align-self: left; align-items: flex-start; |