M8: 2007-faithful CSS

jottit/chrome.py

@@ -31,6 +31,7 @@ def chrome_context() -> dict[str, Any]:
             "is_unclaimed": False,
             "site_root_path": "/",
             "page_slug": page_slug,
+            "current_path": request.path,
         }
 
     conn = get_request_conn()

jottit/static/base.css

@@ -1,104 +1,139 @@
-html {
-  font-family: var(--content-font);
-  font-size: var(--content-size);
-  line-height: 1.5;
-  color: var(--fg);
-  background: var(--bg);
+@layer base {
+  body {
+    background: #ffffff;
+    color: var(--color-text);
+    font-family: var(--font-family-content);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-normal);
+  }
+
+  body.app,
+  body.dialog-page {
+    background: var(--color-bg-app);
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-family-headings);
+    line-height: var(--line-height-tight);
+    margin: 1em 0 0.5em 0;
+    font-weight: bold;
+  }
+
+  h1 { font-size: var(--font-size-h1); }
+  h2 { font-size: var(--font-size-h2); }
+  h3 { font-size: var(--font-size-h3); }
+  h4 { font-size: var(--font-size-h4); }
+  h5 { font-size: var(--font-size-h5); }
+  h6 { font-size: var(--font-size-h6); color: var(--color-text-muted); }
+
+  p { margin: 0 0 1em 0; }
+
+  a, a:visited {
+    color: var(--color-link);
+    text-decoration: underline;
+  }
+
+  a img, a:visited img { border: 0; }
+
+  strong { font-weight: bold; }
+  em { font-style: italic; }
+
+  ul, ol {
+    margin: 1em 0 1em 2em;
+    padding: 0;
+  }
+  ul { list-style: disc; }
+  ol { list-style: decimal; }
+
+  blockquote {
+    border-left: 3px solid var(--color-border);
+    padding: 0 0 0 12px;
+    margin: 1em 0 1em 20px;
+    color: var(--color-text-muted);
+  }
+
+  code, kbd, samp {
+    font-family: var(--font-stack-mono);
+    font-size: 1em;
+  }
+
+  pre {
+    background: var(--color-code-bg);
+    padding: 10px;
+    overflow-x: auto;
+    margin: 1em 0;
+    line-height: 1.4;
+    border: 1px solid var(--color-border);
+  }
+  pre code {
+    background: transparent;
+    padding: 0;
+    font-size: inherit;
+  }
+
+  hr {
+    border: 0;
+    border-top: 1px solid var(--color-rule);
+    margin: 1em 0;
+  }
+
+  table { margin: 1em 0; }
+  th, td {
+    padding: 4px 8px;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  label {
+    font-size: 0.9em;
+    font-weight: bold;
+    color: #555;
+    line-height: 1em;
+    margin-bottom: 1px;
+  }
+
+  input, textarea, select, button {
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+  }
+
+  textarea {
+    font-family: var(--font-stack-mono);
+    line-height: var(--line-height-normal);
+    resize: vertical;
+    border: 1px solid var(--color-border);
+    padding: 4px;
+    background: #fff;
+  }
+
+  input[type="text"],
+  input[type="password"],
+  input[type="email"],
+  input[type="search"],
+  input[type="url"],
+  input[type="number"],
+  select {
+    border: 1px solid #ccc;
+    background: #fff;
+    padding: 2px 4px;
+  }
+
+  button,
+  input[type="submit"],
+  input[type="button"],
+  input[type="reset"],
+  [role="button"] {
+    min-height: var(--tap-target);
+  }
+
+  @media (min-width: 768px) {
+    button,
+    input[type="submit"],
+    input[type="button"],
+    input[type="reset"],
+    [role="button"] {
+      min-height: auto;
+    }
+  }
 }
-
-body {
-  min-height: 100vh;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: var(--headings-font);
-  line-height: 1.2;
-  margin-top: var(--space-5);
-  margin-bottom: var(--space-3);
-}
-
-h1 { font-size: var(--headings-size); }
-h2 { font-size: calc(var(--headings-size) * 0.85); }
-h3 { font-size: calc(var(--headings-size) * 0.72); }
-
-p, ul, ol, dl, blockquote, pre, table, figure {
-  margin-top: 0;
-  margin-bottom: var(--space-4);
-}
-
-ol, ul {
-  padding-left: var(--space-5);
-  list-style: revert;
-}
-
-a {
-  color: var(--link);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-a:visited { color: var(--link-visited); }
-a:hover, a:focus { text-decoration-thickness: 2px; }
-
-button {
-  cursor: pointer;
-  padding: var(--space-2) var(--space-4);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface);
-}
-
-button:hover { background: var(--surface-alt); }
-
-input[type="text"],
-input[type="password"],
-input[type="email"],
-input[type="number"],
-textarea {
-  width: 100%;
-  padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface);
-}
-
-textarea { font-family: var(--content-font); resize: vertical; min-height: 12rem; }
-
-label { display: block; }
-
-fieldset {
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: var(--space-3) var(--space-4);
-  margin-bottom: var(--space-4);
-}
-
-legend { padding: 0 var(--space-2); font-weight: 600; }
-
-hr {
-  border: 0;
-  border-top: 1px solid var(--border);
-  margin: var(--space-5) 0;
-}
-
-code, pre, kbd, samp {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.95em;
-}
-
-pre {
-  padding: var(--space-3);
-  background: var(--surface-alt);
-  border-radius: var(--radius);
-  overflow-x: auto;
-}
-
-blockquote {
-  border-left: 3px solid var(--border);
-  padding-left: var(--space-4);
-  color: var(--muted);
-}
-
-small { color: var(--muted); }
-
-time { color: var(--muted); }