1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tailwind Starter Template - Ghostwind CSS : Tailwind Toolbox</title>
<meta name="author" content="name">
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css"/>
<!--Replace with your tailwind.css once created-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<style>
.smooth {transition: box-shadow 0.3s ease-in-out;}
::selection{background-color: aliceblue}
:root{::-webkit-scrollbar{height:10px;width:10px;}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}
::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px} ::-webkit-scrollbar-thumb:hover{background:#c4c4c4}}
/*scroll to top*/
.scroll-top {position: fixed;z-index: 50;padding: 0;right: 30px;bottom: 100px;opacity: 0;visibility: hidden;transform: translateY(15px);height: 46px;width: 46px;cursor: pointer;display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: all .4s ease;border: none;box-shadow: inset 0 0 0 2px #ccc;color: #ccc;background-color: #fff;}.scroll-top.is-active {opacity: 1;visibility: visible;transform: translateY(0);}.scroll-top .icon-tabler-arrow-up {position: absolute;stroke-width: 2px;stroke: #333;}.scroll-top svg path {fill: none;}.scroll-top svg.progress-circle path {stroke: #333;stroke-width: 4;transition: all .4s ease;}.scroll-top:hover {color: var(--ghost-accent-color);}.scroll-top:hover .progress-circle path, .scroll-top:hover .icon-tabler-arrow-up {stroke: var(--ghost-accent-color);}
</style>
</head>
<body class="bg-white font-sans leading-normal tracking-normal">
<!--Nav-->
<!--Title-->
<div class="text-center pt-16 md:pt-32">
<p class="text-sm md:text-base text-green-500 font-bold">04 JULY 2023 <span class="text-gray-900">/</span> GETTING
STARTED</p>
<h1 class="font-bold break-normal text-3xl md:text-5xl">Welcome to Ghostwind CSS</h1>
</div>
<!--image-->
<div class="container w-full max-w-6xl mx-auto bg-white bg-cover mt-8 rounded"
style="background-image:url('https://source.unsplash.com/collection/1118905/'); height: 75vh;"></div>
<!--Container-->
<div class="container max-w-5xl mx-auto -mt-32">
<div class="mx-0 sm:mx-6">
<div class="bg-white w-full p-8 md:p-24 text-xl md:text-2xl text-gray-800 leading-normal"
style="font-family:Georgia,serif;">
<!--Post Content-->
<!--Lead Para-->
<p class="text-2xl md:text-3xl mb-5">
👋 Welcome fellow <a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500"
href="https://www.tailwindcss.com">Tailwind CSS</a> and <a
class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500"
href="https://www.ghost.org">Ghost</a> fan. This starter template is an attempt to replicate the
default Ghost theme <a
class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500"
href="https://demo.ghost.io/welcome">"Casper"</a> using Tailwind CSS and vanilla Javascript.
</p>
<p class="py-6">The basic blog page layout is available and all using the default Tailwind CSS classes
(although there are a few hardcoded style tags). If you are going to use this in your project, you will
want to convert the classes into components.</p>
<p class="py-6">Sed dignissim lectus ut tincidunt vulputate. Fusce tincidunt lacus purus, in mattis tortor
sollicitudin pretium. Phasellus at diam posuere, scelerisque nisl sit amet, tincidunt urna. Cras nisi
diam, pulvinar ut molestie eget, eleifend ac magna. Sed at lorem condimentum, dignissim lorem eu,
blandit massa. Phasellus eleifend turpis vel erat bibendum scelerisque. Maecenas id risus dictum,
rhoncus odio vitae, maximus purus. Etiam efficitur dolor in dolor molestie ornare. Aenean pulvinar diam
nec neque tincidunt, vitae molestie quam fermentum. Donec ac pretium diam. Suspendisse sed odio risus.
Nunc nec luctus nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Duis nec nulla eget sem dictum elementum.</p>
<ol>
<li class="py-3">Maecenas accumsan lacus sit amet elementum porta. Aliquam eu libero lectus. Fusce
vehicula dictum mi. In non dolor at sem ullamcorper venenatis ut sed dui. Ut ut est quam.
Suspendisse quam quam, commodo sit amet placerat in, interdum a ipsum. Morbi sit amet tellus
scelerisque tortor semper posuere.
</li>
<li class="py-3">Morbi varius posuere blandit. Praesent gravida bibendum neque eget commodo. Duis auctor
ornare mauris, eu accumsan odio viverra in. Proin sagittis maximus pharetra. Nullam lorem mauris,
faucibus ut odio tempus, ultrices aliquet ex. Nam id quam eget ipsum luctus hendrerit. Ut eros
magna, eleifend ac ornare vulputate, pretium nec felis.
</li>
<li class="py-3">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Nunc vitae pretium elit. Cras leo mauris, tristique in risus ac, tristique rutrum velit. Mauris
accumsan tempor felis vitae gravida. Cras egestas convallis malesuada. Etiam ac ante id tortor
vulputate pretium. Maecenas vel sapien suscipit, elementum odio et, consequat tellus.
</li>
</ol>
<blockquote class="border-l-4 border-green-500 italic my-8 pl-8 md:pl-12">Example of blockquote - Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc commodo posuere et sit amet
ligula.
</blockquote>
<p class="py-6">Example code block:</p>
<pre class="bg-gray-900 rounded text-white font-mono text-base p-4">
<code class="break-words whitespace-pre-wrap">
<header class="site-header outer">
<div class="inner">
{{> "site-nav"}}
</div>
</header>
</code>
</pre>
<!--/ Post Content-->
</div>
<!--Subscribe-->
<div class="container font-sans bg-green-100 rounded mt-8 p-4 md:p-24 text-center">
<h2 class="font-bold break-normal text-2xl md:text-4xl">Subscribe to Ghostwind CSS</h2>
<h3 class="font-bold break-normal font-normal text-gray-600 text-base md:text-xl">Get the latest posts
delivered right to your inbox</h3>
<div class="w-full text-center pt-4">
<form action="#">
<div class="max-w-sm mx-auto p-1 pr-0 flex flex-wrap items-center">
<input type="email" placeholder="[email protected]"
class="flex-1 appearance-none rounded shadow p-3 text-gray-600 mr-2 focus:outline-none">
<button type="submit"
class="flex-1 mt-4 md:mt-0 block md:inline-block appearance-none bg-green-500 text-white text-base font-semibold tracking-wider uppercase py-4 rounded shadow hover:bg-green-400">
Subscribe
</button>
</div>
</form>
</div>
</div>
<!-- /Subscribe-->
<!--Author-->
<div class="flex w-full items-center font-sans p-8 md:p-24">
<img class="w-10 h-10 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
<div class="flex-1">
<p class="text-base font-bold text-base md:text-xl leading-none">Ghostwind CSS</p>
<p class="text-gray-600 text-xs md:text-base">Tailwind CSS version of Ghost's Casper theme by <a
class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500"
href="https://www.tailwindtoolbox.com">TailwindToolbox.com</a></p>
</div>
<div class="justify-end">
</div>
<!--/Author-->
</div>
</div>
</div>
<!-- Scroll Top Button -->
<button class="btn-toggle-round scroll-top js-scroll-top" type="button" title="Scroll to top">
<svg class="progress-circle" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-up" width="24" height="24"
viewBox="0 0 24 24" stroke-width="1.5" stroke="cuurentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="12" y1="5" x2="12" y2="19"/>
<line x1="18" y1="11" x2="12" y2="5"/>
<line x1="6" y1="11" x2="12" y2="5"/>
</svg>
</button>
<div class="bg-gray-200">
<div class="container w-full max-w-6xl mx-auto px-2 py-8">
<div class="flex flex-wrap -mx-2">
<div class="w-full md:w-1/3 px-2 pb-12">
<div class="h-full bg-white rounded overflow-hidden shadow-md hover:shadow-lg relative smooth">
<a href="#" class="no-underline hover:no-underline">
<img src="https://source.unsplash.com/_AjqGGafofE/400x200"
class="h-48 w-full rounded-t shadow-lg">
<div class="p-6 h-auto md:h-48">
<p class="text-gray-600 text-xs md:text-sm">GETTING STARTED</p>
<div class="font-bold text-xl text-gray-900">Aperture Science</div>
<p class="text-gray-800 font-serif text-base mb-5">
I’ll be honest, we’re throwing science at the wall here to see what sticks. No idea what
it’ll do. Probably nothing. Best case scenario you might get some super powers. Worst
case, some tumors, which we’ll cut out.
</p>
</div>
<div class="flex items-center justify-between inset-x-0 bottom-0 p-6">
<img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300"
alt="Avatar of Author">
<p class="text-gray-600 text-xs md:text-sm">2 MIN READ</p>
</div>
</a>
</div>
</div>
<div class="w-full md:w-1/3 px-2 pb-12">
<div class="h-full bg-white rounded overflow-hidden shadow-md hover:shadow-lg relative smooth">
<a href="#" class="no-underline hover:no-underline">
<img src="https://source.unsplash.com/_AjqGGafofE/400x200" class="h-48 w-full rounded-t shadow">
<div class="p-6 h-auto md:h-48">
<p class="text-gray-600 text-xs md:text-sm">UNDERWATER</p>
<div class="font-bold text-xl text-gray-900">Biolumini algae diatomeae ecology.</div>
<p class="text-gray-800 font-serif text-base mb-5">
Lorem ipsum dolor sit. Aliquam at ipsum eu nunc commodo posuere et sit amet ligula.
</p>
</div>
<div class="flex items-center justify-between inset-x-0 bottom-0 p-6">
<img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300"
alt="Avatar of Author">
<p class="text-gray-600 text-xs md:text-sm">4 MIN READ</p>
</div>
</a>
</div>
</div>
<div class="w-full md:w-1/3 px-2 pb-12">
<div class="h-full bg-white rounded overflow-hidden shadow-md hover:shadow-lg relative smooth">
<a href="#" class="no-underline hover:no-underline">
<img src="https://source.unsplash.com/DEa8_vxKlEo/400x200" class="h-48 w-full rounded-t shadow">
<div class="p-6 h-auto md:h-48">
<p class="text-gray-600 text-xs md:text-sm">FOREST</p>
<div class="font-bold text-xl text-gray-900">What is life but a teardrop in the eye of
infinity?
</div>
<p class="text-gray-800 font-serif text-base mb-5">
Mollis pretium integer eros et dui orci, lectus nec elit sagittis neque. Dignissim ac
nullam semper aliquet volutpat, ut scelerisque.
</p>
</div>
<div class="flex items-center justify-between inset-x-0 bottom-0 p-6">
<img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300"
alt="Avatar of Author">
<p class="text-gray-600 text-xs md:text-sm">7 MIN READ</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-gray-900">
<div class="container max-w-6xl mx-auto flex items-center px-2 py-8">
<div class="w-full mx-auto flex flex-wrap items-center">
<div class="flex w-full md:w-1/2 justify-center md:justify-start text-white font-extrabold">
<a class="text-gray-900 no-underline hover:text-gray-900 hover:no-underline" href="#">
<span class="text-base text-gray-200">Ghostwind</span>
</a>
</div>
<div class="flex w-full pt-2 content-center justify-between md:w-1/2 md:justify-end">
<ul class="list-reset flex justify-center flex-1 md:flex-none items-center">
<li>
<a class="inline-block py-2 px-3 text-white no-underline" href="index.html">HOME</a>
</li>
<li>
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3"
href="#">link</a>
</li>
<li>
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3"
href="#">link</a>
</li>
<li>
<a class="inline-block text-gray-600 no-underline hover:text-gray-200 hover:underline py-2 px-3"
href="#">link</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<script>
/* Progress bar */
//Source: https://alligator.io/js/progress-bar-javascript-css-variables/
var h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight',
progress = document.querySelector('#progress'),
scroll;
var scrollpos = window.scrollY;
var header = document.getElementById("header");
document.addEventListener('scroll', function() {
/*Refresh scroll % width*/
scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
progress.style.setProperty('--scroll', scroll + '%');
/*Apply classes for slide in bar*/
scrollpos = window.scrollY;
if(scrollpos > 100){
header.classList.remove("hidden");
header.classList.remove("fadeOutUp");
header.classList.add("slideInDown");
}
else {
header.classList.remove("slideInDown");
header.classList.add("fadeOutUp");
header.classList.add("hidden");
}
});
// scroll to top
const t=document.querySelector(".js-scroll-top");if(t){t.onclick=()=>{window.scrollTo({top:0,behavior:"smooth"})};const e=document.querySelector(".scroll-top path"),o=e.getTotalLength();e.style.transition=e.style.WebkitTransition="none",e.style.strokeDasharray=`${o} ${o}`,e.style.strokeDashoffset=o,e.getBoundingClientRect(),e.style.transition=e.style.WebkitTransition="stroke-dashoffset 10ms linear";const n=function(){const t=window.scrollY||window.scrollTopBtn||document.documentElement.scrollTopBtn,n=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight),s=Math.max(document.documentElement.clientHeight,window.innerHeight||0);var l=o-t*o/(n-s);e.style.strokeDashoffset=l};n();const s=100;window.addEventListener("scroll",(function(e){n();(window.scrollY||window.scrollTopBtn||document.getElementsByTagName("html")[0].scrollTopBtn)>s?t.classList.add("is-active"):t.classList.remove("is-active")}),!1)}
</script>
</body>
</html>
|
