]>
Commit | Line | Data |
---|---|---|
f11ed28e SB |
1 | /* vars */ |
2 | :root { | |
3 | --navbar-bg: white; | |
4 | --nlink-col: black; | |
5 | --jumbotron-bg: rgba(75,235,74,.4); | |
6 | --footer-bg: #eee; | |
7 | --link-color: #428bca; | |
8 | --text-color: #333; | |
9 | --border-color: 0,0,0; | |
10 | --box-hover-color: #eee; | |
11 | } | |
12 | ||
13 | /* global */ | |
c3650738 | 14 | body { |
f11ed28e SB |
15 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
16 | color: var(--text-color); | |
17 | } | |
18 | a { | |
19 | color: var(--link-color); | |
20 | text-decoration: none; | |
c3650738 | 21 | } |
7dff2d08 SB |
22 | |
23 | /* navbar */ | |
c3650738 SB |
24 | .navbar { |
25 | width: 100%; | |
26 | height: 50px; | |
f11ed28e | 27 | background-color: var(--navbar-bg); |
c3650738 SB |
28 | position: fixed; |
29 | left: 0; | |
30 | right: 0; | |
31 | top: 0; | |
32 | display: flex; | |
33 | flex-wrap: nowrap; | |
34 | justify-content: space-between; | |
35 | align-items: center; | |
f11ed28e | 36 | border-bottom: 1px solid rgba(var(--border-color),.3); |
c3650738 SB |
37 | z-index: 100; |
38 | } | |
39 | .nlogo { | |
40 | height: 40px; | |
41 | } | |
42 | .nlink { | |
43 | text-decoration: none; | |
f11ed28e | 44 | color: var(--nlink-col); |
c3650738 | 45 | } |
7dff2d08 SB |
46 | |
47 | /* main */ | |
c3650738 SB |
48 | .container { |
49 | margin-top: 51px; | |
7dff2d08 SB |
50 | margin-left: 0; |
51 | margin-right: 0; | |
52 | margin-bottom: 0; | |
53 | padding: 0; | |
c3650738 SB |
54 | width: 100%; |
55 | margin-left: 0; | |
56 | margin-right: 0; | |
f11ed28e | 57 | position: static; |
c3650738 | 58 | } |
7dff2d08 SB |
59 | |
60 | /* jumbotron */ | |
c3650738 | 61 | .jumbotron { |
f11ed28e | 62 | background: var(--jumbotron-bg); |
c3650738 SB |
63 | width: 100%; |
64 | } | |
65 | .child { | |
66 | text-align: center; | |
67 | } | |
68 | .box-container { | |
69 | display: flex; | |
70 | flex-wrap: wrap; | |
71 | justify-content: space-around; | |
72 | align-items: center; | |
73 | } | |
74 | .box { | |
75 | text-align: center; | |
76 | text-decoration: none; | |
f11ed28e | 77 | color: var(--text-color); |
c3650738 | 78 | margin-bottom: 5px; |
f11ed28e | 79 | border: 1px solid rgb(var(--border-color)); |
c3650738 | 80 | flex-basis: 30%; |
f11ed28e | 81 | height: 105px; |
c3650738 SB |
82 | background-color: #fff; |
83 | } | |
84 | .box:hover, .box:active { | |
f11ed28e | 85 | background-color: var(--box-hover-color); |
c3650738 SB |
86 | } |
87 | .title { | |
88 | text-align: center; | |
89 | } | |
c3650738 | 90 | |
7dff2d08 | 91 | /* articles feed */ |
f11ed28e SB |
92 | h1 { |
93 | margin: 0; | |
94 | } | |
7dff2d08 | 95 | div.art { |
636c336d | 96 | border-bottom: 1px solid rgba(var(--border-color),.3); |
c3650738 | 97 | } |
7dff2d08 | 98 | div.art:last-child { |
c3650738 SB |
99 | border-bottom: none; |
100 | } | |
7dff2d08 | 101 | h3.art { |
636c336d | 102 | margin-bottom: 0; |
c3650738 SB |
103 | } |
104 | p.art { | |
7dff2d08 SB |
105 | margin: 0; |
106 | } | |
107 | p.art-ingress { | |
108 | font-style: italic; | |
109 | margin: 0; | |
110 | } | |
111 | p.art-date { | |
112 | color: #ccc; | |
636c336d | 113 | margin: 0; |
7dff2d08 | 114 | } |
7dff2d08 SB |
115 | p.art-link { |
116 | margin-top: 0; | |
c3650738 | 117 | } |
c3650738 | 118 | |
7dff2d08 SB |
119 | /* footer */ |
120 | .footer { | |
f11ed28e SB |
121 | background: var(--footer-bg); |
122 | width: device-width; | |
7dff2d08 SB |
123 | margin: 0; |
124 | padding: 0; | |
125 | display: flex; | |
126 | flex-wrap: wrap; | |
127 | justify-content: space-between; | |
f11ed28e SB |
128 | align-items: flex-start; |
129 | } | |
130 | .footer .footerchild p { | |
131 | margin: 0; | |
7dff2d08 SB |
132 | } |
133 | .footerline { | |
134 | border-right: 1px solid #000; | |
135 | height: 100%; | |
c3650738 | 136 | } |