Skip to content

Commit cafb13b

Browse files
eelcojeelcoj
committed
Initial commit (version 1.0.0)
0 parents  commit cafb13b

File tree

7 files changed

+1846
-0
lines changed

7 files changed

+1846
-0
lines changed

‎README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Documentation theme built with Tailwind CSS
2+
3+
This is a pure HTML and Tailwind CSS documentation template. As it uses no other dependency than Tailwind CSS, it’s plug and play with any static site generator.
4+
5+
This theme comes with two views/layouts:
6+
7+
- index view; perfect for quick links to important docs
8+
- show view; where the regular docs live
9+
10+
## Other features
11+
12+
- Fully responsive, inc. navigation
13+
- Previous/next articles navigation
14+
- Fallback search using DuckDuckGo (when no JavaScript is present)
15+
16+
## Sponsored By [Spinal](https://spinalcms.com/)
17+
18+
<a href="https://spinalcms.com/" target="_blank">
19+
<img src="https://user-images.githubusercontent.com/988051/183079316-af747ef2-42a9-47d8-9a0c-488ed4b6a689.jpg" alt="Spinal CMS logo" width="200"/>
20+
</a>

‎doc.html‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<!doctype html>
2+
<html lang="en-GB">
3+
<head>
4+
<title>Spinal docs</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="dist/output.css" rel="stylesheet">
8+
</head>
9+
10+
<body>
11+
<header class="sticky top-0 z-50 flex items-center justify-between px-3 py-2 border-b shadow-lg bg-white/90 backdrop-blur-sm border-slate-400/40">
12+
<div class="flex items-center flex-grow basis-0">
13+
<a href="" class="text-lg font-semibold tracking-tight text-slate-900">
14+
Spinal docs
15+
</a>
16+
</div>
17+
18+
<form action="https://duckduckgo.com/" class="md:w-80 lg:w-96">
19+
<span class="relative flex items-center group">
20+
<svg aria-hidden="true" viewBox="0 0 20 20" class="absolute w-4 h-4 ml-3 fill-slate-400 group-hover:fill-slate-500 group-focus:fill-slate-500"><path d="M16.293 17.707a1 1 0 0 0 1.414-1.414l-1.414 1.414ZM9 14a5 5 0 0 1-5-5H2a7 7 0 0 0 7 7v-2ZM4 9a5 5 0 0 1 5-5V2a7 7 0 0 0-7 7h2Zm5-5a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7v2Zm8.707 12.293-3.757-3.757-1.414 1.414 3.757 3.757 1.414-1.414ZM14 9a4.98 4.98 0 0 1-1.464 3.536l1.414 1.414A6.98 6.98 0 0 0 16 9h-2Zm-1.464 3.536A4.98 4.98 0 0 1 9 14v2a6.98 6.98 0 0 0 4.95-2.05l-1.414-1.414Z"></path></svg>
21+
<input type="text" name="q" placeholder="Search docs…" class="w-full py-2 pl-10 pr-2 border rounded bg-slate-100 placeholder-slate-400 text-slate-800 border-slate-100 outline outline-offset-2 outline-2 outline-transparent hover:border-slate-200 focus:border-slate-200 focus:outline-slate-600" />
22+
</span>
23+
<input type="hidden" name="sites" value="spinalcms.com">
24+
<input type="submit" value="Search" class="sr-only" />
25+
</form>
26+
27+
<div class="items-center justify-end flex-grow hidden basis-0 md:flex">
28+
<a href="https://spinalcms.com/" class="px-4 py-2 text-sm font-semibold rounded bg-slate-900 text-slate-50 transition ease-in-out delay-75 hover:scale-105 duration-200">
29+
Go to homepage
30+
</a>
31+
</div>
32+
</header>
33+
34+
<main class="relative flex justify-center mx-auto max-w-8xl sm:px-2 lg:px-8 xl:px-12">
35+
<label for="navigation" class="fixed bottom-0 left-0 z-50 flex items-center justify-center w-12 h-12 mb-4 ml-4 bg-white border rounded-full shadow-lg cursor-pointer text-slate-600 border-slate-300 lg:hidden transition duration-200 ease-in-out active:scale-95">
36+
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
37+
<path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16" />
38+
</svg>
39+
</label>
40+
41+
<input type="checkbox" name="navigation" id="navigation" class="hidden peer" />
42+
<div class="fixed top-[3.5rem] h-screen shadow-xl px-4 left-0 hidden peer-checked:block lg:relative lg:top-0 lg:h-auto lg:px-0 lg:block lg:flex-none lg:shadow-none">
43+
<div class="absolute inset-y-0 right-0 w-full lg:w-[50vw] bg-white lg:bg-slate-50"></div>
44+
45+
<nav class="sticky top-[4.5rem] w-64 pr-8 text-base lg:text-sm xl:w-72 xl:pr-16">
46+
<ul role="list" class="-ml-0.5 h-[calc(100vh-4.5rem)] overflow-y-auto py-7 pl-0.5 space-y-8">
47+
<li>
48+
<h3 class="font-semibold tracking-tight text-slate-900">
49+
Getting started
50+
</h3>
51+
52+
<ul role="list" class="pl-3 mt-3 space-y-2">
53+
<li>
54+
<a href="#" class="text-slate-600 hover:text-slate-800">
55+
Quick start guide
56+
</a>
57+
</li>
58+
59+
<li>
60+
<a href="#" class="text-slate-900 hover:text-slate-800">
61+
How does Spinal work?
62+
</a>
63+
</li>
64+
</ul>
65+
</li>
66+
67+
<li>
68+
<h3 class="font-semibold tracking-tight text-slate-900">
69+
Content Types
70+
</h3>
71+
72+
<ul role="list" class="pl-3 mt-3 space-y-2">
73+
<li>
74+
<a href="#" class="text-slate-600 hover:text-slate-800">
75+
What are content types?
76+
</a>
77+
</li>
78+
79+
<li>
80+
<a href="#" class="text-slate-600 hover:text-slate-800">
81+
Create and edit content types
82+
</a>
83+
</li>
84+
</ul>
85+
</li>
86+
87+
<li>
88+
<h3 class="font-semibold tracking-tight text-slate-900">
89+
Content
90+
</h3>
91+
92+
<ul role="list" class="pl-3 mt-3 space-y-2">
93+
<li>
94+
<a href="#" class="text-slate-600 hover:text-slate-800">
95+
What kind of content can I create and edit?
96+
</a>
97+
</li>
98+
99+
<li>
100+
<a href="#" class="text-slate-600 hover:text-slate-800">
101+
Previewing content
102+
</a>
103+
</li>
104+
</ul>
105+
</li>
106+
</ul>
107+
</nav>
108+
</div>
109+
110+
<div class="flex-auto max-w-2xl min-w-0 px-4 py-10 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16">
111+
<article class="">
112+
<header class="">
113+
<p class="text-base font-medium text-slate-500">
114+
Getting started
115+
</p>
116+
117+
<h1 class="text-3xl font-bold tracking-tight text-slate-900">
118+
How does Spinal work?
119+
</h1>
120+
</header>
121+
122+
<p class="mt-2 text-xl text-slate-600">
123+
Need to get started quickly with Spinal? You will learn all the basics in just minutes.
124+
</p>
125+
126+
<div class="mt-8 prose prose-slate max-w-none prose-headings:font-semibold prose-headings:tracking-tight prose-lead:text-slate-500 prose-a:font-semibold prose-a:underline prose-pre:bg-slate-900">
127+
<h2>
128+
Humblebrag hammock swag
129+
</h2>
130+
131+
<p>
132+
Humblebrag hammock swag, cardigan praxis yr vexillologist locavore activated charcoal. Offal paleo iPhone, DSA cronut wolf tote bag jianbing yes plz drinking vinegar. Chartreuse polaroid irony offal meggings cornhole crucifix, banh mi glossier taxidermy tattooed shabby chic hashtag cred. 8-bit hammock humblebrag, hot chicken post-ironic meditation farm-to-table cray everyday carry succulents franzen deep v mlkshk unicorn. Literally vexillologist salvia four dollar toast direct trade fixie vice. Typewriter mustache edison bulb, everyday carry DIY craft beer sartorial yr gastropub hot chicken pabst squid.
133+
</p>
134+
135+
<h3>
136+
Paleo yuccie pickled fingerstache
137+
</h3>
138+
139+
<p>
140+
Paleo yuccie pickled fingerstache. Lyft kale chips dreamcatcher kinfolk, hot chicken man braid semiotics iceland cold-pressed tattooed church-key vegan authentic hashtag twee. Small batch mustache chia sriracha irony PBR&B, brooklyn ethical truffaut. Pop-up tumeric ugh, kickstarter quinoa semiotics keffiyeh messenger bag air plant slow-carb. Chillwave selfies thundercats gochujang intelligentsia, marfa butcher forage single-origin coffee la croix coloring book try-hard cred listicle. Messenger bag everyday carry bicycle rights, art party kinfolk stumptown kickstarter green juice meh. Portland bespoke four dollar toast migas mumblecore fanny pack.
141+
</p>
142+
143+
<h3>
144+
Selfies vegan microdosing aesthetic cardigan
145+
</h3>
146+
147+
<p>
148+
Selfies vegan microdosing aesthetic cardigan. Raclette tofu narwhal fanny pack cred flannel. Chartreuse kale chips viral gentrify vape palo santo 90's. Actually activated charcoal meggings try-hard yuccie thundercats tumeric.
149+
</p>
150+
151+
<h2>
152+
Pinterest twee flexitarian
153+
</h2>
154+
155+
<p>
156+
Pinterest twee flexitarian keytar mixtape shaman chambray actually lomo humblebrag keffiyeh yuccie health goth. Edison bulb copper mug listicle cred tote bag swag migas blog yes plz humblebrag. Bespoke keffiyeh kale chips seitan hella. Pok pok chartreuse squid jean shorts small batch, dreamcatcher williamsburg raclette flexitarian yr crucifix. Salvia church-key prism, glossier shabby chic post-ironic retro everyday carry austin master cleanse sustainable. Gastropub kombucha yuccie, photo booth semiotics tumblr vaporware normcore drinking vinegar blog.
157+
</p>
158+
</div>
159+
</article>
160+
161+
<dl class="flex pt-6 mt-6 border-t border-slate-200">
162+
<div class="mr-auto text-left">
163+
<dt class="text-sm font-normal tracking-tight text-slate-600">
164+
Previous
165+
</dt>
166+
167+
<dd class="mt-1">
168+
<a href="#" class="text-base font-semibold text-slate-900 hover:underline">
169+
Quick start guide
170+
</a>
171+
</dd>
172+
</div>
173+
174+
<div class="ml-auto text-right">
175+
<dt class="text-sm font-normal tracking-tight text-slate-600">
176+
Next
177+
</dt>
178+
179+
<dd class="mt-1">
180+
<a href="#" class="text-base font-semibold text-slate-900 hover:underline">
181+
What are content types?
182+
</a>
183+
</dd>
184+
</div>
185+
</dl>
186+
</div>
187+
</main>
188+
</body>
189+
</html>

0 commit comments

Comments
 (0)