]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | /* |
2 | * Globals | |
3 | */ | |
4 | ||
5 | /* Links */ | |
6 | a, | |
7 | a:focus, | |
8 | a:hover { | |
9 | color: #fff; | |
10 | } | |
11 | ||
12 | /* Custom default button */ | |
13 | .btn-secondary, | |
14 | .btn-secondary:hover, | |
15 | .btn-secondary:focus { | |
16 | color: #333; | |
17 | text-shadow: none; /* Prevent inheritance from `body` */ | |
18 | background-color: #fff; | |
19 | border: .05rem solid #fff; | |
20 | } | |
21 | ||
22 | ||
23 | /* | |
24 | * Base structure | |
25 | */ | |
26 | ||
27 | html, | |
28 | body { | |
29 | height: 100%; | |
30 | background-color: #333; | |
31 | } | |
32 | body { | |
33 | color: #fff; | |
34 | text-align: center; | |
35 | text-shadow: 0 .05rem .1rem rgba(0,0,0,.5); | |
36 | } | |
37 | ||
38 | /* Extra markup and styles for table-esque vertical and horizontal centering */ | |
39 | .site-wrapper { | |
40 | display: table; | |
41 | width: 100%; | |
42 | height: 100%; /* For at least Firefox */ | |
43 | min-height: 100%; | |
44 | -webkit-box-shadow: inset 0 0 5rem rgba(0,0,0,.5); | |
45 | box-shadow: inset 0 0 5rem rgba(0,0,0,.5); | |
46 | } | |
47 | .site-wrapper-inner { | |
48 | display: table-cell; | |
49 | vertical-align: top; | |
50 | } | |
51 | .cover-container { | |
52 | margin-right: auto; | |
53 | margin-left: auto; | |
54 | } | |
55 | ||
56 | /* Padding for spacing */ | |
57 | .inner { | |
58 | padding: 2rem; | |
59 | } | |
60 | ||
61 | ||
62 | /* | |
63 | * Header | |
64 | */ | |
65 | ||
66 | .masthead { | |
67 | margin-bottom: 2rem; | |
68 | } | |
69 | ||
70 | .masthead-brand { | |
71 | margin-bottom: 0; | |
72 | } | |
73 | ||
74 | .nav-masthead .nav-link { | |
75 | padding: .25rem 0; | |
76 | font-weight: bold; | |
77 | color: rgba(255,255,255,.5); | |
78 | background-color: transparent; | |
79 | border-bottom: .25rem solid transparent; | |
80 | } | |
81 | ||
82 | .nav-masthead .nav-link:hover, | |
83 | .nav-masthead .nav-link:focus { | |
84 | border-bottom-color: rgba(255,255,255,.25); | |
85 | } | |
86 | ||
87 | .nav-masthead .nav-link + .nav-link { | |
88 | margin-left: 1rem; | |
89 | } | |
90 | ||
91 | .nav-masthead .active { | |
92 | color: #fff; | |
93 | border-bottom-color: #fff; | |
94 | } | |
95 | ||
96 | @media (min-width: 48em) { | |
97 | .masthead-brand { | |
98 | float: left; | |
99 | } | |
100 | .nav-masthead { | |
101 | float: right; | |
102 | } | |
103 | } | |
104 | ||
105 | ||
106 | /* | |
107 | * Cover | |
108 | */ | |
109 | ||
110 | .cover { | |
111 | padding: 0 1.5rem; | |
112 | } | |
113 | .cover .btn-lg { | |
114 | padding: .75rem 1.25rem; | |
115 | font-weight: bold; | |
116 | } | |
117 | ||
118 | ||
119 | /* | |
120 | * Footer | |
121 | */ | |
122 | ||
123 | .mastfoot { | |
124 | color: rgba(255,255,255,.5); | |
125 | } | |
126 | ||
127 | ||
128 | /* | |
129 | * Affix and center | |
130 | */ | |
131 | ||
132 | @media (min-width: 40em) { | |
133 | /* Pull out the header and footer */ | |
134 | .masthead { | |
135 | position: fixed; | |
136 | top: 0; | |
137 | } | |
138 | .mastfoot { | |
139 | position: fixed; | |
140 | bottom: 0; | |
141 | } | |
142 | /* Start the vertical centering */ | |
143 | .site-wrapper-inner { | |
144 | vertical-align: middle; | |
145 | } | |
146 | /* Handle the widths */ | |
147 | .masthead, | |
148 | .mastfoot, | |
149 | .cover-container { | |
150 | width: 100%; /* Must be percentage or pixels for horizontal alignment */ | |
151 | } | |
152 | } | |
153 | ||
154 | @media (min-width: 62em) { | |
155 | .masthead, | |
156 | .mastfoot, | |
157 | .cover-container { | |
158 | width: 42rem; | |
159 | } | |
160 | } |