krz/space-wiki
A fun wiki about space.
clone: git clone https://gitbay.org/krz/space-wiki.git
main: assets/css/styles.css · raw
1/* Base CSS */
2:root {
3 --accent: rgb(249, 207, 0);
4 --accent-8: rgba(249, 207, 0, 0.8);
5 --accent-5: rgba(249, 207, 0, 0.5);
6 --accent-25: rgba(249, 207, 0, 0.25);
7}
8
9html {
10 scroll-behavior: smooth;
11}
12
13body {
14 background: black;
15 color: white;
16 padding-top: 43px;
17}
18
19h1, h2, h3, h4, h5, h6, .navbar-brand {
20 font-family: 'Montserrat', sans-serif;
21 font-weight: 700;
22}
23
24p {
25 font-family: 'Montserrat', sans-serif;
26}
27
28a:active, a:focus {
29 outline: none;
30}
31
32.navbar {
33 padding: 1rem 2rem;
34 background: black;
35}
36
37.dropdown-menu {
38 background: black;
39 border: 1px solid white;
40}
41
42.dropdown-item {
43 color: rgba(255, 255, 255, .5);
44}
45
46.dropdown-item:focus, .dropdown-item:hover {
47 background-color: black;
48 color: rgba(255, 255, 255, .75);
49}
50
51.dropdown-item.active, .dropdown-item:active {
52 background: black;
53 color: var(--accent);
54 font-weight: bold;
55}
56
57li.nav-item {
58 margin-left: 0.25rem;
59 margin-right: 0.25rem;
60}
61
62@media (min-width: 992px) {
63 .nav-item.active {
64 border-bottom: 3px solid var(--accent);
65 }
66}
67
68footer {
69 border-top: 1px solid rgba(255, 255, 255, 0.2);
70}
71
72.footer-brand {
73 color: white;
74 margin-left: 4px;
75}
76
77.footer-brand span {
78 color: var(--accent);
79}
80
81.footer-brand:hover {
82 color: rgba(255, 255, 255, 0.8);
83 text-decoration: none;
84}
85
86footer .d-block {
87 margin-left: 4px;
88}
89
90footer .d-flex {
91 padding: 0 15px;
92}
93
94.footer-link {
95 color: white;
96 margin-right: 0.25rem;
97 margin-left: 0.25rem;
98}
99
100.footer-link-sep {
101 margin-right: 0.5rem;
102 margin-left: 0.5rem;
103}
104
105.footer-link:hover {
106 color: var(--accent);
107}
108
109.link {
110 color: white;
111}
112
113.link:hover {
114 color: var(--accent);
115 text-decoration: none;
116}
117
118/* Override Bootstrap Styles */
119.btn-primary {
120 background-color: var(--accent);
121 border-color: var(--accent);
122 color: black;
123}
124
125.btn-primary:hover {
126 background-color: var(--accent-8);
127 border-color: var(--accent-8);
128 color: black;
129}
130
131.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
132 box-shadow: 0 0 0 .2rem var(--accent-5);
133}
134
135.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
136 background-color: var(--accent);
137 border-color: var(--accent);
138 color: black;
139}
140
141.btn-primary.focus, .btn-primary:focus {
142 box-shadow: 0 0 0 .2rem var(--accent-5);
143}
144
145.contact-button {
146 border: 1px solid var(--accent);
147 border: 1px solid var(--accent-5);
148 color: #eee;
149 padding: 2rem;
150 width: 100%
151}
152
153.contact-button:hover {
154 border: 1px solid var(--accent);
155 color: #fff;
156}
157
158/* home page */
159#hero {
160 background-attachment: fixed;
161 background-image: url("https://img.cleberg.net/space-wiki/hero-banner.jpg");
162 background-position: center;
163 background-repeat: no-repeat;
164 background-size: contain;
165 height: 65vh;
166}
167
168#hero div.text-center {
169 margin-top: 3rem;
170 margin-right: 0.5rem;
171 margin-left: 0.5rem;
172}
173
174#hero-title {
175 font-size: 5rem;
176}
177
178@media (max-width: 768px) {
179 #hero-title {
180 font-size: 3rem;
181 }
182}
183
184@media (max-width: 576px) {
185 #hero-title {
186 font-size: 2rem;
187 }
188}
189
190#hero-subtitle {
191 color: var(--accent);
192 text-transform: uppercase;
193}
194
195#explore-content {
196 padding-top: 3rem;
197 padding-bottom: 3rem;
198}
199
200#explore-options {
201 padding-top: 2rem;
202 padding-bottom: 2rem;
203}
204
205.explore-card {
206 margin-top: 1rem;
207 margin-bottom: 1rem;
208 background: inherit;
209 color: inherit;
210 border: 1px solid #fff;
211 cursor: pointer;
212}
213
214.explore-card .card-body {
215 display: flex;
216 flex-direction: column;
217 align-items: center;
218}
219
220.explore-icon {
221 font-size: 2rem;
222 margin-bottom: 1rem;
223}
224
225#apod-wrapper {
226 margin-bottom: 4rem;
227}
228
229#apod-container {
230 display: none;
231}
232
233#apod-credit {
234 font-size: 0.8rem;
235 opacity: 0.5;
236}
237
238#apod-img, #apod-vid {
239 display: none;
240 max-width: 95vw;
241 max-height: 80vh;
242 margin: 2rem auto auto auto;
243}
244
245#apod-explanation {
246 font-size: 0.9rem;
247}
248
249/* planets */
250.planet-container {
251 min-height: calc(100vh - 5rem);
252}
253
254.planets-nav {
255 margin: 5rem auto;
256 display: flex;
257 flex-direction: row;
258 justify-content: center;
259 align-items: center;
260 border: 1px solid white;
261 width: max-content;
262 padding: 0.25rem 2rem;
263 border-radius: 0.25rem;
264}
265
266.planets-nav-item {
267 margin: 0.5rem 0;
268}
269
270.planets-nav-item:not(.active) {
271 color: var(--accent);
272}
273
274.planets-nav-item.active {
275 color: rgba(255, 255, 255, 0.8);
276}
277
278.planets-nav-item.active:before {
279 color: #fff;
280 content: "<";
281 padding: 0 1rem;
282}
283
284.planets-nav-item.active:after {
285 color: #fff;
286 content: ">";
287 padding: 0 1rem;
288}
289
290#sun-breadcrumb:before {
291 content: none;
292}
293
294#neptune-breadcrumb:after {
295 content: none;
296}
297
298.planet-about {
299 font-weight: bold;
300 margin-bottom: 0;
301 text-transform: uppercase;
302 color: var(--accent);
303}
304
305.planet-title {
306 margin-bottom: 4rem;
307}
308
309.planet-description {
310 margin-bottom: 4rem;
311}
312
313.planet-stats {
314 margin-bottom: 2rem;
315}
316
317.planet-link {
318 text-transform: uppercase;
319 color: var(--accent);
320 margin-bottom: 2rem;
321}
322
323.planet-link:hover {
324 color: var(--accent);
325 text-decoration: none;
326 border-bottom: 2px solid var(--accent);
327}
328
329.solar-system {
330 margin-top: 10rem;
331 margin-bottom: 5rem;
332}
333
334.solar-system>h1 {
335 margin-bottom: 4rem;
336}
337
338.planet-img {
339 width: 100%;
340}
341
342@media (max-width: 768px) {
343 .planet-img {
344 margin: 3rem auto;
345 }
346}
347
348/* gallery */
349#search_container {
350 margin-top: 5rem;
351}
352
353#temporary-banner {
354 text-align: center;
355 padding: 5rem 3rem;
356 background: #222;
357 color: rgba(255, 255, 255, 0.7);
358 border-radius: 0.5rem;
359}
360
361#search_container {
362 margin-top: 6rem;
363 margin-bottom: 4rem;
364}
365
366#search_row {
367 margin-bottom: 4rem;
368}
369
370#search_row div {
371 margin-top: 0.5rem;
372}
373
374#search_input {
375 background: inherit;
376 color: inherit;
377 height: 3rem;
378 padding: 1.5rem;
379 font-size: 1.5rem;
380}
381
382#search_button {
383 width: 100%;
384 height: 100%;
385}
386
387.gallery-card {
388 background: inherit;
389 color: inherit;
390 border: 1px solid rgba(255, 255, 255, 0.5);
391}
392
393.gallery-card .card-title {
394 margin: 0;
395}
396
397/* about */
398#meet-us, #contact-us {
399 margin-top: 5rem;
400 margin-bottom: 5rem;
401 text-align: center;
402}
403
404#banner-title {
405 margin-bottom: 2rem;
406}
407
408#banner-title a {
409 color: var(--accent);
410}
411
412#meet-us-card {
413 text-align: left;
414 width: 100%;
415 background: inherit;
416 color: inherit;
417}
418
419#meet-us-card .card-img-left {
420 display: block;
421 height: 200px;
422 width: 200px;
423 border: 1px solid white;
424 margin-bottom: 2rem;
425 margin-right: auto;
426 margin-left: auto;
427}
428
429#meet-us-card .card-link {
430 color: var(--accent);
431}
432
433#meet-us-card .card-link:hover {
434 color: var(--accent);
435 opacity: 0.8;
436}
437
438.form-control {
439 background: inherit;
440 color: inherit;
441 border: 1px solid white;
442}
443
444.form-control:focus {
445 background: inherit;
446 color: inherit;
447 border-color: var(--accent);
448 box-shadow: 0 0 0 .2rem var(--accent-25);
449}
450
451/* missions */
452#timeline-page-container {
453 margin: 5rem auto;
454}
455
456#centered-timeline {
457 margin: 4rem auto;
458}
459
460.timeline {
461 list-style: none;
462 margin: 0;
463 padding: 0;
464 width: 100%;
465}
466
467.timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 {
468 line-height: inherit;
469}
470
471h2.timeline-title {
472 color: var(--accent);
473}
474
475h3.timeline-title {
476 color: white;
477}
478
479/*----- TIMELINE ITEM -----*/
480.timeline-item {
481 padding-left: 40px;
482 position: relative;
483}
484
485.timeline-item:last-child {
486 padding-bottom: 0;
487}
488
489/*----- TIMELINE INFO -----*/
490.timeline-info {
491 font-size: 12px;
492 font-weight: 700;
493 /* letter-spacing: 3px; */
494 margin: 0 0 .5em 0;
495 text-transform: uppercase;
496 white-space: nowrap;
497}
498
499/*----- TIMELINE MARKER -----*/
500.timeline-marker {
501 position: absolute;
502 top: 0;
503 bottom: 0;
504 left: 0;
505 width: 15px;
506}
507
508.timeline-marker:before {
509 background: #f9cf00;
510 border: 3px solid transparent;
511 border-radius: 100%;
512 content: "";
513 display: block;
514 height: 15px;
515 position: absolute;
516 top: 4px;
517 left: 0;
518 width: 15px;
519 transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
520}
521
522.timeline-marker:after {
523 content: "";
524 width: 3px;
525 background: #CCD5DB;
526 display: block;
527 position: absolute;
528 top: 24px;
529 bottom: 0;
530 left: 6px;
531}
532
533.timeline-item:last-child .timeline-marker:after {
534 content: none;
535}
536
537.timeline-item:not(.period):hover .timeline-marker:before {
538 background: transparent;
539 border: 3px solid #f9cf00;
540}
541
542/*----- TIMELINE CONTENT -----*/
543.timeline-content {
544 padding-bottom: 40px;
545}
546
547.timeline-content p:last-child {
548 margin-bottom: 0;
549}
550
551/*----- TIMELINE PERIOD -----*/
552.period {
553 padding: 0;
554}
555
556.period .timeline-info {
557 display: none;
558}
559
560.period .timeline-marker:before {
561 background: transparent;
562 content: "";
563 width: 15px;
564 height: auto;
565 border: none;
566 border-radius: 0;
567 top: 0;
568 bottom: 30px;
569 position: absolute;
570 border-top: 3px solid #CCD5DB;
571 border-bottom: 3px solid #CCD5DB;
572}
573
574.period .timeline-marker:after {
575 content: "";
576 height: 32px;
577 top: auto;
578}
579
580.period .timeline-content {
581 padding: 40px 0 70px;
582}
583
584.period .timeline-title {
585 margin: 0;
586}
587
588/*----------------------------------------------
589 MOD: TIMELINE CENTERED
590----------------------------------------------*/
591@media (min-width: 992px) {
592
593 .timeline-centered,
594 .timeline-centered .timeline-item,
595 .timeline-centered .timeline-info,
596 .timeline-centered .timeline-marker,
597 .timeline-centered .timeline-content {
598 display: block;
599 margin: 0;
600 padding: 0;
601 }
602
603 .timeline-centered .timeline-item {
604 padding-bottom: 40px;
605 overflow: hidden;
606 }
607
608 .timeline-centered .timeline-marker {
609 position: absolute;
610 left: 50%;
611 margin-left: -7.5px;
612 }
613
614 .timeline-centered .timeline-info,
615 .timeline-centered .timeline-content {
616 width: 50%;
617 }
618
619 .timeline-centered>.timeline-item:nth-child(odd) .timeline-info {
620 float: left;
621 text-align: right;
622 padding-right: 30px;
623 }
624
625 .timeline-centered>.timeline-item:nth-child(odd) .timeline-content {
626 float: right;
627 text-align: left;
628 padding-left: 30px;
629 }
630
631 .timeline-centered>.timeline-item:nth-child(even) .timeline-info {
632 float: right;
633 text-align: left;
634 padding-left: 30px;
635 }
636
637 .timeline-centered>.timeline-item:nth-child(even) .timeline-content {
638 float: left;
639 text-align: right;
640 padding-right: 30px;
641 }
642
643 .timeline-centered>.timeline-item.period .timeline-content {
644 float: none;
645 padding: 0;
646 width: 100%;
647 text-align: center;
648 }
649
650 .timeline-centered .timeline-item.period {
651 padding: 50px 0 90px;
652 }
653
654 .timeline-centered .period .timeline-marker:after {
655 height: 30px;
656 bottom: 0;
657 top: auto;
658 }
659
660 .timeline-centered .period .timeline-title {
661 left: auto;
662 }
663}