simply-cyan 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +98 -0
- data/_includes/footer.html +4 -0
- data/_includes/functions.html +4 -0
- data/_includes/functionsscript.html +31 -0
- data/_includes/google-analytics.html +9 -0
- data/_includes/head.html +15 -0
- data/_includes/header.html +25 -0
- data/_layouts/archives.html +21 -0
- data/_layouts/categories.html +16 -0
- data/_layouts/category_single.html +28 -0
- data/_layouts/default.html +14 -0
- data/_layouts/home.html +19 -0
- data/_layouts/page.html +14 -0
- data/_layouts/post.html +13 -0
- data/_sass/_settings.scss +104 -0
- data/_sass/_theme.scss +324 -0
- data/_sass/simply-cyan.scss +7 -0
- data/assets/styles.scss +6 -0
- metadata +106 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: ebb57ac84eb48cfd7a87b2e62c9c76e2527a4b6996f60ada598f23e731f82867
|
4
|
+
data.tar.gz: 0c7253bde113bd62a8a50e4d7fa6f709e29b65d226b0dfbcd620082608ae1e30
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 192fd37862cd95df768e1ab0bc4e0b2b812eb5404a14a4a3f85da46c32f23cb5342c92283880574459036f45bb26291a7a691bd5c7c50a282ef4383135abdb17
|
7
|
+
data.tar.gz: a7e5fa509dada40e3f4e477826a2dd6e43cd083915dc3537deaa18f98fdf2c229e07254861d3eb4a237260b86cea0ee13064e71320402ad354a729ab75a568b2
|
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2022
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,98 @@
|
|
1
|
+
# simply-cyan
|
2
|
+
|
3
|
+
Simply Cyan is a Jekyll theme dedicated to text and reading. This theme focuses on readability and clarity.
|
4
|
+
|
5
|
+
You can visit the demo website of this theme [here](https://pquod.github.io/simply-cyan-demo/).
|
6
|
+
|
7
|
+
Three main functions are at work to facilitate the reader's experience : a classic dark/light mode, but also toggles to change the font size and get bigger characters or to change the font-style (by default meant to switch between serif and sans-serif fonts).
|
8
|
+
|
9
|
+
The design of Simply Cyan is sober and elegant, yet pop with its bright colorful oblique stripes punctuating the screen.
|
10
|
+
|
11
|
+
Symply Cyan can feature a multitude of authors and offers a page to display all of their profiles, as well as an archives page to display all the site's posts.
|
12
|
+
|
13
|
+
|
14
|
+
## Installation
|
15
|
+
|
16
|
+
Add this line to your Jekyll site's `Gemfile` to add the theme as a dependancy:
|
17
|
+
|
18
|
+
```ruby
|
19
|
+
gem "simply-cyan"
|
20
|
+
```
|
21
|
+
|
22
|
+
Run `bundle install` in the root file of your project:
|
23
|
+
|
24
|
+
Add this line to your Jekyll site's `_config.yml` to set the theme:
|
25
|
+
|
26
|
+
```yaml
|
27
|
+
theme: simply-cyan
|
28
|
+
```
|
29
|
+
|
30
|
+
Run `bundle exec jekyll serve` to build and serve your site.
|
31
|
+
|
32
|
+
You can use the `config.yml` to update the configuration of your website and set things such as its title, description, navigation links and a lot more
|
33
|
+
|
34
|
+
## Usage
|
35
|
+
|
36
|
+
### Customizing styles
|
37
|
+
|
38
|
+
You can customize many style parameters of the Simply Cyan theme by changing the different variables in the `settings.scss` file of the project (`_sass/_settings.scss`). You'll find there such parameters as the colors of the dark and white modes, fonts, line height, font sizes etc.
|
39
|
+
|
40
|
+
You can also overwrite the complete theme with your own custom file by matching its filename and path.
|
41
|
+
|
42
|
+
### Accessing site parameters
|
43
|
+
|
44
|
+
Several parameters are also accessible in the `config.yml` file. For example, you can choose there whether to display or not the different reading functions (dark mode, big fonts etc.) of the site.
|
45
|
+
|
46
|
+
### Creating a post
|
47
|
+
|
48
|
+
You are now ready to add content to your new jekyll site. You can do so by adding new posts in the `_posts` folder. Be sure your new post begins with the same front matter lines than the ones in the example posts (check [Jekyll documentation](https://jekyllrb.com/docs/posts/) in case you're not sure how to make your first post):
|
49
|
+
|
50
|
+
```
|
51
|
+
---
|
52
|
+
layout: post
|
53
|
+
title: "Example Post"
|
54
|
+
date: 2022-11-15
|
55
|
+
author:
|
56
|
+
- "Someone"
|
57
|
+
- "Someone else"
|
58
|
+
---
|
59
|
+
```
|
60
|
+
|
61
|
+
### Managing different authors
|
62
|
+
|
63
|
+
Note that if you want to have all of the authors of your site displayed on the authors page, you'll have to create a new file for each of them in the `_categories` folder. The title of this new file must match the way you wrote the author's name in the category line of the post's front matter.
|
64
|
+
|
65
|
+
You can add a description or bio to each author's page in its respective file in `_categories`.
|
66
|
+
|
67
|
+
Of course, this folder and the category files can be used to display other things than authors. You just have to change the title of the `categories.md` page in order to display your posts grouped by any category you choose.
|
68
|
+
|
69
|
+
### Homepage
|
70
|
+
|
71
|
+
By default, the homepage displays the ten newest posts. This number can be changed in the `config.yml` file.
|
72
|
+
|
73
|
+
### Archives
|
74
|
+
|
75
|
+
The archives page displays the integrality of the posts published on your site.
|
76
|
+
|
77
|
+
## Contributing
|
78
|
+
|
79
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/pquod/simply-cyan. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
80
|
+
|
81
|
+
If you have any idea about improving this theme or if you find any lack in its documentation, feel free to write at l.desaubliaux@gmail.com, I'd be happy to keep on making this theme better and better for your use!
|
82
|
+
|
83
|
+
## Development
|
84
|
+
|
85
|
+
To set up your environment to develop this theme, run `bundle install`.
|
86
|
+
|
87
|
+
Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
|
88
|
+
|
89
|
+
When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
|
90
|
+
To add a custom directory to your theme-gem, please edit the regexp in `simply-cyan.gemspec` accordingly.
|
91
|
+
|
92
|
+
## License
|
93
|
+
|
94
|
+
The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
95
|
+
|
96
|
+
## Credits
|
97
|
+
|
98
|
+
Thanks a lots to Quentin, Candice and Robinson, the people behind the conception of the original Internet Exploreur website who helped me a lot designing it.
|
@@ -0,0 +1,31 @@
|
|
1
|
+
<script>
|
2
|
+
document.addEventListener('DOMContentLoaded', function () {
|
3
|
+
const checkbox = document.querySelector('.dark-mode-checkbox');
|
4
|
+
|
5
|
+
checkbox.checked = localStorage.getItem('darkMode') === 'true';
|
6
|
+
|
7
|
+
checkbox.addEventListener('change', function (event) {
|
8
|
+
localStorage.setItem('darkMode', event.currentTarget.checked);
|
9
|
+
});
|
10
|
+
});
|
11
|
+
|
12
|
+
document.addEventListener('DOMContentLoaded', function () {
|
13
|
+
const checkbox = document.querySelector('.typo-plus-checkbox');
|
14
|
+
|
15
|
+
checkbox.checked = localStorage.getItem('typoPlus') === 'true';
|
16
|
+
|
17
|
+
checkbox.addEventListener('change', function (event) {
|
18
|
+
localStorage.setItem('typoPlus', event.currentTarget.checked);
|
19
|
+
});
|
20
|
+
});
|
21
|
+
|
22
|
+
document.addEventListener('DOMContentLoaded', function () {
|
23
|
+
const checkbox = document.querySelector('.typo-dys-checkbox');
|
24
|
+
|
25
|
+
checkbox.checked = localStorage.getItem('typoDys') === 'true';
|
26
|
+
|
27
|
+
checkbox.addEventListener('change', function (event) {
|
28
|
+
localStorage.setItem('typoDys', event.currentTarget.checked);
|
29
|
+
});
|
30
|
+
});
|
31
|
+
</script>
|
@@ -0,0 +1,9 @@
|
|
1
|
+
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
|
2
|
+
<script>
|
3
|
+
window['ga-disable-{{ site.google_analytics }}'] = window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1";
|
4
|
+
window.dataLayer = window.dataLayer || [];
|
5
|
+
function gtag(){dataLayer.push(arguments);}
|
6
|
+
gtag('js', new Date());
|
7
|
+
|
8
|
+
gtag('config', '{{ site.google_analytics }}');
|
9
|
+
</script>
|
data/_includes/head.html
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html lang="{{page.lang | default: site.lang | default: "en"}}">
|
3
|
+
<head>
|
4
|
+
<meta charset="utf-8">
|
5
|
+
<meta name="viewport" content="width-device-width, intial-scale=1">
|
6
|
+
{% if page.indexing == false %}
|
7
|
+
<meta name="robots" content="noindex">
|
8
|
+
{% endif %}
|
9
|
+
<title>{{ site.title }}</title>
|
10
|
+
<meta name="description" content="{{ site.description }}">
|
11
|
+
<link rel="stylesheet" href="{{ "/assets/styles.css" | relative_url }}">
|
12
|
+
{%- if jekyll.environment == 'production' and site.google_analytics -%}
|
13
|
+
{%- include google-analytics.html -%}
|
14
|
+
{%- endif -%}
|
15
|
+
</head>
|
@@ -0,0 +1,25 @@
|
|
1
|
+
<header>
|
2
|
+
<div class="site_title" role="heading" aria-level="1">
|
3
|
+
<a href="{{ '/' | relative_url }}" class="site-title">
|
4
|
+
{{ site.title | escape }}
|
5
|
+
</a>
|
6
|
+
</div>
|
7
|
+
<nav>
|
8
|
+
{% assign pages = site.pages %}
|
9
|
+
{% for page in pages %}
|
10
|
+
{% if page.nav_header == true %}
|
11
|
+
<a href="{{ page.url | relative_url }}" class="pages_links">
|
12
|
+
<span class="pages_names">{{ page.title | escape }}</span>
|
13
|
+
</a>
|
14
|
+
{% endif %}
|
15
|
+
{% endfor %}
|
16
|
+
</nav>
|
17
|
+
<div class="site_functions">
|
18
|
+
{% if site.darkmode == true %}
|
19
|
+
<label class="dark-mode-label" aria-label="Night Mode" for="dark-mode"></label>
|
20
|
+
{% endif %}
|
21
|
+
{% if site.typosize == true %}
|
22
|
+
<label class="typo-plus-label" aria-label="Change font size" for="typo-plus"></label>
|
23
|
+
{% endif %}
|
24
|
+
</div>
|
25
|
+
</header>
|
@@ -0,0 +1,21 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
<article>
|
5
|
+
<h1 class="custom-pages-title">All the articles</h1>
|
6
|
+
<table class="archives-table">
|
7
|
+
{% for post in site.posts %}
|
8
|
+
<tr>
|
9
|
+
<td>
|
10
|
+
<a href="{{ post.url | relative_url}}">
|
11
|
+
<h2 class="list_post_title"><span class="a-nude">{{ post.title | truncate: 30 | escape }}</span></h2>
|
12
|
+
</a>
|
13
|
+
</td>
|
14
|
+
<td class="archives-date">
|
15
|
+
<h2 class="list_post_title">✸ {{ post.date | date: "%d/%m/%Y" | escape }}</h2>
|
16
|
+
</td>
|
17
|
+
</tr>
|
18
|
+
{% endfor %}
|
19
|
+
</table>
|
20
|
+
<div class="line"></div>
|
21
|
+
</article>
|
@@ -0,0 +1,16 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
<article>
|
5
|
+
<h1 class="custom-pages-title">All the authors</h1>
|
6
|
+
<div class="authors-list">
|
7
|
+
{% assign sorted_authors = site.categories | sort %}
|
8
|
+
{% for author in sorted_authors %}
|
9
|
+
<a href="{{ author.url | relative_url }}">
|
10
|
+
<h2 class="list_post_title">
|
11
|
+
<span class="a-nude"><span class="desktop-star">✸</span> {{ author.title }} <span class="desktop-star">✸</span></span>
|
12
|
+
</h2>
|
13
|
+
</a>
|
14
|
+
{% endfor %}
|
15
|
+
</div>
|
16
|
+
</article>
|
@@ -0,0 +1,28 @@
|
|
1
|
+
---
|
2
|
+
layout: page
|
3
|
+
---
|
4
|
+
|
5
|
+
{{ content }}
|
6
|
+
{% assign biocontent = page.content | strip_newlines %}
|
7
|
+
{% unless biocontent == '' %}
|
8
|
+
<h2>Posts by {{page.title}}</h2>
|
9
|
+
{% endunless %}
|
10
|
+
<table class="archives-table">
|
11
|
+
{% for post in site.posts %}
|
12
|
+
{% assign author_list = post.categories %}
|
13
|
+
{% for author in author_list %}
|
14
|
+
{% if author == page.title %}
|
15
|
+
<tr>
|
16
|
+
<td>
|
17
|
+
<a href="{{ post.url | relative_url}}">
|
18
|
+
<p><span class="a-nude">{{ post.title | truncate: 30 | escape }}</span></p>
|
19
|
+
</a>
|
20
|
+
</td>
|
21
|
+
<td class="archives-date">
|
22
|
+
<p class="list_post_title">✸ {{ post.date | date: "%d/%m/%Y" | escape }}</p>
|
23
|
+
</td>
|
24
|
+
</tr>
|
25
|
+
{% endif %}
|
26
|
+
{% endfor %}
|
27
|
+
{% endfor %}
|
28
|
+
</table>
|
@@ -0,0 +1,14 @@
|
|
1
|
+
|
2
|
+
{%- include head.html -%}
|
3
|
+
<body>
|
4
|
+
{%- include functions.html -%}
|
5
|
+
{%- include header.html -%}
|
6
|
+
<main class="page_content" aria-label="Content">
|
7
|
+
|
8
|
+
{{ content | markdownify }}
|
9
|
+
|
10
|
+
</main>
|
11
|
+
{%- include footer.html -%}
|
12
|
+
{%- include functionsscript.html -%}
|
13
|
+
</body>
|
14
|
+
</html>
|
data/_layouts/home.html
ADDED
@@ -0,0 +1,19 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
<article>
|
5
|
+
{% assign posts = site.posts %}
|
6
|
+
{% assign posts_limit = site.home-posts-limit %}
|
7
|
+
{% if posts.size > 0 %}
|
8
|
+
<div class="apercu-post" role="list">
|
9
|
+
{% for post in posts limit: posts_limit %}
|
10
|
+
<a href="{{ post.url | relative_url }}" role="listitem">
|
11
|
+
<h1 class="list_post_title"><span class="a-nude">{{ post.title | escape }}</span></h1>
|
12
|
+
</a>
|
13
|
+
{% assign authors = post.category | join: ", " %}
|
14
|
+
<h2 class="list_post_info">{{ authors }} ✷ {{ post.date | date_to_long_string }}</h2>
|
15
|
+
<div class="line"></div>
|
16
|
+
{% endfor %}
|
17
|
+
</div>
|
18
|
+
{% endif %}
|
19
|
+
</article>
|
data/_layouts/page.html
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
---
|
2
|
+
layout: default
|
3
|
+
---
|
4
|
+
<article>
|
5
|
+
<h1>{{ page.title }}</h1>
|
6
|
+
{% assign biocontent = page.content | strip_newlines %}
|
7
|
+
{% unless page.collection == "categories" and biocontent == '' %}
|
8
|
+
<div class="page-typo-type">
|
9
|
+
<label class="typo-dys-label" aria-label="typo sans-serif" for="typo-dys"></label>
|
10
|
+
</div>
|
11
|
+
{% endunless %}
|
12
|
+
{{ content }}
|
13
|
+
<div class="line"></div>
|
14
|
+
</article>
|
data/_layouts/post.html
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
---
|
2
|
+
layout: page
|
3
|
+
---
|
4
|
+
|
5
|
+
{{ content }}
|
6
|
+
{% assign authors = page.category %}
|
7
|
+
<div class="post_footer">
|
8
|
+
<h2 class="list_post_info">
|
9
|
+
{% for author in authors %}
|
10
|
+
<a href="{{ site.baseurl }}/categories/{{ author | slugify }}">{{ author }}</a> ✷
|
11
|
+
{% endfor %} {{ page.date | date_to_long_string }}
|
12
|
+
</h2>
|
13
|
+
</div>
|
@@ -0,0 +1,104 @@
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap");
|
2
|
+
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap");
|
3
|
+
|
4
|
+
:root {
|
5
|
+
// Variable for the light mode
|
6
|
+
--bg-color: #f2f2f2; // Background color
|
7
|
+
--font-serif: "Libre Baskerville", serif; // Serif font
|
8
|
+
--font-sansserif: "Montserrat", sans-serif; // Sans-Serif font
|
9
|
+
--font-color: #333333; // Font color
|
10
|
+
--font-size: 22px; // Font size
|
11
|
+
--text-width: 35em; // Width of the area where the content of the pages and posts are displayed
|
12
|
+
--text-font: var(--font-serif); // Default font for the text
|
13
|
+
--line-height: calc(var(--font-size) * 2); // Line height
|
14
|
+
--custom-color: cyan; // Complementary color, for the lines and underlinings
|
15
|
+
--lines: linear-gradient(
|
16
|
+
to top,
|
17
|
+
var(--custom-color) 50%,
|
18
|
+
rgba(255, 255, 255, 0) 50%
|
19
|
+
); // Lines
|
20
|
+
--quote-color: #e7e8ea; // Background-color for quotes
|
21
|
+
--dark-mode-label: "DARK MODE"; // Label displayed in the header to toggle dark mode
|
22
|
+
--light-mode-label: "LIGHT MODE"; // Label displayed in the header to toggle light mode
|
23
|
+
--typo-plus-label: "A+"; // Label displayed in the header to enlarge the font size
|
24
|
+
--typo-moins-label: "A-"; // Label displayed in the header to reduce the font size
|
25
|
+
--sans-serif-label: " SANS-SERIF FONT"; // Label displayed at the top of posts to change the font-style to sans-serif
|
26
|
+
--serif-label: "SERIF FONT"; // Label displayed at the top of posts to change the font-style to serif
|
27
|
+
}
|
28
|
+
|
29
|
+
/* Dark-mode styles */
|
30
|
+
#dark-mode:checked,
|
31
|
+
#dark-mode:checked ~ .theme-container {
|
32
|
+
--bg-color: #333; // Background color
|
33
|
+
--font-color: #eee; // Font color
|
34
|
+
--custom-color: #ef1a63; // Complementary color, for the lines and underlinings
|
35
|
+
--lines: linear-gradient(
|
36
|
+
to top,
|
37
|
+
var(--custom-color) 50%,
|
38
|
+
rgba(255, 255, 255, 0) 50%
|
39
|
+
); // Lines
|
40
|
+
--quote-color: #333642; // Background-color for quotes
|
41
|
+
}
|
42
|
+
|
43
|
+
.dark-mode-label::before {
|
44
|
+
content: var(
|
45
|
+
--dark-mode-label
|
46
|
+
); // If you want to change the displayed text to change mode, change it in the :root section of this file
|
47
|
+
}
|
48
|
+
|
49
|
+
.dark-mode-checkbox:checked ~ .theme-container .dark-mode-label::before {
|
50
|
+
content: var(
|
51
|
+
--light-mode-label
|
52
|
+
); // If you want to change the displayed text to change mode, change it in the :root section of this file
|
53
|
+
}
|
54
|
+
|
55
|
+
/* Large font mode styles */
|
56
|
+
#typo-plus:checked,
|
57
|
+
#typo-plus:checked ~ .theme-container {
|
58
|
+
--font-size: 30px; // Font-size when large fonts are toggled
|
59
|
+
--line-height: 35px; // Line height when large fonts are toggled
|
60
|
+
--text-width: 60em; // Width of the area where the content of the pages and posts are displayed
|
61
|
+
.site_title {
|
62
|
+
font-size: calc(var(--font-size) * 3);
|
63
|
+
line-height: calc(var(--line-height) * 3);
|
64
|
+
}
|
65
|
+
.site_functions {
|
66
|
+
margin-top: 20px;
|
67
|
+
}
|
68
|
+
}
|
69
|
+
|
70
|
+
.typo-plus-label::before {
|
71
|
+
content: var(
|
72
|
+
--typo-plus-label
|
73
|
+
); // If you want to change the displayed text to change mode, change it in the :root section of this file
|
74
|
+
}
|
75
|
+
|
76
|
+
.typo-plus-checkbox:checked ~ .theme-container .typo-plus-label::before {
|
77
|
+
content: var(
|
78
|
+
--typo-moins-label
|
79
|
+
); // If you want to change the displayed text to change mode, change it in the :root section of this file
|
80
|
+
}
|
81
|
+
|
82
|
+
/* Typo-dys */
|
83
|
+
.typo-dys-label::before {
|
84
|
+
content: var(
|
85
|
+
--sans-serif-label
|
86
|
+
); // If you want to change the displayed text to change mode, change it in the :root section of this file
|
87
|
+
font-size: calc(
|
88
|
+
var(--font-size) / 1.5
|
89
|
+
); // Size font of the displayed text to switch between serif and sans-serif
|
90
|
+
font-family: var(--font-sansserif);
|
91
|
+
}
|
92
|
+
|
93
|
+
.typo-dys-checkbox:checked ~ .theme-container .typo-dys-label::before {
|
94
|
+
content: var(
|
95
|
+
--serif-label
|
96
|
+
); // If you want to change the displayed text to change mode, change it in the :root section of this file
|
97
|
+
font-family: var(--font-serif);
|
98
|
+
}
|
99
|
+
|
100
|
+
#typo-dys:checked,
|
101
|
+
#typo-dys:checked ~ .theme-container {
|
102
|
+
--text-font: var(--font-sansserif);
|
103
|
+
}
|
104
|
+
|
data/_sass/_theme.scss
ADDED
@@ -0,0 +1,324 @@
|
|
1
|
+
* {
|
2
|
+
margin: 0;
|
3
|
+
padding: 0;
|
4
|
+
}
|
5
|
+
|
6
|
+
.theme-container {
|
7
|
+
background-color: var(--bg-color);
|
8
|
+
color: var(--font-color);
|
9
|
+
font-family: var(--text-font);
|
10
|
+
}
|
11
|
+
|
12
|
+
.sr-only {
|
13
|
+
position: absolute;
|
14
|
+
overflow: hidden;
|
15
|
+
clip: rect(0 0 0 0);
|
16
|
+
width: 1px;
|
17
|
+
height: 1px;
|
18
|
+
margin: -1px;
|
19
|
+
padding: 0;
|
20
|
+
border: 0;
|
21
|
+
white-space: nowrap;
|
22
|
+
}
|
23
|
+
|
24
|
+
html {
|
25
|
+
height: 100%;
|
26
|
+
}
|
27
|
+
|
28
|
+
body {
|
29
|
+
height: 100%;
|
30
|
+
display: flex;
|
31
|
+
flex-direction: column;
|
32
|
+
font-size: var(--font-size);
|
33
|
+
line-height: var(--line-height);
|
34
|
+
background-color: var(--bg-color);
|
35
|
+
color: var(--font-color);
|
36
|
+
}
|
37
|
+
|
38
|
+
.grow {
|
39
|
+
flex-grow: 1;
|
40
|
+
}
|
41
|
+
|
42
|
+
h1,
|
43
|
+
h2,
|
44
|
+
h3,
|
45
|
+
h4,
|
46
|
+
h5,
|
47
|
+
h6 {
|
48
|
+
font-family: var(--font-sansserif);
|
49
|
+
}
|
50
|
+
|
51
|
+
h1 {
|
52
|
+
font-size: calc(var(--font-size) * 1.7);
|
53
|
+
}
|
54
|
+
|
55
|
+
h2 {
|
56
|
+
font-size: calc(var(--font-size) * 1.3);
|
57
|
+
}
|
58
|
+
|
59
|
+
a {
|
60
|
+
color: var(--font-color);
|
61
|
+
text-decoration: none;
|
62
|
+
}
|
63
|
+
|
64
|
+
.a-nude {
|
65
|
+
background-size: 0% 100%;
|
66
|
+
transition: background-size 0.5s 0s;
|
67
|
+
&:hover {
|
68
|
+
background: var(--lines);
|
69
|
+
background-repeat: no-repeat;
|
70
|
+
background-size: 100% 100%;
|
71
|
+
}
|
72
|
+
}
|
73
|
+
|
74
|
+
p, li {
|
75
|
+
font-size: var(--font-size);
|
76
|
+
margin-bottom: var(--line-height);
|
77
|
+
}
|
78
|
+
|
79
|
+
hr {
|
80
|
+
margin-bottom: var(--line-height);
|
81
|
+
border: 3px solid var(--custom-color);
|
82
|
+
}
|
83
|
+
|
84
|
+
tr {
|
85
|
+
line-height: calc(var(--line-height)/3);
|
86
|
+
}
|
87
|
+
|
88
|
+
blockquote {
|
89
|
+
margin-right: 25px;
|
90
|
+
margin-left: 25px;
|
91
|
+
margin-bottom: var(--line-height);
|
92
|
+
border-width: 2px;
|
93
|
+
background: var(--quote-color);
|
94
|
+
padding: 10px 10px 1px 20px;
|
95
|
+
border-left-width: 5px;
|
96
|
+
border-left-style: solid;
|
97
|
+
border-left-color: var(--custom-color);
|
98
|
+
quotes: "“" "”" "‘" "’";
|
99
|
+
}
|
100
|
+
|
101
|
+
q {
|
102
|
+
quotes: "‘" "’" "“" "”";
|
103
|
+
}
|
104
|
+
|
105
|
+
code{
|
106
|
+
background: var(--quote-color);
|
107
|
+
}
|
108
|
+
|
109
|
+
.footnotes::before {
|
110
|
+
content: "---";
|
111
|
+
}
|
112
|
+
|
113
|
+
.footnotes li {
|
114
|
+
counter-increment: my-counter;
|
115
|
+
margin-bottom: var(--line-height);
|
116
|
+
}
|
117
|
+
|
118
|
+
.footnotes li::before {
|
119
|
+
content: counter(my-counter) ". ";
|
120
|
+
font-weight: bold;
|
121
|
+
}
|
122
|
+
|
123
|
+
.footnotes p {
|
124
|
+
display: inline;
|
125
|
+
}
|
126
|
+
|
127
|
+
label {
|
128
|
+
cursor: pointer;
|
129
|
+
font-weight: bold;
|
130
|
+
font-size: var(--font-size);
|
131
|
+
background: var(--lines);
|
132
|
+
background-repeat: no-repeat;
|
133
|
+
background-size: 100% 100%;
|
134
|
+
transition: background-size 0.5s 0s;
|
135
|
+
margin-right: 20px;
|
136
|
+
padding-bottom: 2px;
|
137
|
+
}
|
138
|
+
|
139
|
+
label:hover {
|
140
|
+
background-size: 0% 100%;
|
141
|
+
}
|
142
|
+
|
143
|
+
/** HEADER **/
|
144
|
+
header {
|
145
|
+
font-family: var(--font-sansserif);
|
146
|
+
text-transform: uppercase;
|
147
|
+
margin: 30px;
|
148
|
+
line-height: calc(var(--line-height) / 1.5);
|
149
|
+
}
|
150
|
+
|
151
|
+
.site_title {
|
152
|
+
text-transform: uppercase;
|
153
|
+
display: inline-block;
|
154
|
+
font-size: calc(var(--font-size) * 2.5);
|
155
|
+
padding-bottom: 5px;
|
156
|
+
font-weight: bold;
|
157
|
+
background: none;
|
158
|
+
}
|
159
|
+
|
160
|
+
.pages_links {
|
161
|
+
display: inline-block;
|
162
|
+
font-size: calc(var(--font-size) * 1.5);
|
163
|
+
padding-right: 20px;
|
164
|
+
font-weight: bold;
|
165
|
+
}
|
166
|
+
|
167
|
+
.pages_names {
|
168
|
+
background: var(--lines);
|
169
|
+
background-repeat: no-repeat;
|
170
|
+
background-size: 100% 100%;
|
171
|
+
transition: background-size 0.5s 0s;
|
172
|
+
padding-bottom: 5px;
|
173
|
+
&:hover {
|
174
|
+
background-size: 0% 100%;
|
175
|
+
}
|
176
|
+
}
|
177
|
+
|
178
|
+
.site_functions {
|
179
|
+
margin-top: 10px;
|
180
|
+
}
|
181
|
+
|
182
|
+
/** MAIN **/
|
183
|
+
main {
|
184
|
+
padding: 30px;
|
185
|
+
min-height: 55%;
|
186
|
+
a {
|
187
|
+
background: var(--lines);
|
188
|
+
background-repeat: no-repeat;
|
189
|
+
background-size: 100% 100%;
|
190
|
+
transition: background-size 0.5s 0s;
|
191
|
+
&:hover {
|
192
|
+
background-size: 0% 100%;
|
193
|
+
}
|
194
|
+
}
|
195
|
+
}
|
196
|
+
|
197
|
+
.line {
|
198
|
+
height: 30px;
|
199
|
+
border-bottom: 10px solid var(--custom-color);
|
200
|
+
transform: rotate(2deg);
|
201
|
+
position: relative;
|
202
|
+
top: var(--line-height);
|
203
|
+
margin-bottom: calc(var(--line-height) * 3);
|
204
|
+
}
|
205
|
+
|
206
|
+
/** HOME **/
|
207
|
+
.list_post_title,
|
208
|
+
.list_post_info {
|
209
|
+
font-weight: normal;
|
210
|
+
}
|
211
|
+
|
212
|
+
.list_post_info {
|
213
|
+
font-size: 22px;
|
214
|
+
}
|
215
|
+
|
216
|
+
/** PAGES **/
|
217
|
+
article {
|
218
|
+
max-width: var(--text-width);
|
219
|
+
margin: auto;
|
220
|
+
margin-top: calc(var(--line-height) * 3);
|
221
|
+
margin-bottom: calc(var(--line-height) * 3);
|
222
|
+
|
223
|
+
}
|
224
|
+
|
225
|
+
article h1,h2,h3,h4,h5,h6{
|
226
|
+
margin-bottom: var(--line-height);
|
227
|
+
}
|
228
|
+
|
229
|
+
.page-typo-type {
|
230
|
+
margin-bottom: var(--line-height);
|
231
|
+
text-align: right;
|
232
|
+
}
|
233
|
+
|
234
|
+
.post_footer {
|
235
|
+
text-align:right;
|
236
|
+
}
|
237
|
+
|
238
|
+
/** CUSTOM-PAGES (archives & authors) **/
|
239
|
+
.custom-pages-title {
|
240
|
+
margin-bottom: calc(var(--line-height) * 2);
|
241
|
+
}
|
242
|
+
|
243
|
+
.archives-table {
|
244
|
+
width: 100%;
|
245
|
+
}
|
246
|
+
|
247
|
+
.archives-date {
|
248
|
+
text-align: right;
|
249
|
+
}
|
250
|
+
|
251
|
+
.authors-list {
|
252
|
+
text-align: center;
|
253
|
+
}
|
254
|
+
|
255
|
+
.author-archives {
|
256
|
+
margin-top: var(--line-height);
|
257
|
+
}
|
258
|
+
|
259
|
+
|
260
|
+
/** FOOTER **/
|
261
|
+
footer {
|
262
|
+
font-size: calc(var(--font-size) / 2);
|
263
|
+
text-align: center;
|
264
|
+
width: 100%;
|
265
|
+
background: var(--bg-color);
|
266
|
+
font-family: var(--font-sansserif);
|
267
|
+
}
|
268
|
+
|
269
|
+
|
270
|
+
/* Variables for responsive layouts */
|
271
|
+
@media screen and (max-width: 801px)
|
272
|
+
{
|
273
|
+
:root{
|
274
|
+
line-height: calc(var(--font-size)*1.5);
|
275
|
+
}
|
276
|
+
|
277
|
+
.site_title{
|
278
|
+
margin-bottom:calc(var(--line-height)*0.5);
|
279
|
+
}
|
280
|
+
|
281
|
+
.site_title, .list_post_title{
|
282
|
+
font-size:calc(var(--font-size)*1.5);
|
283
|
+
}
|
284
|
+
|
285
|
+
.pages_links{
|
286
|
+
font-size:var(--font-size);
|
287
|
+
}
|
288
|
+
|
289
|
+
label{
|
290
|
+
font-size: calc(var(--font-size)*0.8);
|
291
|
+
}
|
292
|
+
|
293
|
+
.typo-plus-label{
|
294
|
+
display:none;
|
295
|
+
}
|
296
|
+
|
297
|
+
article{
|
298
|
+
margin-top: var(--line-height);
|
299
|
+
margin-bottom: var(--line-height);
|
300
|
+
}
|
301
|
+
|
302
|
+
.list_post_info{
|
303
|
+
margin-bottom: 0;
|
304
|
+
}
|
305
|
+
|
306
|
+
}
|
307
|
+
|
308
|
+
@media screen and (max-width: 600px) {
|
309
|
+
tr {
|
310
|
+
line-height: var(--line-height);
|
311
|
+
}
|
312
|
+
|
313
|
+
.archives-date{
|
314
|
+
display:none;
|
315
|
+
}
|
316
|
+
|
317
|
+
.authors-list{
|
318
|
+
text-align:left;
|
319
|
+
}
|
320
|
+
|
321
|
+
.desktop-star{
|
322
|
+
display:none;
|
323
|
+
}
|
324
|
+
}
|
data/assets/styles.scss
ADDED
metadata
ADDED
@@ -0,0 +1,106 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: simply-cyan
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- P_Quod
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2023-01-12 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: jekyll
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - "~>"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '4.0'
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - "~>"
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '4.0'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: bundler
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - "~>"
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '1.16'
|
34
|
+
type: :development
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - "~>"
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '1.16'
|
41
|
+
- !ruby/object:Gem::Dependency
|
42
|
+
name: rake
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
44
|
+
requirements:
|
45
|
+
- - "~>"
|
46
|
+
- !ruby/object:Gem::Version
|
47
|
+
version: '12.0'
|
48
|
+
type: :development
|
49
|
+
prerelease: false
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
51
|
+
requirements:
|
52
|
+
- - "~>"
|
53
|
+
- !ruby/object:Gem::Version
|
54
|
+
version: '12.0'
|
55
|
+
description:
|
56
|
+
email:
|
57
|
+
- l.desaubliaux@gmail.com
|
58
|
+
executables: []
|
59
|
+
extensions: []
|
60
|
+
extra_rdoc_files: []
|
61
|
+
files:
|
62
|
+
- LICENSE.txt
|
63
|
+
- README.md
|
64
|
+
- _includes/footer.html
|
65
|
+
- _includes/functions.html
|
66
|
+
- _includes/functionsscript.html
|
67
|
+
- _includes/google-analytics.html
|
68
|
+
- _includes/head.html
|
69
|
+
- _includes/header.html
|
70
|
+
- _layouts/archives.html
|
71
|
+
- _layouts/categories.html
|
72
|
+
- _layouts/category_single.html
|
73
|
+
- _layouts/default.html
|
74
|
+
- _layouts/home.html
|
75
|
+
- _layouts/page.html
|
76
|
+
- _layouts/post.html
|
77
|
+
- _sass/_settings.scss
|
78
|
+
- _sass/_theme.scss
|
79
|
+
- _sass/simply-cyan.scss
|
80
|
+
- assets/styles.scss
|
81
|
+
homepage: https://pquod.github.io/simply-cyan-demo/
|
82
|
+
licenses:
|
83
|
+
- MIT
|
84
|
+
metadata: {}
|
85
|
+
post_install_message:
|
86
|
+
rdoc_options: []
|
87
|
+
require_paths:
|
88
|
+
- lib
|
89
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
90
|
+
requirements:
|
91
|
+
- - ">="
|
92
|
+
- !ruby/object:Gem::Version
|
93
|
+
version: '0'
|
94
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
95
|
+
requirements:
|
96
|
+
- - ">="
|
97
|
+
- !ruby/object:Gem::Version
|
98
|
+
version: '0'
|
99
|
+
requirements: []
|
100
|
+
rubygems_version: 3.1.6
|
101
|
+
signing_key:
|
102
|
+
specification_version: 4
|
103
|
+
summary: Simply-cyan is a clear and elegant theme dedicated to text-based websites.
|
104
|
+
It contains an archives functionality and can handle multiple authors. The theme
|
105
|
+
also has a dark/light mode.
|
106
|
+
test_files: []
|