diff options
Diffstat (limited to 'website/static')
-rw-r--r-- | website/static/css/main.css | 53 |
1 files changed, 31 insertions, 22 deletions
diff --git a/website/static/css/main.css b/website/static/css/main.css index 3bf1e1e..2bb9803 100644 --- a/website/static/css/main.css +++ b/website/static/css/main.css | |||
@@ -92,61 +92,59 @@ p + p { | |||
92 | 92 | ||
93 | #header { | 93 | #header { |
94 | background: url('../images/noise-bg.png'); | 94 | background: url('../images/noise-bg.png'); |
95 | height: 90px; | ||
96 | width: 100%; | 95 | width: 100%; |
97 | box-shadow: 0 3px 8px #ccc; | 96 | box-shadow: 0 3px 8px #ccc; |
97 | margin-bottom: 1em; | ||
98 | } | 98 | } |
99 | 99 | ||
100 | #header .logo { | 100 | #header a.logo:focus img { |
101 | padding: 10px; | ||
102 | display: block; | ||
103 | height: 25rem; | ||
104 | margin-bottom: 2em; | ||
105 | } | ||
106 | |||
107 | #header a:focus .logo { | ||
108 | border-left: 2px dotted #118ab2; | 101 | border-left: 2px dotted #118ab2; |
109 | border-right: 2px dotted #118ab2; | 102 | border-right: 2px dotted #118ab2; |
110 | } | 103 | } |
111 | 104 | ||
112 | #header .logo.small { | 105 | #header .logo.small img { |
113 | height: 4.5rem; | 106 | height: 4.5rem; |
114 | } | 107 | } |
115 | 108 | ||
116 | #header .members { | 109 | #header .logo.small { |
117 | float: right; | 110 | border: none; |
118 | } | 111 | } |
119 | 112 | ||
120 | @media screen and (min-width: 640px) { | 113 | #header .members { |
121 | #header { | 114 | float: right; |
122 | height: 110px; | ||
123 | } | ||
124 | } | 115 | } |
125 | 116 | ||
126 | #header.frontpage { | 117 | .frontpage #header { |
127 | height: auto; | 118 | height: auto; |
128 | margin-bottom: 1em; | ||
129 | text-align: center; | 119 | text-align: center; |
130 | padding-top: 2rem; | 120 | padding-top: 2rem; |
131 | padding-bottom: 1rem; | 121 | padding-bottom: 1rem; |
132 | } | 122 | } |
133 | 123 | ||
134 | #header.frontpage .front-page-heading { | 124 | .frontpage #header .front-page-heading { |
135 | font-size: 175%; | 125 | font-size: 175%; |
136 | line-height: 150%; | 126 | line-height: 150%; |
137 | text-align: left; | 127 | text-align: left; |
138 | padding-top: 0.5em; | 128 | padding-top: 0.5em; |
139 | } | 129 | } |
140 | 130 | ||
141 | #header.frontpage .logo { | 131 | .frontpage #header .logo img { |
142 | padding: 0; | ||
143 | margin: 0 auto; | 132 | margin: 0 auto; |
144 | max-width: 100%; | 133 | max-width: 100%; |
134 | padding: 10px; | ||
135 | display: block; | ||
136 | height: 25rem; | ||
145 | } | 137 | } |
146 | 138 | ||
147 | #menubar { | 139 | #menubar { |
140 | display: inline-block; | ||
141 | vertical-align: middle; | ||
142 | } | ||
143 | |||
144 | .frontpage #menubar { | ||
148 | margin: auto; | 145 | margin: auto; |
149 | padding: 0px; | 146 | padding: 0px; |
147 | display: block; | ||
150 | clear: both; | 148 | clear: both; |
151 | } | 149 | } |
152 | 150 | ||
@@ -155,6 +153,17 @@ p + p { | |||
155 | padding: 0px; | 153 | padding: 0px; |
156 | } | 154 | } |
157 | 155 | ||
156 | #header-inner * { | ||
157 | vertical-align: middle; | ||
158 | } | ||
159 | |||
160 | /* ghost element to maintain perfect centering */ | ||
161 | #header-inner:before { | ||
162 | content: ''; | ||
163 | display: inline-block; | ||
164 | height: 100%; | ||
165 | vertical-align: middle; | ||
166 | } | ||
158 | 167 | ||
159 | .latest-news { | 168 | .latest-news { |
160 | margin-top: 20px; | 169 | margin-top: 20px; |
@@ -290,7 +299,7 @@ h1 { | |||
290 | 299 | ||
291 | h1:first-child { | 300 | h1:first-child { |
292 | font-size: 1.8rem; | 301 | font-size: 1.8rem; |
293 | margin-bottom: 3rem; | 302 | margin-bottom: 2rem; |
294 | margin-top: 0; | 303 | margin-top: 0; |
295 | } | 304 | } |
296 | 305 | ||