Skip to content

Commit 4035aad

Browse files
committed
sass: move about styling into separate file
assets/sass/application.scss is the main entry point for all sub stylesheets. Recently we've added `.bar-chart` to that file, while it's only used on one of the /about pages. We're about to add more styling to the /about pages, so split out it's styling into a separate file.
1 parent f966a7c commit 4035aad

File tree

2 files changed

+61
-61
lines changed

2 files changed

+61
-61
lines changed

assets/sass/about.scss

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
.bar-chart {
2+
display: inline-grid;
3+
4+
/* Got the idea of using <dl>, <dt>, and <dd> from:
5+
* https://css-tricks.com/making-charts-with-css/ */
6+
dt {
7+
grid-column: 1 / 4;
8+
text-align: center;
9+
}
10+
11+
dd {
12+
padding: 5px;
13+
margin: 0;
14+
text-align: center;
15+
display: flex;
16+
flex-direction: column;
17+
}
18+
19+
dd + dd {
20+
border-left: 1px solid #ccc;
21+
}
22+
23+
progress {
24+
/* Reset the default appearance */
25+
-webkit-appearance: none;
26+
-moz-appearance: none;
27+
appearance: none;
28+
29+
writing-mode: vertical-lr;
30+
31+
width: 2em;
32+
height: 5em;
33+
background: none;
34+
border: none;
35+
position: relative;
36+
}
37+
38+
progress::-webkit-progress-bar {
39+
background: none;
40+
}
41+
42+
progress::-webkit-progress-value {
43+
/* Chrome (and derivatives) are stubborn to attach the bar to the top */
44+
bottom: 0;
45+
position: absolute;
46+
}
47+
48+
progress.git::-moz-progress-bar {
49+
background-color: #E09FA0;
50+
}
51+
progress.git::-webkit-progress-value {
52+
background-color: #E09FA0;
53+
}
54+
progress.svn::-moz-progress-bar {
55+
background-color: #E05F49;
56+
}
57+
progress.svn::-webkit-progress-value {
58+
background-color: #E05F49;
59+
}
60+
}

assets/sass/application.scss

Lines changed: 1 addition & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ $baseurl: "{{ .Site.BaseURL }}{{ if (and (ne .Site.BaseURL "/") (ne .Site.BaseUR
2626
@import 'book';
2727
@import 'book2';
2828
@import 'lists';
29+
@import 'about';
2930

3031
code {
3132
display: inline;
@@ -49,64 +50,3 @@ pre {
4950
.d-flex{
5051
display: flex;
5152
}
52-
53-
.bar-chart {
54-
display: inline-grid;
55-
56-
/* Got the idea of using <dl>, <dt>, and <dd> from:
57-
* https://css-tricks.com/making-charts-with-css/ */
58-
dt {
59-
grid-column: 1 / 4;
60-
text-align: center;
61-
}
62-
63-
dd {
64-
padding: 5px;
65-
margin: 0;
66-
text-align: center;
67-
display: flex;
68-
flex-direction: column;
69-
}
70-
71-
dd + dd {
72-
border-left: 1px solid #ccc;
73-
}
74-
75-
progress {
76-
/* Reset the default appearance */
77-
-webkit-appearance: none;
78-
-moz-appearance: none;
79-
appearance: none;
80-
81-
writing-mode: vertical-lr;
82-
83-
width: 2em;
84-
height: 5em;
85-
background: none;
86-
border: none;
87-
position: relative;
88-
}
89-
90-
progress::-webkit-progress-bar {
91-
background: none;
92-
}
93-
94-
progress::-webkit-progress-value {
95-
/* Chrome (and derivatives) are stubborn to attach the bar to the top */
96-
bottom: 0;
97-
position: absolute;
98-
}
99-
100-
progress.git::-moz-progress-bar {
101-
background-color: #E09FA0;
102-
}
103-
progress.git::-webkit-progress-value {
104-
background-color: #E09FA0;
105-
}
106-
progress.svn::-moz-progress-bar {
107-
background-color: #E05F49;
108-
}
109-
progress.svn::-webkit-progress-value {
110-
background-color: #E05F49;
111-
}
112-
}

0 commit comments

Comments
 (0)