]>
jfr.im git - irc/freenode/web-7.0.git/blob - static/css/style.css
8b25d534e2f3fe04b4927c217bef203580a43e89
12 --navbar-bg: var
(--c-dark
);
13 --jumbotron-bg: var
(--c-bg-dark
);
14 --copyright-bg: var
(--c-dark
);
17 --link-color: var
(--c-hl-dark
);
18 --link-hover-color: var
(--c-hl-light
);
19 --footer-link-color: var
(--c-light
);
20 --footer-hover-color: #fff;
23 --text-color: var
(--c-dark
);
24 --footer-text-color: var
(--c-light
);
25 --copyright-text-color: var
(--c-light
);
26 --jumbotron-text-color: var
(--c-light
);
27 --art-date-color: color
(var
(--c-dark
) tint
(50%));
29 /* background colors */
30 --background-color: var
(--c-light
);
33 --border-color: var
(--c-dark
);
34 --box-color: var
(--c-bg-light
);
35 --box-hover-color: var
(--c-dark
);
37 --navbar-border-color: var
(--border-color
);
38 --footer-shadow-color: rgba
(150,150,150,.36);
42 --max-width-box: 800px;
46 @media (prefers-color-scheme: dark
) {
48 --text-color: var
(--c-light
);
49 --background-color: var
(--c-dark
);
50 --link-color: #00c8e8;
51 --link-hover-color: #21a9c1;
52 --c-shadow: var
(--c-bg-light
);
53 --border-color: #000000;
54 --navbar-border-color: var
(--c-dark
);
55 --footer-shadow-color: rgba
(70, 70, 70, 0.5);
59 @custom-media --max-sm all and
(max-width: 600px);
60 @custom-media --max-md all and
(max-width: 800px);
61 @custom-media --max-rem all and
(max-width: 60rem);
62 @custom-media --sm-md
(max-width: 850px) and
(min-width: 600px);
64 /* reset css for browser compat */
68 box-sizing: border-box
;
73 font-family: 'Open Sans', sans-serif
;
74 font-feature-settings: "lnum";
75 font-variant-numeric: lining-nums
;
76 color: var
(--text-color
);
77 background-color: var
(--background-color
);
88 color: var
(--link-color
);
89 text-decoration: none
;
93 color: var
(--link-hover-color
);
102 color: var
(--c-light
);
105 background-color: var
(--navbar-bg
);
106 box-shadow: 0 3px 4px rgba
(0, 0, 0, 0.5);
113 justify-content: space-between
;
115 border-bottom: 1px solid var
(--navbar-border-color
);
132 * pia = Private Internet access
134 #nav-logo { order: 10; }
135 #nav-shells { order: 30; }
137 #nav-jump { order: 1000; }
146 background-color: var
(--c-bg-dark
);
149 color: var
(--c-light
);
156 display: inline-block
;
176 #nav-searchbox:not
(:focus
) {
177 display: inline-block
;
183 background: transparent
;
187 #nav-searchbox:focus
{
197 padding-right: 2.5em;
201 #nav-searchbox:focus
+ #nav-label
{
204 pointer-events: none
;
216 .nlogo { height: 40px; }
218 /* t = text (used in jumbotron for small logo as text) */
221 margin-bottom: -.47ex;
236 padding-bottom: 17.5rem;
242 max-width: var
(--max-width
);
269 .main blockquote > p:first-child {
276 border: 1px solid var
(--border-color
);
280 .main :not(pre)>code {
284 .main pre, .main :not(pre)>code {
285 background: var
(--c-shadow
);
286 border-radius: .25em;
291 color: var
(--text-color
);
296 font-family: FontAwesome
;
297 color: var
(--link-color
);
300 transition: opacity
.08s;
303 .toclink:hover::after {
305 color: var
(--link-hover-color
);
316 list-style-type: disc
;
321 list-style-type: decimal
;
330 border: 1px solid var
(--border-color
);
331 border-collapse: collapse
;
339 background-color: var
(--c-bg-dark
);
340 color: var
(--c-light
);
347 td:not
(:first-child
), th:not
(:first-child
) {
348 border-left: 1px solid var
(--border-color
);
352 background-color: var
(--c-shadow
);
360 background: var
(--jumbotron-bg
);
361 box-shadow: 0 1px 5px rgba
(0, 0, 0, 0.6);
362 color: var
(--jumbotron-text-color
);
363 padding: 4em 0 4em 0;
386 margin: 2em auto
-2em auto
;
404 justify-content: space-around
;
405 align-items: stretch
;
406 max-width: var
(--max-width-box
);
412 text-decoration: none
;
413 color: var
(--jumbotron-text-color
);
417 background-color: var
(--box-color
);
418 border-radius: var
(--box-round
);
422 .box:hover,.box:active {
423 color: var
(--jumbotron-text-color
);
424 background-color: var
(--box-hover-color
);
437 /* fa = font awesome */
439 margin-top: var
(--margin-box-fa
);
442 .fa-comments,.fa-question {
443 margin-bottom: var
(--margin-box-fa
);
470 flex-direction: column
;
480 display: inline-block
;
487 border-radius: calc
(var
(--box-round
) / 2);
499 list-style-type: none
;
506 justify-content: space-between
;
507 align-items: baseline
;
519 border: 1px solid var
(--border-color
);
534 max-width: var
(--max-width
);
539 .artlist li:not(:first-child) {
540 border-top: 1px solid var
(--border-color
);
549 display: inline-block
;
550 vertical-align: baseline
;
553 color: var
(--art-date-color
);
554 font-feature-settings: "tnum";
555 font-variant-numeric: tabular-nums
;
565 justify-content: space-between
;
573 .art-nav *:nth-child(1) { text-align: left
; }
574 .art-nav *:nth-child(2) { text-align: center
; }
575 .art-nav *:nth-child(3) { text-align: right
; }
579 display: inline-block
;
580 border-left: .5em solid var
(--c-shadow
);
596 /* kb = knowledge base */
598 list-style-type: none
;
603 justify-content: stretch
;
619 color: var
(--text-color
);
624 color: var
(--link-color
);
626 .kb-index a:hover h2 {
627 color: var
(--link-hover-color
);
632 /*min-height: 30vh;*/
638 background: var
(--jumbotron-bg
);
639 color: var
(--footer-text-color
);
641 box-shadow: 0 -3px 5px var
(--footer-shadow-color
);
653 justify-content: center
;
654 align-items: flex-start
;
665 .footerchild:last-child {
675 color: var
(--footer-link-color
);
679 color: var
(--footer-hover-color
);
684 display: inline-block
;
687 .footerchild ul, .footerchild ul ul {
691 list-style-type: none
;
700 flex-direction: column
;
708 .footerchild ul li:last-child {
712 .footer-push ul li:last-child {
730 justify-content: space-between
;
731 align-items: flex-start
;
735 display: inline-block
;
738 .footerchild ul li img
,
739 .footerchild ul li .fa-fw {
761 .footer h2, .footer h3 {
769 justify-content: space-between
;
770 background: var
(--copyright-bg
);
772 color: var
(--copyright-text-color
);
778 footer
.copyright div
{
798 .copyright .footer-link {