Skip to content

Commit 9e0a3ec

Browse files
geraldbgeraldb
committed
up styles
1 parent f393b67 commit 9e0a3ec

File tree

7 files changed

+186
-17
lines changed

7 files changed

+186
-17
lines changed

‎_includes/addsite.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
<p>
3+
add site notes
4+
to be done
5+
</p>
6+

‎_layouts/showcase.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>{{ page.title }}</title>
6+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Playball">
7+
<link rel="stylesheet" href="{{site.path}}/css/showcase/style.css">
8+
</head>
9+
<body>
10+
11+
<div id="front">
12+
<div id="header">
13+
<span class='big'>planet jekyll's showcase</span>
14+
<span class='small'>the world's greatest jekyll static sites</span>
15+
</div>
16+
17+
<div id="nav">
18+
<a href="{{site.path}}/showcase">Welcome</a> •
19+
<a href="https://github.com/planetjekyll/showcase">Repo (Edit Me!)</a> •
20+
<a href="https://talk.jekyllrb.com">Questions? Comments?</a>
21+
</div>
22+
</div>
23+
24+
25+
<div id="content">
26+
{{ content }}
27+
</div>
28+
29+
<div id="back">
30+
{% include addsite.html %}
31+
</div>
32+
33+
</body>
34+
</html>

‎css/showcase/_settings.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
///////////////////////////////////////
2+
// css theme variables / settings
3+
4+
5+
$font-family: Helvetica,Arial,sans-serif;
6+
7+
$color-primary: #4B0082; // indigo
8+
// was => $color-primary: #cc0000; // was: red; try a little darker red (not so bright)
9+

‎css/showcase/_showcase.scss

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.showcase {
2+
3+
background-color: #f4f4f4;
4+
margin: 0;
5+
6+
padding-top: 24px; // was: 24px;
7+
padding-bottom: 60px; // was: 24+24+12px;
8+
padding-left: 48px; // was: 24px;
9+
// padding-right: 24px;
10+
11+
12+
.site {
13+
display: inline-block;
14+
vertical-align: top;
15+
text-align: center;
16+
17+
width: 294px; /* note: 270(10+10? left+right padding?)+24px add margin+border */
18+
background-color: white;
19+
margin-bottom: 24px; // was: 15px;
20+
margin-right: 24px; // was: 15px;
21+
padding: 10px 15px;
22+
23+
.site-info {
24+
margin-bottom: 10px;
25+
}
26+
27+
.site-live img {
28+
border: 1px solid #bbb;
29+
}
30+
31+
} // .site
32+
} // .showcase
33+

‎css/showcase/style.scss

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
### note: will result in an all-in-one-file stylesheet e.g. style.css
3+
---
4+
5+
@import 'showcase/settings'; // note: use path relative to css root
6+
7+
8+
body {
9+
// find a better font - why? why not??
10+
font-family: $font-family;
11+
12+
color: #333333;
13+
margin: 0;
14+
}
15+
16+
// assume this structure:
17+
// 1) front
18+
// 2) showcase (see _showcase.scss)
19+
// 3) back
20+
21+
#front {
22+
padding-top: 12px;
23+
padding-left: 24px;
24+
padding-right: 24px;
25+
padding-bottom: 12px;
26+
}
27+
28+
#back {
29+
padding-left: 24px;
30+
padding-right: 24px;
31+
padding-bottom: 12px;
32+
}
33+
34+
35+
a, a:visited {
36+
color: $color-primary;
37+
text-decoration: none;
38+
}
39+
40+
a:hover {
41+
text-decoration: underline;
42+
}
43+
44+
45+
46+
47+
#header {
48+
padding: 0.25em;
49+
50+
.big
51+
{
52+
display: inline-block;
53+
text-align: center;
54+
55+
font-family: 'Playball', cursive;
56+
font-size: 240%;
57+
// font-weight: bold;
58+
color: white;
59+
background-color: $color-primary;
60+
padding: 12px;
61+
}
62+
63+
.small
64+
{
65+
font-size: 120%;
66+
// color: gray;
67+
padding-left: 15px;
68+
}
69+
} // # header
70+
71+
72+
73+
#nav {
74+
padding: 0.5em;
75+
76+
a, a:visited {
77+
text-decoration: none;
78+
}
79+
80+
a:hover {
81+
text-decoration: underline;
82+
}
83+
}
84+
85+
86+
87+
@import 'showcase/showcase'; // note: use path relative to css root
88+

‎showcase/index.html

+15-16
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
11
---
2-
title: Showcase - The World's Greatest Jekyll Static Sites
2+
layout: showcase
3+
title: Planet Jekyll's Showcase - The World's Greatest Jekyll Static Sites
34
---
45

5-
<h1>{{ page.title }}</h1>
6-
76

87
<div class='showcase'>
98
{% for showcase in site.data.showcase.showcase %}
10-
<div class='showcase'>
11-
<div class='showcase-live'>
12-
<a href="{{ showcase.live }}">
13-
<img src="{{site.path}}/_data/showcase/thumbnails/{{showcase.thumbnail}}">
14-
</a>
9+
<div class='site'>
10+
<div class='site-live'>
11+
<a href="{{ showcase.live }}">
12+
<img src="{{site.path}}/_data/showcase/thumbnails/{{showcase.thumbnail}}">
13+
</a>
14+
</div>
15+
<div class='site-info'>
16+
<b>{{ showcase.title }}</b> -
17+
{{ showcase.subtitle }}
18+
<br>
19+
<a href="{{ showcase.live }}">[Live]</a>
20+
<a href="{{ showcase.source }}">[Source]</a>
21+
</div>
1522
</div>
16-
<div class='showcase-info'>
17-
<b>{{ showcase.title }}</b> -
18-
{{ showcase.subtitle }}
19-
<br>
20-
<a href="{{ showcase.live }}">[Live]</a>
21-
<a href="{{ showcase.source }}">[Source]</a>
22-
</div>
23-
</div>
2423
{% endfor %}
2524
</div>

‎showcase/list/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h1>{{ page.title }}</h1>
99
<tr>
1010
<td><b>{{ showcase.title }}</b></td>
1111
<td>{{ showcase.subtitle }}</td>
12-
<td>{{ showcase.thumnail }}</td>
12+
<td>{{ showcase.thumbnail }}</td>
1313
</tr>
1414
<tr>
1515
<td colspan='3'>

0 commit comments

Comments
 (0)