Skip to content

Commit dfaae54

Browse files
committed
tweak styles
1 parent 60dc00a commit dfaae54

File tree

7 files changed

+128
-18
lines changed

7 files changed

+128
-18
lines changed

content/docs/en/8-using-vue-plugins.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
title: Using Vue Plugins
3+
contributors: [jlooper]
34
---
45

56
## vue-router

layouts/_partials/categories.ejs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<li class="level-<%= entry.level || 0 %>">
22
<% if(entry.path) { %>
3-
<a class="block py-1 border-r-4 pr-2 hover:border-green <%= slug === entry.slug ? 'border-green text-green' : 'border-green-lightest text-blue-dark' %> no-underline leading-tight hover:underline"
3+
<a class="-mr-1 block py-1 border-r-4 pr-2 hover:border-green <%= slug === entry.slug ? 'border-green text-green' : 'border-green-lightest text-blue-dark' %> no-underline leading-tight hover:underline"
44
href="<%= lang(null, entry.slug) %>">
55
<%= entry.title %>
66
</a>

layouts/_partials/header.ejs

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,26 @@
11
<div class="bg-blue-dark border-t-8 border-green">
22
<div class="container flex items-center flex-wrap px-4 md:px-0 mx-auto">
3-
<a href="/" class="w-1/4 flex-1">
4-
<div class="relative w-16 h-16">
5-
<img class="w-16 h-16 absolute pin"
6-
src="https://art.nativescript-vue.org/NativeScript-Vue-White-Green.svg"
7-
alt="NativeScript-Vue Logo">
8-
<img class="w-16 h-16 absolute pin transition-all-ease hover:opacity-0"
9-
src="https://art.nativescript-vue.org/NativeScript-Vue-Green-White.svg"
10-
alt="NativeScript-Vue Logo">
3+
<div class="flex-1 flex items-center">
4+
<a href="/">
5+
<div class="relative w-16 h-16">
6+
<img class="w-16 h-16 absolute pin"
7+
src="https://art.nativescript-vue.org/NativeScript-Vue-White-Green.svg"
8+
alt="NativeScript-Vue Logo">
9+
<img class="w-16 h-16 absolute pin transition-all-ease hover:opacity-0"
10+
src="https://art.nativescript-vue.org/NativeScript-Vue-Green-White.svg"
11+
alt="NativeScript-Vue Logo">
12+
</div>
13+
</a>
14+
15+
<span class="hidden lg:block w-1 h-1 bg-blue-light rounded-full ml-2"></span>
16+
<span class="hidden lg:block w-2 h-2 bg-blue-light rounded-full ml-2"></span>
17+
<span class="hidden lg:block w-4 h-4 bg-blue-light rounded-full ml-2"></span>
18+
<div class="hidden md:block px-4 py-1 rounded-full bg-blue-light ml-2">
19+
<a href="#" class="no-underline text-white hover:text-green text-sm truncate">Announcing v1.0! Click to read more.</a>
1120
</div>
12-
</a>
21+
</div>
1322
<div class="w-auto text-center relative">
14-
<input class="w-full md:w-48 px-4 py-2 text-blue-lightest bg-blue-light rounded-full"
23+
<input class="w-full md:w-32 px-4 py-2 text-blue-lightest bg-blue-light rounded-full"
1524
type="search"
1625
aria-label="Search"
1726
placeholder="Search coming soon."
@@ -35,10 +44,10 @@
3544
<!-- Nav -->
3645
<div :class="{ hidden: isMobile && !navOpen, flex: isMobile && navOpen }"
3746
class="flex-col md:flex-row w-full md:w-auto">
38-
<a href="<%= lang(null, 'docs/quick-start') %>" class="no-underline text-blue-lightest md:ml-6 mr-4 py-4">Quick
39-
Start</a>
47+
<!--<a href="https://github.com/&lt;%= lang(null,"docs/quick-start') %>" class="no-underline text-blue-lightest md:ml-6 mr-4 py-4">Quick-->
48+
<!--Start</a>-->
4049
<a href="<%= lang(null, 'docs/about-nativescript-vue') %>"
41-
class="no-underline text-blue-lightest mr-4 py-4">Docs</a>
50+
class="no-underline text-blue-lightest md:ml-6 mr-4 py-4">Docs</a>
4251
<a href="/<%= collections.blog[0].path %>" class="no-underline text-blue-lightest mr-4 py-4">Blog</a>
4352
<div class="inline text-blue-lightest mr-4 py-4 relative group">
4453
Community

layouts/docs.ejs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121
<div class="md:bg-docs-gradient min-h-screen">
2222
<div class="container mx-auto flex">
23-
<div class="hidden md:w-1/4 md:block">
23+
<div class="hidden md:w-1/4 md:block border-r-4 min-h-full">
2424
<div class="pl-4 md:pl-0 py-4 md:py-8">
2525
<ul id="docs-toc" class="list-reset">
2626
<%- include('_partials/categories', { entry: { children: docs_categories } }) %>

layouts/post.ejs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@
1515

1616
<div class="md:bg-docs-gradient min-h-screen">
1717
<div class="container mx-auto flex">
18-
<div class="hidden md:w-1/4 md:block">
18+
<div class="hidden md:w-1/4 md:block border-r-4 min-h-full">
1919
<div class="pl-4 md:pl-0 pt-4 md:pt-8">
2020
<div class="uppercase tracking-wide text-blue-light text-sm mb-4">Recent posts</div>
2121
<ul class="list-reset">
2222
<% collections.blog.forEach((item) => { %>
2323
<li>
24-
<a class="block border-r-4 py-1 pr-2 hover:border-green no-underline leading-tight hover:underline <%= path === item.path ? 'border-green text-green' : 'border-green-lightest text-blue-dark' %>"
24+
<a class="-mr-1 block border-r-4 py-1 pr-2 hover:border-green no-underline leading-tight hover:underline <%= path === item.path ? 'border-green text-green' : 'border-green-lightest text-blue-dark' %>"
2525
href="/<%= item.path %>">
2626
<%= item.title %>
2727
</a>

static/styles.css

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2299,6 +2299,26 @@ button,
22992299
opacity: 1;
23002300
}
23012301

2302+
.group:hover .group-hover\:opacity-0 {
2303+
opacity: 0;
2304+
}
2305+
2306+
.group:hover .group-hover\:opacity-25 {
2307+
opacity: .25;
2308+
}
2309+
2310+
.group:hover .group-hover\:opacity-50 {
2311+
opacity: .5;
2312+
}
2313+
2314+
.group:hover .group-hover\:opacity-75 {
2315+
opacity: .75;
2316+
}
2317+
2318+
.group:hover .group-hover\:opacity-100 {
2319+
opacity: 1;
2320+
}
2321+
23022322
.overflow-auto {
23032323
overflow: auto;
23042324
}
@@ -4912,6 +4932,26 @@ button,
49124932
opacity: 1;
49134933
}
49144934

4935+
.sm\:group:hover .group-hover\:opacity-0 {
4936+
opacity: 0;
4937+
}
4938+
4939+
.sm\:group:hover .group-hover\:opacity-25 {
4940+
opacity: .25;
4941+
}
4942+
4943+
.sm\:group:hover .group-hover\:opacity-50 {
4944+
opacity: .5;
4945+
}
4946+
4947+
.sm\:group:hover .group-hover\:opacity-75 {
4948+
opacity: .75;
4949+
}
4950+
4951+
.sm\:group:hover .group-hover\:opacity-100 {
4952+
opacity: 1;
4953+
}
4954+
49154955
.sm\:overflow-auto {
49164956
overflow: auto;
49174957
}
@@ -7479,6 +7519,26 @@ button,
74797519
opacity: 1;
74807520
}
74817521

7522+
.md\:group:hover .group-hover\:opacity-0 {
7523+
opacity: 0;
7524+
}
7525+
7526+
.md\:group:hover .group-hover\:opacity-25 {
7527+
opacity: .25;
7528+
}
7529+
7530+
.md\:group:hover .group-hover\:opacity-50 {
7531+
opacity: .5;
7532+
}
7533+
7534+
.md\:group:hover .group-hover\:opacity-75 {
7535+
opacity: .75;
7536+
}
7537+
7538+
.md\:group:hover .group-hover\:opacity-100 {
7539+
opacity: 1;
7540+
}
7541+
74827542
.md\:overflow-auto {
74837543
overflow: auto;
74847544
}
@@ -10046,6 +10106,26 @@ button,
1004610106
opacity: 1;
1004710107
}
1004810108

10109+
.lg\:group:hover .group-hover\:opacity-0 {
10110+
opacity: 0;
10111+
}
10112+
10113+
.lg\:group:hover .group-hover\:opacity-25 {
10114+
opacity: .25;
10115+
}
10116+
10117+
.lg\:group:hover .group-hover\:opacity-50 {
10118+
opacity: .5;
10119+
}
10120+
10121+
.lg\:group:hover .group-hover\:opacity-75 {
10122+
opacity: .75;
10123+
}
10124+
10125+
.lg\:group:hover .group-hover\:opacity-100 {
10126+
opacity: 1;
10127+
}
10128+
1004910129
.lg\:overflow-auto {
1005010130
overflow: auto;
1005110131
}
@@ -12613,6 +12693,26 @@ button,
1261312693
opacity: 1;
1261412694
}
1261512695

12696+
.xl\:group:hover .group-hover\:opacity-0 {
12697+
opacity: 0;
12698+
}
12699+
12700+
.xl\:group:hover .group-hover\:opacity-25 {
12701+
opacity: .25;
12702+
}
12703+
12704+
.xl\:group:hover .group-hover\:opacity-50 {
12705+
opacity: .5;
12706+
}
12707+
12708+
.xl\:group:hover .group-hover\:opacity-75 {
12709+
opacity: .75;
12710+
}
12711+
12712+
.xl\:group:hover .group-hover\:opacity-100 {
12713+
opacity: 1;
12714+
}
12715+
1261612716
.xl\:overflow-auto {
1261712717
overflow: auto;
1261812718
}

tailwind.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -772,7 +772,7 @@ module.exports = {
772772
minHeight: ['responsive'],
773773
minWidth: ['responsive'],
774774
negativeMargin: ['responsive'],
775-
opacity: ['responsive', 'hover'],
775+
opacity: ['responsive', 'hover', 'group-hover'],
776776
overflow: ['responsive'],
777777
padding: ['responsive'],
778778
pointerEvents: ['responsive'],

0 commit comments

Comments
 (0)