style.scss 3.2 KB
Newer Older
Jelle van der Waa's avatar
Jelle van der Waa committed
1
2
@charset "utf-8";

3
4
5
6
7
8
$primary: #f6f9fc;
$link: #07b;

$good: rgb(0, 128, 0);
$bad: rgb(207, 0, 0);
$unknown: rgb(255, 164, 5);
Jelle van der Waa's avatar
Jelle van der Waa committed
9
10

@import "../node_modules/bulma/sass/utilities/_all.sass";
Jelle van der Waa's avatar
Jelle van der Waa committed
11
@import "../node_modules/bulma/sass/helpers/_all.sass";
Jelle van der Waa's avatar
Jelle van der Waa committed
12
13
14
15
16
17
18
19
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/elements/container.sass";
@import "../node_modules/bulma/sass/elements/box.sass";
@import "../node_modules/bulma/sass/elements/title.sass";
@import "../node_modules/bulma/sass/layout/footer.sass";
@import "../node_modules/bulma/sass/layout/hero.sass";
@import "../node_modules/bulma/sass/layout/section.sass";
@import "../node_modules/bulma/sass/grid/tiles.sass";
20

21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
#archnavbar {
	background: #333 none repeat scroll 0 0 !important;
	border-bottom: 5px solid #08c !important;
	min-height: 40px !important;
	padding: 10px 15px !important;

	#logo {
		background: rgba(0, 0, 0, 0) url("archlogo.8a05bc7f6cd1.svg") no-repeat scroll 0 0 !important;
		background-size: 100% !important;
		height: 40px !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 190px !important;
		float: left !important;

		& a {
			display: block !important;
			height: 40px !important;
			width: 190px !important;
			text-indent: -9999px !important;
		}
	}

	& #archnavbarlist li a {
		color: #999;
		font-weight: bold;
		text-decoration: none;
	}

	& ul {
		display: block;
		list-style: none;
		margin: 0;
		padding: 0;
		text-align: right;
		font-size: 0;
		letter-spacing: 0;

		& li {
			display: inline-block;
			font-size: 14px;
			font-family: sans-serif !important;
			line-height: 1.4;
			letter-spacing: 0;
			padding-top: 14px;
			padding-right: 15px;
			padding-left: 15px;
			margin: 0;

			& a:hover {
				color: white !important;
				text-decoration: underline !important;
			}
		}
	}
}

html, body, .footer {
	background-color: $primary;
}

82
83
84
85
a:hover {
	text-decoration: underline;
}

86
87
.has-background-info {
	background-color: #e4eeff !important;
88
89
}

90
91
92
93
94
.bold {
	font-weight: bold;
}

.good {
95
96
97
98
99
	color: $good;

	& .subtitle:before, & .Collapsible__trigger {
		color: $good;
	}
100
101
102
}

.bad {
103
104
105
106
107
	color: $bad;

	& .subtitle:before, & .Collapsible__trigger {
		color: $bad;
	}
108
109
110
}

.unknown {
111
	color: $unknown;
112

113
114
	& .subtitle:before, & .Collapsible__trigger {
		color: $unknown;
115
	}
116
}
117

118
119
120
121
122
123
124
125
126
127
128
.section {
	padding: 2rem;

	& ul {
		@include tablet {
			columns: 2;
		}

		@include desktop {
			columns: 4;
		}
129

130
131
132
133
		/* bulma has no 4k option */
		@media (min-width: 2000px) {
			columns: 8;
		}
134
135
	}
}
136
137
138
139
140

.box {
	padding: 5px 10px 10px 10px;
}

141
142
143
144
145
146
147
148
149
150
.repo-summary li:nth-child(2) {
	padding-top: 0.5rem;
}

.subtitle {
	&:before {
		content: '● ';
	}
}

151
152
153
154
155
156
157
158
159
160
.Collapsible__contentInner {
	margin-left: 1rem;
	border: 1px black;
	color: black;
}

.Collapsible__trigger {
	display: block;
	position: relative;
	padding: 0 0 0 1rem;
161
	color: $link;
162
163
164
165
166
167
168
169
170
171
172
173
174

	&:hover {
		cursor: pointer;
		text-decoration: underline;
	}

	&:before {
		content: '^';
		position: absolute;
		left: 0;
		display: block;
		transition: transform 100ms;
		color: #666;
175
		font-weight: bold;
176
177
178
179
180
181
182
183
184
185
186
187
188
189
	}

	&.is-closed {
		&:before {
			transform: rotateZ(90deg);
		}
	}

	&.is-open {
		&:before {
			transform: rotateZ(180deg);
		}
	}
}
190
191
192
193
194
195
196
197

.hero-body {
	padding: 1.5rem 2rem;
}

.footer {
	padding: 1rem 1.5rem 1rem !important;
}