Skip to content

Commit 4c2b574

Browse files
julioestjulioest
committed
style: update button styles and navbar links for landing page
1 parent 59d718f commit 4c2b574

File tree

2 files changed

+137
-15
lines changed

2 files changed

+137
-15
lines changed

‎docs/website/index.html.hbs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
<div class="nav-section">
4747
<ul role="menubar">
4848
{{#each navbar}}
49-
<li><a href="{{ href }}" class="secondary">{{ title }}</a></li>
49+
<li><a href="{{ href }}">{{ title }}</a></li>
5050
{{/each}}
5151
<li>
5252
<a href="{{ site.github.url }}" class="contrast" aria-label="{{ site.title }} GitHub repository">
@@ -66,8 +66,8 @@
6666
<h1>{{ title }}</h1>
6767
<p>{{ description }}</p>
6868
<div class="header-cta">
69-
<a href="docs/" class="secondary">Get started</a>
70-
<a href="docs/mrdocs/install.html" class="contrast outline">Download</a>
69+
<a href="docs/" class="contrast outline">Get started</a>
70+
<a href="docs/mrdocs/install.html" class="primary">Download</a>
7171
</div>
7272
<div class="banner-snippet">
7373
<small><code>{{ banner.description }}</code></small>

‎docs/website/styles.css‎

Lines changed: 134 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
--nav-link-spacing-horizontal: 0.5rem;
2424
--form-label-font-weight: var(--font-weight);
2525
--transition: 0.2s ease-in-out;
26-
--function-name-color: #1de9b6;
26+
--function-name-color: rgba(229, 190, 51, 1);
2727
--function-name-color-hover: #0091ea;
2828
}
2929

@@ -2067,7 +2067,7 @@ ul.check li::before {
20672067
height: 1rem;
20682068
margin-top: .25rem;
20692069
margin-left: -1.5rem;
2070-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(16, 149, 193, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2070+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(229, 190, 51, 1)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
20712071
background-size: 100%;
20722072
content: ""
20732073
}
@@ -2128,7 +2128,7 @@ header {
21282128
}
21292129

21302130
#examples, #star {
2131-
background-color: var(--background-color)
2131+
background-color: rgba(255, 255, 255, 0.55);
21322132
}
21332133

21342134
#principles {
@@ -2896,6 +2896,14 @@ nav {
28962896
}
28972897
}
28982898

2899+
ul a:hover,
2900+
ol a:hover,
2901+
ul a:focus,
2902+
ol a:focus {
2903+
color: var(--primary-hover);
2904+
transition: color var(--transition);
2905+
}
2906+
28992907
/* ===========================
29002908
Navigation Styles
29012909
=========================== */
@@ -2915,6 +2923,16 @@ nav {
29152923
overflow: hidden;
29162924
}
29172925

2926+
.nav a {
2927+
color: #fff;
2928+
}
2929+
2930+
.nav a:hover,
2931+
.nav a:focus {
2932+
border-radius: var(--border-radius);
2933+
transform: translateY(-1px);
2934+
transition: all var(--transition);
2935+
}
29182936

29192937
.nav ul {
29202938
gap: 1rem;
@@ -3125,19 +3143,90 @@ header .header-image {
31253143
align-items: center;
31263144
}
31273145

3128-
.header-cta a[aria-label="Documentation"] {
3146+
.header-cta a {
3147+
display: inline-flex;
3148+
align-items: center;
3149+
height: 2.5rem;
3150+
font-weight: 600;
3151+
padding: 0 1.5em;
3152+
white-space: nowrap;
3153+
text-decoration: none;
3154+
transition: all 0.2s ease;
3155+
position: relative;
3156+
border: 2px solid transparent;
3157+
}
3158+
3159+
.header-cta a:active {
3160+
transform: translateY(1px);
3161+
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
3162+
}
3163+
3164+
.header-cta a.primary {
3165+
background: rgb(229, 190, 51);
3166+
color: #0e0e0e;
3167+
box-shadow: 6px 6px 0 #000;
3168+
border-color: rgb(229, 190, 51);
3169+
}
3170+
3171+
.header-cta a.primary:hover {
3172+
background: rgb(255, 215, 0);
3173+
transform: translateY(-2px);
3174+
box-shadow: 6px 6px 0 #000;
3175+
border-color: rgb(255, 215, 0);
3176+
}
3177+
3178+
.header-cta a.primary:active {
3179+
background: rgb(200, 170, 40);
3180+
border-color: rgb(200, 170, 40);
3181+
box-shadow: 2px 2px 0 #000;
3182+
}
3183+
3184+
.header-cta a.secondary {
3185+
background: rgb(29, 233, 182);
3186+
color: #0e0e0e;
3187+
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.8);
3188+
border-color: rgb(29, 233, 182);
3189+
}
3190+
3191+
.header-cta a.secondary:hover {
3192+
background: rgb(0, 145, 234);
31293193
color: #fff;
3130-
background-color: rgba(255, 255, 255, 0.25);
3194+
transform: translateY(-2px);
3195+
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.8);
3196+
border-color: rgb(0, 145, 234);
31313197
}
31323198

3133-
.header-cta a[aria-label="Documentation"]:hover {
3134-
background-color: rgba(255, 255, 255, 0.4);
3135-
transform: translateY(-1px);
3199+
.header-cta a.secondary:active {
3200+
background: rgb(0, 120, 200);
3201+
color: #fff;
3202+
border-color: rgb(0, 120, 200);
3203+
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8);
31363204
}
31373205

3138-
.header-cta a[aria-label="Download"]:hover {
3139-
background-color: rgba(255, 255, 255, 0.15);
3140-
transform: translateY(-1px);
3206+
.header-cta a.contrast.outline {
3207+
background: transparent;
3208+
color: #fff;
3209+
border-color: rgba(255, 255, 255, 0.8);
3210+
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
3211+
}
3212+
3213+
.header-cta a.contrast.outline:hover {
3214+
background: rgba(255, 255, 255, 0.1);
3215+
color: #fff;
3216+
border-color: #fff;
3217+
transform: translateY(-2px);
3218+
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6);
3219+
}
3220+
3221+
.header-cta a.contrast.outline:active {
3222+
background: rgba(255, 255, 255, 0.2);
3223+
border-color: #fff;
3224+
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
3225+
}
3226+
3227+
.header-cta a:focus {
3228+
outline: 2px solid var(--primary-focus);
3229+
outline-offset: 3px;
31413230
}
31423231

31433232
/* ===========================
@@ -3187,6 +3276,10 @@ header .header-image {
31873276
}
31883277
}
31893278

3279+
.principles-features svg {
3280+
color: var(--function-name-color);
3281+
}
3282+
31903283
.features hgroup {
31913284
margin-bottom: var(--block-spacing-vertical);
31923285
}
@@ -3217,4 +3310,33 @@ table th {
32173310

32183311
table code {
32193312
padding: 0;
3220-
}
3313+
}
3314+
3315+
/* ===========================
3316+
Github Star Styles
3317+
=========================== */
3318+
3319+
#star {
3320+
background-color: rgba(255, 255, 255, 0.75);
3321+
}
3322+
3323+
/* ===========================
3324+
Footer Styles
3325+
=========================== */
3326+
3327+
footer ul {
3328+
display: flex;
3329+
justify-content: center;
3330+
align-items: center;
3331+
list-style: none;
3332+
padding: 0;
3333+
margin: 0;
3334+
}
3335+
3336+
footer a:hover,
3337+
footer a:focus {
3338+
color: var(--primary-hover) !important;
3339+
text-decoration: underline;
3340+
transform: translateY(-1px);
3341+
transition: all var(--transition);
3342+
}

0 commit comments

Comments
 (0)