Skip to content

Commit 5e3688d

Browse files
author
Alexander Classen
committed
add content - some style improvements. Style Code blocks, tables and content images
1 parent 5ecb737 commit 5e3688d

38 files changed

+696
-25
lines changed

‎assets/css/styles.css

+235-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
@layer base {
1515
* {
1616
@apply text-white;
17-
font-size: 20px;
17+
font-size: 22px;
18+
line-height: 1.2;
1819
}
1920
h1 {
2021
@apply font-bold;
@@ -32,5 +33,238 @@
3233
ul li {
3334
@apply list-outside;
3435
@apply list-disc;
36+
@apply py-2;
3537
}
38+
ul ul {
39+
@apply px-4;
40+
@apply py-2;
41+
}
42+
textarea {
43+
@apply text-black;
44+
}
45+
.nuxt-content pre[class*='language-'] {
46+
@apply bg-gray-dark;
47+
@apply text-xs;
48+
}
49+
.nuxt-content table {
50+
width: 100%;
51+
@apply mt-4;
52+
}
53+
.nuxt-content table th {
54+
@apply text-left;
55+
}
56+
.nuxt-content table td {
57+
}
58+
.nuxt-content img {
59+
@apply mx-auto;
60+
@apply my-4;
61+
}
62+
}
63+
64+
.button {
65+
@apply border-green;
66+
@apply border-solid;
67+
@apply border-2;
68+
@apply rounded-full;
69+
@apply px-4;
70+
@apply py-2;
71+
72+
transition: transform 300ms ease, box-shadow 300ms ease, color 300ms ease;
73+
@apply inline-block;
74+
@apply relative;
75+
}
76+
77+
.button:hover {
78+
@apply text-green;
79+
transform: translateY(2px);
80+
box-shadow: 0px 1px 15px 3px rgba(0, 255, 0, 0.3);
81+
}
82+
83+
/* psism.csss override */
84+
85+
/**
86+
* prism.js default theme for JavaScript, CSS and HTML
87+
* Based on dabblet (http://dabblet.com)
88+
* @author Lea Verou
89+
*/
90+
91+
code[class*='language-'],
92+
pre[class*='language-'] {
93+
color: black;
94+
background: none;
95+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
96+
font-size: 1em;
97+
text-align: left;
98+
white-space: pre;
99+
word-spacing: normal;
100+
word-break: normal;
101+
word-wrap: normal;
102+
line-height: 1.5;
103+
104+
-moz-tab-size: 4;
105+
-o-tab-size: 4;
106+
tab-size: 4;
107+
108+
-webkit-hyphens: none;
109+
-moz-hyphens: none;
110+
-ms-hyphens: none;
111+
hyphens: none;
112+
}
113+
114+
pre[class*='language-']::-moz-selection,
115+
pre[class*='language-'] ::-moz-selection,
116+
code[class*='language-']::-moz-selection,
117+
code[class*='language-'] ::-moz-selection {
118+
text-shadow: none;
119+
background: #b3d4fc;
120+
}
121+
122+
pre[class*='language-']::selection,
123+
pre[class*='language-'] ::selection,
124+
code[class*='language-']::selection,
125+
code[class*='language-'] ::selection {
126+
text-shadow: none;
127+
background: #b3d4fc;
128+
}
129+
130+
@media print {
131+
code[class*='language-'],
132+
pre[class*='language-'] {
133+
text-shadow: none;
134+
}
135+
}
136+
137+
/* Code blocks */
138+
pre[class*='language-'] {
139+
padding: 1em;
140+
margin: 0.5em 0;
141+
overflow: auto;
142+
}
143+
144+
/* Inline code */
145+
:not(pre) > code[class*='language-'] {
146+
padding: 0.1em;
147+
border-radius: 0.3em;
148+
white-space: normal;
149+
}
150+
151+
.token.comment,
152+
.token.prolog,
153+
.token.doctype,
154+
.token.cdata {
155+
color: #61e2ff;
156+
}
157+
158+
.token.punctuation {
159+
color: #fff;
160+
}
161+
162+
.token.namespace {
163+
opacity: 0.7;
164+
}
165+
166+
.token.property,
167+
.token.tag,
168+
.token.boolean,
169+
.token.number,
170+
.token.constant,
171+
.token.symbol,
172+
.token.deleted {
173+
color: #9963ff99;
174+
}
175+
176+
.token.selector,
177+
.token.attr-name,
178+
.token.string,
179+
.token.char,
180+
.token.builtin,
181+
.token.inserted {
182+
color: #9963ff;
183+
}
184+
185+
.token.operator,
186+
.token.entity,
187+
.token.url,
188+
.language-css .token.string,
189+
.style .token.string {
190+
color: #ffcc00;
191+
/* This background color was intended by the author of this theme. */
192+
}
193+
194+
.token.atrule,
195+
.token.attr-value,
196+
.token.keyword {
197+
color: #ffcc00;
198+
text-shadow: 0 0 2px #100c0f, 0 0 3px #ffaa0099, 0 0 5px #ffaa0099,
199+
0 0 10px #ffaa0099;
200+
font-style: italic;
201+
}
202+
203+
.token.function,
204+
.token.class-name {
205+
color: #fc199a;
206+
text-shadow: 0 0 2px #393a33, 0 0 35px #ffffff44, 0 0 10px #fc199a,
207+
0 0 2px #fc199a;
208+
}
209+
210+
.token.regex,
211+
.token.important,
212+
.token.variable {
213+
color: #e90;
214+
}
215+
216+
.token.important,
217+
.token.bold {
218+
font-weight: bold;
219+
}
220+
.token.italic {
221+
font-style: italic;
222+
}
223+
224+
.token.entity {
225+
cursor: help;
226+
}
227+
228+
.mtk3,
229+
.mtk6 {
230+
color: #61e2ff;
231+
text-shadow: 0 0 2px #001716, 0 0 5px #03edf933, 0 0 10px #ffff6633;
232+
}
233+
234+
.mtk3.mtki {
235+
font-style: italic;
236+
color: #9963ff99;
237+
}
238+
239+
.mtk4,
240+
.mtk5,
241+
.mtk11,
242+
.mtk14 {
243+
color: #9963ff;
244+
}
245+
246+
.mtk8,
247+
.mtk9 {
248+
/* color: #fd8902; */
249+
color: #ffcc00;
250+
text-shadow: 0 0 2px #100c0f, 0 0 3px #ffaa0099, 0 0 5px #ffaa0099,
251+
0 0 10px #ffaa0099;
252+
font-style: italic;
253+
}
254+
255+
/* .mtk7 {
256+
color: #8a2dc0;
257+
text-shadow: 0 0 2px #000, 0 0 10px #8a2dc066, 0 0 5px #8a2dc066, 0 0 25px #8a2dc066;
258+
} */
259+
260+
/* .mtk8 {
261+
color: #72f1b8;
262+
text-shadow: 0 0 2px #100c0f, 0 0 10px #257c55, 0 0 35px #212724;
263+
} */
264+
265+
.mtk7,
266+
.mtk10 {
267+
color: #fc199a;
268+
text-shadow: 0 0 2px #393a33, 0 0 35px #ffffff44, 0 0 10px #fc199a,
269+
0 0 2px #fc199a;
36270
}

‎components/test-component.vue

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<div class="component">
3+
<h1>{{ title }}</h1>
4+
<h2>Couting: {{ counter }}</h2>
5+
<button @click="raise">Click me!</button>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
props: {
12+
title: {
13+
type: String,
14+
default: 'Title',
15+
},
16+
},
17+
data() {
18+
return {
19+
counter: 0,
20+
}
21+
},
22+
methods: {
23+
raise() {
24+
this.counter++
25+
},
26+
},
27+
}
28+
</script>
29+
30+
<style scoped>
31+
h1 {
32+
font-weight: 600;
33+
font-size: 2rem;
34+
}
35+
h2 {
36+
font-size: 1.4rem;
37+
}
38+
39+
button {
40+
background: none;
41+
border: 2px solid #0f0;
42+
}
43+
</style>

‎content/slides/slide-1.md

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
---
2-
title: Welcome to my Presentation
2+
title: Bring your DX to the Nuxt Level
3+
subtitle: Introducing Nuxt.js
4+
footnote: Alexander Classen, 17.12.2020
35
---
4-
5-
Hello all! This is my presentation about Nuxt.js.
6-
7-
# Hello audience!
8-
## Audience: Hello Back!

‎content/slides/slide-10.md

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
subtitle: SFC
3+
title: Single File Components
4+
---
5+
6+
- Like the code you already know
7+
8+
```js
9+
<template>
10+
<div class="component">
11+
<h1>{{ title }}</h1>
12+
<h2>Couting: {{ counter }}</h2>
13+
<button @click="raise">Click me!</button>
14+
</div>
15+
</template>
16+
17+
<script>
18+
export default {
19+
props: {
20+
title: {
21+
type: String,
22+
default: 'Title',
23+
},
24+
},
25+
data() {
26+
return {
27+
counter: 0,
28+
}
29+
},
30+
methods: {
31+
raise() {
32+
this.counter++
33+
},
34+
},
35+
}
36+
</script>
37+
38+
<style scoped>
39+
h1 {
40+
font-weight: 600;
41+
font-size: 2rem;
42+
}
43+
h2 {
44+
font-size: 1.4rem;
45+
}
46+
47+
button {
48+
background: none;
49+
border: 2px solid #0f0;
50+
}
51+
</style>
52+
53+
```

‎content/slides/slide-11.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: Nuxt.js
3+
subtitle: The Intuitive Vue Framework
4+
---
5+
6+
- Framework for Vue.js
7+
- Includes by default:
8+
- Vue Router
9+
- Vuex
10+
- Vue Meta
11+
- And manny more
12+
- Run your app as SSR, SG, or SPA

‎content/slides/slide-12.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: Structure
3+
---
4+
5+
![structure](/images/structure.png)

0 commit comments

Comments
 (0)