Skip to content

Commit fed49d5

Browse files
author
Johan Van den Rym
committed
Realigned homepage
1 parent ff96c42 commit fed49d5

File tree

14 files changed

+72
-39
lines changed

14 files changed

+72
-39
lines changed

‎_layouts/home.html

+8-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,14 @@ <h1>{% if post.title %}{{ post.title }}{% endif %}</h1>
1818
</div>
1919
</header>
2020
<div class="entry">
21-
{% if post.teaser %}<p>{{ post.teaser }}</p>{% endif %}
22-
<p class="read-more"><a class="read-more__link" href="{{ root_url }}{{ post.url }}">Continue reading</a></p>
21+
{% if post.content %}{{ post.content }}{% endif %}
22+
<div class="previous">
23+
{% for post in site.posts %}
24+
{% if forloop.index == 2 %}
25+
<a href="{{ post.url }}">{{ post.title }} &rarr;</a>
26+
{% endif %}
27+
{% endfor %}
28+
</div>
2329
</div>
2430

2531
</article>

‎_sass/pages/_home.scss

+1-4
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
h1 {
1616
text-align: center;
1717
color: inherit;
18-
margin: 0.75em 0;
18+
margin: 0.75em 0 0 0;
1919
text-transform: none;
2020
}
2121
span {
@@ -26,9 +26,6 @@
2626
.logo {
2727
width: 100%;
2828
}
29-
main article p {
30-
text-align: center;
31-
}
3229
}
3330

3431
header a h1 {

‎_sass/pages/_page.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,9 @@ header p,
7878
main article p,
7979
main article ul {
8080
text-align: left;
81-
padding: 0 1em;
8281
}
8382
.page--home article header {
84-
margin-bottom: 1em;
83+
margin-bottom: 0;
8584
}
8685

8786
main article #archive p,

‎_site/2006/06/06/interview-with-andy-budd/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
3737

3838

39-
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-04-06T21%3A32%3A14%2B02%3A00">
39+
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-05-31T14%3A30%3A50%2B02%3A00">
4040

4141
<!--[if lt IE 9]>
4242
<script src="cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -49,7 +49,7 @@
4949
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
5050
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
5151

52-
ga('create', '', 'auto');
52+
ga('create', 'UA-54573732-1', 'auto');
5353
ga('send', 'pageview');
5454

5555
</script>
@@ -160,7 +160,7 @@ <h2>Who is Andy Budd?</h2>
160160
</div>
161161

162162

163-
<script src="/assets/js/app.min.js?bust=2015-04-06T21%3A32%3A14%2B02%3A00"></script>
163+
<script src="/assets/js/app.min.js?bust=2015-05-31T14%3A30%3A50%2B02%3A00"></script>
164164

165165
</body>
166166
</html>

‎_site/2014/10/10/the-beefy-icon/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
3737

3838

39-
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-04-06T21%3A32%3A14%2B02%3A00">
39+
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-05-31T14%3A30%3A50%2B02%3A00">
4040

4141
<!--[if lt IE 9]>
4242
<script src="cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -49,7 +49,7 @@
4949
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
5050
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
5151

52-
ga('create', '', 'auto');
52+
ga('create', 'UA-54573732-1', 'auto');
5353
ga('send', 'pageview');
5454

5555
</script>
@@ -180,7 +180,7 @@ <h3>Further reading</h3>
180180
</div>
181181

182182

183-
<script src="/assets/js/app.min.js?bust=2015-04-06T21%3A32%3A14%2B02%3A00"></script>
183+
<script src="/assets/js/app.min.js?bust=2015-05-31T14%3A30%3A50%2B02%3A00"></script>
184184

185185
</body>
186186
</html>

‎_site/2015/03/29/the-book-of-css3-review/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
3737

3838

39-
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-04-06T21%3A32%3A14%2B02%3A00">
39+
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-05-31T14%3A30%3A50%2B02%3A00">
4040

4141
<!--[if lt IE 9]>
4242
<script src="cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -49,7 +49,7 @@
4949
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
5050
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
5151

52-
ga('create', '', 'auto');
52+
ga('create', 'UA-54573732-1', 'auto');
5353
ga('send', 'pageview');
5454

5555
</script>
@@ -164,7 +164,7 @@ <h2>What did you think of the book?</h2>
164164
</div>
165165

166166

167-
<script src="/assets/js/app.min.js?bust=2015-04-06T21%3A32%3A14%2B02%3A00"></script>
167+
<script src="/assets/js/app.min.js?bust=2015-05-31T14%3A30%3A50%2B02%3A00"></script>
168168

169169
</body>
170170
</html>

‎_site/2015/04/05/radios-with-css3/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
3737

3838

39-
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-04-06T21%3A32%3A14%2B02%3A00">
39+
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-05-31T14%3A30%3A50%2B02%3A00">
4040

4141
<!--[if lt IE 9]>
4242
<script src="cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -49,7 +49,7 @@
4949
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
5050
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
5151

52-
ga('create', '', 'auto');
52+
ga('create', 'UA-54573732-1', 'auto');
5353
ga('send', 'pageview');
5454

5555
</script>
@@ -153,7 +153,7 @@ <h2>Styling the radios</h2>
153153
</div>
154154

155155

156-
<script src="/assets/js/app.min.js?bust=2015-04-06T21%3A32%3A14%2B02%3A00"></script>
156+
<script src="/assets/js/app.min.js?bust=2015-05-31T14%3A30%3A50%2B02%3A00"></script>
157157

158158
</body>
159159
</html>

‎_site/404/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
3737

3838

39-
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-04-06T21%3A32%3A14%2B02%3A00">
39+
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-05-31T14%3A30%3A50%2B02%3A00">
4040

4141
<!--[if lt IE 9]>
4242
<script src="cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -49,7 +49,7 @@
4949
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
5050
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
5151

52-
ga('create', '', 'auto');
52+
ga('create', 'UA-54573732-1', 'auto');
5353
ga('send', 'pageview');
5454

5555
</script>
@@ -70,7 +70,7 @@ <h1 class="page-title">404: Page not found</h1>
7070
<p class="lead">Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. <a href="/">Head back home</a> to try finding it again.</p>
7171
</div>
7272

73-
<script src="/assets/js/app.min.js?bust=2015-04-06T21%3A32%3A14%2B02%3A00"></script>
73+
<script src="/assets/js/app.min.js?bust=2015-05-31T14%3A30%3A50%2B02%3A00"></script>
7474

7575
</body>
7676
</html>

‎_site/about/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
3737

3838

39-
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-04-06T21%3A32%3A14%2B02%3A00">
39+
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-05-31T14%3A30%3A50%2B02%3A00">
4040

4141
<!--[if lt IE 9]>
4242
<script src="cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -49,7 +49,7 @@
4949
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
5050
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
5151

52-
ga('create', '', 'auto');
52+
ga('create', 'UA-54573732-1', 'auto');
5353
ga('send', 'pageview');
5454

5555
</script>
@@ -136,7 +136,7 @@ <h1>About</h1>
136136
</div>
137137
</div>
138138

139-
<script src="/assets/js/app.min.js?bust=2015-04-06T21%3A32%3A14%2B02%3A00"></script>
139+
<script src="/assets/js/app.min.js?bust=2015-05-31T14%3A30%3A50%2B02%3A00"></script>
140140

141141
</body>
142142
</html>

‎_site/archive/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
3737

3838

39-
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-04-06T21%3A32%3A14%2B02%3A00">
39+
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-05-31T14%3A30%3A50%2B02%3A00">
4040

4141
<!--[if lt IE 9]>
4242
<script src="cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -49,7 +49,7 @@
4949
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
5050
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
5151

52-
ga('create', '', 'auto');
52+
ga('create', 'UA-54573732-1', 'auto');
5353
ga('send', 'pageview');
5454

5555
</script>
@@ -199,7 +199,7 @@ <h2>2006</h2>
199199
</div>
200200
</div>
201201

202-
<script src="/assets/js/app.min.js?bust=2015-04-06T21%3A32%3A14%2B02%3A00"></script>
202+
<script src="/assets/js/app.min.js?bust=2015-05-31T14%3A30%3A50%2B02%3A00"></script>
203203

204204
</body>
205205
</html>

‎_site/assets/css/style.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎_site/index.html

+36-5
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
3737

3838

39-
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-04-06T21%3A32%3A14%2B02%3A00">
39+
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-05-31T14%3A30%3A50%2B02%3A00">
4040

4141
<!--[if lt IE 9]>
4242
<script src="cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -49,7 +49,7 @@
4949
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
5050
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
5151

52-
ga('create', '', 'auto');
52+
ga('create', 'UA-54573732-1', 'auto');
5353
ga('send', 'pageview');
5454

5555
</script>
@@ -107,8 +107,39 @@ <h1>Radio buttons with style</h1>
107107
</div>
108108
</header>
109109
<div class="entry">
110-
<p>Styling radio input elements with CSS 3.</p>
111-
<p class="read-more"><a class="read-more__link" href="/2015/04/05/radios-with-css3/">Continue reading</a></p>
110+
<p>To create a consistent and uniform style with form elements certainly had its limitations in the past and was rather complex to say the least.
111+
To completely provide styling for the select element is still not possible without using JS. That goes for the file inputs as well. A lot of front-end developers would argue if we should style forms at all as most form elements are not easy to theme. As a result some form UI would not get styled and others would. What you would see most, is styled text inputs and the rest would not get styled.</p>
112+
113+
<p>I thought of sharing a style I created for a recent project where I wanted to style radio buttons. A style still close to the orignal UI default style. A outer circle as default and a selected state where the outer circle becomes a small dot in the center and highlighted with a background color. The idea I had was to avoid using any background images and use CSS 3 to create the styles instead.</p>
114+
115+
<script src="https://gist.github.com/jvandenrym/f35f29faac40b5b2cb89.js"> </script>
116+
117+
118+
<p><figure><img src="/assets/images/radios_unstyled.jpg" alt="Radio buttons' default UI look in Firefox"><figcaption>Radio buttons' default UI look in Firefox</figcaption></figure></p>
119+
120+
<h2>Styling the radios</h2>
121+
122+
<p>Feel free to check the codepen. it relies on transform (scale) and border-radius to create the rounded radio button styles and you need to hide the radio button and style the label instead to make it work. You use the pseudo selector :checked to define the selected style.
123+
I used sass to compile the CSS but you can view the compiled css as well.</p>
124+
125+
<p> <pre class="codepen" data-height="300" data-type="600" data-href="zxQoXb" data-user="JohanVdR"><code> </code></pre></p>
126+
127+
<script async src="http://codepen.io:/assets/embed/ei.js"></script>
128+
129+
130+
<div class="previous">
131+
132+
133+
134+
135+
<a href="/2015/03/29/the-book-of-css3-review/">The book of CSS 3 - a review &rarr;</a>
136+
137+
138+
139+
140+
141+
142+
</div>
112143
</div>
113144

114145
</article>
@@ -135,7 +166,7 @@ <h1>Radio buttons with style</h1>
135166
</div>
136167

137168

138-
<script src="/assets/js/app.min.js?bust=2015-04-06T21%3A32%3A14%2B02%3A00"></script>
169+
<script src="/assets/js/app.min.js?bust=2015-05-31T14%3A30%3A50%2B02%3A00"></script>
139170

140171
</body>
141172
</html>

‎_site/work/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
3737

3838

39-
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-04-06T21%3A32%3A14%2B02%3A00">
39+
<link rel="stylesheet" href="/assets/css/style.min.css?bust=2015-05-31T14%3A30%3A50%2B02%3A00">
4040

4141
<!--[if lt IE 9]>
4242
<script src="cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -49,7 +49,7 @@
4949
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
5050
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
5151

52-
ga('create', '', 'auto');
52+
ga('create', 'UA-54573732-1', 'auto');
5353
ga('send', 'pageview');
5454

5555
</script>
@@ -180,7 +180,7 @@ <h2 id="marie-curie-actions">Marie Curie Actions</h2>
180180
</div>
181181
</div>
182182

183-
<script src="/assets/js/app.min.js?bust=2015-04-06T21%3A32%3A14%2B02%3A00"></script>
183+
<script src="/assets/js/app.min.js?bust=2015-05-31T14%3A30%3A50%2B02%3A00"></script>
184184

185185
</body>
186186
</html>

0 commit comments

Comments
 (0)