]>
jfr.im git - irc/freenode/web-7.0.git/blob - static/css/style.css
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%));
30 --border-color: var
(--c-dark
);
31 --box-color: var
(--c-bg-light
);
32 --box-hover-color: var
(--c-dark
);
37 --max-width-box: 800px;
40 @custom-media --max-sm all and
(max-width: 600px);
41 @custom-media --max-md all and
(max-width: 800px);
42 @custom-media --max-rem all and
(max-width: 60rem);
44 /* reset css for browser compat */
48 box-sizing: border-box
;
53 font-family: 'Open Sans', sans-serif
;
54 font-feature-settings: "lnum";
55 font-variant-numeric: lining-nums
;
56 color: var
(--text-color
);
67 color: var
(--link-color
);
68 text-decoration: none
;
72 color: var
(--link-hover-color
);
80 color: var
(--c-light
);
83 background-color: var
(--navbar-bg
);
84 box-shadow: 0 3px 4px rgba
(0, 0, 0, 0.5);
91 justify-content: space-between
;
93 border-bottom: 1px solid var
(--border-color
);
110 * pia = Private Internet access
112 #nav-logo { order: 10; }
113 #nav-pia { order: 30; }
115 #nav-jump { order: 1000; }
124 background-color: var
(--c-bg-dark
);
127 color: var
(--c-light
);
134 display: inline-block
;
154 #nav-searchbox:not
(:focus
) {
155 display: inline-block
;
161 background: transparent
;
165 #nav-searchbox:focus
{
175 padding-right: 2.5em;
179 #nav-searchbox:focus
+ #nav-label
{
182 pointer-events: none
;
194 .nlogo { height: 40px; }
196 /* t = text (used in jumbotron for small logo as text) */
199 margin-bottom: -.47ex;
209 padding-bottom: 17.5rem;
215 max-width: var
(--max-width
);
242 .main blockquote > p:first-child {
249 border: 1px solid var
(--c-border
);
253 .main :not(pre)>code {
257 .main pre, .main :not(pre)>code {
258 background: var
(--c-shadow
);
259 border-radius: .25em;
264 color: var
(--text-color
);
269 font-family: FontAwesome
;
270 color: var
(--link-color
);
273 transition: opacity
.08s;
276 .toclink:hover::after {
278 color: var
(--link-hover-color
);
289 list-style-type: disc
;
294 list-style-type: decimal
;
303 border: 1px solid var
(--c-dark
);
304 border-collapse: collapse
;
312 background-color: var
(--c-bg-dark
);
313 color: var
(--c-light
);
320 td:not
(:first-child
), th:not
(:first-child
) {
321 border-left: 1px solid var
(--c-dark
);
325 background-color: var
(--c-shadow
);
333 background: var
(--jumbotron-bg
);
334 box-shadow: 0 1px 5px rgba
(0, 0, 0, 0.6);
335 color: var
(--jumbotron-text-color
);
336 padding: 4em 0 4em 0;
359 margin: 2em auto
-2em auto
;
377 justify-content: space-around
;
378 align-items: stretch
;
379 max-width: var
(--max-width-box
);
385 text-decoration: none
;
386 color: var
(--jumbotron-text-color
);
390 background-color: var
(--box-color
);
391 border-radius: var
(--box-round
);
395 .box:hover,.box:active {
396 color: var
(--jumbotron-text-color
);
397 background-color: var
(--box-hover-color
);
410 /* fa = font awesome */
412 margin-top: var
(--margin-box-fa
);
415 .fa-comments,.fa-question {
416 margin-bottom: var
(--margin-box-fa
);
443 flex-direction: column
;
453 display: inline-block
;
460 border-radius: calc
(var
(--box-round
) / 2);
472 list-style-type: none
;
479 justify-content: space-between
;
480 align-items: baseline
;
492 border: 1px solid var
(--border-color
);
507 max-width: var
(--max-width
);
512 .artlist li:not(:first-child) {
513 border-top: 1px solid var
(--border-color
);
522 display: inline-block
;
523 vertical-align: baseline
;
526 color: var
(--art-date-color
);
527 font-feature-settings: "tnum";
528 font-variant-numeric: tabular-nums
;
538 justify-content: space-between
;
546 .art-nav *:nth-child(1) { text-align: left
; }
547 .art-nav *:nth-child(2) { text-align: center
; }
548 .art-nav *:nth-child(3) { text-align: right
; }
552 display: inline-block
;
553 border-left: .5em solid var
(--c-shadow
);
569 /* kb = knowledge base */
571 list-style-type: none
;
576 justify-content: stretch
;
592 color: var
(--text-color
);
597 color: var
(--link-color
);
599 .kb-index a:hover h2 {
600 color: var
(--link-hover-color
);
605 /*min-height: 30vh;*/
611 background: var
(--jumbotron-bg
);
612 color: var
(--footer-text-color
);
614 box-shadow: 0 -3px 5px rgba
(150,150,150,.36);
626 justify-content: center
;
627 align-items: flex-start
;
638 .footerchild:last-child {
648 color: var
(--footer-link-color
);
652 color: var
(--footer-hover-color
);
657 display: inline-block
;
660 .footerchild ul, .footerchild ul ul {
664 list-style-type: none
;
673 flex-direction: column
;
681 .footerchild ul li:last-child {
685 .footer-push ul li:last-child {
703 justify-content: space-between
;
704 align-items: flex-start
;
708 display: inline-block
;
711 .footerchild ul li img
,
712 .footerchild ul li .fa-fw {
717 .footer h2, .footer h3 {
725 justify-content: space-between
;
726 background: var
(--copyright-bg
);
728 color: var
(--copyright-text-color
);
734 footer
.copyright div
{
754 .copyright .footer-link {