Skip to content

Commit df377a9

Browse files
mmk2410mmk2410
committed
Small design improvements
1 parent 421a68d commit df377a9

2 files changed

Lines changed: 127 additions & 105 deletions

File tree

‎css/ulmapi.css‎

Lines changed: 103 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,156 +1,170 @@
1-
body{
1+
body {
22
background: #ddd;
3-
font-family: "Fira Sans", Helvetica, sans-serif;
3+
font-family: "Fira Sans", Helvetica, sans-serif;
44
}
55

6-
.site-nav{
7-
padding: 10px 0px;
6+
.site-nav {
7+
padding: 10px 0px;
88
}
99

1010
h2 {
11-
margin-bottom: 30px;
11+
margin-bottom: 30px;
1212
}
1313

1414
h1 {
15-
word-break: break-all;
15+
word-break: break-all;
1616
}
1717

1818
.wrapper {
19-
padding-top: 15px;
19+
padding-top: 15px;
2020
}
2121

22-
.hero-unit{
23-
background: #FFF;
24-
text-align:center;
22+
.hero-unit {
23+
background: #FFF;
24+
text-align:center;
2525
}
2626

27-
.container{
27+
.container {
2828
background: #FFF;
2929
padding: 20px;
3030
}
3131

3232
.darker {
33-
background: #666;
34-
color: #EEE;
35-
border-left: 10px #666;
33+
background: #666;
34+
color: #EEE;
35+
border-left: 10px #666;
3636
}
3737

38-
li{
39-
color:#404040;
38+
li {
39+
color: #404040;
4040
}
4141

42-
.box{
43-
margin-left:auto;
44-
margin-right:auto;zoom:1;;
45-
background-color:#fff;
46-
height:100%;
47-
min-height:100%;
48-
box-shadow: 0px 3px 4px 2px #888;
42+
.box {
43+
margin-left: auto;
44+
margin-right: auto;
45+
zoom: 1;
46+
background-color: #fff;
47+
height: 100%;
48+
min-height: 100%;
49+
box-shadow: 0px 3px 4px 2px #888;
4950
}
5051

51-
.box:before,.box:after{
52-
display:table;
53-
content:"";zoom:1
52+
.box:before,.box:after {
53+
display: table;
54+
content: "";
55+
zoom: 1;
5456
}
5557

56-
.darkcontainer{
57-
margin-left:auto;
58-
margin-right:auto;zoom:1;
59-
margin-bottom:20px;
60-
margin-top:20px;;
61-
background-color: #ddd;
62-
text-align:center;
63-
height:28px;
58+
.darkcontainer {
59+
margin-left: auto;
60+
margin-right: auto;
61+
zoom: 1;
62+
margin-bottom: 20px;
63+
margin-top: 20px;;
64+
background-color: #ddd;
65+
text-align: center;
66+
height: 28px;
6467
}
6568

66-
.darkcontainer:before,.darkcontainer:after{display:table;content:"";zoom:1}
67-
68-
69+
.darkcontainer:before,.darkcontainer:after {
70+
display:table;
71+
content:"";
72+
zoom:1;
73+
}
6974

70-
.container h1{
71-
font-family: 'Open Sans', sans-serif;
72-
font-variant:small-caps;
73-
color:#333;
74-
font-size:3em;
75-
/* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8), 0 0 10px #999; */
76-
padding:5px;
77-
margin-top: 6px;
78-
word-wrap: wrap-all;
75+
.container h1 {
76+
font-family: 'Open Sans', sans-serif;
77+
font-variant: small-caps;
78+
color: #333;
79+
font-size: 3em;
80+
/* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8), 0 0 10px #999; */
81+
padding: 5px;
82+
margin-top: 6px;
83+
word-wrap: wrap-all;
7984
}
8085

8186
.row {
82-
padding: 0px 0px;
87+
padding: 0px 0px;
8388
}
8489

8590
.date {
86-
text-align:center;
91+
text-align: center;
8792
}
8893

8994
.next-meeting {
90-
text-align: center;
95+
text-align: center;
9196
background: #eee none repeat scroll 0% 0%;
9297
padding-bottom: 1px;
9398
padding-top: 4px;
94-
border-radius: 2px;
95-
margin-top: 20px;
99+
border-radius: 2px;
100+
margin-top: 20px;
96101
}
97102

98103
.grid {
99-
float:left;
100-
margin-right:11px;
104+
float: left;
105+
margin-right: 11px;
101106
}
102107

103108
.grid-last {
104-
float:left;
109+
float: left;
105110
}
106111

107112
.grid img, .grid-last img {
108-
border:1px solid #000;
113+
border: 1px solid #000;
109114
}
110115

111116
.grid img:hover, .grid-last img:hover {
112-
border:1px solid #0069D6;
117+
border: 1px solid #0069D6;
113118
}
114119

115120
.grid .desc, .grid-last .desc {
116-
margin-bottom: 4px;
117-
width:220px;
118-
height:40px;
121+
margin-bottom: 4px;
122+
width: 220px;
123+
height: 40px;
119124
}
120125

121126
.grid .desc-large, .grid-last .desc-large {
122-
margin-bottom: 4px;
123-
width:220px;
124-
height:60px;
127+
margin-bottom: 4px;
128+
width: 220px;
129+
height: 60px;
125130
}
126131

127132
.grid-separator {
128-
clear:both;
129-
height:25px;
133+
clear: both;
134+
height: 25px;
135+
}
136+
137+
.item {
138+
min-height: 350px;
139+
}
140+
141+
.item-img {
142+
min-height: 150px;
143+
text-align: center;
130144
}
131145

132-
footer>p{
133-
margin: 15px;
146+
footer>p {
147+
margin: 15px;
134148
}
135149

136150
/**
137151
* Images in posts.
138152
*/
139153

140154
img {
141-
margin-top: 20px;
142-
margin-bottom: 20px;
143-
max-width: 100%;
144-
max-height: 400px;
155+
margin-top: 20px;
156+
margin-bottom: 20px;
157+
max-width: 100%;
158+
max-height: 400px;
145159
}
146160

147161
.img-responsive {
148-
max-height: 400px;
149-
max-width: 90%;
150-
margin-right: auto;
151-
margin-left: auto;
152-
margin-top: 50px;
153-
margin-bottom: 50px;
162+
max-height: 400px;
163+
max-width: 90%;
164+
margin-right: auto;
165+
margin-left: auto;
166+
margin-top: 50px;
167+
margin-bottom: 50px;
154168
}
155169

156170
/**
@@ -160,12 +174,21 @@ img {
160174
display: inline-block;
161175
width: 16px;
162176
height: 16px;
163-
vertical-align: middle; }
177+
vertical-align: middle;
178+
}
179+
164180
.icon > svg path {
165-
fill: #828282; }
181+
fill: #828282;
182+
}
166183

167184
@media(min-width: 770px) {
168-
.header-image{
169-
float: left;
185+
.header-image {
186+
float: left;
187+
}
188+
}
189+
190+
@media screen and (max-width: 750px) {
191+
.item {
192+
max-width: initial;
170193
}
171194
}

‎index.html‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -78,14 +78,14 @@ <h4>N&auml;chstes Treffen</h4>
7878
<div class="darkcontainer"></div>
7979
<div class="container">
8080
<div class="row-same-height row-centered">
81-
<h2><a name="aktuelles"></a>Aktuelles</h2>
81+
<h2><a name="aktuelles"></a>Aktuelles</h2>
8282
{% assign loopindex = 0 %}
8383
{% for post in site.posts %}
8484
{% if loopindex < site.amountofnews %} {% unless post.isarchive %}
8585
{% assign loopindex=loopindex | plus:1 %}
8686
{% assign testli=loopindex | modulo:4 %}
87-
<div class="col-md-3 col-sm-6 col-xs-12" style="max-width:250px;min-height:300px;">
88-
<div style="min-height:150px;">
87+
<div class="item col-md-3 col-sm-6 col-xs-12">
88+
<div class="item-img">
8989
{% if post.remote %}
9090
{% if post.remote == "noremote" %}
9191
{% else %}
@@ -97,23 +97,22 @@ <h2><a name="aktuelles"></a>Aktuelles</h2>
9797
<img width="220px" src="{{ post.img | prepend: site.baseurl }}" alt="{{ post.imgalt }}"
9898
title="{{ post.title }}" />
9999
</a>
100-
</div>
101-
<br>
100+
</div>
102101

103-
<div class="desc{% if post.largedesc %}{{"-large"}}{% endif %}">
104-
{% if post.remote %}
105-
{{post.content}}
106-
{% else %}
107-
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title}}</a><br>
108-
{% if post.nopreview %}
109-
{%else%}
110-
{{ post.excerpt }}
111-
{%endif%}
112-
{%endif%}
113-
</div>
114-
</div> <!-- END grid/grid-last -->
115-
{% if testli == 0 %} {% endif %}
116-
{% endunless %}{% endif %}
102+
<div class="desc{% if post.largedesc %}{{"-large"}}{% endif %}">
103+
{% if post.remote %}
104+
{{post.content}}
105+
{% else %}
106+
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title}}</a><br>
107+
{% if post.nopreview %}
108+
{%else%}
109+
{{ post.excerpt }}
110+
{%endif%}
111+
{%endif%}
112+
</div>
113+
</div> <!-- END grid/grid-last -->
114+
{% if testli == 0 %} {% endif %}
115+
{% endunless %}{% endif %}
117116
{% endfor %}
118117
</div><!-- END row -->
119118
</div><!-- END Container -->
@@ -127,8 +126,8 @@ <h2><a name="projekte"></a>Projekte</h2>
127126
{% if post.categories contains "project" %}{% unless post.isarchive %}
128127
{% assign loopindex=loopindex | plus:1 %}
129128
{% assign testli=loopindex | modulo:4 %}
130-
<div class="col-md-3 col-sm-6 col-xs-12" style="max-width:250px;min-height:300px;">
131-
<div style="min-height:150px;">
129+
<div class="item col-md-3 col-sm-6 col-xs-12">
130+
<div class="item-img">
132131
{% if post.remote %}
133132
{% if post.remote == "noremote" %}
134133
{% else %}
@@ -140,7 +139,7 @@ <h2><a name="projekte"></a>Projekte</h2>
140139
<img width="220px" src="{{ post.img | prepend: site.baseurl }}" alt="{{ post.imgalt }}"
141140
title="{{ post.title }}" />
142141
</a>
143-
</div><br />
142+
</div>
144143

145144
<div class="desc{% if post.largedesc %}{{"-large"}}{% endif %}">
146145
{% if post.remote %}
@@ -170,8 +169,8 @@ <h2><a name="archiv"></a><a href="/archive/">Archiv</a></h2>
170169
{% if post.isarchive and loopindex < site.amountofarchive %}
171170
{% assign loopindex=loopindex | plus:1 %}
172171
{% assign testli=loopindex | modulo:4 %}
173-
<div class="col-md-3 col-sm-6 col-xs-12" style="max-width:250px;min-height:300px;">
174-
<div style="min-height:150px;">
172+
<div class="item col-md-3 col-sm-6 col-xs-12">
173+
<div class="item-img">
175174
{% if post.remote %}
176175
{% if post.remote == "noremote" %}
177176
{% else %}
@@ -183,7 +182,7 @@ <h2><a name="archiv"></a><a href="/archive/">Archiv</a></h2>
183182
<img width="220px" src="{{ post.img | prepend: site.baseurl }}" alt="{{ post.imgalt }}"
184183
title="{{ post.title }}" />
185184
</a>
186-
</div><br />
185+
</div>
187186

188187
<div class="desc{% if post.largedesc %}{{"-large"}}{% endif %}">
189188
{% if post.remote %}

0 commit comments

Comments
 (0)