aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorng0 <ng0@n0.is>2019-06-27 11:28:57 +0000
committerng0 <ng0@n0.is>2019-06-27 11:28:57 +0000
commit45d0b0364129481f518eebb0e6d97fdf82499959 (patch)
treecc3da6461058e1d87a860329575f11612e141cee
parent45a68c74b49b33830c5dc22e827e1fe02841c8c6 (diff)
downloadwww-45d0b0364129481f518eebb0e6d97fdf82499959.tar.gz
www-45d0b0364129481f518eebb0e6d97fdf82499959.zip
style change, layout fixes, start using sass.
Diffstat
-rw-r--r--Makefile7
-rw-r--r--README13
-rw-r--r--common/base.j22
-rw-r--r--common/footer.j2.inc17
-rw-r--r--common/navigation.j2.inc8
-rw-r--r--static/styles.css432
-rw-r--r--static/styles.sass275
-rw-r--r--template/ev.html.j22
-rw-r--r--template/gnurl.html.j22
-rw-r--r--template/index.html.j2136
-rw-r--r--template/video.html.j24
11 files changed, 560 insertions, 338 deletions
diff --git a/Makefile b/Makefile
index 8dcb8526..5424e812 100644
--- a/Makefile
+++ b/Makefile
@@ -11,8 +11,7 @@
11 11
12include config.mk 12include config.mk
13 13
14all: locale template 14all: css locale template
15 # Consider using pax instead of cp.
16 cp -R dist rendered/ 15 cp -R dist rendered/
17 cp -R static rendered/ 16 cp -R static rendered/
18 cp rendered/static/robots.txt rendered/robots.txt 17 cp rendered/static/robots.txt rendered/robots.txt
@@ -49,6 +48,10 @@ locale-update: locale/messages.pot
49 48
50 if grep -nA1 '#-#-#-#-#' locale/*/LC_MESSAGES/messages.po; then echo -e "\nERROR: Conflicts encountered in PO files.\n"; exit 1; fi 49 if grep -nA1 '#-#-#-#-#' locale/*/LC_MESSAGES/messages.po; then echo -e "\nERROR: Conflicts encountered in PO files.\n"; exit 1; fi
51 50
51# sass preprocessor
52css:
53 sassc static/styles.sass static/styles.css
54
52# Compile translation files for use. 55# Compile translation files for use.
53locale-compile: 56locale-compile:
54 $(BABEL) -v compile -d locale -l en --use-fuzzy 57 $(BABEL) -v compile -d locale -l en --use-fuzzy
diff --git a/README b/README
index ecb60941..93bbd086 100644
--- a/README
+++ b/README
@@ -4,9 +4,15 @@ GNUnet Website
4 4
5Sourcecode for https://gnunet.org created from the https://taler.net code base. 5Sourcecode for https://gnunet.org created from the https://taler.net code base.
6 6
7Requires python3-jinja2, python3-babel, and gettext. 7Requirements
8------------
9- python3 modules:
10 - python3-jinja2, python3-babel
11- python3 interpreter:
12 - python 3.7 (although any 3.x version should work)
13- gettext
14- sassc, to compile the stylesheets
8 15
9The currently supported python3 version is python 3.7.
10 16
11Run "make" to build the HTML. 17Run "make" to build the HTML.
12If you experience a failure related to a python module, run 18If you experience a failure related to a python module, run
@@ -14,6 +20,9 @@ If you experience a failure related to a python module, run
14 20
15Expect it to show up in rendered/en/ and other language folders. 21Expect it to show up in rendered/en/ and other language folders.
16 22
23Run the following to start a python webserver:
24BROWSER=firefox make run
25
17Layout / how this comes to be 26Layout / how this comes to be
18============================= 27=============================
19 28
diff --git a/common/base.j2 b/common/base.j2
index 855956b2..70034222 100644
--- a/common/base.j2
+++ b/common/base.j2
@@ -9,7 +9,7 @@
9 </head> 9 </head>
10 <body id="mybody"> 10 <body id="mybody">
11 {% include "common/navigation.j2.inc" %} 11 {% include "common/navigation.j2.inc" %}
12 <div id="body_content"> 12 <div id="body_content" class="bg-near-white">
13 {% block body_content %}{% endblock %} 13 {% block body_content %}{% endblock %}
14 </div> 14 </div>
15 {% include "common/footer.j2.inc" %} 15 {% include "common/footer.j2.inc" %}
diff --git a/common/footer.j2.inc b/common/footer.j2.inc
index 5afdc45e..5586adf4 100644
--- a/common/footer.j2.inc
+++ b/common/footer.j2.inc
@@ -1,5 +1,5 @@
1<footer id="footer"> 1<footer id="footer" class="near-white bg-near-black">
2 <div class="container-fluid cushion-below"> 2 <div class="container-fluid">
3 <div class="container"> 3 <div class="container">
4 <div class="row"> 4 <div class="row">
5 <div class="col-12 col-sm-4"> 5 <div class="col-12 col-sm-4">
@@ -13,13 +13,13 @@
13 <div class="col-12 col-sm-4"> 13 <div class="col-12 col-sm-4">
14 <ul class="footer-list"> 14 <ul class="footer-list">
15 <li><p><a href="https://bugs.gnunet.org/">{{ _("Bug Tracker") }}</a></p></li> 15 <li><p><a href="https://bugs.gnunet.org/">{{ _("Bug Tracker") }}</a></p></li>
16 <li><p><a href="https://irc.gnunet.org/gnunet">{{ _("IRC archive") }}</a></p></li> 16 <!-- <li><p><a href="https://irc.gnunet.org/gnunet">{{ _("IRC archive") }}</a></p></li> -->
17 </ul> 17 </ul>
18 </div> 18 </div>
19 <div class="col-12 col-sm-4"> 19 <div class="col-12 col-sm-4">
20 <ul class="footer-list"> 20 <ul class="footer-list">
21 <li><p><a href="copyright.html">{{ _("Copyright Assignment") }}</a></p></li> 21 <li><p><a href="copyright.html">{{ _("Copyright Assignment") }}</a></p></li>
22 <li><p><a href="https://gitlab.gnunet.org/">{{ _("Continuous Integration") }}</a></p></li> 22 <!-- <li><p><a href="https://gitlab.gnunet.org/">{{ _("Continuous Integration") }}</a></p></li> -->
23 <li><p><a href="https://bib.gnunet.org/">{{ _("Bibliography") }}</a></p></li> 23 <li><p><a href="https://bib.gnunet.org/">{{ _("Bibliography") }}</a></p></li>
24 </ul> 24 </ul>
25 </div> 25 </div>
@@ -29,10 +29,11 @@
29 <div class="container text-center"> 29 <div class="container text-center">
30 <p> 30 <p>
31 {% trans %} 31 {% trans %}
32 Copyright &copy; <a href="ev.html">GNUnet e.V.</a> 2015, 2016, 2017, 2018, 2019<br> 32 Copyright &copy; <a href="ev.html">GNUnet e.V.</a> 2015 &mdash; 2019.
33 This page was created using <a href='https://www.gnu.org/'>Free Software</a> only.<br> 33 <!-- This just takes up space no one is interested in: -->
34 <a href='https://git.gnunet.org/www.git'>Source code of this site.</a><br /> 34 <!-- This page was created using <a href='https://www.gnu.org/'>Free Software</a> only.<br> -->
35 Report issues with this website to <a href='contact.html'>us</a>. 35 <a href='https://git.gnunet.org/www.git'>Source code of this site.</a>
36 <a href='contact.html'>Report issues with this website</a>.
36 {% endtrans %} 37 {% endtrans %}
37 </p> 38 </p>
38 </div> 39 </div>
diff --git a/common/navigation.j2.inc b/common/navigation.j2.inc
index 4243db7b..e187d1ec 100644
--- a/common/navigation.j2.inc
+++ b/common/navigation.j2.inc
@@ -17,14 +17,16 @@
17</noscript> 17</noscript>
18<!-- <nav class="navbar navbar-toggleable navbar-toggleable-md navbar-expand-md navbar-inverse navbar-dark fixed-top bg-dark"> --> 18<!-- <nav class="navbar navbar-toggleable navbar-toggleable-md navbar-expand-md navbar-inverse navbar-dark fixed-top bg-dark"> -->
19<!--<nav class="navbar navbar-expand-md navar-inverse navbar-dark bg-dark fixed-top"> --> 19<!--<nav class="navbar navbar-expand-md navar-inverse navbar-dark bg-dark fixed-top"> -->
20<nav class="navbar navbar-expand-md fixed-top"> 20 <!-- <nav class="navbar navbar-expand-md fixed-top"> -->
21<nav class="navbar navbar-expand-md bg-near-black">
21 <a class="navbar-brand" href="index.html"> 22 <a class="navbar-brand" href="index.html">
22 <!-- 23 <!--
23 TODO: imo this is bad in the navbar. 24 TODO: imo this is bad in the navbar.
24 a readable "gnunet" font-logo would 25 a readable "gnunet" font-logo would
25 be better for orientation. 26 be better for orientation.
26 --> 27 -->
27 <img src="{{ url('static/images/gnunet-icon.png') }}" alt="GNUnet Home Icon" /> 28 <!-- <img src="{{ url('static/images/gnunet-icon.png') }}" alt="GNUnet Home Icon" /> -->
29 <h1>GNUnet</h1>
28 </a> 30 </a>
29 31
30 <!-- menu button --> 32 <!-- menu button -->
@@ -40,7 +42,7 @@
40 <!-- /menu button --> 42 <!-- /menu button -->
41 43
42 <!-- navbar --> 44 <!-- navbar -->
43 <div class="collapse navbar-collapse" id="navbarMain"> 45 <div class="collapse navbar-collapse bg-near-black" id="navbarMain">
44 <ul class="navbar-nav mr-auto nav"> 46 <ul class="navbar-nav mr-auto nav">
45 <li class="nav-item dropdown"> 47 <li class="nav-item dropdown">
46 <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" 48 <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
diff --git a/static/styles.css b/static/styles.css
index a1813870..199dd9eb 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,326 +1,264 @@
1.static-top { 1.static-top {
2 position: fixed; 2 position: fixed;
3 top: 0; 3 top: 0;
4 right: 0; 4 right: 0;
5 left: 0; 5 left: 0;
6 z-index: 3; 6 z-index: 3; }
7}
8
9.skip {
10 display:none!important;
11}
12 7
13.skip { 8.skip {
9 display: none !important;
10 position: absolute;
11 top: 0;
12 left: 0;
13 width: 100%;
14 font-size: .857143em; }
15 .skip li {
16 position: absolute;
17 z-index: 1;
18 margin: 0; }
19 .skip a {
14 position: absolute; 20 position: absolute;
15 top: 0; 21 left: -9999px; }
16 left: 0; 22 .skip a:active, .skip a:focus {
17 width: 100%; 23 display: block;
18 font-size: .857143em; 24 position: static;
19} 25 left: 0;
20 26 padding: .25em 1em; }
21.skip li { 27
22 position:absolute; 28.near-white {
23 z-index:1; 29 color: #f4f4f4; }
24 margin:0; 30
25} 31.near-black {
26.skip a { 32 color: #111; }
27 position:absolute; 33
28 left:-9999px; 34.dark-grey {
29} 35 color: #333; }
30.skip a:active, 36
31.skip a:focus { 37.blue {
32 display:block; 38 color: #357edd; }
33 position:static; 39
34 left:0; 40.bg-near-white {
35 padding:.25em 1em; 41 background-color: #f4f4f4; }
36} 42
43.bg-near-black {
44 background-color: #111; }
37 45
38code { 46code {
39 margin-bottom: 1em; 47 margin-bottom: 1em; }
40}
41 48
42/* hyperlinks and buttons */ 49#body_content a {
43#body_content a, 50 text-decoration: underline;
44#body_content a:link, 51 color: #357edd; }
45#body_content a:visited { 52 #body_content a:link, #body_content a:visited {
46 text-decoration: underline; 53 text-decoration: underline;
47 color: black; 54 color: #357edd; }
48} 55
49a.btn, 56a.btn {
50a.btn:link, 57 text-decoration: none !important;
51a.btn:visited { 58 color: white !important; }
59 a.btn:link, a.btn:visited {
52 text-decoration: none !important; 60 text-decoration: none !important;
53 color: white !important; 61 color: white !important; }
54} 62
55/* For reference if bootstrap does not cover the main-Element issue in IE9-11 */
56/*
57main {
58 display:block;
59}
60*/
61/* There's a fixed navbar that is 3.5rem tall */
62body {
63 padding-top: 3.5rem;
64}
65
66/*
67 Hover effects with this color don't work out!
68 See https://gnunet.org/bugs/view.php?id=5570
69*/
70/*
71#body_content a:hover {
72 transition: background-color 0.7s;
73 background-color: #d00;
74 border-color: #fff;
75 color: white !important;
76}
77*/
78.team { 63.team {
79 padding: 75px 0; 64 padding: 75px 0; }
80} 65
81h6.description { 66h6.description {
82 font-weight: bold; 67 font-weight: bold;
83 letter-spacing: 2px; 68 letter-spacing: 2px;
84 color: #999; 69 color: #999;
85 border-bottom: 1px solid rgba(0, 0, 0, 0.1); 70 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
86 padding-bottom: 5px; 71 padding-bottom: 5px; }
87} 72
88.profile { 73.profile {
89 margin-top: 25px; 74 margin-top: 25px; }
90} 75 .profile h1 {
91.profile h1{
92 font-weight: normal; 76 font-weight: normal;
93 font-size: 20px; 77 font-size: 20px;
94 margin: 10px 0 0 0; 78 margin: 10px 0 0 0; }
95} 79 .profile h2 {
96.profile h2{
97 font-size: 14px; 80 font-size: 14px;
98 font-weight: lighter; 81 font-weight: lighter;
99 margin-top: 5px; 82 margin-top: 5px; }
100} 83 .profile .img-box {
101.profile .img-box {
102 opacity: 1; 84 opacity: 1;
103 display: block; 85 display: block;
104 position: relative; 86 position: relative;
105 min-height: 160px; 87 min-height: 160px; }
106} 88 .profile .img-box:after {
107.profile .img-box:after{ 89 content: "";
108 content:""; 90 opacity: 0;
109 opacity: 0; 91 background-color: rgba(0, 0, 0, 0.75);
110 background-color: rgba(0, 0, 0, 0.75); 92 position: absolute;
111 position: absolute; 93 right: 0;
112 right: 0; 94 left: 0;
113 left: 0; 95 top: 0;
114 top: 0; 96 bottom: 0; }
115 bottom: 0; 97 .profile .img-none {
116} 98 text-align: center; }
117 99 .profile .img-none i.fa {
118.profile .img-none { 100 color: #eee;
119 text-align: center; 101 font-size: 8em; }
120} 102
121 103.img-box ul {
122.profile .img-none i.fa { 104 position: absolute;
123 color: #eee; 105 z-index: 2;
124 font-size: 8em; 106 bottom: 50px;
125} 107 text-align: center;
126 108 width: 100%;
127.img-box ul{ 109 padding-left: 0px;
128 position: absolute; 110 height: 0px;
129 z-index: 2; 111 margin: 0px;
130 bottom: 50px; 112 opacity: 0; }
131 text-align: center; 113
132 width: 100%; 114.profile .img-box:after {
133 padding-left: 0px; 115 -webkit-transition: all 0.5s ease-in-out 0s;
134 height: 0px; 116 -moz-transition: all 0.5s ease-in-out 0s;
135 margin: 0px; 117 transition: all 0.5s ease-in-out 0s; }
136 opacity: 0; 118
137} 119.img-box ul {
138.profile .img-box:after, .img-box ul, .img-box ul li { 120 -webkit-transition: all 0.5s ease-in-out 0s;
121 -moz-transition: all 0.5s ease-in-out 0s;
122 transition: all 0.5s ease-in-out 0s; }
123 .img-box ul li {
139 -webkit-transition: all 0.5s ease-in-out 0s; 124 -webkit-transition: all 0.5s ease-in-out 0s;
140 -moz-transition: all 0.5s ease-in-out 0s; 125 -moz-transition: all 0.5s ease-in-out 0s;
141 transition: all 0.5s ease-in-out 0s; 126 transition: all 0.5s ease-in-out 0s; }
142} 127 .img-box ul i {
143.img-box ul i{
144 font-size: 20px; 128 font-size: 20px;
145 letter-spacing: 10px; 129 letter-spacing: 10px; }
146} 130 .img-box ul li {
147.img-box ul li{
148 width: 30px; 131 width: 30px;
149 height: 30px; 132 height: 30px;
150 text-align: center; 133 text-align: center;
151 /*border: 1px solid #88C425;*/
152 color: #88C425; 134 color: #88C425;
153 margin: 2px; 135 margin: 2px;
154 padding: 5px; 136 padding: 5px;
155 display: inline-block; 137 display: inline-block; }
156} 138
157.img-box a { 139.img-box a {
158 color: #fff; 140 color: #fff; }
159} 141
160.img-box:hover:after{ 142.img-box:hover:after, .img-box:hover ul {
161 opacity: 1; 143 opacity: 1; }
162} 144
163.img-box:hover ul{
164 opacity: 1;
165}
166.img-box ul a { 145.img-box ul a {
167 -webkit-transition: all 0.3s ease-in-out 0s; 146 -webkit-transition: all 0.3s ease-in-out 0s;
168 -moz-transition: all 0.3s ease-in-out 0s; 147 -moz-transition: all 0.3s ease-in-out 0s;
169 transition: all 0.3s ease-in-out 0s; 148 transition: all 0.3s ease-in-out 0s; }
170} 149
171.img-box a:hover li{ 150.img-box a:hover li {
172 border-color: #fff; 151 border-color: #fff;
173 color: #88C425; 152 color: #88C425; }
174} 153
175i.red { 154i.red {
176 color: #BC0213; 155 color: #BC0213; }
177} 156
178.btn-primary { 157.btn-primary {
179 color: #fff; 158 color: #fff;
180 background-color: #678; 159 background-color: #678;
181 border-color: #68a; 160 border-color: #68a; }
182}
183a.btn:hover {
184 transition: background-color 0.7s;
185 background-color: #d00;
186 border-color: #fff;
187 color: white !important;
188}
189 161
162a.btn:hover {
163 transition: background-color 0.7s;
164 background-color: #d00;
165 border-color: #fff;
166 color: white !important; }
190 167
191body .banner { 168body .banner {
192 color: white; 169 color: white;
193 padding-top: 20px; 170 padding-top: 20px;
194 padding-bottom: 20px; 171 padding-bottom: 20px; }
195}
196#body_content .banner a {
197 color: white;
198}
199 172
173#body_content .banner a {
174 color: white; }
200 175
201.lang-slector { 176.lang-slector {
202 float: right; 177 float: right;
203 padding-top: 2mm; 178 padding-top: 2mm;
204 padding-bottom: 4mm; 179 padding-bottom: 4mm;
205 margin-left: 15px; 180 margin-left: 15px;
206 margin-right: 15px; 181 margin-right: 15px; }
207}
208 182
209html { 183html {
210 overflow-y: scroll; 184 overflow-y: scroll; }
211}
212 185
213.dark { 186.dark {
214 background-color: #333; 187 background-color: #333;
215 color: white; 188 color: white; }
216}
217 189
218.c_acronym { 190.c_acronym {
219 background-color: #68a; 191 background-color: #68a;
220 color: white; 192 color: white; }
221}
222 193
223 194footer a {
224footer a, 195 text-decoration: underline;
225footer a:link, 196 color: white; }
226footer a:visited { 197 footer a:link, footer a:visited {
227 text-decoration: underline; 198 text-decoration: underline;
228 color: white; 199 color: white; }
229} 200 footer a:hover {
230
231footer a:hover {
232 transition: background-color 0.3s; 201 transition: background-color 0.3s;
233 background-color: rgba(100, 100, 100, 0.5); 202 background-color: rgba(100, 100, 100, 0.5); }
234}
235 203
236.c_intro { 204.c_intro {
237 min-height: 97vh; 205 min-height: 97vh; }
238}
239 206
240/* don't show the language selector in the dropdown on mobile devices,
241 * since it's in the top bar already.
242 */
243.in .nav-lang { 207.in .nav-lang {
244 display: none; 208 display: none; }
245}
246 209
247.mobile-lang { 210.mobile-lang {
248 margin-left:5px; 211 margin-left: 5px;
249 margin-top: 8px; 212 margin-top: 8px; }
250}
251 213
252#mybody { 214#mybody {
253 /* override ugly bootstrap defaults */ 215 color: black; }
254 color: black;
255}
256 216
257.btn-dark { 217.btn-dark {
258 background-color: #999; 218 background-color: #999; }
259}
260
261 219
262#mybody nav { 220#mybody nav {
263 border-radius: 0px; 221 border-radius: 0px;
264 padding: 10px; 222 padding: 10px; }
265} 223
266.index-logo { 224.index-logo {
267 text-align: center; 225 text-align: center; }
268}
269 226
270footer { 227footer {
271 padding-top: 2em; 228 padding-top: 2em;
272 margin-top: 2em; 229 margin-top: 2em; }
273 background-color: #333;
274 color: white;
275}
276 230
277#body_content .container-wide { 231#body_content {
232 min-height: 80vh; }
233 #body_content .container-wide {
278 margin-bottom: 2em; 234 margin-bottom: 2em;
279 padding-top: 1em; 235 padding-top: 1em;
280 padding-bottom: 1em; 236 padding-bottom: 1em;
281 padding-left: 2em; 237 padding-left: 2em;
282 padding-right: 2em; 238 padding-right: 2em; }
283} 239 #body_content .container {
284#body_content .container {
285 margin-bottom: 2em;
286 padding-top: 1em; 240 padding-top: 1em;
287 padding-bottom: 1em; 241 padding-bottom: 1em;
288 padding-left: 2em; 242 padding-left: 2em;
289 padding-right: 2em; 243 padding-right: 2em;
290 max-width: 80em; 244 max-width: 80em; }
291} 245 #body_content .jumbotron {
292 246 margin-bottom: 0px; }
293#body_content {
294 /* push footer down */
295 min-height: 80vh;
296 /* space for the nav */
297 padding-top: 70px;
298}
299 247
300.adorn_h3_bracket h3::before { 248.adorn_h3_bracket h3::before {
301 content: "⊛"; 249 content: "#";
302 color: #333; 250 color: #333;
303 margin-right: 0.5em; 251 margin-right: 0.5em; }
304}
305 252
306.footer-list { 253.footer-list {
307 list-style: none; 254 list-style: none; }
308}
309 255
310.cushion-above { 256.cushion-above {
311 padding-top: 2em; 257 padding-top: 2em; }
312}
313 258
314.cushion-below { 259.cushion-below {
315 padding-bottom: 2em; 260 padding-bottom: 2em; }
316}
317 261
318.invert { 262.invert {
319 -webkit-filter: invert(100%); 263 -webkit-filter: invert(100%);
320 filter: invert(100%); 264 filter: invert(100%); }
321}
322
323#body_content .jumbotron {
324 background-color: #333;
325 margin-bottom: 0px;
326}
diff --git a/static/styles.sass b/static/styles.sass
new file mode 100644
index 00000000..a281f4d0
--- /dev/null
+++ b/static/styles.sass
@@ -0,0 +1,275 @@
1.static-top
2 position: fixed
3 top: 0
4 right: 0
5 left: 0
6 z-index: 3
7
8.skip
9 display: none !important
10 position: absolute
11 top: 0
12 left: 0
13 width: 100%
14 font-size: .857143em
15 li
16 position: absolute
17 z-index: 1
18 margin: 0
19 a
20 position: absolute
21 left: -9999px
22 &:active, &:focus
23 display: block
24 position: static
25 left: 0
26 padding: .25em 1em
27
28// text colors
29
30.near-white
31 color: #f4f4f4
32
33.near-black
34 color: #111
35
36.dark-grey
37 color: #333
38
39.blue
40 color: #357edd
41
42// background colors
43
44.bg-near-white
45 background-color: #f4f4f4
46
47.bg-near-black
48 background-color: #111
49
50code
51 margin-bottom: 1em
52
53// hyperlinks and buttons
54
55#body_content a
56 text-decoration: underline
57 color: #357edd
58 &:link, &:visited
59 text-decoration: underline
60 color: #357edd
61
62a.btn
63 text-decoration: none !important
64 color: white !important
65 &:link, &:visited
66 text-decoration: none !important
67 color: white !important
68
69.team
70 padding: 75px 0
71
72h6.description
73 font-weight: bold
74 letter-spacing: 2px
75 color: #999
76 border-bottom: 1px solid rgba(0, 0, 0, 0.1)
77 padding-bottom: 5px
78
79.profile
80 margin-top: 25px
81 h1
82 font-weight: normal
83 font-size: 20px
84 margin: 10px 0 0 0
85 h2
86 font-size: 14px
87 font-weight: lighter
88 margin-top: 5px
89 .img-box
90 opacity: 1
91 display: block
92 position: relative
93 min-height: 160px
94 &:after
95 content: ""
96 opacity: 0
97 background-color: rgba(0, 0, 0, 0.75)
98 position: absolute
99 right: 0
100 left: 0
101 top: 0
102 bottom: 0
103 .img-none
104 text-align: center
105 i.fa
106 color: #eee
107 font-size: 8em
108
109.img-box ul
110 position: absolute
111 z-index: 2
112 bottom: 50px
113 text-align: center
114 width: 100%
115 padding-left: 0px
116 height: 0px
117 margin: 0px
118 opacity: 0
119
120.profile .img-box:after
121 -webkit-transition: all 0.5s ease-in-out 0s
122 -moz-transition: all 0.5s ease-in-out 0s
123 transition: all 0.5s ease-in-out 0s
124
125.img-box
126 ul
127 -webkit-transition: all 0.5s ease-in-out 0s
128 -moz-transition: all 0.5s ease-in-out 0s
129 transition: all 0.5s ease-in-out 0s
130 li
131 -webkit-transition: all 0.5s ease-in-out 0s
132 -moz-transition: all 0.5s ease-in-out 0s
133 transition: all 0.5s ease-in-out 0s
134 i
135 font-size: 20px
136 letter-spacing: 10px
137 li
138 width: 30px
139 height: 30px
140 text-align: center
141 color: #88C425
142 margin: 2px
143 padding: 5px
144 display: inline-block
145 a
146 color: #fff
147 &:hover
148 &:after, ul
149 opacity: 1
150 ul a
151 -webkit-transition: all 0.3s ease-in-out 0s
152 -moz-transition: all 0.3s ease-in-out 0s
153 transition: all 0.3s ease-in-out 0s
154 a:hover li
155 border-color: #fff
156 color: #88C425
157
158i.red
159 color: #BC0213
160
161.btn-primary
162 color: #fff
163 background-color: #678
164 border-color: #68a
165
166a.btn:hover
167 transition: background-color 0.7s
168 background-color: #d00
169 border-color: #fff
170 color: white !important
171
172body .banner
173 color: white
174 padding-top: 20px
175 padding-bottom: 20px
176
177#body_content .banner a
178 color: white
179
180.lang-slector
181 float: right
182 padding-top: 2mm
183 padding-bottom: 4mm
184 margin-left: 15px
185 margin-right: 15px
186
187html
188 overflow-y: scroll
189
190.dark
191 background-color: #333
192 color: white
193
194.c_acronym
195 background-color: #68a
196 color: white
197
198footer a
199 text-decoration: underline
200 color: white
201 &:link, &:visited
202 text-decoration: underline
203 color: white
204 &:hover
205 transition: background-color 0.3s
206 background-color: rgba(100, 100, 100, 0.5)
207
208.c_intro
209 min-height: 97vh
210
211// don't show the language selector in the dropdown on mobile devices,
212// since it's in the top bar already.
213
214.in .nav-lang
215 display: none
216
217.mobile-lang
218 margin-left: 5px
219 margin-top: 8px
220
221#mybody
222 // override ugly bootstrap defaults
223 color: black
224
225.btn-dark
226 background-color: #999
227
228#mybody nav
229 border-radius: 0px
230 padding: 10px
231
232.index-logo
233 text-align: center
234
235footer
236 padding-top: 2em
237 margin-top: 2em
238
239#body_content
240 .container-wide
241 margin-bottom: 2em
242 padding-top: 1em
243 padding-bottom: 1em
244 padding-left: 2em
245 padding-right: 2em
246 .container
247 padding-top: 1em
248 padding-bottom: 1em
249 padding-left: 2em
250 padding-right: 2em
251 max-width: 80em
252 .jumbotron
253 margin-bottom: 0px
254 // push footer down
255 min-height: 80vh
256 // space for the nav
257 // padding-top: 70px;
258
259.adorn_h3_bracket h3::before
260 content: "#"
261 color: #333
262 margin-right: 0.5em
263
264.footer-list
265 list-style: none
266
267.cushion-above
268 padding-top: 2em
269
270.cushion-below
271 padding-bottom: 2em
272
273.invert
274 -webkit-filter: invert(100%)
275 filter: invert(100%)
diff --git a/template/ev.html.j2 b/template/ev.html.j2
index e4fb802c..31c580d9 100644
--- a/template/ev.html.j2
+++ b/template/ev.html.j2
@@ -26,7 +26,7 @@
26 </div> 26 </div>
27</div> 27</div>
28 28
29<div class="container adorn_h3_bracket"> 29<div class="container">
30 <div class="row"> 30 <div class="row">
31 <div class="col-lg-6"> 31 <div class="col-lg-6">
32 <h3>{{ _("Governance") }}</h3> 32 <h3>{{ _("Governance") }}</h3>
diff --git a/template/gnurl.html.j2 b/template/gnurl.html.j2
index 006b8623..8834e967 100644
--- a/template/gnurl.html.j2
+++ b/template/gnurl.html.j2
@@ -118,7 +118,7 @@
118 </article> 118 </article>
119</div> 119</div>
120 120
121<div class="container adorn_h3_bracket"> 121<div class="container">
122 <div class="row"> 122 <div class="row">
123 <div class="col-lg-6"> 123 <div class="col-lg-6">
124 <h3>{{ _("Source Code") }}</h3> 124 <h3>{{ _("Source Code") }}</h3>
diff --git a/template/index.html.j2 b/template/index.html.j2
index 54b8c662..23ba1001 100644
--- a/template/index.html.j2
+++ b/template/index.html.j2
@@ -1,14 +1,14 @@
1{% extends "common/base.j2" %} 1{% extends "common/base.j2" %}
2{% block body_content %} 2{% block body_content %}
3<!-- Jumbotron --> 3<!-- Jumbotron -->
4<div class="jumbotron dark"> 4<div class="jumbotron bg-near-black">
5 <div class="container dark"> 5 <div class="container bg-near-black">
6 <div class="row"> 6 <div class="row bg-near-black">
7 <div class="col-lg-6"> 7 <div class="col-lg-6">
8 <center><img src="{{ url('static/images/gnunet-anonymous-logo.png') }}" alt="GNUnet" /></center> 8 <center><img src="{{ url('static/images/gnunet-anonymous-logo.png') }}" alt="GNUnet" /></center>
9 </div> 9 </div>
10 <div class="col-lg-6"> 10 <div class="col-lg-6 near-white bg-near-black">
11 <p class="dark"> 11 <p>
12 {% trans %} 12 {% trans %}
13 GNUnet is a new network protocol stack for building secure, distributed, 13 GNUnet is a new network protocol stack for building secure, distributed,
14 and privacy-preserving applications. With strong roots in academic 14 and privacy-preserving applications. With strong roots in academic
@@ -66,13 +66,13 @@
66 </div> 66 </div>
67</div> 67</div>
68 68
69<!--<article>-->
70 69
71<div class="container-fluid adorn_h3_bracket c_acronym"> 70
71<div class="container-fluid c_acronym">
72 <div class="container"> 72 <div class="container">
73 <div class="row"> 73 <div class="row">
74 <div class="container text-center"> 74 <div class="container text-center">
75 <h2>{% trans %}The Internet of tomorrow needs GNUnet today{% endtrans %}</h2> 75 <h1>{% trans %}The Internet of tomorrow needs GNUnet today{% endtrans %}</h1>
76 </div> 76 </div>
77 </div> 77 </div>
78 <div class="row"> 78 <div class="row">
@@ -153,7 +153,8 @@
153 which <a 153 which <a
154 href="https://www.freehaven.net/anonbib/cache/websitefingerprinting-pets2016.pdf">enables 154 href="https://www.freehaven.net/anonbib/cache/websitefingerprinting-pets2016.pdf">enables
155 reverse-engineering pages visited via website 155 reverse-engineering pages visited via website
156 fingerprinting</a>. --> 156 fingerprinting</a>.
157 -->
157 {% endtrans %} 158 {% endtrans %}
158 <p> 159 <p>
159 {% trans %} 160 {% trans %}
@@ -192,35 +193,23 @@
192 </div> 193 </div>
193 </div> 194 </div>
194 </div> 195 </div>
195 <!-- 196</div>
197
198
199
200<div class="container-fluid">
196 <div class="container"> 201 <div class="container">
197 <div class="row"> 202 <div class="row">
198 <div class="container text-center bg-primary"> 203 <div class="container text-center">
199 <h3> 204 <h1>
200 {% trans %} 205 {% trans %}
201 GNUnet aims to enable a secure and ethical Internet. 206 Featured Applications
202 {% endtrans %} 207 {% endtrans %}
203 </h3> 208 </h1>
204 </div> 209 </div>
205 </div> 210 </div>
206 </div> 211 <div class="row">
207 //--> 212 <div class="col-lg-4">
208</div>
209
210
211
212<div class="container adorn_h3_bracket">
213 <div class="row">
214 <div class="container text-center">
215 <h2>
216 {% trans %}
217 Featured Applications
218 {% endtrans %}
219 </h2>
220 </div>
221 </div>
222 <div class="row">
223 <div class="col-lg-4">
224 <section> 213 <section>
225 <h3>{{ _("GNU Taler") }}</h3> 214 <h3>{{ _("GNU Taler") }}</h3>
226 <p> 215 <p>
@@ -292,51 +281,56 @@
292 </section> 281 </section>
293 </div> 282 </div>
294 </div> 283 </div>
284 </div>
295</div> 285</div>
296 286
297<div class="container adorn_h3_bracket"> 287<div class="container-fluid bg-dark text-white">
298 <div class="row"> 288 <div class="container">
299 <div class="container text-center"> 289 <div class="row bg-dark">
300 <h2> 290 <div class="container bg-dark text-center">
301 {% trans %} 291 <h1>
302 Upcoming Applications 292 {% trans %}
303 {% endtrans %} 293 Upcoming Applications
304 </h2> 294 {% endtrans %}
305 </div> 295 </h1>
306 <div class="col-lg-6"> 296 </div>
307 <section> 297 </div>
308 <h3>{{ _("secushare") }}</h3> 298 <div class="row">
309 <p> 299 <div class="col-lg-4">
310 {% trans %} 300 <section>
311 <a href="https://secushare.org/">secushare</a> 301 <h3>{{ _("secushare") }}</h3>
312 is creating a decentralized social networking 302 <p>
313 application on top of GNUnet. Using overlay 303 {% trans %}
314 multicast and the extensible PSYC protocol, notifications are 304 <a href="https://secushare.org/">secushare</a>
315 distributed end-to-end encrypted to authorized recipients only. 305 is creating a decentralized social networking
316 {% endtrans %} 306 application on top of GNUnet. Using overlay
317 </p> 307 multicast and the extensible PSYC protocol, notifications are
318 </section> 308 distributed end-to-end encrypted to authorized recipients only.
319 </div> 309 {% endtrans %}
320 <div class="col-lg-6"> 310 </p>
321 <section> 311 </section>
322 <h3>{{ _("pretty Easy privacy") }}</h3> 312 </div>
323 <p> 313 <div class="col-lg-4">
324 {% trans %} 314 <section>
325 <a href="https://pep.foundation/">pretty Easy privacy</a> (p&#8801;p) 315 <h3>{{ _("pretty Easy privacy") }}</h3>
326 is creating a usable end-to-end encrypted e-mail solution using 316 <p>
327 opportunistic key exchange. 317 {% trans %}
328 p&#8801;p will use GNUnet to protect metadata and exploit new 318 <a href="https://pep.foundation/">pretty Easy privacy</a> (p&#8801;p)
329 cryptographic protocols to verify keys. 319 is creating a usable end-to-end encrypted e-mail solution using
330 {% endtrans %} 320 opportunistic key exchange.
331 </p> 321 p&#8801;p will use GNUnet to protect metadata and exploit new
332 </section> 322 cryptographic protocols to verify keys.
323 {% endtrans %}
324 </p>
325 </section>
326 </div>
327 </div>
333 </div> 328 </div>
334 </div>
335</div> 329</div>
336 330
337<!--</article>-->
338 331
339<div class="container adorn_h3_bracket"> 332
333<div class="container">
340 <div class="row"> 334 <div class="row">
341 <div class="container text-center"> 335 <div class="container text-center">
342 <h2>{{ _("News") }}</h2> 336 <h2>{{ _("News") }}</h2>
diff --git a/template/video.html.j2 b/template/video.html.j2
index 8198d3d4..fbfa1b6f 100644
--- a/template/video.html.j2
+++ b/template/video.html.j2
@@ -1,7 +1,7 @@
1{% extends "common/base.j2" %} 1{% extends "common/base.j2" %}
2{% block body_content %} 2{% block body_content %}
3<div class="container adorn_h3_bracket"> 3<div class="container">
4<div class="container adorn_h3_bracket"> 4<div class="container">
5 <div class="container"> 5 <div class="container">
6 <div class="text-center"> 6 <div class="text-center">
7 <header> 7 <header>
generated by cgit v1.2.3 (git 2.39.1) at 2025-03-28 00:04:58 +0000