Skip to content

Commit 75cdbb2

Browse files
bbocbboc
committed
cleaned up and fixed CSS
1 parent 1be112e commit 75cdbb2

File tree

2 files changed

+112
-84
lines changed

2 files changed

+112
-84
lines changed

‎docs/_layouts/default.html‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,11 @@
1414
</head>
1515
<body>
1616
<div class="wrapper">
17-
<header>
18-
<h1>{{ site.title | default: site.github.repository_name }}</h1>
19-
<p>{{ site.description | default: site.github.project_tagline }}</p>
17+
<header class="clearfix">
18+
<div style="float:left">
19+
<h1>{{ site.title | default: site.github.repository_name }}</h1>
20+
<p>{{ site.description | default: site.github.project_tagline }}</p>
21+
</div>
2022
{% include menu.html %}
2123

2224
</header>
@@ -25,11 +27,13 @@ <h1>{{ site.title | default: site.github.repository_name }}</h1>
2527
{{ content }}
2628

2729
</section>
28-
<footer>
29-
<p><img src="/img/s3-logo-sm.png" alt="Sociocracy 3.0 logo" /></p>
30-
<p class="view"><a href="{{ site.github.repository_url }}">View the Project on GitHub <small>{{ github_name }}</small></a></p>
31-
<p>This project is maintained by <a href="http://evolvingcollaboration.com/about-me/">Bernhard Bockelbrink</a>. For more information on S3 see the <a href="http://sociocracy30.org">Sociocracy 3.0 homepage</a>.</p>
32-
<p><small>Hosted on GitHub Pages</small></p>
30+
<footer class="clearfix">
31+
<div style="float:left;"><img src="/img/s3-logo-sm.png" alt="Sociocracy 3.0 logo" /></div>
32+
<div style="float:right;">
33+
<p><a href="{{ site.github.repository_url }}">View the Project on GitHub <small>{{ github_name }}</small></a></p>
34+
<p>This project is maintained by <a href="http://evolvingcollaboration.com/about-me/">Bernhard Bockelbrink</a>. For more information on S3 see the <a href="http://sociocracy30.org">Sociocracy 3.0 homepage</a>.</p>
35+
<p><small>Hosted on GitHub Pages</small></p>
36+
</div>
3337
</footer>
3438
</div>
3539
<script src="{{ '/assets/js/scale.fix.js' | relative_url }}"></script>

‎docs/_sass/jekyll-theme-s3-canvas.scss‎

Lines changed: 100 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,35 @@
33

44
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i|Ubuntu:300,400');
55

6+
7+
/* *******************************************
8+
9+
Colors and Fonts
10+
11+
**********************************************/
12+
13+
614
body {
7-
background-color:#fff;
8-
padding:50px;
9-
font:14px/1.5 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
10-
color:#727272;
11-
font-weight:300;
15+
background-color: #fff;
16+
padding: 50px;
17+
font: 14px/1.5 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
18+
color: #727272;
19+
font-weight: 300;
20+
}
21+
22+
strong {
23+
color:#222;
24+
font-weight:400;
25+
}
26+
small {
27+
font-size:11px;
28+
}
29+
30+
hr {
31+
border:0;
32+
background:#e5e5e5;
33+
height:1px;
34+
margin:0 0 20px;
1235
}
1336

1437
h1, h2, h3, h4, h5, h6 {
@@ -60,7 +83,6 @@ h6 {
6083
font-weight:400;
6184
}
6285

63-
6486
a {
6587
color:#267CB9;
6688
text-decoration:none;
@@ -83,11 +105,6 @@ a:hover small {
83105
color:#777;
84106
}
85107

86-
.wrapper {
87-
width:860px;
88-
margin:0 auto;
89-
}
90-
91108
blockquote {
92109
border-left:1px solid #e5e5e5;
93110
margin:0;
@@ -109,6 +126,12 @@ pre {
109126
overflow-x:auto;
110127
}
111128

129+
/* *******************************************
130+
131+
Tables
132+
133+
**********************************************/
134+
112135
table {
113136
width:100%;
114137
border-collapse:collapse;
@@ -133,16 +156,11 @@ img {
133156
max-width:100%;
134157
}
135158

136-
header {
137-
width:270px;
138-
float:left;
139-
position:fixed;
140-
-webkit-font-smoothing:subpixel-antialiased;
141-
background:#b3e4e5;
142-
border-radius:15px;
143-
padding:15px;
144-
border:1px solid #e0e0e0;
145-
}
159+
/* *******************************************
160+
161+
Menu
162+
163+
**********************************************/
146164

147165
header ul {
148166
list-style:none;
@@ -159,7 +177,7 @@ header ul a {
159177
line-height:1;
160178
font-size:13px;
161179
text-align:left;
162-
padding-top:6px;
180+
padding-top:3px;
163181
}
164182

165183
header ul a:hover, header ul a:focus {
@@ -171,38 +189,64 @@ header ul a:active {
171189
background-color:#f0f0f0;
172190
}
173191

174-
strong {
175-
color:#222;
176-
font-weight:400;
177-
}
178192

179-
section {
180-
width:500px;
181-
float:right;
182-
padding-bottom:50px;
193+
/* *******************************************
194+
195+
Header, Content, Footer
196+
197+
**********************************************/
198+
199+
header {
200+
width:270px;
201+
-webkit-font-smoothing:subpixel-antialiased;
202+
background:#b3e4e5;
203+
border-radius:15px;
204+
padding:15px;
205+
border:1px solid #e0e0e0;
183206
}
184207

185-
small {
186-
font-size:11px;
208+
.wrapper {
209+
width:860px;
210+
margin:0 auto;
187211
}
188212

189-
hr {
190-
border:0;
191-
background:#e5e5e5;
192-
height:1px;
193-
margin:0 0 20px;
213+
section {
214+
width:500px;
215+
/* float:right;*/
216+
padding-bottom:50px;
194217
}
195218

196219
footer {
197-
width:270px;
198-
float:left;
199-
position:fixed;
200-
bottom:50px;
201220
-webkit-font-smoothing:subpixel-antialiased;
202221
border-radius:15px;
203222
padding:15px;
204223
border:1px solid #e0e0e0;
224+
}
225+
226+
/* *******************************************
227+
228+
Media Queries
229+
230+
**********************************************/
205231

232+
@media print, screen and (min-width: 961px) {
233+
234+
header {
235+
width:270px;
236+
float:left;
237+
position:fixed;
238+
}
239+
240+
section {
241+
width:500px;
242+
float:right;
243+
padding-bottom:50px;
244+
}
245+
246+
footer {
247+
float: right;
248+
width:500px;
249+
}
206250
}
207251

208252
@media print, screen and (max-width: 960px) {
@@ -213,8 +257,8 @@ footer {
213257
}
214258

215259
header, section, footer {
216-
float:none;
217-
position:static;
260+
float:left;
261+
/*position:static;*/
218262
width:auto;
219263
}
220264

@@ -234,48 +278,28 @@ footer {
234278
}
235279

236280
header ul {
237-
position:absolute;
281+
/*position:absolute;*/
238282
right:50px;
239283
top:52px;
240284
}
241285
}
242286

243-
@media print, screen and (max-width: 720px) {
244-
body {
245-
word-wrap:break-word;
246-
}
247-
248-
header {
249-
padding:0;
250-
}
251-
252-
header ul, header p.view {
253-
position:static;
254-
}
255-
256-
pre, code {
257-
word-wrap:normal;
258-
}
259-
}
260-
261-
@media print, screen and (max-width: 480px) {
262-
body {
263-
padding:15px;
264-
}
265-
266-
header ul {
267-
width:99%;
268-
}
269-
270-
header li, header ul li + li + li {
271-
width:33%;
272-
}
273-
}
274-
275287
@media print {
276288
body {
277289
padding:0.4in;
278290
font-size:12pt;
279291
color:#444;
280292
}
293+
header {
294+
display: none;
295+
}
296+
footer {
297+
display: none;
298+
}
281299
}
300+
301+
.clearfix::after {
302+
content: "";
303+
clear: both;
304+
display: table;
305+
}

0 commit comments

Comments
 (0)