CX Admin Panel

From: Ben Sherratt Date: Sun, 14 Jan 2024 15:05:09 +0000 (+0000) Subject: Basic admin styling X-Git-Url: https://git.bts.cx/cx.git/commitdiff_plain/2a75d7abba80827cd24ac0135bb562e394ec41b2?ds=inline Basic admin styling --- diff --git a/cx/templates/admin/login.php b/cx/templates/admin/login.php index 7c490ca..65ed403 100644 --- a/cx/templates/admin/login.php +++ b/cx/templates/admin/login.php @@ -1,6 +1,7 @@ - diff --git a/cx/templates/admin/skeleton.php b/cx/templates/admin/skeleton.php index 532942b..b439ade 100644 --- a/cx/templates/admin/skeleton.php +++ b/cx/templates/admin/skeleton.php @@ -6,7 +6,7 @@ CX Admin Panel - + diff --git a/public/design/css/cx.css b/public/design/css/cx.css new file mode 100644 index 0000000..b920c7e --- /dev/null +++ b/public/design/css/cx.css @@ -0,0 +1,234 @@ +/* Very Smol Reset */ +* { + box-sizing: border-box; + margin: 0; +} + +/* Layout */ + +/*body { + display: flex; + flex-direction: column; + min-height: 100vh; + padding: 5vh clamp(1rem, 5vw, 3rem) 1rem; + font-family: Fanwood, serif; + font-size: 1.4em; + line-height: 1.2em; + color: #222; +} + +body > * { + --layout-spacing: max(8vh, 3rem); + --max-width: 60ch; + width: min(100%, var(--max-width)); + margin-left: auto; + margin-right: auto; +} + +header h1 { + font-size: 4em; +}*/ + + +body { + --sidebar-width: min(200px, 25%); + + font-family: sans-serif; + font-size: 1.4em; + line-height: 1.2em; + color: #222; +} + +body > * { + padding-top: min(100px, 30%); +} + +nav { + background: #6c85ff; + display: block; + position: fixed; + top: 0; + left: 0; + width: var(--sidebar-width); + height: 100%; +} + +nav ul { + list-style: none; + padding: 0; + /*display: flex; + flex-wrap: wrap; + padding: 0; + margin-left: -1rem; + margin-right: -1rem; + vertical-align: bottom;*/ +} + +nav ul li { + text-align: right; +} + +nav ul li a { + display: block; + padding: 0.5rem 1rem; +} + +nav ul li a:hover { + background-color: rgba(255, 255, 255, 0.3); +} + +nav [aria-current="page"] { + font-weight: bold; +} + +main { + margin-left: calc(var(--sidebar-width) + 50px); +} + +/*main, +main > * + * { + margin-top: var(--layout-spacing); +} + +body > footer { + margin-top: auto; + padding-top: var(--layout-spacing); +} + +body > footer div { + border-top: 1px solid #ccc; + padding-top: 0.5em; + font-size: 0.9rem; + color: #767676; +} + +article * + * { + margin-top: 1em; +} + +article > h1 { + margin-top: 0; +} + +article > h1 a { + text-decoration: none; + color: #000; +} + +article > h1 + .updated { + margin-top: 0; +} + +hr { + width: 80%; + margin: 4em auto; + border: 0; + height: 1px; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); +}*/ + +/* Typography */ +:is(h1, h2, h3) { + line-height: 1.2; +} + +:is(h1, h2) { + max-width: 40ch; +} + + + +.updated { + font-size: 0.8em; + color: #aaa; + margin: 0 !important; +} + +:is(h2, h3):not(:first-child) { + margin-top: 2em; +} + +a { + color: navy; + text-underline-offset: 0.08em; +} + +a:focus { + outline: 1px solid currentColor; + outline-offset: 0.2em; +} + +/* Media */ +article + article { + border-top: 1px dashed #ccc; + padding-top: var(--layout-spacing); +} + +article img { + display: block; + width: 100%; + min-height: 20rem; + max-height: 40vh; + object-fit: cover; + margin: 0 auto 1rem !important; +} + +/*@supports (aspect-ratio: 1) { +article img { + max-height: unset; + aspect-ratio: 3/2; +} +}*/ + + + +/* Supporting Content */ + +code:not([class*="language"]) { + font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; + font-size: 1.75ex; + color: #444; + background-color: rgba(0, 0, 0, 0.1); + padding-right: 0.15em; + padding-left: 0.15em; +} + +pre code { + margin: 2rem 0; + padding: 0.5em 1rem; + display: block; + border-left: 3px solid rgba(0, 0, 0, 0.35); + background-color: rgba(0, 0, 0, 0.05); + border-radius: 0 0.25rem 0.25rem 0; + overflow-x: auto; + font-size: 0.8em !important; +} + +blockquote { + margin: 2rem 0; + padding: 0.5em 1rem; + border-left: 3px solid rgba(0, 0, 0, 0.35); + background-color: rgba(0, 0, 0, 0.05); + border-radius: 0 0.25rem 0.25rem 0; +} + + + + +input, textarea { + font-size: 1em; +} + +#login { + --login-width: max(30rem, 10%); + --login-height: max(7em, 10%); + + display: block; + position: fixed; + left: calc(50% - calc(var(--login-width) / 2)); + top: calc(50% - calc(var(--login-height) / 2)); + width: var(--login-width); + height: var(--login-height); + border: 1px solid #aaa; + padding: 30px; +} diff --git a/public/design/css/style.css b/public/design/css/style.css index 8bef5af..e3e88d0 100644 --- a/public/design/css/style.css +++ b/public/design/css/style.css @@ -1,195 +1,195 @@ /* Very Smol Reset */ * { - box-sizing: border-box; - margin: 0; + box-sizing: border-box; + margin: 0; } @font-face { - font-family: Fanwood; - src: url(/design/fonts/fanwood/fanwood-webfont.woff); + font-family: Fanwood; + src: url(/design/fonts/fanwood/fanwood-webfont.woff); } @font-face { - font-family: Fanwood; - src: url(/design/fonts/fanwood/fanwood_italic-webfont.woff); - font-style: italic; + font-family: Fanwood; + src: url(/design/fonts/fanwood/fanwood_italic-webfont.woff); + font-style: italic; } @font-face { - font-family: "Fanwood Text"; - src: url(/design/fonts/fanwood/fanwood_text-webfont.woff); + font-family: "Fanwood Text"; + src: url(/design/fonts/fanwood/fanwood_text-webfont.woff); } @font-face { - font-family: "Fanwood Text"; - src: url(/design/fonts/fanwood/fanwood_text_italic-webfont.woff); - font-style: italic; + font-family: "Fanwood Text"; + src: url(/design/fonts/fanwood/fanwood_text_italic-webfont.woff); + font-style: italic; } /* Layout */ body { - display: flex; - flex-direction: column; - min-height: 100vh; - padding: 5vh clamp(1rem, 5vw, 3rem) 1rem; - font-family: Fanwood, serif; - font-size: 1.4em; - line-height: 1.2em; - color: #222; + display: flex; + flex-direction: column; + min-height: 100vh; + padding: 5vh clamp(1rem, 5vw, 3rem) 1rem; + font-family: Fanwood, serif; + font-size: 1.4em; + line-height: 1.2em; + color: #222; } body > * { - --layout-spacing: max(8vh, 3rem); - --max-width: 60ch; - width: min(100%, var(--max-width)); - margin-left: auto; - margin-right: auto; + --layout-spacing: max(8vh, 3rem); + --max-width: 60ch; + width: min(100%, var(--max-width)); + margin-left: auto; + margin-right: auto; } header h1 { - font-size: 4em; + font-size: 4em; } nav ul { - list-style: none; - display: flex; - flex-wrap: wrap; - padding: 0; - margin-left: -1rem; - margin-right: -1rem; - vertical-align: bottom; + list-style: none; + display: flex; + flex-wrap: wrap; + padding: 0; + margin-left: -1rem; + margin-right: -1rem; + vertical-align: bottom; } nav ul li { - padding: 0.5rem 1rem; + padding: 0.5rem 1rem; } nav [aria-current="page"] { - font-weight: bold; + font-weight: bold; } main, main > * + * { - margin-top: var(--layout-spacing); + margin-top: var(--layout-spacing); } body > footer { - margin-top: auto; - padding-top: var(--layout-spacing); + margin-top: auto; + padding-top: var(--layout-spacing); } body > footer div { - border-top: 1px solid #ccc; - padding-top: 0.5em; - font-size: 0.9rem; - color: #767676; + border-top: 1px solid #ccc; + padding-top: 0.5em; + font-size: 0.9rem; + color: #767676; } article * + * { - margin-top: 1em; + margin-top: 1em; } article > h1 { - margin-top: 0; + margin-top: 0; } article > h1 a { - text-decoration: none; - color: #000; + text-decoration: none; + color: #000; } article > h1 + .updated { - margin-top: 0; + margin-top: 0; } hr { - width: 80%; - margin: 4em auto; - border: 0; - height: 1px; - background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); + width: 80%; + margin: 4em auto; + border: 0; + height: 1px; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); } /* Typography */ :is(h1, h2, h3) { - line-height: 1.2; + line-height: 1.2; } :is(h1, h2) { - max-width: 40ch; + max-width: 40ch; } .updated { - font-size: 0.8em; - color: #aaa; - margin: 0 !important; + font-size: 0.8em; + color: #aaa; + margin: 0 !important; } :is(h2, h3):not(:first-child) { - margin-top: 2em; + margin-top: 2em; } a { - color: navy; - text-underline-offset: 0.08em; + color: navy; + text-underline-offset: 0.08em; } a:focus { - outline: 1px solid currentColor; - outline-offset: 0.2em; + outline: 1px solid currentColor; + outline-offset: 0.2em; } /* Media */ article + article { - border-top: 1px dashed #ccc; - padding-top: var(--layout-spacing); + border-top: 1px dashed #ccc; + padding-top: var(--layout-spacing); } article img { - display: block; - width: 100%; - min-height: 20rem; - max-height: 40vh; - object-fit: cover; - margin: 0 auto 1rem !important; + display: block; + width: 100%; + min-height: 20rem; + max-height: 40vh; + object-fit: cover; + margin: 0 auto 1rem !important; } /*@supports (aspect-ratio: 1) { - article img { - max-height: unset; - aspect-ratio: 3/2; - } + article img { + max-height: unset; + aspect-ratio: 3/2; + } }*/ /* Supporting Content */ code:not([class*="language"]) { - font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; - font-size: 1.75ex; - color: #444; - background-color: rgba(0, 0, 0, 0.1); - padding-right: 0.15em; - padding-left: 0.15em; + font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; + font-size: 1.75ex; + color: #444; + background-color: rgba(0, 0, 0, 0.1); + padding-right: 0.15em; + padding-left: 0.15em; } pre code { - margin: 2rem 0; - padding: 0.5em 1rem; - display: block; - border-left: 3px solid rgba(0, 0, 0, 0.35); - background-color: rgba(0, 0, 0, 0.05); - border-radius: 0 0.25rem 0.25rem 0; - overflow-x: auto; - font-size: 0.8em !important; + margin: 2rem 0; + padding: 0.5em 1rem; + display: block; + border-left: 3px solid rgba(0, 0, 0, 0.35); + background-color: rgba(0, 0, 0, 0.05); + border-radius: 0 0.25rem 0.25rem 0; + overflow-x: auto; + font-size: 0.8em !important; } blockquote { - margin: 2rem 0; - padding: 0.5em 1rem; - border-left: 3px solid rgba(0, 0, 0, 0.35); - background-color: rgba(0, 0, 0, 0.05); - border-radius: 0 0.25rem 0.25rem 0; + margin: 2rem 0; + padding: 0.5em 1rem; + border-left: 3px solid rgba(0, 0, 0, 0.35); + background-color: rgba(0, 0, 0, 0.05); + border-radius: 0 0.25rem 0.25rem 0; }