@morphemecms/cms 0.0.0-stage → 0.1.0

package/theme/styles/components.css

@@ -0,0 +1,206 @@
+/*
+  The theme's variables: what the standard theme's own components (components/, layouts/, templates/) read, so
+  another theme changes them in its styles/global.css instead of with selectors on their markup (docs/editor.md,
+  "Temaets variabler"). The defaults give the standard theme's look, from the theme's own --radius, --shadow and colours.
+  The standard theme's base (base.css) imports this; a theme that writes all its CSS itself imports it too.
+*/
+:root {
+  /* The colour of the shade over the page behind a pop-up (the dialog's scrim, ui.css) and the navigation drawer
+     (ui.css), seen through: the text's, in dark mode the page's. */
+  --theme-scrim-colour: var(--ink);
+  /* The large picture at the top of a page or a blog post, and the newest post's on the blog. */
+  --theme-picture-radius: var(--radius);
+  /* How long one page fades into the next when a link is followed (below). */
+  --theme-page-fade: 0.35s;
+  /* The space above a section of the front page (Section.astro), on a phone and from md, and above its first. */
+  --theme-section-space: 5rem;
+  --theme-section-space-large: 8rem;
+  --theme-home-first-space: var(--theme-section-space);
+  --theme-home-first-space-large: var(--theme-section-space-large);
+  /* The space over the first block on the blog page, under the tags: its posts, close to them. */
+  --theme-blog-first-space: 2.5rem;
+  --theme-blog-first-space-large: 3.5rem;
+  /* The logo (Logo.astro, and at the top of the menu on a phone): the mark (the site's logo) in a tile, its colour and
+     size (a share of the mark's own), the name's weight and size, and the role (hidden with none; on a phone, and from md). */
+  --theme-logo-tile: transparent;
+  --theme-logo-tile-padding: 0;
+  --theme-logo-tile-radius: 0;
+  --theme-logo-mark: var(--accent);
+  --theme-logo-mark-scale: 1;
+  --theme-logo-name-weight: 500;
+  --theme-logo-name-size: 1em;
+  --theme-logo-role-display: block;
+  --theme-logo-role-display-large: block;
+  /* The pictures in the list of posts (PostList.tsx, the blog's other posts). */
+  --theme-post-picture-radius: var(--radius-small);
+  /* A page's and a post's title (.theme-title): display small on a phone, display medium from md (the type scale,
+     ui.css). */
+  --theme-title-size: var(--type-display-small-size);
+  --theme-title-leading: var(--type-display-small-line-height);
+  --theme-title-size-large: var(--type-display-medium-size);
+}
+@media (min-width: 48rem) {
+  :root {
+    --theme-title-leading: var(--type-display-medium-line-height);
+  }
+}
+
+/* In dark mode the shade is the page's colour, as the text's is light. A theme sets --dialog-scrim and
+   --navigation-drawer-scrim (ui.css) in its :root, and they hold in both modes. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --theme-scrim-colour: var(--bg);
+  }
+}
+
+:root[data-theme='dark'] {
+  --theme-scrim-colour: var(--bg);
+}
+
+@layer components {
+  /* The logo (Logo.astro, MobileMenu.tsx): the mark in its tile, the name and the role. */
+  .theme-logo-tile {
+    display: inline-grid;
+    flex-shrink: 0;
+    place-items: center;
+    border-radius: var(--theme-logo-tile-radius);
+    background: var(--theme-logo-tile);
+    padding: var(--theme-logo-tile-padding);
+  }
+  .theme-logo-mark {
+    width: calc(2.25rem * var(--theme-logo-mark-scale));
+    height: calc(2.5rem * var(--theme-logo-mark-scale));
+    background-color: var(--theme-logo-mark);
+  }
+  .theme-logo-mark-small {
+    width: calc(1.75rem * var(--theme-logo-mark-scale));
+    height: calc(2rem * var(--theme-logo-mark-scale));
+  }
+  .theme-logo-name {
+    font-size: var(--theme-logo-name-size);
+    font-weight: var(--theme-logo-name-weight);
+  }
+  .theme-logo-role {
+    display: var(--theme-logo-role-display);
+  }
+  @media (min-width: 48rem) {
+    .theme-logo-role {
+      display: var(--theme-logo-role-display-large);
+    }
+  }
+  /* A picture in the list of posts (PostList.tsx). */
+  .theme-post-picture {
+    border-radius: var(--theme-post-picture-radius);
+  }
+  /* The first section on the front page (templates/Home.astro). */
+  .theme-home-first {
+    --theme-section-space: var(--theme-home-first-space);
+    --theme-section-space-large: var(--theme-home-first-space-large);
+  }
+  /* The first block on the blog page (templates/Blog.astro). */
+  .theme-blog-first {
+    --theme-section-space: var(--theme-blog-first-space);
+    --theme-section-space-large: var(--theme-blog-first-space-large);
+  }
+  /* The bar at the bottom of a phone's screen (a promotion: ActionBar.astro), a docked toolbar
+     (.toolbar-docked, ui.css) fixed there: the page gets room under its footer, and only the first bar on a page is
+     shown. data-hidden: moved down out of sight (while the buttons at the top of the front page are on screen, the script
+     in Base.astro). Not from 48rem (a tablet in landscape, a computer). */
+  .theme-action-bar {
+    position: fixed;
+    inset: auto 0 0;
+    z-index: 30;
+    transition: transform var(--motion-spatial-slow);
+  }
+  .theme-action-bar[data-hidden] {
+    transform: translateY(100%);
+  }
+  .theme-action-bar ~ .theme-action-bar {
+    display: none;
+  }
+  @media (width < 48rem) {
+    body:has(.theme-action-bar) {
+      padding-bottom: 6rem;
+    }
+  }
+  @media (width >= 48rem) {
+    .theme-action-bar {
+      display: none;
+    }
+  }
+  /* Its buttons and its text, on the site and as the editor draws it: one button alone the whole width; two side by side
+     as wide as each other, unless one's text needs more (a button's text stays on one line), and under each other, each
+     the whole width, when they cannot stand side by side; a text (a list row of two lines, the theme's List) in the room
+     the button beside it leaves, without the row's own room round it, the button as wide as its text (under the text,
+     the whole width, when they cannot stand side by side). */
+  :is(.theme-action-bar, .theme-action-bar-drawn) {
+    flex-wrap: wrap;
+  }
+  :is(.theme-action-bar, .theme-action-bar-drawn) > .button {
+    flex: 1 1 0;
+  }
+  :is(.theme-action-bar, .theme-action-bar-drawn):has(> .theme-action-bar-text) > .button {
+    flex: 1 0 auto;
+  }
+  .theme-action-bar-text {
+    --list-item-padding-block: 0;
+    --list-item-padding-inline: 0;
+    --list-item-min-height: auto;
+    --list-item-two-line-min-height: auto;
+    flex: 1000 1 0;
+    min-width: 8rem;
+  }
+  /* The editor's drawing of one (packages/editor/defaults/popup.tsx): in its place, as wide as a phone, in a frame. */
+  .theme-action-bar-drawn {
+    max-width: 24rem;
+    margin-inline: auto;
+    border: 1px solid var(--block-line);
+    border-radius: var(--block-radius);
+  }
+}
+
+@layer components {
+  /* With the bar of "Mobilmenu" under the header (MobileNav.astro), a link to a part of a page stops below both. */
+  @media (width < 80rem) {
+    html:has([data-mobile-nav]) {
+      scroll-padding-top: 9.25rem;
+    }
+  }
+}
+
+/* A picture that opens the text (a paragraph of its own) starts where a paragraph would: its space above would come on
+   top of the space under the page's heading. For every theme, also one with its own text style; outside the
+   layers, like the pictures' own space in the text. */
+.prose > p:first-child > :where(img, .picture-crop):only-child {
+  margin-top: 0;
+}
+
+/* Going from one page of the site to another, the old page fades into the new (a cross-document view transition,
+   CSS only), so the colours change softly when every page has its own (content-based colour, packages/editor/site/pageColors.ts).
+   It does not touch the first paint or the first visit (Lighthouse), and a browser without it shows the page at once. */
+@media (prefers-reduced-motion: no-preference) {
+  @view-transition {
+    navigation: auto;
+  }
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation-duration: var(--theme-page-fade);
+    animation-timing-function: var(--ease);
+  }
+}
+
+/* A page's and a post's title (PageHeader.astro, PageLayout.astro, PostLayout.astro, Home.astro): the display role, by
+   the variables above. */
+.theme-title {
+  font-size: var(--theme-title-size);
+  line-height: var(--theme-title-leading);
+  font-weight: var(--type-display-small-weight);
+  letter-spacing: var(--type-display-small-tracking);
+}
+@media (min-width: 48rem) {
+  .theme-title {
+    font-size: var(--theme-title-size-large);
+    font-weight: var(--type-display-medium-weight);
+    letter-spacing: var(--type-display-medium-tracking);
+  }
+}