Skip to content

Commit 9ec3dd3

Browse files
author
Maxime Mangel
committed
Split index.scss into several files so Fable.Packages can import them to mimic the look of the website
1 parent a8e3099 commit 9ec3dd3

File tree

6 files changed

+5637
-34283
lines changed

6 files changed

+5637
-34283
lines changed

‎docs/scss/bulma/custom_derived_varibales.scss‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
2+
/////////////////////////////////
3+
/// nacara-layout-standard customizations
4+
/// Do not touch unless you know what you are doing
5+
/////////////////////////////////
6+
$navbar-breakpoint: 0px;
7+
$navbar-padding-vertical: 0.5rem;
8+
$navbar-padding-horizontal: 1rem;
9+
/////////////////////////////////
10+
11+
// Specific to gatsby-remark-vscode usage
12+
$content-pre-padding: unset;
13+
14+
/////////////////////////////////
15+
/// Customize Bulma
16+
/////////////////////////////////
17+
18+
$navbar-item-color: $white;
19+
$navbar-background-color: $primary;
20+
$navbar-item-active-color: $white;
21+
$navbar-item-active-background-color: lighten($primary, 8%);
22+
$navbar-item-hover-color: $white;
23+
$navbar-item-hover-background-color: lighten($primary, 8%);
24+
$navbar-dropdown-item-active-background-color: lighten($primary, 8%);
25+
$navbar-dropdown-item-hover-background-color: lighten($primary, 8%);
26+
$navbar-dropdown-item-hover-color: $white;
27+
$navbar-dropdown-item-active-color: $white;
28+
29+
$menu-item-active-background-color: $primary;
30+
$menu-item-active-color: $white;
31+
$menu-item-hover-color: $primary;
32+
$menu-item-hover-background-color: transparent;
33+
$menu-label-font-size: $size-6;
34+
$menu-item-radius: $radius-large $radius-large;
35+
36+
$footer-background-color: $primary;
37+
$footer-color: $white;
38+
39+
$link: darken($primary, 4%);
40+
$code: $red;
41+
42+
$body-size: 14px;

‎docs/scss/bulma/custom_initial_variables.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/////////////////////////////////
2+
/// Customize Bulma
3+
/////////////////////////////////
4+
$fable-blue: dodgerblue;
5+
$purple: #7a325d;
6+
$blue: #0055a4;
7+
$primary: $fable-blue;
8+
$black: #202020;
9+
$text: #444;

‎docs/scss/main.scss‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
2+
.content {
3+
pre {
4+
@include strong-shadow-box;
5+
}
6+
}
7+
8+
.twitter-timeline-container {
9+
border: 1px solid $grey-lighter !important;
10+
border-radius: $radius;
11+
overflow: hidden;
12+
padding: 0;
13+
}
14+
15+
.has-code-block {
16+
&.is-normal {
17+
pre {
18+
font-size: $size-6;
19+
}
20+
}
21+
}
22+
23+
.selling-points {
24+
display: grid;
25+
gap: $size-4;
26+
// grid-template-rows: 200px;
27+
grid-template-columns: 1fr 1fr;
28+
grid-auto-rows: 1fr;
29+
30+
.selling-point {
31+
border-radius: 4px;
32+
box-shadow: 5px 5px 0px 1px lightgrey;
33+
border: 1px solid lightgrey;
34+
background-color: white;
35+
margin-bottom: 0 !important;
36+
}
37+
}
38+
39+
// API gen specific
40+
.docs-example {
41+
margin-bottom: $size-4;
42+
}
43+
44+
// On mobile display the selling points has a single column
45+
@include mobile {
46+
.selling-points {
47+
grid-template-columns: 1fr;
48+
}
49+
}
50+
51+
.box.is-selling-point {
52+
@include strong-shadow-box;
53+
}
54+
55+
@include touch {
56+
#fable-main-header {
57+
padding: $size-3;
58+
}
59+
}
60+
61+
.media {
62+
.media-center {
63+
display: block;
64+
// margin-bottom: $size-6;
65+
}
66+
}
67+
68+
input[type="checkbox"],
69+
input[type="radio"] {
70+
margin-right: 0.5em;
71+
}

‎docs/style.scss‎

Lines changed: 6 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,13 @@
11
@import "./../node_modules/bulma/sass/utilities/initial-variables";
22

3-
/////////////////////////////////
4-
/// Customize Bulma
5-
/////////////////////////////////
6-
$fable-blue: dodgerblue;
7-
$purple: #7a325d;
8-
$blue: #0055a4;
9-
$primary: $fable-blue;
10-
$black: #202020;
11-
$text: #444;
3+
@import "./scss/bulma/custom_initial_variables.scss";
124

135
@import "./../node_modules/bulma/sass/utilities/derived-variables";
146

15-
/////////////////////////////////
16-
/// nacara-layout-standard customizations
17-
/// Do not touch unless you know what you are doing
18-
/////////////////////////////////
19-
$navbar-breakpoint: 0px;
20-
$navbar-padding-vertical: 0.5rem;
21-
$navbar-padding-horizontal: 1rem;
22-
/////////////////////////////////
23-
24-
// Specific to gatsby-remark-vscode usage
25-
$content-pre-padding: unset;
26-
27-
/////////////////////////////////
28-
/// Customize Bulma
29-
/////////////////////////////////
30-
31-
$navbar-item-color: $white;
32-
$navbar-background-color: $primary;
33-
$navbar-item-active-color: $white;
34-
$navbar-item-active-background-color: lighten($primary, 8%);
35-
$navbar-item-hover-color: $white;
36-
$navbar-item-hover-background-color: lighten($primary, 8%);
37-
$navbar-dropdown-item-active-background-color: lighten($primary, 8%);
38-
$navbar-dropdown-item-hover-background-color: lighten($primary, 8%);
39-
$navbar-dropdown-item-hover-color: $white;
40-
$navbar-dropdown-item-active-color: $white;
41-
42-
$menu-item-active-background-color: $primary;
43-
$menu-item-active-color: $white;
44-
$menu-item-hover-color: $primary;
45-
$menu-item-hover-background-color: transparent;
46-
$menu-label-font-size: $size-6;
47-
$menu-item-radius: $radius-large $radius-large;
48-
49-
$footer-background-color: $primary;
50-
$footer-color: $white;
51-
52-
$link: darken($primary, 4%);
53-
$code: $red;
54-
55-
$body-size: 14px;
7+
@import "./scss/bulma/custom_derived_varibales.scss";
8+
$tabs-border-bottom-width: 2px;
9+
// Code blocks have strong shadow so we need to add some margin
10+
$content-block-margin-bottom: 1.25rem;
5611

5712
@import "../node_modules/bulma/sass/utilities/_all.sass";
5813
@import "./../node_modules/bulma/bulma.sass";
@@ -74,69 +29,4 @@ $body-size: 14px;
7429
@import './scss/utilities.scss';
7530
@import './scss/blog-index.scss';
7631
@import './scss/blog-post.scss';
77-
78-
.content {
79-
pre {
80-
@include strong-shadow-box;
81-
}
82-
}
83-
84-
.twitter-timeline-container {
85-
border: 1px solid $grey-lighter !important;
86-
border-radius: $radius;
87-
overflow: hidden;
88-
padding: 0;
89-
}
90-
91-
.has-code-block {
92-
&.is-normal {
93-
pre {
94-
font-size: $size-6;
95-
}
96-
}
97-
}
98-
99-
.selling-points {
100-
display: grid;
101-
gap: $size-4;
102-
// grid-template-rows: 200px;
103-
grid-template-columns: 1fr 1fr;
104-
grid-auto-rows: 1fr;
105-
106-
.selling-point {
107-
border-radius: 4px;
108-
box-shadow: 5px 5px 0px 1px lightgrey;
109-
border: 1px solid lightgrey;
110-
background-color: white;
111-
margin-bottom: 0 !important;
112-
}
113-
}
114-
115-
// API gen specific
116-
.docs-example {
117-
margin-bottom: $size-4;
118-
}
119-
120-
// On mobile display the selling points has a single column
121-
@include mobile {
122-
.selling-points {
123-
grid-template-columns: 1fr;
124-
}
125-
}
126-
127-
.box.is-selling-point {
128-
@include strong-shadow-box;
129-
}
130-
131-
@include touch {
132-
#fable-main-header {
133-
padding: $size-3;
134-
}
135-
}
136-
137-
.media {
138-
.media-center {
139-
display: block;
140-
// margin-bottom: $size-6;
141-
}
142-
}
32+
@import './scss/main.scss';

0 commit comments

Comments
 (0)