jcoffey-dev
81adcf107b
The coffeylabs theme brings coffeylabs.org's palette, type and blueprint grid to Mastodon. It loads the stock stylesheet and then overrides Mastodon's color tokens for both color schemes, adds Bricolage Grotesque and JetBrains Mono (OFL, served from the instance), and replaces the navigation wordmark. The default theme stays available to users. Small upstream changes, each with a modification notice: themes.yml registers the theme, themes.rb sets the dark browser-bar color, and the Dockerfile takes SOURCE_BASE_URL and SOURCE_TAG so "View source code" points at this repository, as the AGPL expects. Upstream's GitHub workflows are removed. .gitea/workflows/ci.yml builds the image on every change and publishes it, with a release, from tags named v<upstream>-coffeylabs.<n>. COFFEYLABS.md lists every change.
109 lines
3.1 KiB
SCSS
109 lines
3.1 KiB
SCSS
// Coffey Labs surfaces: the blueprint grid behind the page, the logo and
|
|
// wordmark in the navigation, mono for labels and numbers.
|
|
|
|
// The faint 32px grid with a glow where the eye starts, behind the columns
|
|
body {
|
|
background-color: var(--color-bg-primary);
|
|
background-image:
|
|
radial-gradient(
|
|
ellipse 60rem 40rem at 20% -10%,
|
|
var(--cl-glow),
|
|
transparent 60%
|
|
),
|
|
linear-gradient(var(--cl-grid-line) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--cl-grid-line) 1px, transparent 1px);
|
|
background-size:
|
|
100% 100%,
|
|
32px 32px,
|
|
32px 32px;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.ui,
|
|
.columns-area__panels {
|
|
background: transparent;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--color-bg-brand-base);
|
|
color: var(--color-text-on-brand-base);
|
|
}
|
|
|
|
// LINUXexpert mark and mono wordmark in place of the Mastodon wordmark
|
|
.column-link--logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
|
|
.logo--wordmark {
|
|
display: none;
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
flex: none;
|
|
width: 32px;
|
|
height: 32px;
|
|
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20512%20512%27%3E%3Crect%20width%3D%27512%27%20height%3D%27512%27%20rx%3D%27104%27%20fill%3D%27%2314171D%27%2F%3E%3Crect%20x%3D%2710%27%20y%3D%2710%27%20width%3D%27492%27%20height%3D%27492%27%20rx%3D%2796%27%20fill%3D%27none%27%20stroke%3D%27%234FA7FF%27%20stroke-opacity%3D%270.18%27%20stroke-width%3D%274%27%2F%3E%3Cpolyline%20points%3D%27172%2C150%20284%2C256%20172%2C362%27%20fill%3D%27none%27%20stroke%3D%27%234FA7FF%27%20stroke-width%3D%2742%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3Crect%20x%3D%27322%27%20y%3D%27308%27%20width%3D%2792%27%20height%3D%2748%27%20rx%3D%278%27%20fill%3D%27%234FA7FF%27%2F%3E%3C%2Fsvg%3E")
|
|
center / contain no-repeat;
|
|
}
|
|
|
|
&::after {
|
|
content: 'LINUXexpert';
|
|
font-family: var(--font-monospace);
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
color: var(--color-text-primary);
|
|
}
|
|
}
|
|
|
|
// Display face for headings and names
|
|
.column-header__title,
|
|
.column-title h1,
|
|
.column-title h2,
|
|
.account__header__tabs__name h1,
|
|
.status__display-name strong,
|
|
.display-name__html {
|
|
font-family: var(--font-heading);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.column-header__title {
|
|
font-weight: 700;
|
|
}
|
|
|
|
// Mono for timestamps, counts and small labels
|
|
.status__relative-time,
|
|
.icon-button__counter,
|
|
.account__header__extra__links a,
|
|
.trends__item__current,
|
|
.notification-group__main__header__label,
|
|
.dismissable-banner__message,
|
|
.column-subheading {
|
|
font-family: var(--font-monospace);
|
|
font-size: 0.86em;
|
|
}
|
|
|
|
.column-subheading {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
// Hashtags and mentions read as code, like links on coffeylabs.org
|
|
.hashtag-bar a,
|
|
.status__content a.hashtag {
|
|
font-family: var(--font-monospace);
|
|
font-size: 0.92em;
|
|
}
|
|
|
|
// Cards get the coffeylabs.org border and soft shadow
|
|
.status-card,
|
|
.dropdown-menu,
|
|
.search__popout,
|
|
.modal-root__modal {
|
|
border-color: var(--color-border-primary);
|
|
box-shadow: var(--dropdown-shadow);
|
|
}
|