Skip to content

Commit 34d40de

Browse files
drainpixiedrainpixie
committed
refactor: remove tailwind
1 parent c6320c9 commit 34d40de

File tree

3 files changed

+233
-50
lines changed

3 files changed

+233
-50
lines changed

‎website/index.html‎

Lines changed: 24 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -3,72 +3,46 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Proselint</title>
6-
<script src="https://cdn.tailwindcss.com"></script>
7-
<style>
8-
body {
9-
font-family: "Georgia", "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
10-
line-height: 1.65;
11-
}
12-
h1, h2, h3 {
13-
font-family: "Merriweather", Georgia, serif;
14-
}
15-
.copied {
16-
border-color: #88e788 !important;
17-
transition: border-color 0.3s ease !important;
18-
}
19-
</style>
6+
<link rel="stylesheet" href="styles.css">
207
</head>
21-
<body class="bg-neutral-50 text-neutral-900">
22-
<main class="max-w-2xl mx-auto my-16 px-6">
23-
<h1 class="text-4xl font-bold">Proselint</h1>
24-
<p class="mb-8 text-lg text-neutral-700">
8+
<body>
9+
<main>
10+
<h1>Proselint</h1>
11+
<p>
2512
<em>Proselint</em> is a linter for English prose.
2613
It highlights <em>clichés</em>, <em>jargon</em>, <em>illogical phrasing</em>, and other stylistic issues,
2714
much like a spellchecker for style.
2815
</p>
2916

30-
<h2 class="text-2xl font-semibold mt-8">Install</h2>
31-
<p class="text-neutral-700 mb-4">Install via <em>pip</em> and try a quick example from the command line.</p>
32-
<div class="space-y-4">
33-
<pre onclick="copyCode(this)"
34-
class="text-sm mt-3 bg-white border border-neutral-300 text-neutral-900 rounded-lg p-4 hover:border-neutral-400 transition-colors duration-200 cursor-pointer font-mono leading-6 whitespace-pre-wrap break-words focus:outline-none focus:ring-2 focus:ring-indigo-500"
35-
title="Click to copy"><code><span class="text-blue-600 font-semibold">pip</span> <span class="text-purple-600">install</span> <span class="text-green-600">proselint</span></code></pre>
36-
<pre onclick="copyCode(this)"
37-
class="text-sm mt-3 bg-white border border-neutral-300 text-neutral-900 rounded-lg p-4 hover:border-neutral-400 transition-colors duration-200 cursor-pointer font-mono leading-6 whitespace-pre-wrap break-words focus:outline-none focus:ring-2 focus:ring-indigo-500"
38-
title="Click to copy"><code><span class="text-blue-600 font-semibold">echo</span> <span class="text-green-600">"This is very unique and literally perfect."</span> <span class="text-red-600">|</span> <span class="text-blue-600 font-semibold">proselint</span> <span class="text-purple-600">check</span>
39-
<span class="text-blue-600 font-semibold">proselint</span> <span class="text-purple-600">check</span> <span class="text-amber-600">README.md</span></code></pre>
17+
<h2>Install</h2>
18+
<p>Install via <em>pip</em> and try a quick example from the command line.</p>
19+
<div>
20+
<pre onclick="copyCode(this)" title="Click to copy">
21+
<code><span class="blue">pip</span> <span class="purple">install</span> <span class="green">proselint</span></code>
22+
</pre>
23+
<pre onclick="copyCode(this)" title="Click to copy">
24+
<code><span class="blue">echo</span> <span class="green">"This is very unique and literally perfect."</span> <span class="red">|</span> <span class="blue">proselint</span> <span class="purple">check</span>
25+
<span class="blue">proselint</span> <span class="purple">check</span> <span class="amber">README.md</span></code>
26+
</pre>
4027
</div>
41-
42-
<h2 class="text-2xl font-semibold mt-8">Try it</h2>
43-
<p class="mb-4 text-neutral-700">Paste or type some text below.</p>
44-
<div class="relative">
45-
<textarea rows="8"
46-
class="w-full border border-neutral-300 rounded-lg p-4 focus:outline-none focus:ring-2 focus:ring-indigo-500 font-serif"
47-
>This is very unique and literally perfect.</textarea>
48-
<div class="absolute inset-0 pointer-events-none whitespace-pre-wrap p-4 text-transparent"></div>
28+
<h2>Try it</h2>
29+
<p>Paste or type some text below.</p>
30+
<div >
31+
<textarea rows="8">This is very unique and literally perfect.</textarea>
32+
<div id="result"></div>
4933
</div>
5034

51-
<h3 class="font-semibold mt-2">Issues</h3>
35+
<h3>Issues</h3>
5236
<ul>
5337
<li><em>uncomparables</em> Comparison of an uncomparable: 'very unique' is not comparable.</li>
5438
<li><em>weasel_words.very</em> Substitute 'damn' every time you're inclined to write 'very'; your editor will delete it and the writing will be just as it should be.</li>
5539
</ul>
5640
</main>
5741

58-
<footer class="max-w-2xl mx-auto px-6 pb-8 text-center">
59-
<p class="text-sm text-neutral-500">
60-
Crafted by <a href="https://github.com/amperser" rel="noopener noreferrer" target="_blank" class="text-neutral-700 hover:text-neutral-900 underline">Amperser Labs</a>
42+
<footer>
43+
<p class="sm">
44+
Crafted by <a href="https://github.com/amperser" rel="noopener noreferrer" target="_blank">Amperser Labs</a>
6145
</p>
6246
</footer>
63-
64-
<script>
65-
async function copyCode(element) {
66-
const text = element.textContent;
67-
await navigator.clipboard.writeText(text).catch(() => {});
68-
69-
element.classList.add('copied');
70-
setTimeout(() => element.classList.remove('copied'), 500);
71-
}
72-
</script>
7347
</body>
7448
</html>

‎website/reset.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/* https://piccalil.li/blog/a-more-modern-css-reset/ */
2+
/* Box sizing rules */
3+
*,
4+
*::before,
5+
*::after {
6+
box-sizing: border-box;
7+
}
8+
9+
/* Prevent font size inflation */
10+
html {
11+
-moz-text-size-adjust: none;
12+
-webkit-text-size-adjust: none;
13+
text-size-adjust: none;
14+
}
15+
16+
/* Remove default margin in favour of better control in authored CSS */
17+
body, h1, h2, h3, h4, p,
18+
figure, blockquote, dl, dd {
19+
margin-block-end: 0;
20+
}
21+
22+
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
23+
ul[role='list'],
24+
ol[role='list'] {
25+
list-style: none;
26+
}
27+
28+
/* Set core body defaults */
29+
body {
30+
min-height: 100vh;
31+
line-height: 1.5;
32+
}
33+
34+
/* Set shorter line heights on headings and interactive elements */
35+
h1, h2, h3, h4,
36+
button, input, label {
37+
line-height: 1.1;
38+
}
39+
40+
/* Balance text wrapping on headings */
41+
h1, h2,
42+
h3, h4 {
43+
text-wrap: balance;
44+
}
45+
46+
/* A elements that don't have a class get default styles */
47+
a:not([class]) {
48+
text-decoration-skip-ink: auto;
49+
color: currentColor;
50+
}
51+
52+
/* Make images easier to work with */
53+
img,
54+
picture {
55+
max-width: 100%;
56+
display: block;
57+
}
58+
59+
/* Inherit fonts for inputs and buttons */
60+
input, button,
61+
textarea, select {
62+
font-family: inherit;
63+
font-size: inherit;
64+
}
65+
66+
/* Make sure textareas without a rows attribute are not tiny */
67+
textarea:not([rows]) {
68+
min-height: 10em;
69+
}
70+
71+
/* Anything that has been anchored to should have extra scroll margin */
72+
:target {
73+
scroll-margin-block: 5ex;
74+
}

‎website/styles.css‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
@import "./reset.css";
2+
3+
body {
4+
font-family: "Georgia", "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
5+
line-height: 1.65;
6+
color: #171717;
7+
background-color: #fafafa;
8+
}
9+
10+
h1, h2, h3 {
11+
font-family: "Merriweather", "Georgia", serif;
12+
}
13+
14+
main {
15+
max-width: 42rem;
16+
margin: 4rem auto;
17+
padding: 0 1.5rem;
18+
}
19+
20+
h1 {
21+
font-size: 2.25rem;
22+
line-height: 2.5rem;
23+
font-weight: 700;
24+
}
25+
26+
h2 {
27+
font-size: 1.5rem;
28+
font-weight: 600;
29+
}
30+
31+
h3 {
32+
font-weight: 600;
33+
}
34+
35+
p {
36+
font-size: 1.125rem;
37+
color: #404040;
38+
39+
margin-top: .3rem !important;
40+
margin-bottom: .8rem !important;
41+
}
42+
43+
p.sm {
44+
font-size: 0.875rem;
45+
color: #737373;
46+
}
47+
48+
a {
49+
color: #404040;
50+
text-decoration: underline;
51+
}
52+
53+
a:hover {
54+
color: #171717;
55+
}
56+
57+
pre {
58+
font-size: 0.875rem;
59+
margin-top: 0.75rem;
60+
background-color: #fff;
61+
border: 1px solid #d4d4d4;
62+
color: #171717;
63+
padding: 1rem;
64+
border-radius: 0.5rem;
65+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
66+
line-height: 1.5rem;
67+
white-space: pre-wrap;
68+
word-break: break-word;
69+
cursor: pointer;
70+
transition: border-color 0.2s;
71+
}
72+
73+
pre:hover {
74+
border-color: #a3a3a3;
75+
}
76+
77+
pre:focus {
78+
outline: none;
79+
box-shadow: 0 0 0 2px #4f46e5;
80+
}
81+
82+
pre:hover {
83+
border-color: #a3a3a3;
84+
}
85+
86+
pre:focus {
87+
outline: none;
88+
box-shadow: 0 0 0 2px #4f46e5;
89+
}
90+
91+
code {
92+
font-family: inherit;
93+
}
94+
95+
code .blue {
96+
color: #2563eb;
97+
font-weight: 600;
98+
}
99+
100+
code .purple {
101+
color: #9333ea;
102+
}
103+
104+
code .green {
105+
color: #16a34a;
106+
}
107+
108+
code .red {
109+
color: #dc2626;
110+
}
111+
112+
code .amber {
113+
color: #f59e0b;
114+
}
115+
116+
textarea {
117+
width: 100%;
118+
border: 1px solid #d4d4d4;
119+
border-radius: 0.5rem;
120+
padding: 1rem;
121+
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
122+
line-height: 1.5rem;
123+
}
124+
125+
textarea:focus {
126+
outline: none;
127+
box-shadow: 0 0 0 2px #4f46e5;
128+
}
129+
130+
footer {
131+
max-width: 42rem;
132+
margin: 0 auto;
133+
padding: 0 1.5rem 2rem;
134+
text-align: center;
135+
}

0 commit comments

Comments
 (0)