diff --git a/assets/css/nested.css b/assets/css/nested.css index e6de48b..119834d 100644 --- a/assets/css/nested.css +++ b/assets/css/nested.css @@ -1,25 +1,25 @@ .pager { - display: flex; - flex-direction: column; - gap: 1.25em; - padding: 0; + display: flex; + flex-direction: column; + gap: 1.25em; + padding: 0; } .pager__title { - text-align: center; - border: inset var(--dark-warm-gray) 0.18rem; - padding: 0.5em 0; - margin: 1em 0 0 0; - background-color: var(--dark-warm-gray); + text-align: center; + border: inset var(--dark-warm-gray) 0.18rem; + padding: 0.5em 0; + margin: 1em 0 0 0; + background-color: var(--dark-warm-gray); } .pager__nav { - display: flex; - flex-flow: row wrap; - border: inset var(--dark-warm-gray) 0.18rem; - background-color: var(--dark-warm-gray); - padding: 0.5em 0.25em; - gap: 0.25em; + display: flex; + flex-flow: row wrap; + border: inset var(--dark-warm-gray) 0.18rem; + background-color: var(--dark-warm-gray); + padding: 0.5em 0.25em; + gap: 0.25em; } /* ================================================================== */ @@ -30,51 +30,51 @@ */ .pager__nav > a { - border: outset var(--light-blue) 0.18rem; - flex: 1; - text-align: center; - background-color: var(--light-blue); - text-decoration: none; - color: black; + border: outset var(--light-blue) 0.18rem; + flex: 1; + text-align: center; + background-color: var(--light-blue); + text-decoration: none; + color: black; } .pager__nav > a[rel="self"] { - border: inset var(--dark-blue) 0.18rem; - background-color: var(--dark-blue); + border: inset var(--dark-blue) 0.18rem; + background-color: var(--dark-blue); } .pager__nav > a:link::first-letter { text-decoration: underline; } .pager__nav > a:active { - border: inset var(--dark-blue) 0.18rem; - background-color: var(--dark-blue); + border: inset var(--dark-blue) 0.18rem; + background-color: var(--dark-blue); } /* ================================================================== */ .post { - background-color: var(--light-warm-gray); - border: outset var(--light-warm-gray) 0.18rem; - overflow-wrap: anywhere; + background-color: var(--light-warm-gray); + border: outset var(--light-warm-gray) 0.18rem; + overflow-wrap: anywhere; } .post__title { - display: flex; - justify-content: space-between; - background-color: var(--teal); - margin: 0; - padding: 0.25em 0.5em 0.25em 0.75em; - align-items: center; - border: inset var(--dark-warm-gray) 0.18rem; + display: flex; + justify-content: space-between; + background-color: var(--teal); + margin: 0; + padding: 0.25em 0.5em 0.25em 0.75em; + align-items: center; + border: inset var(--dark-warm-gray) 0.18rem; } .post__id { - border: outset var(--true-gray) 0.18rem; - padding: 0.25em; - background-color: var(--true-gray); - text-decoration: none; - white-space: nowrap; - color: black; + border: outset var(--true-gray) 0.18rem; + padding: 0.25em; + background-color: var(--true-gray); + text-decoration: none; + white-space: nowrap; + color: black; } .post__id:link::first-letter { text-decoration: underline; } @@ -82,8 +82,8 @@ .post__id:active { border: inset var(--true-gray) 0.18rem; } .post__date, .post__author, .post__body { - margin: 1em 0.5em; - padding: 0.25em 0.5em; + margin: 1em 0.5em; + padding: 0.25em 0.5em; } .post__body { @@ -92,16 +92,51 @@ } .post__nav { - display: flex; - justify-content: flex-end; - flex-flow: row wrap; - padding: 0 1em 0.5em 1em; - gap: 0.5em; - align-items: center; + display: flex; + justify-content: flex-end; + flex-flow: row wrap; + padding: 0 1em 0.5em 1em; + gap: 0.5em; + align-items: center; } .post__nav > .click { - flex: 1 0; - text-align: center; - padding: 0.25em 0; + flex: 1 0; + text-align: center; + padding: 0.25em 0; +} + +/* New header stuff */ +.header { + display: flex; + flex-flow: column; + text-align: center; + border: outset var(--light-warm-gray) 0.18rem; + background-color: var(--light-warm-gray); + padding: 0 0.25em 0.5em 0.25em; + margin-top: 1.25em; +} + +.header__nav { + display: flex; + flex-flow: row wrap; + gap: 0.25em; + text-align: left; +} + +.header__nav--moderator { + margin: 0.5em 0 0 0; + align-items: center; +} + +.header__nav > .click { + flex: 1; + padding: 0 0.5em; +} + +.header__search { + display: flex; + flex-flow: row; + gap: 0.25em; + margin-top: 0.5em; } diff --git a/assets/css/simple.css b/assets/css/simple.css index ef4d2a6..cd4e381 100644 --- a/assets/css/simple.css +++ b/assets/css/simple.css @@ -13,55 +13,26 @@ background-color: var(--dark-blue); } -.site-header { - display: flex; - flex-flow: column; - gap: 1em; -} - -.site-title { - text-align: center; - border: outset var(--light-warm-gray) 0.18rem; - background-color: var(--light-warm-gray); - padding: 0.5em 0; - margin-bottom: 0.15em; - overflow-wrap: anywhere; -} - -.site-nav { - display: flex; - flex-flow: row wrap; - gap: 0.25em; - border: outset var(--light-warm-gray) 0.18rem; - padding: 0.5em 0.25em; - background-color: var(--light-warm-gray); -} - -.site-nav > .click { - flex: 1; - padding: 0 0.5em 0 0.5em; -} - .site-footer { - text-align: center; - border: outset var(--light-warm-gray) 0.18rem; - background-color: var(--light-warm-gray); - padding: 0; - margin: 1.25em 0; + text-align: center; + border: outset var(--light-warm-gray) 0.18rem; + background-color: var(--light-warm-gray); + padding: 0; + margin: 1.25em 0; } .page-title { - text-align: center; - border: inset var(--dark-warm-gray) 0.18rem; - padding: 0.5em 0; - margin: 0.85em 0; - background-color: var(--dark-warm-gray); + text-align: center; + border: inset var(--dark-warm-gray) 0.18rem; + padding: 0.5em 0; + margin: 0.85em 0; + background-color: var(--dark-warm-gray); } .page-body { - background-color: var(--light-warm-gray); - border: outset var(--light-warm-gray) 0.18rem; - padding: 0.5em 1em; + background-color: var(--light-warm-gray); + border: outset var(--light-warm-gray) 0.18rem; + padding: 0.5em 1em; } .form-preview { @@ -72,12 +43,12 @@ } .form-body { - background-color: var(--light-warm-gray); - border: outset var(--light-warm-gray) 0.18rem; - padding: 0.5em 1em; - display: flex; - flex-flow: column; - gap: 1em; + background-color: var(--light-warm-gray); + border: outset var(--light-warm-gray) 0.18rem; + padding: 0.5em 1em; + display: flex; + flex-flow: column; + gap: 1em; } .form-field { @@ -119,22 +90,6 @@ background-color: var(--dark-blue); } -.search-body { - background-color: var(--light-warm-gray); - border: outset var(--light-warm-gray) 0.18rem; - padding: 0.5em 0.5em; - display: flex; - flex-flow: column; - gap: 1em; - margin-top: 0.25em; -} - -.search-field { - display: flex; - flex-flow: row; - gap: 0; -} - #search { width: 100%; border: inset var(--dark-warm-gray) 0.18rem; diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep index 7556788..441d527 100644 --- a/templates/layouts/default.html.ep +++ b/templates/layouts/default.html.ep @@ -32,9 +32,9 @@ <%= asset 'app.css' %> -