Add the minimal CSS for the admin section from Numerus

Basically: menus, tables, snack bar, and input fields.

web/static/camper.css

@@ -11,21 +11,166 @@
     margin: 0;
 }
 
-html, body {
+@font-face {
-    height: 100%;
+    font-family: 'JetBrains Mono';
+    font-style: italic;
+    font-weight: 100;
+    font-display: swap;
+    src: local('JetBrains Mono Thin'), url('./fonts/JetBrainsMono-ThinItalic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: italic;
+    font-weight: 200;
+    font-display: swap;
+    src: local('JetBrains Mono ExtraLight'), url('./fonts/JetBrainsMono-ExtraLightItalic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: local('JetBrains Mono Light'), url('./fonts/JetBrainsMono-LightItalic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: local('JetBrains Mono'), url('./fonts/JetBrainsMono-Italic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: local('JetBrains Mono Medium'), url('./fonts/JetBrainsMono-MediumItalic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: local('JetBrains Mono SemiBoldItalic'), url('./fonts/JetBrainsMono-SemiBoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: local('JetBrains Mono Bold'), url('./fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: italic;
+    font-weight: 800;
+    font-display: swap;
+    src: local('JetBrains Mono ExtraBold'), url('./fonts/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 100;
+    font-display: swap;
+    src: local('JetBrains Mono Thin'), url('./fonts/JetBrainsMono-Thin.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 200;
+    font-display: swap;
+    src: local('JetBrains Mono ExtraLight'), url('./fonts/JetBrainsMono-ExtraLight.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: local('JetBrains Mono Light'), url('./fonts/JetBrainsMono-Light.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local('JetBrains Mono'), url('./fonts/JetBrainsMono-Regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: local('JetBrains Mono Medium'), url('./fonts/JetBrainsMono-Medium.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: local('JetBrains Mono SemiBold'), url('./fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local('JetBrains Mono Bold'), url('./fonts/JetBrainsMono-Bold.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    font-style: normal;
+    font-weight: 800;
+    font-display: swap;
+    src: local('JetBrains Mono ExtraBold'), url('./fonts/JetBrainsMono-ExtraBold.woff2') format('woff2');
 }
 
 html {
-    font-family: monospace;
+    font-family: 'JetBrains Mono', monospace;
     font-size: 62.5%;
+
+    --camper--color--black: #3f3b37;
+    --camper--color--dark-gray: #8a8885;
+    --camper--color--light-gray: #e1dbd6;
+    --camper--color--white: #ffffff;
+    --camper--color--yellow: #ffd200;
+    --camper--color--red: #ff7a53;
+    --camper--color--rosy: #ffbaa6;
+    --camper--color--green: #5ae487;
+    --camper--color--light-green: #9fefb9;
+    --camper--color--blue: #55bfff;
+    --camper--color--light-blue: #cbebff;
+    --camper--color--hay: #ffe673;
+
+    --camper--text-color: var(--camper--color--black);
+    --camper--background-color: var(--camper--color--white);
+
+    --camper--header--background-color: #ede9e5;
 }
 
 body {
     font-size: 1.6rem;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
-    background-color: white;
+}
-    color: #3f3b37;
+
+body, dialog, .media-picker header, .media-picker footer {
+    background-color: var(--camper--background-color);
+    color: var(--camper--text-color);
 }
 
 img, picture, video, canvas, svg {
@@ -49,6 +194,232 @@ a.missing-translation {
     color: #ff0000;
 }
 
+body > a[href="#content"], .sr-only {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute !important;
+    width: 1px;
+    word-wrap: normal !important;
+}
+
+body > a[href="#content"]:focus {
+    background-color: #f1f1f1;
+    border-radius: 3px;
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
+    clip: auto !important;
+    clip-path: none;
+    color: #21759b;
+    display: block;
+    font-size: 1.4rem;
+    font-weight: 700;
+    height: auto;
+    left: 5px;
+    line-height: normal;
+    padding: 15px 23px 14px;
+    text-decoration: none;
+    top: 5px;
+    width: auto;
+    z-index: 100000;
+}
+
+/* header */
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: var(--camper--header--background-color);
+}
+
+header, body > nav a {
+    padding: 0 3rem;
+}
+
+body > nav {
+    border-bottom: 1px solid var(--camper--color--light-gray);
+}
+
+body > nav ul {
+    display: flex;
+    list-style: none;
+    padding: 0;
+}
+
+body > nav li {
+    flex: 1;
+}
+
+body > nav a {
+    text-decoration: none;
+    color: inherit;
+    min-height: 8rem;
+    display: flex;
+    align-items: center;
+}
+
+main {
+    padding: 2rem 3rem;
+}
+
+table:not(.month) {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 2rem 0 0 0;
+}
+
+/* user menu */
+nav details {
+    position: relative;
+}
+
+nav details summary {
+    background-color: var(--camper--background-color);
+    display: flex;
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+    width: 7rem;
+    height: 7rem;
+    margin: 1rem 0;
+    border-radius: 50%;
+    border: none;
+}
+
+nav details summary:hover,
+nav details summary:focus,
+nav details a:hover,
+nav details button:hover {
+   background-color: var(--camper--color--light-gray); 
+}
+
+nav details summary img {
+    width: 4.8rem;
+    object-fit: contain;
+}
+
+nav details summary span {
+    display: none;
+}
+
+nav details summary::-webkit-details-marker {
+    display: none;
+}
+
+nav details[open] summary::before {
+    background-color: var(--camper--header--background-color);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    content: "";
+    cursor: default;
+    z-index: 10;
+    mix-blend-mode: multiply;
+}
+
+nav details ul {
+    position: absolute;
+    padding: 1rem 2rem;
+    list-style: none;
+    background-color: var(--camper--background-color);
+    z-index: 20;
+    right: -1.875em;
+}
+
+nav details a:any-link, nav details button {
+    color: var(--camper--text-color);
+    font-size: 2rem;
+    font-style: italic;
+    height: 5.5rem;
+    width: 46rem;
+    padding-left: 2rem;
+    display: flex;
+    align-items: center;
+    border: 0;
+    text-decoration: none;
+    text-transform: initial;
+    cursor: pointer;
+}
+
+nav details li + li {
+    border-top: 1px solid var(--camper--color--dark-gray);
+}
+
+/* form */
+fieldset {
+    border: none;
+    padding: 0;
+}
+
+form h2 {
+    margin-bottom: 1em;
+}
+
+label, legend {
+    display: block;
+    font-style: italic;
+}
+
+fieldset + label, label + label {
+    margin-top: 1rem;
+}
+
+label input, label textarea, label select {
+    font-style: normal;
+}
+
+form fieldset + footer {
+    margin-top: 3rem;
+}
+
+input[type="submit"], button, .button {
+    min-width: 34rem;
+    background-color: var(--camper--color--white);
+    border: 2px solid var(--camper--color--black);
+    text-transform: uppercase;
+    display: inline-block;
+    text-align: center;
+    padding: 1rem;
+}
+
+input[type="text"],
+input[type="search"],
+input[type="password"],
+input[type="email"],
+input[type="tel"],
+input[type="url"],
+input[type="number"],
+input[type="date"],
+select,
+textarea {
+    background-color: var(--camper--background-color);
+    border: 1px solid var(--camper--color--black);
+    border-radius: 0;
+    padding: .5rem 1rem;
+    height: 3.5rem;
+}
+
+/* login */
+#login-form {
+    background-color: var(--camper--color--hay);
+    padding: 1.25em;
+}
+
+#login-form fieldset {
+    display: flex;
+    gap: 2rem;
+}
+
+#login-form label {
+    margin: 0;
+}
+
+/* media */
 .media-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
@@ -64,6 +435,12 @@ a.missing-translation {
     max-height: 26rem;
 }
 
+.media-grid button {
+    min-width: 0;
+    border: none;
+    padding: 0;
+}
+
 .media-grid img {
     object-fit: cover;
 }
@@ -72,10 +449,6 @@ a.missing-translation {
     min-width: 75vw;
 }
 
-.media-picker, .media-picker header, .media-picker footer {
-    background-color: white;
-}
-
 .media-picker header, .media-picker footer {
     position: sticky;
     padding-top: 1rem;
@@ -95,7 +468,7 @@ a.missing-translation {
 }
 
 #campground-map a:hover {
-    fill: #ffeeaa;
+    fill: var(--camper--color--hay);
 }
 
 [class^="icon_"] {
@@ -159,7 +532,7 @@ a.missing-translation {
 }
 
 .season-calendar [aria-checked] {
-    border: 2px solid black;
+    border: 2px solid var(--camper--color--black);
     position: relative;
 }
 
@@ -170,7 +543,7 @@ a.missing-translation {
     left: 50%;
     transform: translate(-50%, -50%);
     display: block;
-    background-color: black;
+    background-color: var(--camper--color--black);
     border-radius: 50%;
     width: .8rem;
     height: .8rem;
@@ -185,3 +558,23 @@ a.missing-translation {
     gap: 1em;
 }
 
+/* snack bar */
+#snackbar [role="alert"] { 
+    cursor: pointer;
+    background-color: var(--camper--color--black);
+    color: var(--camper--color--white);
+    padding: 2rem;
+    min-width: 28.8rem;
+    max-width: 56.8rem;
+    border-radius: 2px;
+    position: fixed;
+    translate: -50% 100%;
+    left: 50%;
+    bottom: 0;
+    transition: translate;
+    transition-duration: 300ms;
+}
+
+#snackbar [role="alert"].open {
+    translate: -50%;
+}

web/templates/admin/layout.gohtml

@@ -15,8 +15,8 @@
     {{ block "head" . }}{{ end }}
 </head>
 <body>
+<a href="#content">{{( gettext "Skip to main content" )}}</a>
 <header>
-    <a href="#main">{{( gettext "Skip to main content" )}}</a>
     <h1>camper _ws</h1>
     {{ if isLoggedIn -}}
         <nav>
@@ -73,7 +73,7 @@
         </ul>
     </nav>
 {{- end }}
-<main id="main">
+<main id="content">
     {{- template "content" . }}
 </main>
 </body>

web/templates/admin/login.gohtml

@@ -8,7 +8,7 @@
 
 {{ define "content" -}}
     {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/app.loginForm */ -}}
-    <form method="post" action="/login">
+    <form id="login-form" method="post" action="/login">
         <input type="hidden" name="{{ .Redirect.Name}}" value="{{ .Redirect.Val }}">
         <h2>{{( pgettext "Login" "title" )}}</h2>
         {{ if .Error -}}

web/templates/admin/season/calendar.gohtml

@@ -1,7 +1,7 @@
 <div class="season-calendar" data-hx-target="this" data-hx-swap="outerHTML">
     {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/season.seasonCalendar*/ -}}
     {{ range .Months -}}
-        <table>
+        <table class="month">
             <caption>{{ pgettext .Name "month" }}</caption>
             <thead>
             <tr>

web/templates/admin/season/index.gohtml

@@ -14,20 +14,20 @@
         <table>
             <thead>
             <tr>
-                <th scope="col">{{( pgettext "Name" "header" )}}</th>
                 <th scope="col">{{( pgettext "Color" "header" )}}</th>
+                <th scope="col">{{( pgettext "Name" "header" )}}</th>
                 <th scope="col">{{( pgettext "Active" "season" )}}</th>
             </tr>
             </thead>
             <tbody>
             {{ range .Seasons -}}
                 <tr>
-                    <td><a href="/admin/seasons/{{ .Slug }}">{{ .Name }}</a></td>
                     <td>
                         <svg width="20px" height="20px">
                             <circle cx="50%" cy="50%" r="49%" fill="{{ .Color }}" stroke="#000" stroke-width=".5"/>
                         </svg>
                     </td>
+                    <td><a href="/admin/seasons/{{ .Slug }}">{{ .Name }}</a></td>
                     <td>{{ if .Active }}{{( gettext "Yes" )}}{{ else }}{{( gettext "No" )}}{{ end }}</td>
                 </tr>
             {{- end }}