summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorRicardo Wurmus <rekado@elephly.net>2021-04-11 10:34:53 +0200
committerRicardo Wurmus <rekado@elephly.net>2021-04-11 10:34:53 +0200
commit3feeee7982ad16081c066a27d67486fa821d280b (patch)
tree62927efc4db00a0cffe30e9d0d41085753c4470e
parentwebsite: Add /software. (diff)
website: Move menubar to header.
-rw-r--r--website/haunt.scm46
-rw-r--r--website/static/css/main.css53
2 files changed, 56 insertions, 43 deletions
diff --git a/website/haunt.scm b/website/haunt.scm
index a8b6a35..5d00630 100644
--- a/website/haunt.scm
+++ b/website/haunt.scm
@@ -39,6 +39,19 @@
39 39
40(define* (base-layout body #:key (title "") (meta '()) 40(define* (base-layout body #:key (title "") (meta '())
41 (posts '()) site) 41 (posts '()) site)
42 (define menubar
43 `(div (@ (id "menubar")
44 (class "width-control"))
45 (ul
46 (li (a (@ (href ,(base-url "/")))
47 "About"))
48 (li (a (@ (href ,(base-url "/software")))
49 "Software"))
50 (li (a (@ (href ,(base-url "/blog")))
51 "Blog"))
52 (li (a (@ (href ,(base-url "/blog/feed.xml")))
53 (img (@ (alt "Atom feed")
54 (src ,(image-url "/feed.png")))))))))
42 (define front-page? 55 (define front-page?
43 (assoc-ref meta 'frontpage)) 56 (assoc-ref meta 'frontpage))
44 57
@@ -56,16 +69,16 @@
56 (media "screen"))) 69 (media "screen")))
57 (title ,title)) 70 (title ,title))
58 (body 71 (body
59 (div (@ (id "header") 72 ,@(if front-page?
60 ,@(if front-page? 73 '((@ (class "frontpage")))
61 '((class "frontpage")) 74 '())
62 '())) 75 (div (@ (id "header"))
63 (div (@ (id "header-inner") 76 (div (@ (id "header-inner")
64 (class "width-control")) 77 (class "width-control"))
65 (a (@ (href ,(base-url "/"))) 78 (a (@ (href ,(base-url "/"))
66 (img (@ (class ,(if front-page? 79 (class ,(if front-page?
67 "logo" "logo small")) 80 "logo" "logo small")))
68 (alt "The logo of the GNU Assembly") 81 (img (@ (alt "The logo of the GNU Assembly")
69 (src ,(image-url (if front-page? 82 (src ,(image-url (if front-page?
70 "/logo.svg" 83 "/logo.svg"
71 "/logo-small.svg")))))) 84 "/logo-small.svg"))))))
@@ -82,19 +95,10 @@
82 "giving them individual and collective control " 95 "giving them individual and collective control "
83 "over their computing, from the operating " 96 "over their computing, from the operating "
84 "system to applications.")) 97 "system to applications."))
85 '()))) 98 `(,menubar))))
86 (div (@ (id "menubar") 99 ,@(if (assoc-ref meta 'frontpage)
87 (class "width-control")) 100 `(,menubar)
88 (ul 101 '())
89 (li (a (@ (href ,(base-url "/")))
90 "About"))
91 (li (a (@ (href ,(base-url "/software")))
92 "Software"))
93 (li (a (@ (href ,(base-url "/blog")))
94 "Blog"))
95 (li (a (@ (href ,(base-url "/blog/feed.xml")))
96 (img (@ (alt "Atom feed")
97 (src ,(image-url "/feed.png"))))))))
98 102
99 (div (@ (id "content") 103 (div (@ (id "content")
100 (class "width-control")) 104 (class "width-control"))
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
291h1:first-child { 300h1: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