Skip to content

Commit 70af9de

Browse files
jotojoto
committed
Modernize layout, update order of projects on home page
1 parent 75212b1 commit 70af9de

File tree

4 files changed

+107
-103
lines changed

4 files changed

+107
-103
lines changed

‎_layouts/default.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
{% endif %}
1515
</head>
1616
<body>
17-
<div id="menu">
17+
<header id="menu">
1818
<ul>
1919
<li><a href="/">HOME</a></li>
2020
<li><a href="/status.html">STATUS</a></li>
@@ -23,9 +23,9 @@
2323
<li><a href="/contact.html">CONTACT</a></li>
2424
<li><a class="github" href="https://github.com/osmcode"><span id="githublink"><img src="/img/github.png" width="16" height="16"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>CODE</a></li>
2525
</ul>
26-
</div>
27-
<div id="content">
26+
</header>
27+
<main>
2828
{{ content }}
29-
</div>
29+
</main>
3030
</body>
3131
</html>

‎contact.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ <h2>Commercial Support</h2>
6161
<div class="impressum">
6262
This web site is maintained by:<br/>
6363
Jochen Topf &middot;
64-
Bayreuther Str. 29&middot;
64+
Bayreuther Str. 29 &middot;
6565
01187 Dresden<br/>
6666
jochen@topf.org &middot;
6767
+49-351-31778688

‎css/main.css‎

Lines changed: 62 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ h3 {
4545
/*
4646
/*****************************************************************************/
4747

48-
#content {
48+
main {
4949
position: relative;
5050
margin: 0 auto;
5151
max-width: 910px;
@@ -66,7 +66,8 @@ h3 {
6666
}
6767

6868
#menu {
69-
background-color: rgba(32, 32, 96, 0.5);
69+
/* background-color: rgba(32, 32, 96, 0.5);*/
70+
background-color: #202060;
7071
text-align: center;
7172
font-size: 90%;
7273
}
@@ -176,41 +177,67 @@ span#githublink {
176177

177178
/*****************************************************************************/
178179

179-
@media all and (min-width: 910px) and (min-device-width: 910px) {
180-
div.major h3 {
181-
font-size: 160%;
182-
margin: 8px 0;
183-
}
180+
div.major-projects {
181+
display: grid;
182+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
183+
row-gap: 10px;
184+
column-gap: 10px;
185+
margin-bottom: 10px;
186+
}
184187

185-
div.major-bottom {
186-
top: 30em;
187-
}
188+
div.major-projects div {
189+
}
188190

189-
div.leftcolumn {
190-
position: absolute;
191-
max-width: 420px;
192-
float: left;
193-
}
191+
div.other-projects {
192+
display: grid;
193+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
194+
row-gap: 10px;
195+
column-gap: 10px;
196+
margin-bottom: 20px;
197+
padding-top: 16px;
198+
}
194199

195-
div.rightcolumn {
196-
position: absolute;
197-
max-width: 420px;
198-
left: 480px;
199-
}
200+
div.sponsoring {
201+
border-top: 1px solid #c0c0c0;
202+
}
200203

201-
div.other-projects {
202-
border-top: 1px dotted #c0c0c0;
203-
position: absolute;
204-
padding: 20px 0 0 0;
205-
top: 42em;
206-
}
204+
.box {
205+
display: block;
206+
padding: 6px 8px 6px 48px;
207+
border-radius: 4px;
208+
text-decoration: none;
209+
background-color: #f8f8f0;
210+
}
207211

208-
div.other-projects h2 {
209-
text-align: center;
210-
font-variant: small-caps;
211-
margin: 0;
212-
padding: 6px 0;
213-
}
212+
.box img {
213+
position: absolute;
214+
margin-left: -40px;
215+
margin-top: 4px;
216+
}
217+
218+
.box a {
219+
text-decoration: none;
220+
}
221+
222+
.box:hover {
223+
background-color: #ffffff;
224+
}
225+
226+
.box:hover h3 {
227+
text-decoration: underline;
228+
}
229+
230+
div.other-projects .box {
231+
padding: 8px 8px 8px 38px;
232+
}
233+
234+
div.other-projects .box img {
235+
margin-left: -24px;
236+
margin-top: 0px;
237+
}
238+
239+
div.other-projects .box h3 {
240+
margin: 0 0 4px 0;
214241
}
215242

216243
/*****************************************************************************/
@@ -234,10 +261,6 @@ div.impressum {
234261
text-decoration: none;
235262
}
236263

237-
div.major .desc:hover, div.other-projects .desc:hover {
238-
background-color: #ffffff;
239-
}
240-
241264
.desc img {
242265
position: absolute;
243266
margin-left: -40px;
@@ -261,22 +284,6 @@ div.major .desc:hover, div.other-projects .desc:hover {
261284
margin: 1px 0 0 40px;
262285
}
263286

264-
div.other-projects .desc {
265-
margin: 0px 0 14px 0px;
266-
padding: 8px 8px 8px 38px;
267-
width: 20em;
268-
float: left;
269-
}
270-
271-
div.other-projects .desc img {
272-
margin-left: -24px;
273-
margin-top: 0px;
274-
}
275-
276-
div.other-projects .desc h3 {
277-
margin: 0 0 4px 0;
278-
}
279-
280287
/*****************************************************************************/
281288

282289
#osmcode {
@@ -333,6 +340,9 @@ div.other-projects .desc h3 {
333340
#osmcode div.subtitle {
334341
margin-left: 205px;
335342
}
343+
#osmcode div.subtitle {
344+
font-size: 150%;
345+
}
336346
}
337347

338348
/*****************************************************************************/

‎index.html‎

Lines changed: 40 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -15,64 +15,58 @@
1515
that data in many different ways. They are intended for developers and
1616
cartographers who want to use OSM data in their own projects.</p>
1717

18-
<div class="major leftcolumn">
19-
<a class="desc" href="/osmium-tool/">
20-
<img src="/img/logo-osmium-tool.svg" width="32" height="32" alt=""/>
21-
<h3>Osmium Tool</h3>
22-
A multipurpose command line tool based on the Osmium Library. With it
23-
you can easily convert OSM files from one format to another, merge and
24-
apply change files and much more.
25-
</a>
26-
</div>
27-
<div class="major rightcolumn">
28-
<a class="desc" href="/libosmium/">
29-
<img src="/img/logo-libosmium.svg" width="32" height="32" alt=""/>
30-
<h3>Osmium Library</h3>
31-
A fast and flexible C++ library for working with OSM data. It
32-
contains building blocks for many typical OSM data handling tasks,
33-
such as reading and writing OSM files, or assembling areas from
34-
multipolygon relations.
35-
</a>
36-
</div>
37-
<div class="major major-bottom leftcolumn">
38-
<a class="desc" href="/node-osmium/">
39-
<img src="/img/logo-node-osmium.svg" width="32" height="32" alt=""/>
40-
<h3>Node Osmium</h3>
41-
The Node.js bindings to Osmium Library bring its power to the
42-
Javascript developer.
43-
</a>
44-
</div>
45-
<div class="major major-bottom rightcolumn">
46-
<a class="desc" href="/pyosmium/">
47-
<img src="/img/logo-pyosmium.svg" width="32" height="32" alt=""/>
48-
<h3>PyOsmium</h3>
49-
With PyOsmium you can use the functionality of the Osmium Library
50-
from Python.
51-
</a>
18+
<div class="major-projects">
19+
<a class="box" href="/osmium-tool/">
20+
<img src="/img/logo-osmium-tool.svg" width="32" height="32" alt=""/>
21+
<h3>Osmium Tool</h3>
22+
A multipurpose command line tool based on the Osmium Library. With it
23+
you can easily convert OSM files from one format to another, merge and
24+
apply change files and much more.
25+
</a>
26+
<a class="box" href="/libosmium/">
27+
<img src="/img/logo-libosmium.svg" width="32" height="32" alt=""/>
28+
<h3>Osmium Library</h3>
29+
A fast and flexible C++ library for working with OSM data. It
30+
contains building blocks for many typical OSM data handling tasks,
31+
such as reading and writing OSM files, or assembling areas from
32+
multipolygon relations.
33+
</a>
34+
<a class="box" href="/pyosmium/">
35+
<img src="/img/logo-pyosmium.svg" width="32" height="32" alt=""/>
36+
<h3>PyOsmium</h3>
37+
With PyOsmium you can use the functionality of the Osmium Library
38+
from Python.
39+
</a>
40+
<a class="box" href="/osmcoastline/">
41+
<img src="/img/logo-osmcoastline.svg" width="32" height="32" alt=""/>
42+
<h3>OSMCoastline</h3>
43+
Extracts coastline data from OpenStreetMap planet file.
44+
</a>
5245
</div>
5346

5447
<div class="other-projects">
55-
<a class="desc" href="/osm-area-tools/">
48+
<a class="box" href="/osm-area-tools/">
5649
<img src="/img/logo-osm-area-tools.svg" width="16" height="16" alt=""/>
5750
<h3>OSM Area Tools</h3>
5851
Debugging and statistic tools for OSM areas (multipolygons).
5952
</a>
60-
<a class="desc" href="/osmcoastline/">
61-
<img src="/img/logo-osmcoastline.svg" width="16" height="16" alt=""/>
62-
<h3>OSMCoastline</h3>
63-
Extracts coastline data from OpenStreetMap planet file.
53+
<a class="box" href="/osmium-contrib/">
54+
<img src="/img/logo-osmium-contrib.svg" width="16" height="16" alt=""/>
55+
<h3>Osmium Contrib</h3>
56+
Various programs showing what you can do with the Osmium Library.
57+
</a>
58+
<a class="box" href="/node-osmium/">
59+
<img src="/img/logo-node-osmium.svg" width="16" height="16" alt=""/>
60+
<h3>Node Osmium</h3>
61+
The Node.js bindings to Osmium Library bring its power to the
62+
Javascript developer.
6463
</a>
65-
<a class="desc" href="/osm-gis-export/">
64+
<a class="box" href="/osm-gis-export/">
6665
<img src="/img/logo-osm-gis-export.svg" width="16" height="16" alt=""/>
6766
<h3>OSM GIS Export</h3>
6867
Export OSM data to GIS formats like Shapefiles, Spatialite, or PostGIS.
6968
</a>
70-
<a class="desc" href="/osmium-contrib/">
71-
<img src="/img/logo-osmium-contrib.svg" width="16" height="16" alt=""/>
72-
<h3>Osmium Contrib</h3>
73-
Various programs showing what you can do with the Osmium Library.
74-
</a>
75-
<a class="desc" href="/osm-testdata/">
69+
<a class="box" href="/osm-testdata/">
7670
<img src="/img/logo-osm-testdata.svg" width="16" height="16" alt=""/>
7771
<h3>OSM Test Data</h3>
7872
OpenStreetMap data to help test your software.

0 commit comments

Comments
 (0)