Skip to content

Commit 49bdf79

Browse files
jbratcherjbratcher
committed
feature: modern css resets in global layouts, added about section to homepage, updated blog index and page styles from custom css to vuetify classes where possible
1 parent 3495a53 commit 49bdf79

File tree

6 files changed

+208
-99
lines changed

6 files changed

+208
-99
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -94,3 +94,6 @@ sw.*
9494

9595
# Vim swap files
9696
*.swp
97+
98+
# Blog post
99+
blog.md

‎layouts/blog.vue

+31-11
Original file line numberDiff line numberDiff line change
@@ -149,25 +149,23 @@ export default {
149149
padding: 0;
150150
}
151151
152-
html {
152+
html,
153+
body,
154+
.v-application {
153155
font-family: 'Poppins', sans-serif;
154156
font-size: 16px;
155-
word-spacing: 1px;
156-
-ms-text-size-adjust: 100%;
157-
-webkit-text-size-adjust: 100%;
158157
-moz-osx-font-smoothing: grayscale;
159158
-webkit-font-smoothing: antialiased;
159+
line-height: 1.5;
160160
box-sizing: border-box;
161-
}
162-
163-
html,
164-
body {
165161
min-height: 100vh;
166162
overflow-x: hidden;
167-
}
168-
169-
.v-card__title {
163+
scroll-behavior: smooth;
164+
text-rendering: optimizeSpeed;
165+
-ms-text-size-adjust: 100%;
166+
-webkit-text-size-adjust: 100%;
170167
word-break: break-word;
168+
word-spacing: 1px;
171169
}
172170
173171
// main nav
@@ -189,4 +187,26 @@ body {
189187
}
190188
191189
// global styles shared among pages can go here
190+
191+
.v-application {
192+
.v-card__title,
193+
.v-card__subtitle,
194+
.v-card__text {
195+
word-break: keep-all;
196+
}
197+
198+
article > * + * {
199+
margin-top: 1em;
200+
}
201+
}
202+
203+
/* Remove all animations and transitions for people that prefer not to see them */
204+
@media (prefers-reduced-motion: reduce) {
205+
* {
206+
animation-duration: 0.01ms !important;
207+
animation-iteration-count: 1 !important;
208+
transition-duration: 0.01ms !important;
209+
scroll-behavior: auto !important;
210+
}
211+
}
192212
</style>

‎layouts/default.vue

+31-11
Original file line numberDiff line numberDiff line change
@@ -157,25 +157,23 @@ export default {
157157
padding: 0;
158158
}
159159
160-
html {
160+
html,
161+
body,
162+
.v-application {
161163
font-family: 'Poppins', sans-serif;
162164
font-size: 16px;
163-
word-spacing: 1px;
164-
-ms-text-size-adjust: 100%;
165-
-webkit-text-size-adjust: 100%;
166165
-moz-osx-font-smoothing: grayscale;
167166
-webkit-font-smoothing: antialiased;
167+
line-height: 1.5;
168168
box-sizing: border-box;
169-
}
170-
171-
html,
172-
body {
173169
min-height: 100vh;
174170
overflow-x: hidden;
175-
}
176-
177-
.v-card__title {
171+
scroll-behavior: smooth;
172+
text-rendering: optimizeSpeed;
173+
-ms-text-size-adjust: 100%;
174+
-webkit-text-size-adjust: 100%;
178175
word-break: break-word;
176+
word-spacing: 1px;
179177
}
180178
181179
// main nav
@@ -197,4 +195,26 @@ body {
197195
}
198196
199197
// global styles shared among pages can go here
198+
199+
.v-application {
200+
.v-card__title,
201+
.v-card__subtitle,
202+
.v-card__text {
203+
word-break: keep-all;
204+
}
205+
206+
article > * + * {
207+
margin-top: 1em;
208+
}
209+
}
210+
211+
/* Remove all animations and transitions for people that prefer not to see them */
212+
@media (prefers-reduced-motion: reduce) {
213+
* {
214+
animation-duration: 0.01ms !important;
215+
animation-iteration-count: 1 !important;
216+
transition-duration: 0.01ms !important;
217+
scroll-behavior: auto !important;
218+
}
219+
}
200220
</style>

‎pages/blog/_blog.vue

+36-29
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,40 @@
11
<template>
2-
<v-row>
3-
<v-col class="pa-0">
4-
<v-sheet color="primary" dark tile>
5-
<h1
6-
:class="{'headline pl-12 py-2': $breakpoint.mdAndUp, 'title pl-6 py-2': $breakpoint.smAndDown}"
7-
>Blog > {{ blogPost.title }}</h1>
8-
</v-sheet>
9-
<article>
10-
<v-card tile>
11-
<v-img
12-
src="https://picsum.photos/1280/920"
13-
lazy-src="https://picsum.photos/1280/920"
14-
width="1280"
15-
max-height="300"
16-
/>
17-
<v-card-title
18-
:class="{'display-2 mb-3 px-12': $breakpoint.mdAndUp, 'display-1 mb-3 px-6': $breakpoint.smAndDown}"
19-
>{{blogPost.title}}</v-card-title>
20-
<v-card-subtitle
21-
:class="{'headline px-12': $breakpoint.mdAndUp, 'subtitle-1 px-6': $breakpoint.smAndDown}"
22-
>{{blogPost.description}}</v-card-subtitle>
23-
<v-card-text
24-
:class="{'body-1 px-12': $breakpoint.mdAndUp, 'body-1 px-6': $breakpoint.smAndDown}"
25-
v-html="$md.render(blogPost.body)"
26-
></v-card-text>
27-
</v-card>
28-
</article>
29-
</v-col>
30-
</v-row>
2+
<v-container class="py-0" fluid>
3+
<v-row>
4+
<v-col class="pa-0">
5+
<v-sheet class="ma-0 pb-0" color="primary darken-2" dark tile>
6+
<h1
7+
:class="{'headline mb-0 ml-3 pa-2': $breakpoint.mdAndUp, 'title font-weight-bold mb-0 ml-3 pa-2': $breakpoint.smAndDown}"
8+
>Blog > {{ blogPost.title }}</h1>
9+
</v-sheet>
10+
<article class="mb-12">
11+
<v-card tile>
12+
<v-img
13+
:alt="blogPost.title"
14+
:aspect-ratio="16/9"
15+
class="mb-12"
16+
src="https://picsum.photos/1280/920"
17+
lazy-src="https://picsum.photos/10/6"
18+
width="100%"
19+
height="18.75rem"
20+
/>
21+
<v-card class="mx-auto" flat :width="$breakpoint.mdAndUp ? '75vw' : '90vw'">
22+
<v-card-title
23+
:class="{'display-2 mb-3 px-12': $breakpoint.mdAndUp, 'display-1 mb-3 px-6': $breakpoint.smAndDown}"
24+
>{{blogPost.title}}</v-card-title>
25+
<v-card-subtitle
26+
:class="{'headline px-12': $breakpoint.mdAndUp, 'subtitle-1 px-6': $breakpoint.smAndDown}"
27+
>{{blogPost.description}}</v-card-subtitle>
28+
<v-card-text
29+
:class="{'body-1 px-12': $breakpoint.mdAndUp, 'body-1 px-6': $breakpoint.smAndDown}"
30+
v-html="$md.render(blogPost.body)"
31+
></v-card-text>
32+
</v-card>
33+
</v-card>
34+
</article>
35+
</v-col>
36+
</v-row>
37+
</v-container>
3138
</template>
3239
<script>
3340
export default {

‎pages/blog/index.vue

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<v-row>
33
<v-col class="pa-0">
4-
<v-sheet color="primary" dark tile>
4+
<v-sheet color="primary darken-2" dark tile>
55
<h1
66
:class="{'headline pl-6 py-2': $breakpoint.mdAndUp, 'title pl-6 py-2': $breakpoint.smAndDown}"
77
>Blog ></h1>
@@ -15,7 +15,7 @@
1515
sm="6"
1616
:class="{'px-9': $breakpoint.smAndDown}"
1717
>
18-
<v-card height="100%">
18+
<v-card class="d-flex flex-column" height="100%">
1919
<v-img
2020
src="https://picsum.photos/300/240"
2121
lazy-src="https://picsum.photos/300/240"
@@ -27,9 +27,12 @@
2727
<v-card-subtitle
2828
:class="{'subtitle-1': $breakpoint.mdAndUp, 'body-2': $breakpoint.smAndDown}"
2929
>{{blogPost.description.substring(0, 80)}}</v-card-subtitle>
30-
<v-card-text class="body-1">{{blogPost.body.substring(0, 144) + '...'}}</v-card-text>
30+
<v-card-text
31+
class="body-1"
32+
v-html="$md.render(blogPost.body).substring(0, 144) + '...'"
33+
></v-card-text>
3134
<v-btn
32-
class="ml-3 mb-12"
35+
class="mt-auto ml-3 mb-12"
3336
max-width="120px"
3437
color="primary"
3538
nuxt

‎pages/index.vue

+100-44
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,112 @@
11
<template>
2-
<v-row>
3-
<v-col class="pa-0">
4-
<!-- Hero Section -->
5-
<v-container
6-
id="hero"
7-
class="d-flex flex-column align-center justify-center pa-0 white--text"
8-
fluid
9-
>
10-
<v-parallax
11-
dark
12-
src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
13-
lazy-src="https://picsum.photos/id/0/10/6"
2+
<v-container class="py-0" fluid>
3+
<v-row>
4+
<v-col class="pa-0">
5+
<!-- Hero Section -->
6+
<v-container
7+
id="hero"
8+
class="d-flex flex-column align-center justify-center pa-0 white--text"
9+
fluid
1410
>
11+
<v-parallax
12+
dark
13+
src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
14+
lazy-src="https://picsum.photos/id/0/10/6"
15+
>
16+
<v-row align="center" justify="center">
17+
<v-col class="text-center px-6" cols="12">
18+
<h1
19+
:class="{'display-2 mb-6': $breakpoint.mdAndUp, 'display-1 mb-2': $breakpoint.smAndDown}"
20+
>Nuxt Netlify CMS Starter Kit</h1>
21+
<p
22+
:class="{'headline mb-12': $breakpoint.mdAndUp, 'subtitle-1 mb-12': $breakpoint.smAndDown}"
23+
>Quickly spin up a static site using Nuxt with Netlify CMS. Push to deploy on Netlify.</p>
24+
<v-btn
25+
dark
26+
outlined
27+
:x-large="$breakpoint.mdAndUp"
28+
:large="$breakpoint.smAndDown"
29+
>Get Started</v-btn>
30+
</v-col>
31+
</v-row>
32+
</v-parallax>
33+
</v-container>
34+
35+
<!-- Section -->
36+
<v-container class="py-12">
1537
<v-row align="center" justify="center">
16-
<v-col class="text-center px-6" cols="12">
17-
<h1
18-
:class="{'display-2 mb-6': $breakpoint.mdAndUp, 'display-1 mb-2': $breakpoint.smAndDown}"
19-
>Nuxt Netlify CMS Starter Kit</h1>
20-
<p
21-
:class="{'headline mb-12': $breakpoint.mdAndUp, 'subtitle-1 mb-12': $breakpoint.smAndDown}"
22-
>Quickly spin up a static site using Nuxt with Netlify CMS. Push to deploy on Netlify.</p>
23-
<v-btn
24-
dark
25-
outlined
26-
:x-large="$breakpoint.mdAndUp"
27-
:large="$breakpoint.smAndDown"
28-
>Get Started</v-btn>
38+
<v-col cols="12">
39+
<h2
40+
:class="{'display-2 text-center mb-6': $breakpoint.mdAndUp, 'display-1 text-center mb-6': $breakpoint.smAndDown}"
41+
>About this theme</h2>
42+
<h3
43+
:class="{'display-1 text-center mb-6': $breakpoint.mdAndUp, 'headline text-center mb-6': $breakpoint.smAndDown}"
44+
>Learn more about this theme</h3>
45+
<v-container>
46+
<v-row>
47+
<v-col v-for="(card, index) in cards" :key="index" cols="12" sm="4">
48+
<v-hover v-slot:default="{ hover }" close-delay="200" open-delay="200">
49+
<v-card
50+
:class="{'my-6': $breakpoint.mdAndUp, 'white--text primary accent-4 my-6 elevation-24': hover}"
51+
height="100%"
52+
>
53+
<v-btn
54+
class="mt-6 mb-3 pl-12"
55+
:href="card.link"
56+
text
57+
width="6rem"
58+
height="6rem"
59+
>
60+
<v-icon :color="hover ? 'white' : 'primary'" size="6rem">{{ card.icon }}</v-icon>
61+
</v-btn>
62+
<v-card-title
63+
:class="{'headline font-weight-bold pl-6': $breakpoint.mdAndUp, 'title font-weight-bold pl-6': $breakpoint.smAndDown }"
64+
>{{ card.title }}</v-card-title>
65+
<v-card-title
66+
:class="{'title font-weight-regular pl-6': $breakpoint.mdAndUp, 'subtitle-1 font-weight-regular pl-6': $breakpoint.smAndDown}"
67+
>{{ card.body }}</v-card-title>
68+
</v-card>
69+
</v-hover>
70+
</v-col>
71+
</v-row>
72+
</v-container>
2973
</v-col>
3074
</v-row>
31-
</v-parallax>
32-
</v-container>
33-
34-
<!-- Benefits Section -->
35-
<section id="benefits" class="py-12">
36-
<h1 class="display-1 pl-12">Benefits Section</h1>
37-
</section>
38-
39-
<!-- About Section -->
40-
<section id="about" class="py-12">
41-
<h1 class="display-1 pl-12">About Section</h1>
42-
</section>
43-
44-
<!-- Contact Section -->
45-
<section id="contact" class="py-12">
46-
<h1 class="display-1 pl-12">Contact Section</h1>
47-
</section>
48-
</v-col>
49-
</v-row>
75+
</v-container>
76+
</v-col>
77+
</v-row>
78+
</v-container>
5079
</template>
5180

5281
<script>
5382
export default {
83+
data: function() {
84+
return {
85+
cards: [
86+
{
87+
icon: 'mdi-nuxt',
88+
title: 'Nuxt',
89+
body:
90+
'Supercharger for Vue.js. Enjoy all the benefits of Vue with configuration out of the box. Perfect for SSR, SPAs, or static sites alike. Modular, performant, and enjoyable.',
91+
link: 'https://nuxtjs.org/'
92+
},
93+
{
94+
icon: 'mdi-vuetify',
95+
title: 'Card Title',
96+
body:
97+
'Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required — everything you need to create amazing applications is at your fingertips.',
98+
link: 'https://vuetifyjs.com/'
99+
},
100+
{
101+
icon: 'mdi-web',
102+
title: 'Netlify CMS',
103+
body:
104+
'Get the speed, security, and scalability of a static site, while still providing a convenient editing interface for content.',
105+
link: 'https://www.netlifycms.org/'
106+
}
107+
]
108+
}
109+
},
54110
head() {
55111
return {
56112
script: [

0 commit comments

Comments
 (0)