Skip to content

Commit 59edefb

Browse files
wabiloowabiloo
committed
Better section-based coloring
1 parent 10c90fa commit 59edefb

File tree

2 files changed

+113
-19
lines changed

2 files changed

+113
-19
lines changed

‎css/main.css

+96-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,101 @@ body {
22
transition: background-color ease-in 1s;
33
}
44

5+
.section {
6+
margin-top: 10px;
7+
border-left: 3px solid;
8+
}
9+
.section .header {
10+
padding-left: 0;
11+
}
12+
.section .header h2 {
13+
padding-left: 15px;
14+
}
15+
.section .col-12 {
16+
margin-left: 20px;
17+
}
18+
19+
.topic-encodings {
20+
border-left-color: blue;
21+
}
22+
.topic-encodings h2 {
23+
border-top-color: blue;
24+
}
25+
.topic-encodings .table .thead-light th {
26+
background-color: blue;
27+
color: white;
28+
}
29+
30+
.topic-muxings {
31+
border-left-color: green;
32+
}
33+
.topic-muxings h2 {
34+
border-top-color: green;
35+
}
36+
.topic-muxings.nav-item {
37+
border-bottom: green 5px solid;
38+
}
39+
.topic-muxings .table .thead-light th {
40+
background-color: green;
41+
color: white;
42+
}
43+
44+
.topic-streams {
45+
border-left-color: darkred;
46+
}
47+
.topic-streams h2 {
48+
border-top-color: darkred;
49+
}
50+
.topic-streams.nav-item {
51+
border-bottom: darkred 5px solid;
52+
}
53+
.topic-streams .table .thead-light th {
54+
background-color: darkred;
55+
color: white;
56+
}
57+
58+
.topic-inputs {
59+
border-left-color: darkorange;
60+
}
61+
.topic-inputs h2 {
62+
border-top-color: darkorange;
63+
}
64+
.topic-inputs.nav-item {
65+
border-bottom: darkorange 5px solid;
66+
}
67+
.topic-inputs .table .thead-light th {
68+
background-color: darkorange;
69+
color: white;
70+
}
71+
72+
.topic-manifests {
73+
border-left-color: purple;
74+
}
75+
.topic-manifests h2 {
76+
border-top-color: purple;
77+
}
78+
.topic-manifests.nav-item {
79+
border-bottom: purple 5px solid;
80+
}
81+
.topic-manifests .table .thead-light th {
82+
background-color: purple;
83+
color: white;
84+
}
85+
86+
.topic-graph {
87+
border-left-color: darkgoldenrod;
88+
}
89+
.topic-graph h2 {
90+
border-top-color: darkgoldenrod;
91+
}
92+
.topic-graph.nav-item {
93+
border-bottom: darkgoldenrod 5px solid;
94+
}
95+
96+
.nav-item {
97+
margin-right: 5px;
98+
}
99+
5100
.copied {
6101
background-color: #b2eeaa;
7102
}
@@ -34,7 +129,7 @@ a.anchor {
34129
}
35130

36131
h2 {
37-
border-top: 2px solid coral;
132+
border-top: 3px solid coral;
38133
font-size: 16px;
39134
text-align: left;
40135
text-transform: uppercase;

‎encoding.html

+17-18
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,11 @@
5353
</a>
5454
<div class="collapse navbar-collapse">
5555
<div class="navbar-nav">
56-
<a class="nav-item nav-link" href="#graph-anchor">Graph</a>
57-
<a class="nav-item nav-link" href="#manifests-anchor">Manifests</a>
58-
<a class="nav-item nav-link" href="#muxings-anchor">Muxings</a>
59-
<a class="nav-item nav-link" href="#streams-anchor">Streams</a>
60-
<a class="nav-item nav-link" href="#streams-anchor">Inputs</a>
56+
<a class="nav-item nav-link topic-graph" href="#graph-anchor" >Graph</a>
57+
<a class="nav-item nav-link topic-manifests" href="#manifests-anchor">Manifests</a>
58+
<a class="nav-item nav-link topic-muxings" href="#muxings-anchor">Muxings</a>
59+
<a class="nav-item nav-link topic-streams" href="#streams-anchor">Streams</a>
60+
<a class="nav-item nav-link topic-inputs" href="#inputs-anchor">Inputs</a>
6161
</div>
6262
</div>
6363
<div>
@@ -94,12 +94,12 @@
9494
</div>
9595

9696

97-
<div class="row">
97+
<div class="row section topic-encodings">
9898
<div class="col-1 header">
9999
<h2>Encoding</h2>
100100
</div>
101101

102-
<div class="col">
102+
<div class="col-12">
103103
<table class="table table-lg" id="encodings" style="width: 100%">
104104
<thead class="thead-light">
105105

@@ -111,11 +111,11 @@ <h2>Encoding</h2>
111111
</div>
112112

113113
<a id="graph-anchor" class="anchor"></a>
114-
<div class="row">
114+
<div class="row section topic-graph">
115115
<div class="col-1 header">
116116
<h2>Graph</h2>
117117
</div>
118-
<div class="col">
118+
<div class="col-12">
119119
<div>
120120
<span id="graph_options_nodes">
121121
</span>
@@ -125,18 +125,17 @@ <h2>Graph</h2>
125125
</div>
126126

127127
<div id="info-floaters"></div>
128-
129128
<div id="graphviz"></div>
130129

131130
</div>
132131
</div>
133132

134133
<a id="manifests-anchor" class="anchor"></a>
135-
<div class="row">
134+
<div class="row section topic-manifests">
136135
<div class="col-1 header">
137136
<h2>Manifests</h2>
138137
</div>
139-
<div class="col">
138+
<div class="col-12">
140139
<table class="table table-lg stripe table-responsive" id="manifests">
141140
<thead class="thead-light">
142141
</thead>
@@ -147,11 +146,11 @@ <h2>Manifests</h2>
147146
</div>
148147

149148
<a id="muxings-anchor" class="anchor"></a>
150-
<div class="row">
149+
<div class="row section topic-muxings">
151150
<div class="col-1 header">
152151
<h2>Muxings</h2>
153152
</div>
154-
<div class="col">
153+
<div class="col-12">
155154
<table class="table table-lg stripe" id="muxings" style="width: 100%">
156155
<thead class="thead-light">
157156
</thead>
@@ -163,11 +162,11 @@ <h2>Muxings</h2>
163162
</div>
164163

165164
<a id="streams-anchor" class="anchor"></a>
166-
<div class="row">
165+
<div class="row section topic-streams">
167166
<div class="col-1 header">
168167
<h2>Streams</h2>
169168
</div>
170-
<div class="col">
169+
<div class="col-12">
171170
<table class="table table-lg stripe" id="streams" style="width: 100%">
172171
<thead class="thead-light">
173172
</thead>
@@ -179,11 +178,11 @@ <h2>Streams</h2>
179178
</div>
180179

181180
<a id="inputs-anchor" class="anchor"></a>
182-
<div class="row">
181+
<div class="row section topic-inputs">
183182
<div class="col-1 header">
184183
<h2>Inputs</h2>
185184
</div>
186-
<div class="col">
185+
<div class="col-12">
187186
<table class="table table-lg stripe" id="inputs" style="width: 100%">
188187
<thead class="thead-light">
189188
</thead>

0 commit comments

Comments
 (0)