{{ category }}
15 |
16 | header_text in _config.yml"}} {{ post.title }}
26 |{{ site.data.language.str_last_modified | default: "Last modified on" }} {{ site.data.language.str_months[last_modified_month] | default: include.last_modified | date: "%B" }} {{ include.last_modified | date: "%d, %Y" }}
25 | {% endif %} 26 |There are no blog posts
header_text in _config.yml # Change Blog header text
13 | header_feature_image: assets/img/header/triangular.jpeg
14 | header_feature_image_responsive: true
15 | footer_text: >
16 | Powered by Jekyll with Type on Strap
17 |
18 | # Blog
19 | excerpt: true # Or "truncate" (first 250 characters), "false" to disable
20 | post_navigation: true
21 | color_image: /assets/img/lineart.png # A bit transparent for color posts.
22 |
23 | # Features
24 | # More in the _data folder for comments, share buttons, author and language
25 | # For layout customization, go to the "_sass > base" folder, and check "_variables.scss"
26 | katex: true # Enable if using math markup
27 | mermaid: default # Enable mermaid-js for diagrams, use theme: base, forest, dark, default, neutral
28 | google_analytics: # Measurement ID, e.g. "G-00000"
29 | cookie_consent: false # To respect the usage of cookies
30 | color_theme: auto # auto, dark or light
31 |
32 | # PAGINATION
33 | paginate: 5
34 | paginate_path: "/blog/page:num"
35 |
36 | # PORTFOLIO
37 | collections:
38 | portfolio:
39 | output: true
40 | permalink: /:collection/:name
41 |
42 | # BUILD SETTINGS
43 | sass:
44 | style: compressed
45 | quiet_deps: true
46 | plugins: [jekyll-paginate, jekyll-seo-tag, jekyll-feed]
47 | exclude: [".jekyll-cache", ".jekyll-metadata", ".idea", "vendor/*", "assets/node_modules/*", ".github/*"]
48 |
49 | # theme: type-on-strap # if using the theme as a jekyll theme gem
50 | remote_theme: sylhare/Type-on-Strap # If using as a remote_theme in github
51 |
--------------------------------------------------------------------------------
/_sass/layouts/_blog.scss:
--------------------------------------------------------------------------------
1 | /* --- Header text feature --- */
2 | .call-out {
3 | @extend %padding-header;
4 | display: inline-block;
5 | width: 100%;
6 | height: 100%;
7 | font-size: 1.2em;
8 | text-align: center;
9 | color: var(--header-text);
10 | background: no-repeat var(--header-background);
11 | backdrop-filter: brightness(0.5);
12 | background-size: cover;
13 |
14 | h1 {
15 | font-family: $font-family-logo;
16 | @extend .subtle-txt-shadow;
17 | }
18 |
19 | /* --- Responsive --- */
20 | @media screen and (max-width: $m-break) {
21 | background-size: 170% auto;
22 | }
23 |
24 | @media screen and (max-width: 450px) {
25 | background-size: 200% auto;
26 | }
27 |
28 | @media screen and (max-width: 400px) {
29 | background-size: 250% auto;
30 | }
31 |
32 | @media screen and (max-width: 380px) {
33 | background-size: 280% auto;
34 | }
35 |
36 | p:last-child {
37 | margin-bottom: 0;
38 | }
39 | }
40 |
41 | #main {
42 | background-position: 100% -50px, 0 center, center top;
43 | }
44 |
45 | /* --- Post listing --- */
46 | .posts {
47 | .post-teaser {
48 | @extend %padding-post;
49 | width: 100%;
50 | margin-bottom: 0;
51 | display: inline-block;
52 | background-size: cover;
53 | border-bottom: 1px solid rgba(0, 0, 0, 0.1);
54 |
55 | p a {
56 | @extend .body-link;
57 | }
58 |
59 | .post-img {
60 | vertical-align: middle;
61 | border-radius: 10px;
62 | overflow: hidden;
63 |
64 | @media (min-width: $break) {
65 | height: 250px;
66 | }
67 |
68 | //Smaller screen
69 | @media screen and (max-width: $break) {
70 | height: 150px;
71 | }
72 |
73 | img {
74 | width: 100%;
75 | padding: 0;
76 | vertical-align: middle;
77 | }
78 |
79 | }
80 |
81 | .post-img img {
82 | -moz-transition-timing-function: ease-out;
83 | -webkit-transition-timing-function: ease-out;
84 | transition-timing-function: ease-out;
85 |
86 | -moz-transition: all 2s;
87 | -webkit-transition: all 2s;
88 | transition: all 2s;
89 |
90 | &:hover {
91 | -moz-transform: scale(1.1);
92 | -webkit-transform: scale(1.1);
93 | transform: scale(1.1);
94 | }
95 | }
96 | }
97 |
98 | .excerpt {
99 | margin-top: 1em;
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/_includes/default/search_json.liquid:
--------------------------------------------------------------------------------
1 | {% assign dateFormat = site.data.language.str_date_format | default: '%B %-d, %Y' %}
2 | [
3 | {% for post in site.posts %}
4 | {
5 | {% unless post.excluded %}
6 | "title" : "{{ post.title | strip_newlines | escape }}",
7 | "category" : "{{ post.category }}",
8 | "tags" : "{{ post.tags | join: ', ' | prepend: " " }}",
9 | "url" : "{{ post.url | relative_url }}",
10 | "date" : "{{ post.date | date: dateFormat }}",
11 | "excerpt" : {{ post.content | strip_html | strip_newlines | strip | escape | truncate: '250' | escape | jsonify }},
12 | "content" : {{ post.content | strip_html | strip_newlines | strip | escape | jsonify }}
13 | {% endunless %}
14 | }{% unless forloop.last %},{% endunless %}
15 | {% endfor %}
16 | {% if site.pages.size > 0 %},{% endif %}
17 | {% for page in site.pages %}
18 | {
19 | {% unless page.excluded or page.title == nil %}
20 | "title" : "{{ page.title | strip_newlines | escape }}",
21 | "category" : "{{ page.category }}",
22 | "tags" : "{{ page.tags | join: ', ' | prepend: " " }}",
23 | "url" : "{{ page.url | relative_url }}",
24 | "date" : "{{ page.date | date: dateFormat | default: "N/A" }}",
25 | "excerpt" : {{ page.content | strip_html | strip_newlines | strip | escape | truncate: '250' | escape | jsonify }},
26 | "content" : {{ page.content | strip_html | strip_newlines | strip | escape | jsonify }}
27 | {% endunless %}
28 | }{% unless forloop.last %},{% endunless %}
29 | {% endfor %}
30 | {% for collection in site.collections %}
31 | {% unless collection.label == 'posts' or site[collection.label].size == 0 %}
32 | {% for page in site[collection.label] %}
33 | ,{
34 | {% if page.excluded or page.title != nil %}
35 | "title" : "{{ page.title | strip_newlines | escape }}",
36 | "category" : "{{ page.category }}",
37 | "tags" : "{{ page.tags | join: ', ' | prepend: " " }}",
38 | "url" : "{{ page.url | relative_url }}",
39 | "date" : "{{ page.date | date: dateFormat | default: "N/A" }}",
40 | "excerpt" : {{ page.content | strip_html | strip_newlines | strip | escape | truncate: '250' | jsonify }},
41 | "content" : {{ page.content | strip_html | strip_newlines | strip | escape | jsonify }}
42 | {% endif %}
43 | }
44 | {% endfor %}
45 | {% endunless %}
46 | {% endfor %}
47 | ]
48 |
--------------------------------------------------------------------------------
/_posts/2018-10-29-feature-images.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: Feature images
4 | feature-img: "assets/img/feature-img/desk-messy.jpeg"
5 | thumbnail: "assets/img/thumbnails/feature-img/desk-messy.jpeg"
6 | last_modified: "2025-05-30"
7 | tags: [Test, Image]
8 | categories: Example
9 | ---
10 |
11 | Hopefully you will find enough information about how to set images in your blog here.
12 | This is an example of a post which includes a feature image specified in the front matter of the post.
13 | The feature image spans the full-width of the page, and is shown with the title on permalink pages:
14 |
15 | ```yaml
16 | feature-img: "assets/img/feature-img/desk-messy.jpeg"
17 | thumbnail: "assets/img/thumbnails/feature-img/desk-messy.jpeg"
18 | ```
19 |
20 | You can also use a thumbnail, a smaller version of the same image to improve loading of the page.
21 | The thumbnail will also be used when you share your article on other platform (linkedin, whatsapp, facebook, ...).
22 |
23 | > - And now it is working
24 |
25 | You can also add images aligned in your post using the `aligner` include.
26 | Make sure to separate all of the image path from in a string separated with `,`.
27 | It by default look into `assets/img/` so give the path from there, example:
28 |
29 | {% highlight ruby %}
30 | {% raw %}
31 | {% include aligner.html images="pexels/book-glass.jpeg,triangle.png" caption="A caption under the images" %}
32 | {% endraw %}
33 | {% endhighlight %}
34 |
35 | {% include aligner.html images="pexels/book-glass.jpeg,feature-img/desk-messy.jpeg" caption="A caption under the images" %}
36 |
37 |
38 | Here you have two images side by side, but you can set more and set the amount per columns
39 | (by specifying the number of columns or let it be automatic using `"auto"`):
40 |
41 | {% highlight ruby %}
42 | {% raw %}
43 | {% include aligner.html images="portfolio/cabin.png,portfolio/cake.png,portfolio/circus.png" column=3 %}
44 | {% endraw %}
45 | {% endhighlight %}
46 |
47 | {% include aligner.html images="portfolio/cabin.png,portfolio/cake.png,portfolio/circus.png" column=3 %}
48 |
49 | it also works with only one images, it is made to display it smaller than normally.
50 | However you can just use the Markdown way of doing it to get the image normal sized and centered.
51 |
52 | {% highlight ruby %}
53 | {% raw %}
54 | # Markdown way
55 | ![Travel]({{ "/assets/img/pexels/computer.jpeg" | relative_url}})
56 | # Aligner with only one image
57 | {% include aligner.html images="pexels/computer.jpeg" %}
58 | {% endraw %}
59 | {% endhighlight %}
60 |
61 | {% include aligner.html images="pexels/computer.jpeg" %}
62 |
--------------------------------------------------------------------------------
/_posts/2014-11-28-markdown-and-html.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: Markdown and HTML
4 | tags: [Katex, Markdown]
5 | author: rohanchandra
6 | categories: Syntax
7 | ---
8 |
9 | Jekyll supports the use of [Markdown](http://daringfireball.net/projects/markdown/syntax) with inline HTML tags which makes it easier to quickly write posts with Jekyll, without having to worry too much about text formatting. A sample of the formatting follows.
10 |
11 | ## Table of content
12 |
13 |
14 | * TOC
15 | {:toc}
16 | *
17 | You need to put this at the beginning of the page where you want the table of content to be displayed
18 |
19 | ```html
20 | * TOC
21 | {:toc}
22 | ```
23 |
24 | It will then render the markdown and html titles (lines that begins with `#` or using the `` tages)
25 |
26 |
27 | ## Title
28 |
29 | ### Subtitle
30 |
31 | Tables have also been extended from Markdown:
32 |
33 | | First Header | Second Header |
34 | |--------------|---------------|
35 | | Content Cell | Content Cell |
36 | | Content Cell | Content Cell |
37 |
38 | Here's an example of an image, which is included using Markdown:
39 |
40 | ![Image of a glass on a book]({{ "/assets/img/pexels/book-glass.jpeg" | relative_url }})
41 |
42 | This is another example of list:
43 |
44 | - list of things
45 | 1. Sub list
46 | 2. of Other things
47 | 3. with numbers
48 | - And many more
49 | - Sub sub list
50 | - can go on ...
51 | - and on ...
52 | - and on !
53 | - That's it.
54 |
55 | ### Other subtitle
56 |
57 | Highlighting for code in Jekyll is done using Base16 or Rouge. This theme makes use of Rouge by default.
58 |
59 | {% highlight js %}
60 | // count to ten
61 | for (var i = 1; i <= 10; i++) {
62 | console.log(i);
63 | }
64 |
65 | // count to twenty
66 | var j = 0;
67 | while (j < 20) {
68 | j++;
69 | console.log(j);
70 | }
71 | {% endhighlight %}
72 |
73 | ### Math
74 |
75 | Type on Strap uses KaTeX to display maths. Equations such as $$S_n = a \times \frac{1-r^n}{1-r}$$ can be displayed inline.
76 |
77 | Alternatively, they can be shown on a new line:
78 |
79 | $$ f(x) = \int \frac{2x^2+4x+6}{x-2} $$
80 |
81 | And in your markdown file:
82 |
83 | ```markdown
84 | $$ f(x) = \int \frac{2x^2+4x+6}{x-2} $$
85 | ```
86 |
87 |
88 | ### Expandable content
89 |
90 | Click on the expandable content to display it:
91 |
92 |