Skip to content

Commit 606cc09

Browse files
barelyhumanbarelyhuman
committed
get rid of tailwind and additional assets
1 parent 4133a6d commit 606cc09

16 files changed

+215
-262
lines changed

‎index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
rel="stylesheet"
1616
href="https://unpkg.com/[email protected]/styles/ascetic.css"
1717
/></noscript>
18+
1819
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
20+
<meta name="theme-color" content="#ffffff" />
1921
<title>Mark</title>
2022

2123
<!-- Primary Meta Tags -->

‎src/assets/fonts/JetBrainsMonoNerdFontCompleteM-Regular.woff

-512 KB
Binary file not shown.

‎src/assets/fonts/JetBrainsMonoNerdFontCompleteM-Regular.woff2

-400 KB
Binary file not shown.

‎src/assets/fonts/iAWriterQuattroS-Regular.woff

-55.5 KB
Binary file not shown.

‎src/assets/fonts/iAWriterQuattroS-Regular.woff2

-43.4 KB
Binary file not shown.

‎src/components/button.vue

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
11
<template>
2-
<button
3-
v-bind="$attrs"
4-
class="
5-
block
6-
rounded-md
7-
bg-gray-100
8-
p-2
9-
focus:outline-none
10-
hover:bg-gray-200
11-
"
12-
>
2+
<button v-bind="$attrs">
133
<slot></slot>
144
</button>
155
</template>
@@ -21,7 +11,26 @@ defineProps({
2111
</script>
2212

2313
<style scoped>
24-
@tailwind base;
25-
@tailwind components;
26-
@tailwind utilities;
14+
button {
15+
display: inline-flex;
16+
justify-content: center;
17+
align-items: center;
18+
padding: 8px;
19+
background: #f3f3f3;
20+
outline: black;
21+
border: 0px;
22+
border-radius: 6px;
23+
}
24+
25+
button:hover {
26+
background: #ddd;
27+
}
28+
29+
button.ghost {
30+
background: transparent;
31+
}
32+
33+
button.ghost:hover {
34+
background: transparent;
35+
}
2736
</style>

‎src/components/editor.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
2-
<div class="bg-white p-3 min-80-screen">
2+
<div>
33
<div
44
name=""
55
ref="texteditor"
66
autofocus="true"
7-
class="code-editor min-80-screen outline-none min-h-screen w-full"
7+
class="code-editor w-full"
88
></div>
99
</div>
1010
</template>

‎src/components/menu-item.vue

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,8 @@
11
<template>
2-
<a
3-
v-bind:href="href"
4-
class="
5-
block
6-
px-4
7-
py-2
8-
text-sm
9-
capitalize
10-
text-gray-700
11-
hover:bg-black hover:text-white
12-
"
13-
>
14-
<span class="flex justify-between">
2+
<a v-bind:href="href" class="item-wrapper">
3+
<span class="item-content">
154
<span>{{ label }} </span>
16-
<span class="text-gray-400 text-xs"> {{ modifier }}</span>
5+
<span class="menu-modifier" v-if="modifier"> {{ modifier }}</span>
176
</span>
187
</a>
198
</template>
@@ -27,7 +16,30 @@ defineProps({
2716
</script>
2817

2918
<style scoped>
30-
@tailwind base;
31-
@tailwind components;
32-
@tailwind utilities;
19+
.item-wrapper {
20+
display: block;
21+
padding-left: 12px;
22+
padding-right: 12px;
23+
padding-top: 8px;
24+
padding-bottom: 8px;
25+
font-size: 12px;
26+
text-transform: uppercase;
27+
color: #333;
28+
}
29+
30+
.item-wrapper:hover {
31+
background: #f3f3f3;
32+
}
33+
34+
.item-content {
35+
display: flex;
36+
justify-content: space-between;
37+
}
38+
39+
.menu-modifier {
40+
font-size: 10px;
41+
background: #f3f3f3;
42+
border-radius: 6px;
43+
padding: 4px;
44+
}
3345
</style>

‎src/components/menu.vue

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,23 @@
11
<template>
2-
<div class="relative">
3-
<Button
4-
@click="state.dropdownOpen = !state.dropdownOpen"
5-
class="relative z-10"
6-
>
2+
<div class="container">
3+
<Button @click="state.dropdownOpen = !state.dropdownOpen" class="trigger">
74
{{ triggerLabel }}
85
</Button>
96

107
<div
118
v-if="state.dropdownOpen"
12-
class="h-screen w-screen fixed z-10"
9+
class="dropdown"
1310
@click="state.dropdownOpen = false"
1411
></div>
1512

16-
<div
17-
v-if="state.dropdownOpen"
18-
class="
19-
absolute
20-
left-0
21-
mt-2
22-
py-2
23-
w-60
24-
bg-white
25-
rounded-md
26-
shadow-xl
27-
border
28-
z-20
29-
"
30-
>
13+
<div v-if="state.dropdownOpen" class="dropdown-items">
3114
<slot></slot>
3215
</div>
3316
</div>
3417
</template>
3518

3619
<script setup>
3720
import { reactive } from "vue";
38-
import MenuItem from "./menu-item.vue";
3921
import Button from "./button.vue";
4022
4123
defineProps({
@@ -47,7 +29,30 @@ const state = reactive({ dropdownOpen: false });
4729
</script>
4830

4931
<style scoped>
50-
@tailwind base;
51-
@tailwind components;
52-
@tailwind utilities;
32+
.container {
33+
position: relative;
34+
}
35+
36+
.trigger {
37+
position: relative;
38+
}
39+
.dropdown {
40+
position: fixed;
41+
height: 100vh;
42+
width: 100vw;
43+
z-index: 10;
44+
}
45+
46+
.dropdown-items {
47+
position: absolute;
48+
left: 0;
49+
margin-top: 8px;
50+
padding-top: 8px;
51+
padding-bottom: 8px;
52+
width: 30em;
53+
background: white;
54+
border-radius: 12px;
55+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
56+
z-index: 20;
57+
}
5358
</style>

‎src/components/preview.vue

Lines changed: 32 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -8,148 +8,55 @@ defineProps({
88
});
99
</script>
1010

11-
<style>
12-
/*
13-
CSS Credits https://github.com/pacocoursey/bear-css
14-
*/
15-
11+
<style scoped>
1612
.markdown-preview {
17-
margin: 0 auto;
13+
font-family: "IBM Plex Sans", sans-serif;
14+
margin:0 auto;
1815
width: 100%;
19-
padding: 20px 60px;
20-
font-size: 14px;
21-
line-height: calc(14px * 1.8);
22-
}
23-
24-
.markdown-preview h1 {
25-
font-size: 24px !important;
26-
font-weight: 600;
27-
margin: 0.67em 0;
28-
}
29-
30-
.markdown-preview h2 {
31-
font-size: 18px;
32-
font-weight: 600;
33-
}
34-
35-
.markdown-preview h3 {
36-
font-size: 16px;
37-
font-weight: 600;
38-
}
39-
40-
.markdown-preview h4,
41-
.markdown-preview h5,
42-
.markdown-preview h6 {
43-
font-size: 14px;
44-
font-weight: 600;
45-
}
46-
47-
.markdown-preview hr {
48-
padding: 10px;
49-
border: 0;
50-
border-top: 1px solid #ced4da;
51-
}
52-
53-
.markdown-preview .tag::before {
54-
content: "#";
55-
color: #dee2e6;
56-
}
57-
58-
.markdown-preview .tag {
59-
background-color: #868e96;
60-
color: #fbfbfb;
61-
border-radius: 50px;
62-
padding: 5px 9px;
63-
display: inline;
64-
font-size: 12px;
65-
}
66-
67-
.markdown-preview p {
68-
line-height: 1.8em;
69-
}
70-
71-
.markdown-preview code::before,
72-
.markdown-preview code::after {
73-
content: "`";
74-
color: #ced4da;
75-
padding: 1px;
76-
}
77-
78-
.markdown-preview code {
79-
background-color: #ffffff;
80-
border: 1px solid #dee2e6;
81-
padding: 3px;
82-
font-family: "Consolas", monospace;
83-
}
84-
85-
.markdown-preview .codeblock::before,
86-
.markdown-preview .codeblock::after {
87-
content: "```";
88-
display: block;
89-
color: #ced4da;
90-
padding-bottom: 5px;
91-
}
92-
93-
.markdown-preview .codeblock {
94-
color: #495057;
95-
background-color: #ffffff;
96-
border: 1px solid #dee2e6;
97-
padding: 5px 10px;
98-
font-family: "Consolas", monospace;
99-
line-height: 1.5em;
100-
}
101-
102-
.markdown-preview .blockquote {
103-
border-left: 2px solid #495057;
104-
padding-left: 10px;
105-
}
106-
107-
.markdown-preview u::before,
108-
.markdown-preview u::after {
109-
content: "\00a0\00a0";
110-
color: #adb5bd;
16+
padding:10px;
17+
display: flex;
18+
flex-direction: column;
19+
justify-content: space-between;
20+
line-height: 2;
11121
}
11222
113-
.markdown-preview u {
114-
text-decoration-color: #adb5bd;
23+
p {
24+
margin-bottom: 1rem;
11525
}
11626
117-
.markdown-preview b::before,
118-
.markdown-preview b::after {
119-
content: "*";
120-
color: #ced4da;
121-
font-weight: normal;
27+
h1,
28+
h2,
29+
h3,
30+
h4,
31+
h5 {
32+
margin: 3rem 0 1.38rem;
33+
font-weight: 400;
34+
line-height: 1.3;
12235
}
12336
124-
.markdown-preview b {
125-
font-weight: 600;
37+
h1 {
38+
margin-top: 0;
39+
font-size: 3.052rem;
12640
}
12741
128-
.markdown-preview i::before,
129-
.markdown-preview i::after {
130-
content: "/";
131-
color: #ced4da;
42+
h2 {
43+
font-size: 2.441rem;
13244
}
13345
134-
.markdown-preview a::before,
135-
.markdown-preview a::after {
136-
content: "";
137-
color: #adb5bd;
46+
h3 {
47+
font-size: 1.953rem;
13848
}
13949
140-
.markdown-preview a {
141-
color: #495057;
142-
text-decoration: underline;
143-
transition: 0.3s;
50+
h4 {
51+
font-size: 1.563rem;
14452
}
14553
146-
.markdown-preview a:hover {
147-
color: #adb5bd;
148-
transition: 0.3s;
54+
h5 {
55+
font-size: 1.25rem;
14956
}
15057
151-
.markdown-preview s {
152-
color: #868e96;
153-
text-decoration-color: #868e96;
58+
small,
59+
.text_small {
60+
font-size: 0.8rem;
15461
}
15562
</style>

0 commit comments

Comments
 (0)