repos / starfx

commit

8cc044f

parent

d0a8540

author

Eric Bower

date

2024-11-17 03:27:28 +0000 UTC

style: docs

  1@@ -1,19 +1,29 @@
  2-ul {
  3-  list-style-position: inside;
  4+@media (prefers-color-scheme: light) {
  5+  .logo { stroke: #414558; fill: none; }
  6+}
  7+@media (prefers-color-scheme: dark) {
  8+  .logo { stroke: #f2f2f2; fill: none; }
  9+}
 10+
 11+.logo-sm svg {
 12+  width: 10px;
 13+  height: 10px;
 14+}
 15+
 16+.logo-md svg {
 17+  width: 25px;
 18+  height: 25px;
 19+}
 20+
 21+.logo-lg svg {
 22+  width: 50px;
 23+  height: 50px;
 24 }
 25 
 26-.logo-hdr {
 27-  line-height: 1;
 28-  display: inline-block;
 29-  background-color: #FF79C6;
 30-  background-image: linear-gradient(to right, #FF5555, #FF79C6, #F8F859);
 31-  color: transparent;
 32-  background-clip: text;
 33-  background-size: 100%;
 34-  -webkit-background-clip: text;
 35-  -moz-background-clip: text;
 36-  -webkit-text-fill-color: transparent;
 37-  -moz-text-fill-color: transparent;
 38+.divider {
 39+  width: 1px;
 40+  height: auto;
 41+  background-color: var(--grey-light);
 42 }
 43 
 44 .visited {
 45@@ -22,10 +32,22 @@ ul {
 46 
 47 .sitemap {
 48   width: 250px;
 49+  flex: 0 0 250px;
 50+  margin: 0;
 51+  overflow-y: scroll;
 52+  padding-bottom: 2rem !important;
 53+  height: calc(100vh - 3px - (3 * var(--line-height)));
 54 }
 55 
 56 .post {
 57-  max-width: 700px;
 58+  max-width: 650px;
 59+  height: calc(100vh - 3px - (3 * var(--line-height)));
 60+  overflow-y: auto;
 61+  padding-right: 20px;
 62+}
 63+
 64+.post-container {
 65+  max-width: 60rem;
 66 }
 67 
 68 .container-xs {
 69@@ -33,14 +55,8 @@ ul {
 70   width: 100%;
 71 }
 72 
 73-.post-container {
 74-  display: flex;
 75-  gap: 1rem;
 76-  flex-direction: row-reverse;
 77-}
 78-
 79 .hero {
 80-  padding: 5rem 0 0 0;
 81+  padding: calc(var(--line-height) * 3) 0 0 0;
 82 }
 83 
 84 .home-features pre {
 85@@ -50,7 +66,7 @@ ul {
 86 .features {
 87   display: grid;
 88   grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
 89-  gap: 1rem;
 90+  gap: calc(var(--line-height) - 4px);
 91 }
 92 
 93 .features h3 {
 94@@ -58,20 +74,7 @@ ul {
 95 }
 96 
 97 .mk-nav {
 98-  padding: 1rem;
 99-}
100-
101-.current {
102-  background-color: var(--blockquote-bg) !important;
103-  border-right: 5px solid var(--blockquote);
104-}
105-
106-.current a {
107-  color: var(--white);
108-}
109-
110-.current-page a {
111-  color: var(--white);
112+  padding: var(--line-height);
113 }
114 
115 .pager {
116@@ -85,11 +88,13 @@ ul {
117 }
118 
119 .sidebar-list {
120-  padding: 0 0 0 1rem;
121+  padding: 0 0 0 var(--line-height);
122 }
123 
124-.sidebar-list li {
125-  margin: 0 0 0.5rem 0;
126+.post-group {
127+  display: flex;
128+  gap: 1rem;
129+  flex-direction: row-reverse;
130 }
131 
132 @media only screen and (max-width: 800px) {
133@@ -101,15 +106,20 @@ ul {
134     margin: 0;
135   }
136 
137-  .post-container {
138+  .post-group {
139     display: block;
140   }
141 
142+  .post {
143+    height: 100%;
144+    overflow-y: unset;
145+    padding-right: 0;
146+  }
147+
148   .sitemap {
149-    text-align: center;
150-    -moz-column-count: 2;
151     column-count: 2;
152     width: 100%;
153+    margin-bottom: calc(2 * var(--line-height));
154   }
155 
156   .sitemap-grid {
157@@ -117,11 +127,10 @@ ul {
158   }
159 
160   .mk-nav {
161-    padding: 1rem 0;
162+    padding: var(--line-height) 0;
163   }
164 
165-  .sidebar-list {
166-    padding: 0 0 0 0.6rem;
167-    margin: 0;
168+  .divider {
169+    display: none;
170   }
171 }

 1@@ -31,35 +31,35 @@
 2         <h3 class="m-0 p-0 text-lg">
 3           Data synchronization and caching
 4         </h3>
 5-        <p>A powerful middleware system to fetch API data</p>
 6+        <div>A powerful middleware system to fetch API data</div>
 7       </div>
 8 
 9       <div class="box">
10         <h3 class="m-0 p-0 text-lg">
11           An immutable and reactive data store
12         </h3>
13-        <p>A normalized database for UI and API data</p>
14+        <div>A normalized database for UI and API data</div>
15       </div>
16 
17       <div class="box">
18         <h3 class="m-0 p-0 text-lg">
19           Task tree side-effect system
20         </h3>
21-        <p>A robust system for handling complex business logic using structured concurrency</p>
22+        <div>A robust system for handling complex business logic using structured concurrency</div>
23       </div>
24 
25       <div class="box">
26         <h3 class="m-0 p-0 text-lg">
27           Tools to preload and refresh data
28         </h3>
29-        <p>An awesome data loading strategy for web apps</p>
30+        <div>An awesome data loading strategy for web apps</div>
31       </div>
32 
33       <div class="box">
34         <h3 class="m-0 p-0 text-lg">
35          React integration
36         </h3>
37-        <p>Built for react</p>
38+        <div>Built for react</div>
39       </div>
40     </article>
41   </div>

1@@ -1,6 +1,6 @@
2 {{define "nav"}}
3 <nav class="mk-nav">
4-  <div class="flex items-center justify-center gap-2 text-md">
5+  <div class="flex items-center justify-center gap-2">
6     <a href="/" class="link-alt">
7       starfx
8     </a>

 1@@ -3,18 +3,20 @@
 2 {{define "title"}}{{.Data.Title}}{{end}}
 3 
 4 {{define "meta"}}
 5-<meta name="description" content="{{.Data.Description}}">
 6+<meta name="description" content="{{.Data.Description}}" />
 7 {{end}}
 8 
 9-{{define "attrs"}}class="container"{{end}}
10+{{define "attrs"}}class="post-container"{{end}}
11 
12 {{define "body"}}
13 {{template "nav" .}}
14 
15-<div class="post-container">
16-  <main class="post flex-1">
17-    <h1 class="text-2xl text-underline-hdr text-hdr inline-block">{{.Data.Title}}</h1>
18-    <h2 class="text-xl">{{.Data.Description}}</h2>
19+<div class="post-group">
20+  <main class="post">
21+    <h1 class="text-2xl text-hdr m-0 flex items-center">
22+      {{.Data.Title}}
23+    </h1>
24+    <p class="m-0">{{.Data.Description}}</p>
25 
26     <hr />
27 
28@@ -23,10 +25,10 @@
29     </article>
30 
31     {{template "pager" .}}
32+    {{template "footer" .}}
33   </main>
34 
35   {{template "sitemap-footer" .}}
36 </div>
37 
38-{{template "footer" .}}
39 {{end}}

 1@@ -1,31 +1,32 @@
 2 {{define "sitemap-footer"}}
 3-<div class="sitemap text-sm mb-4">
 4-<ul class="list-none sidebar-list">
 5-{{range .Sitemap.Children}}
 6-  {{if .Href}}
 7-  <li class="text-md">
 8-    {{if (eq $.Href .GenHref)}}
 9-    <a href="{{.GenHref}}" class="link-alt-hover">{{.Text}}</a>
10+  <ul class="sitemap mb-4 list-none sidebar-list">
11+  {{range .Sitemap.Children}}
12+    {{if .Href}}
13+    <li>
14+      <span class="font-bold">
15+        {{if (eq $.Href .GenHref)}}
16+        <a href="{{.GenHref}}" class="link-alt-hover">{{.Text}}</a>
17+        {{else}}
18+        <a href="{{.GenHref}}" class="link-alt">{{.Text}}</a>
19+        {{end}}
20+      </span>
21     {{else}}
22-    <a href="{{.GenHref}}" class="link-alt">{{.Text}}</a>
23+    <li>
24+      <span class="font-bold">{{.Text}}</span>
25     {{end}}
26-  </li>
27-  {{else}}
28-  <li class="text-md">{{.Text}}</li>
29-  {{end}}
30 
31-  <ul class="list-none sidebar-list">
32-    {{range .Children}}
33-    <li>
34-      {{if (eq $.Href .GenHref)}}
35-      <a href="{{.GenHref}}" class="link-alt-hover">{{.Text}}</a>
36-      {{else}}
37-      <a href="{{.GenHref}}" class="link-alt">{{.Text}}</a>
38+      {{if .Children}}
39+      <ul class="list-square sidebar-list">
40+        {{range .Children}}
41+          <li>
42+            <a href="{{.GenHref}}" class="link-alt{{if (eq $.Href .GenHref)}}-hover{{end}}">
43+              {{.Text}}
44+            </a>
45+          </li>
46+        {{end}}
47+      </ul>
48       {{end}}
49     </li>
50-    {{end}}
51+  {{end}}
52   </ul>
53 {{end}}
54-</ul>
55-</div>
56-{{end}}