Skip to content
Sign up

flagon-io/g1t

public
0
126 linesCodeBlameRaw

Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.

Docs in the shape of docs.continue.dev1---
Docs: the search stays centred on every page, and the site works on a phone2// The docs header: the wordmark, search in the middle and links on the
3// right, with the tabs that divide the docs beneath it.
4//
5// Its own layout, not Starlight's: Starlight lines the search up with the
6// page's text column, which moves when a page has an "On this page" list
7// and when it does not. Here the row is three columns, the outer two always
8// the same width, so the search sits at the header's centre on every page.
9import Search from '@astrojs/starlight/components/Search.astro';
Docs in the shape of docs.continue.dev10
11import { TABS, tabFor } from '../tabs';
Docs: the search stays centred on every page, and the site works on a phone12import SiteTitle from './SiteTitle.astro';
13import SocialIcons from './SocialIcons.astro';
Docs in the shape of docs.continue.dev14
15const current = tabFor(Astro.locals.starlightRoute.id);
16---
17
18<div class="g1t-header">
Docs: the search stays centred on every page, and the site works on a phone19 <div class="g1t-header-top">
20 <div class="g1t-header-title"><SiteTitle /></div>
21 <div class="g1t-header-search print:hidden"><Search /></div>
22 <div class="g1t-header-links print:hidden"><SocialIcons /></div>
23 </div>
Docs in the shape of docs.continue.dev24 <nav class="g1t-tabs" aria-label="Sections">
25 {
26 TABS.map((tab) => (
27 <a href={tab.href} aria-current={tab === current ? 'page' : undefined}>
28 {tab.label}
29 </a>
30 ))
31 }
32 </nav>
33</div>
34
35<style>
36 .g1t-header {
37 display: flex;
38 flex-direction: column;
39 height: 100%;
40 }
Mission control counts people's own changes as theirs; a shorter sidebar with setup under Settings, and a 56px top bar41 /* The same bar as the app's: 3.5rem, and a line under it. */
Docs in the shape of docs.continue.dev42 .g1t-header-top {
Docs: the search stays centred on every page, and the site works on a phone43 /* Each side column is at least as wide as the widest thing that goes
44 in either, so the two stay equal and the search stays centred. */
45 --g1t-header-side: 13.5rem;
The docs' top bar is the app's: 4rem tall with a line under it, above the section tabs46 box-sizing: border-box;
Docs: the search stays centred on every page, and the site works on a phone47 display: grid;
48 grid-template-columns:
49 minmax(var(--g1t-header-side), 1fr)
50 minmax(0, 26rem)
51 minmax(var(--g1t-header-side), 1fr);
52 align-items: center;
53 gap: 1rem;
Mission control counts people's own changes as theirs; a shorter sidebar with setup under Settings, and a 56px top bar54 height: 3.5rem;
The docs' top bar is the app's: 4rem tall with a line under it, above the section tabs55 flex-shrink: 0;
Docs in the shape of docs.continue.dev56 padding: 0 var(--sl-nav-pad-x);
The docs' top bar is the app's: 4rem tall with a line under it, above the section tabs57 border-bottom: 1px solid var(--g1t-line);
Docs in the shape of docs.continue.dev58 }
Docs: the search stays centred on every page, and the site works on a phone59 .g1t-header-title {
60 display: flex;
61 min-width: 0;
62 /* Room for the link's focus ring. */
63 padding: 0.25rem;
64 margin: -0.25rem;
65 }
66 .g1t-header-search {
67 display: flex;
68 justify-content: center;
69 min-width: 0;
70 }
71 .g1t-header-links {
72 display: flex;
73 justify-content: flex-end;
74 min-width: 0;
75 }
76 /* Tablets: the sidebar is a menu, and its button (fixed in place by
77 Starlight) takes the row's end. The right column makes room for it
78 inside itself, so the two columns stay equal and the search centred. */
Docs in the shape of docs.continue.dev79 @media (max-width: 49.99rem) {
Docs: the search stays centred on every page, and the site works on a phone80 .g1t-header-top {
81 --g1t-header-side: 13rem;
82 }
83 :global([data-has-sidebar]) .g1t-header-links {
84 padding-inline-end: calc(var(--sl-menu-button-size) + 0.5rem);
Docs in the shape of docs.continue.dev85 }
86 }
Docs: the search stays centred on every page, and the site works on a phone87 /* Phones: the wordmark on the left; search, the links and the menu
88 button together on the right. */
89 @media (max-width: 44.99rem) {
90 .g1t-header-top {
91 grid-template-columns: minmax(0, 1fr) auto auto;
92 gap: 0.25rem;
93 }
94 }
Docs in the shape of docs.continue.dev95 .g1t-tabs {
96 display: flex;
97 gap: 1.5rem;
98 height: 2.75rem;
99 padding: 0 var(--sl-nav-pad-x);
100 overflow-x: auto;
Docs: the search stays centred on every page, and the site works on a phone101 overscroll-behavior-x: contain;
Docs in the shape of docs.continue.dev102 scrollbar-width: none;
103 }
Docs: the search stays centred on every page, and the site works on a phone104 .g1t-tabs::-webkit-scrollbar {
105 display: none;
106 }
Docs in the shape of docs.continue.dev107 .g1t-tabs a {
108 display: flex;
Docs: the search stays centred on every page, and the site works on a phone109 flex-shrink: 0;
Docs in the shape of docs.continue.dev110 align-items: center;
111 border-bottom: 1.5px solid transparent;
112 font-size: 0.875rem;
113 font-weight: 500;
114 white-space: nowrap;
115 color: var(--g1t-muted);
116 text-decoration: none;
117 transition: color 0.15s;
118 }
119 .g1t-tabs a:hover {
120 color: var(--g1t-fg);
121 }
122 .g1t-tabs a[aria-current='page'] {
123 border-color: var(--g1t-fg);
124 color: var(--g1t-fg);
125 }
126</style>