charlie-lee-theme 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/LICENSE +674 -0
- data/README.md +109 -0
- data/_includes/footer.html +7 -0
- data/_includes/head.html +13 -0
- data/_includes/header.html +13 -0
- data/_includes/json-feed.html +22 -0
- data/_layouts/category.html +31 -0
- data/_layouts/default.html +4 -0
- data/_layouts/feed.html +1 -0
- data/_layouts/home.html +27 -0
- data/_layouts/page.html +26 -0
- data/_layouts/post.html +30 -0
- data/assets/main.css +603 -0
- data/assets/main.js +17 -0
- data/assets/normalize.css +461 -0
- metadata +101 -0
data/README.md
ADDED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
# charlie-lee-theme
|
|
2
|
+
|
|
3
|
+
A Jekyll theme created for my personal website [charlielee.uk](http://charlielee.uk).
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
Add this line to your Jekyll site's Gemfile:
|
|
8
|
+
|
|
9
|
+
```ruby
|
|
10
|
+
gem "charlie-lee-theme"
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
And add this line to your Jekyll site's `_config.yml`:
|
|
14
|
+
|
|
15
|
+
```yaml
|
|
16
|
+
theme: charlie-lee-theme
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
And then execute:
|
|
20
|
+
|
|
21
|
+
$ bundle
|
|
22
|
+
|
|
23
|
+
Or install it yourself as:
|
|
24
|
+
|
|
25
|
+
$ gem install charlie-lee-theme
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
### Layouts
|
|
30
|
+
|
|
31
|
+
#### page
|
|
32
|
+
|
|
33
|
+
The default layout.
|
|
34
|
+
|
|
35
|
+
```yaml
|
|
36
|
+
---
|
|
37
|
+
title: Page Name
|
|
38
|
+
layout: page
|
|
39
|
+
---
|
|
40
|
+
Page contents.
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
#### post
|
|
44
|
+
|
|
45
|
+
Creates a page with the page's author and date of creation displayed.
|
|
46
|
+
|
|
47
|
+
```yaml
|
|
48
|
+
---
|
|
49
|
+
title: Post Name
|
|
50
|
+
author: John Smith
|
|
51
|
+
categories:
|
|
52
|
+
- Announcements
|
|
53
|
+
layout: post
|
|
54
|
+
---
|
|
55
|
+
Post contents.
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
#### home
|
|
59
|
+
|
|
60
|
+
Creates a page with a grid displaying recent posts. The content entered on the page will be displayed as text in the page's hero image.
|
|
61
|
+
|
|
62
|
+
```yaml
|
|
63
|
+
---
|
|
64
|
+
title: Home
|
|
65
|
+
layout: home
|
|
66
|
+
---
|
|
67
|
+
Hero image text.
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
#### category
|
|
71
|
+
|
|
72
|
+
Creates a page listing the posts in the category matching the `title` of the page.
|
|
73
|
+
|
|
74
|
+
```yaml
|
|
75
|
+
---
|
|
76
|
+
title: Category Name
|
|
77
|
+
layout: category
|
|
78
|
+
---
|
|
79
|
+
Category description text.
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
#### feed
|
|
83
|
+
|
|
84
|
+
Creates a page of a specified `type` listing the posts in the category matching the `title` of the page.
|
|
85
|
+
|
|
86
|
+
Currently the only possible value for type is `json`.
|
|
87
|
+
|
|
88
|
+
Note: the file extension of a page that is type `feed` should match the type in the file.
|
|
89
|
+
|
|
90
|
+
```yaml
|
|
91
|
+
---
|
|
92
|
+
title: Category Name
|
|
93
|
+
layout: feed
|
|
94
|
+
type: json
|
|
95
|
+
---
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Contributing
|
|
99
|
+
|
|
100
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/BoatsAreRockable/charlie-lee-theme.
|
|
101
|
+
|
|
102
|
+
## Development
|
|
103
|
+
|
|
104
|
+
To set up your environment to develop this theme, run `git clone https://github.com/BoatsAreRockable/charlie-lee-theme` and `bundle install`.
|
|
105
|
+
|
|
106
|
+
## License
|
|
107
|
+
|
|
108
|
+
The theme is available as open source under the terms of the [GPL-3.0 License](https://opensource.org/licenses/GPL-3.0).
|
|
109
|
+
|
data/_includes/head.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<head>
|
|
2
|
+
<meta charset="utf-8">
|
|
3
|
+
<title>
|
|
4
|
+
{% if page.title %} {{ page.title }}
|
|
5
|
+
{% else %} {{ site.title }}
|
|
6
|
+
{% endif %}
|
|
7
|
+
</title>
|
|
8
|
+
<meta name="author" content="{{ site.author }}">
|
|
9
|
+
<meta name="description" content="{{ site.description }}">
|
|
10
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
11
|
+
<link rel="stylesheet" href="{{ "/assets/normalize.css" | relative_url }}">
|
|
12
|
+
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
|
|
13
|
+
</head>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<header>
|
|
2
|
+
<nav>
|
|
3
|
+
<div id="mobile-menu-toggle">||||</div>
|
|
4
|
+
<div id="logo">
|
|
5
|
+
<a href="{{ site.baseurl }}/index.html">{{ site.title }}</a>
|
|
6
|
+
</div>
|
|
7
|
+
<ul id="menu-list">
|
|
8
|
+
{% for link in site.navigation %}
|
|
9
|
+
<li><a href="{{ link.url | relative_url }}">{{ link.text }}</a></li>
|
|
10
|
+
{% endfor %}
|
|
11
|
+
</ul>
|
|
12
|
+
</nav>
|
|
13
|
+
</header>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{% capture get_category %}{{ page.title }}{% endcapture %}
|
|
2
|
+
{"posts": [
|
|
3
|
+
{% for post in site.categories[get_category] %}
|
|
4
|
+
{
|
|
5
|
+
"id": "{{ post.id }}",
|
|
6
|
+
"type": "{{ post.layout }}",
|
|
7
|
+
"test": {{ post.excerpt | jsonify }},
|
|
8
|
+
"slug": "{{ post.slug }}",
|
|
9
|
+
"url": "{{ post.url | absolute_url | replace: "/", "\/" }}",
|
|
10
|
+
"title": "{{ post.title }}",
|
|
11
|
+
"content": "{{ post.content | replace: '"', '\"' | replace: "\", "\\" | replace: "/", "\/" | normalize_whitespace }}",
|
|
12
|
+
"excerpt": "<p>{{ post.excerpt | strip_html | normalize_whitespace }}</p>",
|
|
13
|
+
"date": "{{ post.date }}",
|
|
14
|
+
"categories": [
|
|
15
|
+
{% for cat in post.categories %}
|
|
16
|
+
"{{ cat }}"{% unless forloop.last %},{% endunless %}
|
|
17
|
+
{% endfor %}
|
|
18
|
+
]
|
|
19
|
+
{% unless forloop.last %}},{% endunless %}
|
|
20
|
+
{% endfor %}
|
|
21
|
+
}
|
|
22
|
+
]}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
{% include head.html %}
|
|
4
|
+
|
|
5
|
+
<body>
|
|
6
|
+
{% include header.html %}
|
|
7
|
+
|
|
8
|
+
<main>
|
|
9
|
+
<header>
|
|
10
|
+
<h1>Category: {{ page.title }}</h1>
|
|
11
|
+
</header>
|
|
12
|
+
|
|
13
|
+
<div>
|
|
14
|
+
<article>{{ content }}</article>
|
|
15
|
+
{% capture get_category %}{{ page.title }}{% endcapture %}
|
|
16
|
+
{% for post in site.categories[get_category] %}
|
|
17
|
+
<article class="item">
|
|
18
|
+
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
|
|
19
|
+
<ul>
|
|
20
|
+
<li>Posted: {{ post.date }}</li>
|
|
21
|
+
<li>Author: {{ post.author }}</li>
|
|
22
|
+
</ul>
|
|
23
|
+
{{ post.excerpt }}
|
|
24
|
+
</article>
|
|
25
|
+
{% endfor %}
|
|
26
|
+
</div>
|
|
27
|
+
</main>
|
|
28
|
+
|
|
29
|
+
{% include footer.html %}
|
|
30
|
+
</body>
|
|
31
|
+
</html>
|
data/_layouts/feed.html
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{% if page.type == "json" %}{% capture json %}{% include json-feed.html %}{% endcapture %}{{ json | normalize_whitespace }}{% endif %}
|
data/_layouts/home.html
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
{% include head.html %}
|
|
4
|
+
|
|
5
|
+
<body>
|
|
6
|
+
{% include header.html %}
|
|
7
|
+
|
|
8
|
+
<main>
|
|
9
|
+
<header class="hero">
|
|
10
|
+
<div>
|
|
11
|
+
<h1>{{ content | strip_html }}</h1>
|
|
12
|
+
</div>
|
|
13
|
+
</header>
|
|
14
|
+
|
|
15
|
+
<div class="gallery cols-3">
|
|
16
|
+
{% for entry in site.posts %}
|
|
17
|
+
<article>
|
|
18
|
+
<h2>{{ entry.title }}</h2>
|
|
19
|
+
<a href="{{ entry.url }}"><span>Read</span></a>
|
|
20
|
+
</article>
|
|
21
|
+
{% endfor %}
|
|
22
|
+
</div>
|
|
23
|
+
</main>
|
|
24
|
+
|
|
25
|
+
{% include footer.html %}
|
|
26
|
+
</body>
|
|
27
|
+
</html>
|
data/_layouts/page.html
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
{% include head.html %}
|
|
4
|
+
|
|
5
|
+
<body>
|
|
6
|
+
{% include header.html %}
|
|
7
|
+
|
|
8
|
+
<main>
|
|
9
|
+
<header>
|
|
10
|
+
<h1>
|
|
11
|
+
{% if page.title %} {{ page.title }}
|
|
12
|
+
{% else %} {{ site.title }}
|
|
13
|
+
{% endif %}
|
|
14
|
+
</h1>
|
|
15
|
+
</header>
|
|
16
|
+
|
|
17
|
+
<div>
|
|
18
|
+
<article>
|
|
19
|
+
{{content}}
|
|
20
|
+
</article>
|
|
21
|
+
</div>
|
|
22
|
+
</main>
|
|
23
|
+
|
|
24
|
+
{% include footer.html %}
|
|
25
|
+
</body>
|
|
26
|
+
</html>
|
data/_layouts/post.html
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
{% include head.html %}
|
|
4
|
+
|
|
5
|
+
<body>
|
|
6
|
+
{% include header.html %}
|
|
7
|
+
|
|
8
|
+
<main>
|
|
9
|
+
<header>
|
|
10
|
+
<h1>
|
|
11
|
+
{% if page.title %} {{ page.title }}
|
|
12
|
+
{% else %} {{ site.title }}
|
|
13
|
+
{% endif %}
|
|
14
|
+
</h1>
|
|
15
|
+
</header>
|
|
16
|
+
|
|
17
|
+
<div>
|
|
18
|
+
<article>
|
|
19
|
+
<ul>
|
|
20
|
+
<li>Posted: {{ page.date }}</li>
|
|
21
|
+
<li>Author: {{ page.author }}</li>
|
|
22
|
+
</ul>
|
|
23
|
+
{{content}}
|
|
24
|
+
</article>
|
|
25
|
+
</div>
|
|
26
|
+
</main>
|
|
27
|
+
|
|
28
|
+
{% include footer.html %}
|
|
29
|
+
</body>
|
|
30
|
+
</html>
|
data/assets/main.css
ADDED
|
@@ -0,0 +1,603 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
Main style sheet for COM1008 Assignment
|
|
3
|
+
Author: Charles Lee
|
|
4
|
+
Created: 09/11/16
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* ================================
|
|
8
|
+
0.0. CSS DIRECTORY
|
|
9
|
+
================================
|
|
10
|
+
|
|
11
|
+
1.0. INITIAL BREAKPOINT (Smartphone portrait)
|
|
12
|
+
1.1. GENERAL
|
|
13
|
+
1.2. PRIMARY
|
|
14
|
+
1.3. HEADERS
|
|
15
|
+
1.4. NAVIGATION
|
|
16
|
+
1.5. FOOTER
|
|
17
|
+
1.6. HOMEPAGE GALLERY
|
|
18
|
+
1.7. BACKGROUND IMAGES
|
|
19
|
+
|
|
20
|
+
2.0. SMARTPHONE LANDSCAPE/SMALL TABLET BREAKPOINT (min-width: 500px)
|
|
21
|
+
2.1. PRIMARY
|
|
22
|
+
2.2. HEADERS
|
|
23
|
+
2.3. NAVIGATION
|
|
24
|
+
2.4. HOME PAGE GALLERY
|
|
25
|
+
|
|
26
|
+
3.0. DESKTOP BREAKPOINT (min-width: 768px)
|
|
27
|
+
3.1. PRIMARY
|
|
28
|
+
3.2. HEADERS
|
|
29
|
+
3.3. NAVIGATION
|
|
30
|
+
3.4. HOMEPAGE GALLERY
|
|
31
|
+
*/
|
|
32
|
+
|
|
33
|
+
/* ================================
|
|
34
|
+
1.0. INITIAL BREAKPOINT (Smartphone portrait)
|
|
35
|
+
================================ */
|
|
36
|
+
|
|
37
|
+
/* 1.1. GENERAL
|
|
38
|
+
-------------------------------- */
|
|
39
|
+
|
|
40
|
+
body {
|
|
41
|
+
font-family: "Roboto", sans-serif;
|
|
42
|
+
}
|
|
43
|
+
p {
|
|
44
|
+
line-height: 1.3em;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
table {
|
|
48
|
+
width: 100%;
|
|
49
|
+
table-layout: fixed;
|
|
50
|
+
text-align: center;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* ===Links=== */
|
|
54
|
+
a, a:visited {
|
|
55
|
+
color: rgb(11,114,132);
|
|
56
|
+
}
|
|
57
|
+
a:hover { color: rgb(4,81,94); }
|
|
58
|
+
|
|
59
|
+
/* ===Headings=== */
|
|
60
|
+
h1, h2 {
|
|
61
|
+
font-family: "Montserrat", sans-serif;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* ===Elements that are only displayed when no CSS is avaliable=== */
|
|
65
|
+
.alt {
|
|
66
|
+
display: none;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* ===Forms===*/
|
|
70
|
+
input, label, textarea {
|
|
71
|
+
box-sizing: border-box;
|
|
72
|
+
display: block;
|
|
73
|
+
margin: 1em 0;
|
|
74
|
+
padding: 10px;
|
|
75
|
+
width: 100%;
|
|
76
|
+
}
|
|
77
|
+
textarea {
|
|
78
|
+
resize: vertical;
|
|
79
|
+
}
|
|
80
|
+
input[type="submit"] {
|
|
81
|
+
width: auto;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* 1.2. PRIMARY
|
|
85
|
+
-------------------------------- */
|
|
86
|
+
|
|
87
|
+
main div {
|
|
88
|
+
clear: both;
|
|
89
|
+
/* Prevents margin collapsing */
|
|
90
|
+
overflow: hidden;
|
|
91
|
+
}
|
|
92
|
+
.dark {
|
|
93
|
+
background-color: rgb(85,98,112);
|
|
94
|
+
color: rgb(255,255,255);
|
|
95
|
+
}
|
|
96
|
+
.notice {
|
|
97
|
+
background-color: rgb(215,18,139);
|
|
98
|
+
border-radius: 5px;
|
|
99
|
+
color: rgb(255,255,255);
|
|
100
|
+
padding: 10px 20px;
|
|
101
|
+
}
|
|
102
|
+
.hidden {
|
|
103
|
+
display: none;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/* ===Articles=== */
|
|
107
|
+
article {
|
|
108
|
+
margin: 0 auto;
|
|
109
|
+
padding: 0 10px;
|
|
110
|
+
}
|
|
111
|
+
article img {
|
|
112
|
+
box-shadow: 1px 0 10px 1px rgb(85,98,112);
|
|
113
|
+
margin: 1em 0;
|
|
114
|
+
width: 100%;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* ===Articles with ".item" alternate between 3 different color accents=== */
|
|
118
|
+
.item {
|
|
119
|
+
border-left: 5px solid rgb(0,0,0);
|
|
120
|
+
margin: 2em auto;
|
|
121
|
+
}
|
|
122
|
+
.item:nth-of-type(3n+1) {
|
|
123
|
+
border-color: rgb(33,123,22);
|
|
124
|
+
}
|
|
125
|
+
.item:nth-of-type(3n+2) {
|
|
126
|
+
border-color: rgb(215,18,139);
|
|
127
|
+
}
|
|
128
|
+
.item:nth-of-type(3n+3) {
|
|
129
|
+
border-color: rgb(0,83,133);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.item h2 {
|
|
133
|
+
margin-top: 0;
|
|
134
|
+
}
|
|
135
|
+
.item:nth-of-type(3n+1) h2 {
|
|
136
|
+
color: rgb(33,123,22);
|
|
137
|
+
}
|
|
138
|
+
.item:nth-of-type(3n+2) h2 {
|
|
139
|
+
color: rgb(215,18,139);
|
|
140
|
+
}
|
|
141
|
+
.item:nth-of-type(3n+3) h2 {
|
|
142
|
+
color: rgb(0,83,133);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* ===Article sidebars===*/
|
|
146
|
+
aside ul {
|
|
147
|
+
padding: 0;
|
|
148
|
+
color: rgb(85,98,112);
|
|
149
|
+
font-size: 0.9em;
|
|
150
|
+
list-style: none;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* 1.3. HEADERS
|
|
154
|
+
-------------------------------- */
|
|
155
|
+
|
|
156
|
+
/* ===Global header===*/
|
|
157
|
+
header {
|
|
158
|
+
background-color: rgb(0,83,133);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
/* ===Logo=== */
|
|
162
|
+
#logo {
|
|
163
|
+
background-color: rgb(0,0,0);
|
|
164
|
+
font-family: 'Merriweather', serif;
|
|
165
|
+
font-size: 1.5em;
|
|
166
|
+
font-weight: 600;
|
|
167
|
+
margin: 0;
|
|
168
|
+
text-align: center;
|
|
169
|
+
}
|
|
170
|
+
#logo .fa-coffee::after {
|
|
171
|
+
/* Creates a space after the logo symbol relative to font-size */
|
|
172
|
+
color: transparent;
|
|
173
|
+
content: "-";
|
|
174
|
+
text-shadow: none;
|
|
175
|
+
}
|
|
176
|
+
#logo a:hover {
|
|
177
|
+
background-color: rgb(30,30,30);
|
|
178
|
+
text-decoration: none;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* ===Page header=== */
|
|
182
|
+
main header {
|
|
183
|
+
background-color: rgb(85,98,112);
|
|
184
|
+
background-position: center;
|
|
185
|
+
margin: 0 auto 1em auto;
|
|
186
|
+
overflow: hidden;
|
|
187
|
+
}
|
|
188
|
+
main header h1 {
|
|
189
|
+
background-color: rgba(255,255,255,0.85);
|
|
190
|
+
box-sizing: border-box;
|
|
191
|
+
font-size: 2em;
|
|
192
|
+
line-height: 1.6em;
|
|
193
|
+
margin: 10vh auto 0 auto;
|
|
194
|
+
padding: 0 10px;
|
|
195
|
+
text-shadow: none;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* ===Hero headers===*/
|
|
199
|
+
.hero div {
|
|
200
|
+
margin: 10% auto;
|
|
201
|
+
}
|
|
202
|
+
.hero h1 {
|
|
203
|
+
display: inline;
|
|
204
|
+
font-family: "Coming Soon", cursive;
|
|
205
|
+
white-space: pre-wrap;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
/* 1.4. NAVIGATION
|
|
209
|
+
-------------------------------- */
|
|
210
|
+
|
|
211
|
+
nav {
|
|
212
|
+
/* Center the nav bar */
|
|
213
|
+
margin: 0 auto;
|
|
214
|
+
}
|
|
215
|
+
nav ul {
|
|
216
|
+
display: flex;
|
|
217
|
+
flex-flow: row wrap;
|
|
218
|
+
justify-content: flex-end;
|
|
219
|
+
margin: 0;
|
|
220
|
+
padding: 0;
|
|
221
|
+
}
|
|
222
|
+
nav li {
|
|
223
|
+
flex: 1 100%;
|
|
224
|
+
list-style: none;
|
|
225
|
+
text-align: center;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
nav a {
|
|
229
|
+
color: rgb(255,255,255);
|
|
230
|
+
display: block;
|
|
231
|
+
padding: 10px;
|
|
232
|
+
text-decoration: none;
|
|
233
|
+
text-shadow: 1px 1px rgb(40,40,40);
|
|
234
|
+
white-space: nowrap;
|
|
235
|
+
}
|
|
236
|
+
nav a:visited { color: rgb(255,255,255); }
|
|
237
|
+
nav a:hover { color: rgb(212,212,212); }
|
|
238
|
+
|
|
239
|
+
/* ===Highlighted nav items=== */
|
|
240
|
+
nav li.highlight:nth-of-type(2n+1) a {
|
|
241
|
+
background-color: rgb(33,123,22);
|
|
242
|
+
}
|
|
243
|
+
nav li.highlight:nth-of-type(2n+2) a {
|
|
244
|
+
background-color: rgb(215,18,139);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
/* ===Top navigation=== */
|
|
248
|
+
#mobile-menu-toggle {
|
|
249
|
+
color: rgb(255,255,255);
|
|
250
|
+
font-size: 1.5em;
|
|
251
|
+
padding: 10px;
|
|
252
|
+
position: absolute;
|
|
253
|
+
right: 0;
|
|
254
|
+
}
|
|
255
|
+
#mobile-menu-toggle:hover {
|
|
256
|
+
color: rgb(212,212,212);
|
|
257
|
+
cursor: pointer;
|
|
258
|
+
}
|
|
259
|
+
header nav ul.hidden {
|
|
260
|
+
display: none;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
/* 1.5. FOOTER
|
|
264
|
+
-------------------------------- */
|
|
265
|
+
|
|
266
|
+
footer {
|
|
267
|
+
clear: both;
|
|
268
|
+
color: rgb(85,98,112);
|
|
269
|
+
font-size: 90%;
|
|
270
|
+
padding: 20px;
|
|
271
|
+
}
|
|
272
|
+
footer ul {
|
|
273
|
+
margin: 0;
|
|
274
|
+
padding: 0;
|
|
275
|
+
text-align: center;
|
|
276
|
+
}
|
|
277
|
+
footer li {
|
|
278
|
+
display: inline;
|
|
279
|
+
list-style: none;
|
|
280
|
+
}
|
|
281
|
+
footer li:after {
|
|
282
|
+
/* Each footer element is seperated with a "|" */
|
|
283
|
+
content: "|";
|
|
284
|
+
padding: 0 10px;
|
|
285
|
+
}
|
|
286
|
+
footer li:last-child:after {
|
|
287
|
+
content: "";
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
/* 1.6. HOME PAGE GALLERY
|
|
291
|
+
-------------------------------- */
|
|
292
|
+
|
|
293
|
+
.gallery {
|
|
294
|
+
display: flex;
|
|
295
|
+
flex-flow: row;
|
|
296
|
+
flex-wrap: wrap;
|
|
297
|
+
justify-content: space-between;
|
|
298
|
+
margin: 10px auto 0 auto;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
/* Each gallery item is a article */
|
|
302
|
+
.gallery article {
|
|
303
|
+
background-color: rgb(0,0,0);
|
|
304
|
+
background-position: center;
|
|
305
|
+
border-left-style: solid;
|
|
306
|
+
border-width: 5px;
|
|
307
|
+
box-shadow: inset -1px 0 50px 1px rgb(222,222,222);
|
|
308
|
+
box-sizing: border-box;
|
|
309
|
+
flex: 1 1 100%;
|
|
310
|
+
height: 150px;
|
|
311
|
+
margin: 0 0 10px 0;
|
|
312
|
+
overflow: hidden;
|
|
313
|
+
padding: 0;
|
|
314
|
+
position: relative;
|
|
315
|
+
}
|
|
316
|
+
/* Gallery item borders switch between 3 colors */
|
|
317
|
+
.gallery article:nth-of-type(3n+1) {
|
|
318
|
+
border-color: rgb(33,123,22);
|
|
319
|
+
}
|
|
320
|
+
.gallery article:nth-of-type(3n+2) {
|
|
321
|
+
border-color: rgb(215,18,139);
|
|
322
|
+
}
|
|
323
|
+
.gallery article:nth-of-type(3n+3) {
|
|
324
|
+
border-color: rgb(0,83,133);
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.gallery h2 {
|
|
328
|
+
box-sizing: border-box;
|
|
329
|
+
color: rgb(255,255,255);
|
|
330
|
+
display: inline;
|
|
331
|
+
font-size: 1.5em;
|
|
332
|
+
font-weight: 600;
|
|
333
|
+
line-height: 1.8;
|
|
334
|
+
padding: 7px 7px 7px 0;
|
|
335
|
+
text-shadow: 1px 1px rgb(40,40,40);
|
|
336
|
+
transition: background-color ease-out 0.2s;
|
|
337
|
+
vertical-align: top;
|
|
338
|
+
white-space: pre-wrap;
|
|
339
|
+
}
|
|
340
|
+
.gallery a {
|
|
341
|
+
color: rgb(255,255,255);
|
|
342
|
+
height: 100%;
|
|
343
|
+
left: 0;
|
|
344
|
+
position: absolute;
|
|
345
|
+
top: 0;
|
|
346
|
+
width: 100%;
|
|
347
|
+
}
|
|
348
|
+
.gallery a:active {
|
|
349
|
+
opacity: 0.85;
|
|
350
|
+
}
|
|
351
|
+
.gallery a span {
|
|
352
|
+
background-color: rgb(0,171,202);
|
|
353
|
+
border-radius: 10px;
|
|
354
|
+
bottom: 0;
|
|
355
|
+
margin: 10px;
|
|
356
|
+
padding: 10px;
|
|
357
|
+
position: absolute;
|
|
358
|
+
right: 0;
|
|
359
|
+
}
|
|
360
|
+
.gallery a span:hover {
|
|
361
|
+
box-shadow: 0 0 10px 3px rgb(0,171,202);
|
|
362
|
+
}
|
|
363
|
+
.gallery a span::after {
|
|
364
|
+
content: " >";
|
|
365
|
+
vertical-align: middle;
|
|
366
|
+
}
|
|
367
|
+
/* Gallery items' color on hover switches between 3 colors */
|
|
368
|
+
.gallery article:nth-of-type(3n+1) {
|
|
369
|
+
background-color: rgb(33,123,22);
|
|
370
|
+
}
|
|
371
|
+
.gallery article:nth-of-type(3n+2) {
|
|
372
|
+
background-color: rgb(215,18,139);
|
|
373
|
+
}
|
|
374
|
+
.gallery article:nth-of-type(3n+3) {
|
|
375
|
+
background-color: rgb(0,83,133);
|
|
376
|
+
}
|
|
377
|
+
.gallery article:hover:not(.cover) {
|
|
378
|
+
background-image: none !important;
|
|
379
|
+
box-shadow: none;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
/* Background color of gallery items text switches between 3 colors */
|
|
383
|
+
.gallery article:nth-of-type(3n+1) h2 {
|
|
384
|
+
background-color: rgb(33,123,22);
|
|
385
|
+
}
|
|
386
|
+
.gallery article:nth-of-type(3n+2) h2 {
|
|
387
|
+
background-color: rgb(215,18,139);
|
|
388
|
+
}
|
|
389
|
+
.gallery article:nth-of-type(3n+3) h2 {
|
|
390
|
+
background-color: rgb(0,83,133);
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
/* 1.7. BACKGROUND IMAGES
|
|
394
|
+
--------------------------------
|
|
395
|
+
|
|
396
|
+
/* ===HOME PAGE=== */
|
|
397
|
+
#welcome {
|
|
398
|
+
background-image: url("../img/welcome.jpg");
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
/* ===GAMES=== */
|
|
402
|
+
#block-slider-3 {
|
|
403
|
+
background-image: url("../img/tea1.jpg");
|
|
404
|
+
}
|
|
405
|
+
#block-slider-3 {
|
|
406
|
+
background-image: url("../img/tea2.jpg");
|
|
407
|
+
}
|
|
408
|
+
#spot-difference {
|
|
409
|
+
background-image: url("../img/spot-the-difference.png");
|
|
410
|
+
}
|
|
411
|
+
#tic-tac-toe {
|
|
412
|
+
background-image: url("../img/tea1.jpg");
|
|
413
|
+
}
|
|
414
|
+
#cat-teapot {
|
|
415
|
+
background-image: url("../img/cat.jpg");
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
/* ===REVIEWS=== */
|
|
419
|
+
#reviews {
|
|
420
|
+
background-image: url("../img/reviews.jpg");
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
/* ===ABOUT=== */
|
|
424
|
+
#about {
|
|
425
|
+
background-color: rgb(202,135,26);
|
|
426
|
+
background-image: url("../img/checkers.jpg");
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
/* ===NEWS=== */
|
|
430
|
+
#news {
|
|
431
|
+
background-image: url("../img/news.jpg");
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
/* ===CONTACT=== */
|
|
435
|
+
#contact {
|
|
436
|
+
background-image: url("../img/contact.jpg");
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
/* ================================
|
|
440
|
+
2.0. SMARTPHONE LANDSCAPE/SMALL TABLET BREAKPOINT
|
|
441
|
+
================================ */
|
|
442
|
+
|
|
443
|
+
@media only screen and (min-width: 500px) {
|
|
444
|
+
|
|
445
|
+
/* 2.1. PRIMARY
|
|
446
|
+
-------------------------------- */
|
|
447
|
+
|
|
448
|
+
aside li {
|
|
449
|
+
display: inline-block;
|
|
450
|
+
}
|
|
451
|
+
aside li:after {
|
|
452
|
+
content: "|";
|
|
453
|
+
padding: 0 7px;
|
|
454
|
+
}
|
|
455
|
+
aside li:last-child:after {
|
|
456
|
+
content: "";
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
/* 2.2. HEADERS
|
|
460
|
+
-------------------------------- */
|
|
461
|
+
|
|
462
|
+
main header h1 {
|
|
463
|
+
font-size: 2.5em;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
/* 2.3. NAVIGATION
|
|
467
|
+
-------------------------------- */
|
|
468
|
+
|
|
469
|
+
nav ul {
|
|
470
|
+
flex-flow: row wrap;
|
|
471
|
+
justify-content: flex-end;
|
|
472
|
+
margin: 0;
|
|
473
|
+
padding: 10px;
|
|
474
|
+
}
|
|
475
|
+
nav li {
|
|
476
|
+
flex: 1;
|
|
477
|
+
margin: 0 10px 0 0;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
/* ===Highlighted nav items=== */
|
|
481
|
+
nav li.highlight a {
|
|
482
|
+
border-radius: 5px;
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
/* ===Top navigation=== */
|
|
486
|
+
#mobile-menu-toggle {
|
|
487
|
+
display: none;
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
header nav ul.hidden {
|
|
491
|
+
display: flex;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
/* 2.4. HOME PAGE GALLERY
|
|
495
|
+
-------------------------------- */
|
|
496
|
+
|
|
497
|
+
.gallery article {
|
|
498
|
+
height: 180px;
|
|
499
|
+
/* 2 columns in gallery */
|
|
500
|
+
}
|
|
501
|
+
.gallery.cols-2 article, .gallery.cols-3 article {
|
|
502
|
+
max-width: 49%;
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
/* ================================
|
|
507
|
+
3.0. DESKTOP BREAKPOINT
|
|
508
|
+
================================ */
|
|
509
|
+
|
|
510
|
+
@media only screen and (min-width: 768px) {
|
|
511
|
+
|
|
512
|
+
/* 3.1. PRIMARY
|
|
513
|
+
-------------------------------- */
|
|
514
|
+
article h2 {
|
|
515
|
+
width: 100%;
|
|
516
|
+
}
|
|
517
|
+
article {
|
|
518
|
+
max-width: 900px;
|
|
519
|
+
padding: 0 20px;
|
|
520
|
+
}
|
|
521
|
+
article.with-sidebar {
|
|
522
|
+
display: flex;
|
|
523
|
+
flex-wrap: wrap;
|
|
524
|
+
}
|
|
525
|
+
.with-sidebar section:last-child, .with-sidebar aside:last-child {
|
|
526
|
+
padding-left: 20px;
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
aside {
|
|
530
|
+
width: 250px;
|
|
531
|
+
}
|
|
532
|
+
aside li {
|
|
533
|
+
display: block;
|
|
534
|
+
}
|
|
535
|
+
aside li:after {
|
|
536
|
+
content: "";
|
|
537
|
+
padding: 0;
|
|
538
|
+
}
|
|
539
|
+
section {
|
|
540
|
+
flex: 1;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
/* 3.2. HEADERS
|
|
544
|
+
-------------------------------- */
|
|
545
|
+
|
|
546
|
+
#logo {
|
|
547
|
+
font-size: 2em;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
/* ===Page header=== */
|
|
551
|
+
main header {
|
|
552
|
+
max-width: 1200px;
|
|
553
|
+
}
|
|
554
|
+
main header h1 {
|
|
555
|
+
max-width: 900px;
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
/* ===Hero headers===*/
|
|
559
|
+
.hero div {
|
|
560
|
+
max-width: 900px;
|
|
561
|
+
}
|
|
562
|
+
.hero h1 {
|
|
563
|
+
font-size: 3.5em;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
/* 3.3. NAVIGATION
|
|
567
|
+
-------------------------------- */
|
|
568
|
+
|
|
569
|
+
nav {
|
|
570
|
+
display: flex;
|
|
571
|
+
/* Moves header contents onto one row */
|
|
572
|
+
flex-flow: row wrap;
|
|
573
|
+
max-width: 900px;
|
|
574
|
+
}
|
|
575
|
+
nav ul, header nav ul.hidden {
|
|
576
|
+
display: block;
|
|
577
|
+
flex: 1;
|
|
578
|
+
text-align: right;
|
|
579
|
+
}
|
|
580
|
+
nav li {
|
|
581
|
+
display: inline-block;
|
|
582
|
+
margin: 0 20px 0 0;
|
|
583
|
+
}
|
|
584
|
+
nav li:last-of-type {
|
|
585
|
+
margin: 0;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
/* ===Top navigation===*/
|
|
589
|
+
header nav ul {
|
|
590
|
+
display: block;
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
/* 3.4. HOME PAGE GALLERY
|
|
594
|
+
-------------------------------- */
|
|
595
|
+
|
|
596
|
+
.gallery {
|
|
597
|
+
max-width: 1200px;
|
|
598
|
+
}
|
|
599
|
+
.gallery.cols-3 article {
|
|
600
|
+
/* 3 columns in gallery */
|
|
601
|
+
max-width: 32.5%;
|
|
602
|
+
}
|
|
603
|
+
}
|