This commit is contained in:
commit
64f91ff50b
GPG Key ID:
832E52F4E23F8F24
25
.github/workflows/weblog.yaml
vendored
Normal file
25
.github/workflows/weblog.yaml
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
name: Build Jekyll weblog
|
||||
on:
|
||||
push:
|
||||
branches: [ master ]
|
||||
|
||||
env:
|
||||
REPO_DIR: ${{ gitea.repository }}
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: [ubuntu]
|
||||
steps:
|
||||
- run: echo "Job triggered by a ${{ gitea.event_name }} event."
|
||||
- name: Checkout 📥
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
ref: master
|
||||
lfs: false
|
||||
token: ${{ gitea.token }}
|
||||
fetch: 1
|
||||
- run: echo "Trying to build commit ${{ gitea.ref }} from repository."
|
||||
- name: Build ⚙️
|
||||
run: bundle exec --no-color jekyll build -d $OUT_DIR
|
||||
env:
|
||||
OUT_DIR: ${{ secrets.PUB_DIR }}
|
||||
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
|
||||
.bundle/
|
||||
.sass-cache/
|
||||
_site
|
||||
_old_posts
|
||||
Gemfile.lock
|
||||
45
404.html
Normal file
45
404.html
Normal file
@ -0,0 +1,45 @@
|
||||
---
|
||||
layout: error
|
||||
permalink: /404.html
|
||||
---
|
||||
|
||||
<head>
|
||||
<title>404 - File not found</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Cache-Control" content="public">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="shortcut icon" href="{{ "/static/icons/favicon.ico" | prepend: site.baseurl }}">
|
||||
<link rel="stylesheet" type="text/css" href="{{ "/css/error.css" | prepend: site.baseurl }}">
|
||||
|
||||
<style type="text/css">
|
||||
img {
|
||||
width: 200px;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page-header">
|
||||
<h3>404 - File not found</h3>
|
||||
</div>
|
||||
<div id="page-contents">
|
||||
<svg height="100" width="100">
|
||||
<polygon points="50,25 17,80 82,80" stroke-linejoin="round" style="fill:none; stroke:#FF8A00; stroke-width:8;"></polygon>
|
||||
<text x="42" y="74" fill="#FF8A00" font-family="sans-serif" font-weight="900" font-size="42px">!</text>
|
||||
</svg>
|
||||
<p>Ooops… The server returned a <b>File not found (404)</b> error!</p>
|
||||
<p>
|
||||
If you think what you're looking for should be here, please contact the site owner.
|
||||
</p>
|
||||
<p>
|
||||
<a href="/">Back to main page →</a>
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div id="page-footer">
|
||||
<p id="footer-text">Copyright ©2023 <a href="{{ "/about/" | prepend: site.baseurl }}">JackCarterSmith</a></p>
|
||||
</div>
|
||||
</body>
|
||||
5
Gemfile
Normal file
5
Gemfile
Normal file
@ -0,0 +1,5 @@
|
||||
|
||||
source 'https://rubygems.org'
|
||||
gem 'rouge'
|
||||
gem 'github-pages'
|
||||
gem 'webrick'
|
||||
10
LICENSE
Normal file
10
LICENSE
Normal file
@ -0,0 +1,10 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c)2023 JackCarterSmith
|
||||
Copyright (c)2015 G.LAMPERT
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
15
README.md
Normal file
15
README.md
Normal file
@ -0,0 +1,15 @@
|
||||
|
||||
# JackCarterSmith's weblog
|
||||
|
||||
Source code repository my blog. And yes, all in english... Erff...
|
||||
|
||||
Based on the blog work of G.Lampert [glampert.github.io](http://glampert.github.io) which has some greats topics to follow!
|
||||
As I'm not really a big fan of "front-coding", I will only focus on the content of the blog than it's programming.
|
||||
|
||||
It uses [Jekyll](http://jekyllrb.com/) to generate the site from a set of static Markdown and HTLM
|
||||
pages annotated with the [Liquid](https://github.com/Shopify/liquid/wiki) templating language.
|
||||
|
||||
# License
|
||||
|
||||
This project's source code is released under the [MIT License](http://opensource.org/licenses/MIT).
|
||||
|
||||
59
_config.yml
Normal file
59
_config.yml
Normal file
@ -0,0 +1,59 @@
|
||||
|
||||
# ===========================
|
||||
# Global site settings:
|
||||
# ===========================
|
||||
|
||||
# Main title, displayed in the browser tab and site header.
|
||||
title: Curious Guy's Journal
|
||||
|
||||
# Tag-line/short description displayed in the header beside the title.
|
||||
tag_line: Talk is cheap, make things!
|
||||
|
||||
# Alternate tag-line, used as tooltip for the site's logo.
|
||||
tag_line_alt: Talk is cheap, make things!
|
||||
|
||||
# Write an awesome description for your new site here.
|
||||
# It will appear in your document head meta (for Google search results)
|
||||
# Note: The `>` means to ignore newlines until next item ("destination").
|
||||
description: >
|
||||
I build this blog to keep track of my projects's progress and for sharing purpose.
|
||||
I'm mainly interested in low-level programming and architecture of systems.
|
||||
C, C++, Verilog and VHDL are usually the programming languages involved in my projects.
|
||||
|
||||
destination: ./_site # Directory Jekyll outputs to
|
||||
baseurl: "" # The subpath of your site, e.g. /site/
|
||||
url: https://weblog.jcsmith.fr # The base hostname & protocol for your site
|
||||
|
||||
# Title of the landing page. Presented in the nav-bar.
|
||||
landing_page: Articles
|
||||
|
||||
# Post URL format:
|
||||
permalink: /:year/:month-:day/:title/
|
||||
|
||||
# Number of items in the Site's post list:
|
||||
paginate: 10
|
||||
paginate_path: page:num
|
||||
|
||||
# Social-media/contact links and icons displayed at the footer:
|
||||
email: j@jcsmith.fr
|
||||
gitea_username: jackcartersmith
|
||||
#github_username: jackcartersmith
|
||||
stackexchange_username: 24857861/jackcartersmith
|
||||
|
||||
# ===========================
|
||||
# Build settings:
|
||||
# ===========================
|
||||
|
||||
# Markdown engine:
|
||||
markdown: kramdown
|
||||
|
||||
# Syntax highlight plugin:
|
||||
highlighter: rouge
|
||||
|
||||
# Automatic sitemap.xml generator:
|
||||
jekyll-sitemap: true
|
||||
|
||||
plugins:
|
||||
- jekyll-sitemap
|
||||
- jekyll-paginate
|
||||
|
||||
87
_includes/footer.html
Normal file
87
_includes/footer.html
Normal file
@ -0,0 +1,87 @@
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<h2 class="footer-heading">{{ site.title }}</h2>
|
||||
<div class="footer-col-wrapper">
|
||||
<div class="footer-col footer-col-1">
|
||||
<ul class="social-media-list">
|
||||
<!-- Email SVG icon and link: -->
|
||||
{% if site.email %}
|
||||
<li>
|
||||
<a href="mailto:{{ site.email }}" class="user-link">
|
||||
<span class="icon icon--email">
|
||||
<svg viewBox="0 0 16 16">
|
||||
<path fill="#828282" d="M7,9L5.268,7.484l-4.952,4.245C0.496,11.896,0.739,12,1.007,12h11.986c0.267,0,0.509-0.104,0.688-0.271L8.732,7.484L7,9z"/>
|
||||
<path fill="#828282" d="M13.684,2.271C13.504,2.103,13.262,2,12.993,2H1.007C0.74,2,0.498,2.104,0.318,2.273L7,8L13.684,2.271z"/>
|
||||
<polygon fill="#828282" points="0,2.878 0,11.186 4.833,7.079"/>
|
||||
<polygon fill="#828282" points="9.167,7.079 14,11.186 14,2.875"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Contact</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<!-- Github SVG icon and link: -->
|
||||
{% if site.github_username %}
|
||||
<li>
|
||||
<a href="https://github.com/{{ site.github_username }}" class="user-link">
|
||||
<span class="icon icon--github">
|
||||
<svg viewBox="0 0 16 16">
|
||||
<path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Github</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<!-- Gitea SVG icon and link: -->
|
||||
{% if site.gitea_username %}
|
||||
<li>
|
||||
<a href="https://git.jcsmith.fr/{{ site.gitea_username }}" class="user-link">
|
||||
<span class="icon icon--gitea">
|
||||
<svg viewBox="0 0 540 540">
|
||||
<path fill="#828282" d="M89.3,115.6c-39.4-0.1-92.1,24.9-89.2,87.7c4.5,98,104.9,107.1,145.1,107.9c4.3,18.3,51.6,81.8,86.6,85.1H385
|
||||
c91.8-6.1,160.6-277.9,109.7-278.9c-84.3,4-134.4,6-177.2,6.3v84.8l-13.4-5.8l-0.1-78.9c-49.2,0-92.5-2.3-174.7-6.3
|
||||
C119,117.4,104.6,115.6,89.3,115.6L89.3,115.6z M94.8,150.3h4.8c5.6,50.3,14.7,79.6,33.1,124.5c-47-5.6-86.9-19.2-94.3-70.1
|
||||
C34.5,178.4,47.4,150.9,94.8,150.3z M277.4,199.7c3.2,0.1,6.5,0.7,9.5,2.1l16,6.9l-11.4,20.8c-1.7,0-3.5,0.3-5.2,0.8
|
||||
c-7.4,2.4-11.3,9.7-8.7,16.3l2.4,3.7l-19.7,36c-1.6,0-3.3,0.3-4.8,0.8c-7.4,2.3-11.3,9.7-8.7,16.3c2.8,6.7,10.9,10.1,18.4,7.7
|
||||
c7.4-2.3,11.3-9.7,8.6-16.3c-0.8-1.7-1.8-3.3-3.3-4.7l19.2-35c2.1,0.2,4.2,0,6.3-0.7c1.7-0.5,3.2-1.3,4.5-2.4
|
||||
c7.4,3.2,13.5,5.7,17.9,7.8c6.5,3.2,8.8,5.4,9.6,7.8c0.7,2.3-0.1,6.8-3.8,14.8c-2.8,5.9-7.3,14.3-12.8,24.2c-1.8,0-3.7,0.3-5.3,0.8
|
||||
c-7.5,2.4-11.3,9.7-8.7,16.3c2.7,6.6,10.9,10,18.3,7.7c7.5-2.4,11.3-9.7,8.7-16.3c-0.7-1.6-1.7-3.1-2.9-4.3
|
||||
c5.3-9.7,9.9-18.2,12.9-24.4c4-8.6,6.1-15,4.3-21.2c-1.8-6.2-7.5-10.2-14.9-13.8c-4.9-2.4-11.1-5-18.3-8.1c0.1-1.7-0.2-3.4-0.8-5.1
|
||||
c-0.7-1.7-1.7-3.2-3.1-4.5l11.2-20.5l62.4,26.9c11.2,4.9,15.9,16.9,10.4,26.9l-42.9,78.5c-5.4,10-18.9,14.2-30.2,9.3l-88.3-38.1
|
||||
c-11.3-4.9-15.9-16.9-10.5-26.9l42.9-78.5c3.7-6.9,11.3-11,19.3-11.3h1.3L277.4,199.7z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>JCS-Git</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<!-- StackExchange SVG icon and link: -->
|
||||
{% if site.stackexchange_username %}
|
||||
<li>
|
||||
<a href="https://stackexchange.com/users/{{ site.stackexchange_username }}?tab=accounts" class="user-link">
|
||||
<span class="icon icon--stackexchange">
|
||||
<svg viewBox="0 0 450 450">
|
||||
<rect fill="#828282" x="42.532" y="191.573" width="353.458" height="72.803"/>
|
||||
<rect fill="#828282" x="42.532" y="97.927" width="353.458" height="72.802"/>
|
||||
<path fill="#828282" d="M42.529,284.648v18.843c0,16.173,5.474,29.93,16.418,41.251c10.944,11.32,24.128,16.987,39.543,16.987h151.039v76.8 l74.227-76.8h16.282c15.414,0,28.603-5.66,39.547-16.987C390.529,333.421,396,319.664,396,303.491v-18.843H42.529z"/>
|
||||
<path fill="#828282" d="M395.991,57.956c0-15.988-5.469-29.643-16.413-40.968S355.448,0,340.031,0H98.493C83.078,0,69.894,5.662,58.95,16.988 S42.532,41.971,42.532,57.956v19.126h353.458V57.956z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>StackExchange</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-col footer-col-2">
|
||||
<p>{{ site.description }}</p>
|
||||
<br />
|
||||
<p>Copyright ©2023 JackCarterSmith</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{% include scripts.html %}
|
||||
|
||||
65
_includes/header.html
Normal file
65
_includes/header.html
Normal file
@ -0,0 +1,65 @@
|
||||
<header class="site-header">
|
||||
<nav class="navbar navbar-inverse">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a href="{{ site.baseurl }}/">
|
||||
<!-- The tiny site logo in the header/navbar -->
|
||||
<img src="{{ "/static/images/site-logo.png" | prepend: site.baseurl }}" alt="{{ site.tag_line_alt }}" title="{{ site.tag_line_alt }}" id="site-logo-navbar">
|
||||
</a>
|
||||
<a class="navbar-brand" href="{{ site.baseurl }}/">{{ site.title }}</a>
|
||||
<p class="navbar-text">{{ site.tag_line }}</p>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
|
||||
{% if page.url == "/index.html" %}
|
||||
<li class="active">
|
||||
{% else %}
|
||||
<li>
|
||||
{% endif %}
|
||||
<a href="{{ site.baseurl }}/">{{ site.landing_page }}</a>
|
||||
</li>
|
||||
|
||||
{% assign sorted_pages = site.pages | sort: 'menu_index' %}
|
||||
|
||||
{% for p in sorted_pages %}
|
||||
{% if p.title and p.menu_visible == true %}
|
||||
{% if p.url == page.url %}
|
||||
<li class="active">
|
||||
{% else %}
|
||||
<li>
|
||||
{% endif %}
|
||||
<a href="{{ p.url | prepend: site.baseurl }}">{{ p.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<!-- Old "More" dropdown menu: Disabled as we only have three pages now. When 'menu_visible=false' the page would go in the dropdown.
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
More
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
{% for p in sorted_pages %}
|
||||
{% if p.title and p.menu_visible == false %}
|
||||
<li><a href="{{ p.permalink | prepend: site.baseurl }}">{{ p.title }}</a></li>
|
||||
{% if forloop.last == false %}
|
||||
<li role="separator" class="divider"></li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
45
_includes/page-head.html
Normal file
45
_includes/page-head.html
Normal file
@ -0,0 +1,45 @@
|
||||
<head>
|
||||
<!-- This is the common 'head' section of every page. -->
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Cache-Control" content="public">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
|
||||
<link rel="canonical" href="{{ page.url | replace: 'index.html', '' | prepend: site.baseurl | prepend: site.url }}">
|
||||
|
||||
{% if page.categories %}
|
||||
{% assign page_keywords = page.categories | join: ' ' %}
|
||||
{% else %}
|
||||
{% assign page_keywords = site.tag_line %}
|
||||
{% endif %}
|
||||
<!-- Meta information to improve searchability: -->
|
||||
<meta name="description" content="{% if page.title %}{{ page.title | append: ' @ ' | append: page_keywords | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description | strip_newlines }}{% endif %}">
|
||||
<meta name="keywords" content="{{ page_keywords }}">
|
||||
<meta name="author" content="JackCarterSmith">
|
||||
|
||||
{% if page.thumbnail %}
|
||||
<meta name="thumbnail" content="{{ page.thumbnail | prepend: '/static/images/thumbnails/' | prepend: site.url | append: '.jpg' }}">
|
||||
{% endif %}
|
||||
|
||||
<!-- Site icons/favicon: -->
|
||||
<link rel="shortcut icon" href="{{ "/static/icons/favicon.ico" | prepend: site.baseurl }}">
|
||||
<link rel="shortcut icon" sizes="96x96" href="{{ "/static/icons/favicon-96x96.png" | prepend: site.baseurl }}">
|
||||
<link rel="shortcut icon" sizes="196x196" href="{{ "/static/icons/favicon-196x196.png" | prepend: site.baseurl }}">
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="{{ "/static/icons/apple-touch-icon-57x57.png" | prepend: site.baseurl }}">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="{{ "/static/icons/apple-touch-icon-60x60.png" | prepend: site.baseurl }}">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="{{ "/static/icons/apple-touch-icon-72x72.png" | prepend: site.baseurl }}">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="{{ "/static/icons/apple-touch-icon-76x76.png" | prepend: site.baseurl }}">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="{{ "/static/icons/apple-touch-icon-114x114.png" | prepend: site.baseurl }}">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="{{ "/static/icons/apple-touch-icon-120x120.png" | prepend: site.baseurl }}">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="{{ "/static/icons/apple-touch-icon-144x144.png" | prepend: site.baseurl }}">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="{{ "/static/icons/apple-touch-icon-152x152.png" | prepend: site.baseurl }}">
|
||||
<meta name="msapplication-TileImage" content="{{ "/static/icons/mstile-144x144.png" | prepend: site.baseurl }}">
|
||||
<meta name="msapplication-square70x70logo" content="{{ "/static/icons/mstile-70x70.png" | prepend: site.baseurl }}">
|
||||
<meta name="msapplication-square150x150logo" content="{{ "/static/icons/mstile-150x150.png" | prepend: site.baseurl }}">
|
||||
<meta name="msapplication-square310x310logo" content="{{ "/static/icons/mstile-310x310.png" | prepend: site.baseurl }}">
|
||||
|
||||
<!-- Common page styles and BootstrapJS: -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="{{ "/css/main.css" | prepend: site.baseurl }}">
|
||||
</head>
|
||||
34
_includes/post-list.html
Normal file
34
_includes/post-list.html
Normal file
@ -0,0 +1,34 @@
|
||||
<a href="{{ post.url | prepend: site.baseurl }}" class="post-list-item">
|
||||
|
||||
<!-- This thumbnail image is lazily loaded, that's why no 'src' is provided. -->
|
||||
<div class="post-thumbnail">
|
||||
<img defpath="{{ post.thumbnail | prepend: '/static/images/thumbnails/' | prepend: site.baseurl | append: '.jpg' }}" alt="{{ post.title | strip_html }}" title="{{ post.title | strip_html }}" class="post-thumbnail-image">
|
||||
</div>
|
||||
|
||||
<!-- These are the category tags displayed beside each post thumbnail in the index. -->
|
||||
<div class="post-list-item-text">
|
||||
<h2>{{ post.title }}</h2>
|
||||
{% assign need_br = true %}
|
||||
{% capture my_categories %}
|
||||
{% for category in post.categories %}
|
||||
{{ category }}
|
||||
{% if forloop.last == false %}
|
||||
{% if forloop.index >= 3 %}
|
||||
</span>
|
||||
<br />
|
||||
<span class="post-subheading">
|
||||
{% assign need_br = false %}
|
||||
{% endif %}
|
||||
,
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
<span class="post-subheading">{{ my_categories | strip_newlines | replace: ',', ' • ' }}</span>
|
||||
{% if need_br %}
|
||||
<br />
|
||||
{% else %}
|
||||
<span class="post-subheading"> | </span>
|
||||
{% endif %}
|
||||
<span class="post-subheading">{{ post.date | date: "%b %-d, %Y" }}</span>
|
||||
</div>
|
||||
</a>
|
||||
16
_includes/scripts.html
Normal file
16
_includes/scripts.html
Normal file
@ -0,0 +1,16 @@
|
||||
|
||||
<!--
|
||||
Common scripts used by all pages.
|
||||
Scripts are included at the end of <body>
|
||||
(in footer.html), to avoid blocking other
|
||||
content downloads while the browser fetches
|
||||
the scripts.
|
||||
-->
|
||||
|
||||
<!-- jQuery/Bootstrap: Use external CDNs to leverage parallel access. -->
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Common local site scripts: -->
|
||||
<script type="text/javascript" src="{{ "/static/js/main.js" | prepend: site.baseurl }}"></script>
|
||||
|
||||
11
_layouts/default.html
Normal file
11
_layouts/default.html
Normal file
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{% include page-head.html %}
|
||||
<body>
|
||||
{% include header.html %}
|
||||
<div id="main" class="container main">
|
||||
{{ content }}
|
||||
</div>
|
||||
{% include footer.html %}
|
||||
</body>
|
||||
</html>
|
||||
4
_layouts/error.html
Normal file
4
_layouts/error.html
Normal file
@ -0,0 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{{ content }}
|
||||
</html>
|
||||
12
_layouts/page.html
Normal file
12
_layouts/page.html
Normal file
@ -0,0 +1,12 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div class="post-area post">
|
||||
<header>
|
||||
<h1>{{ page.title }}</h1>
|
||||
</header>
|
||||
<article class="page-content">
|
||||
{{ content }}
|
||||
</article>
|
||||
</div>
|
||||
33
_layouts/post.html
Normal file
33
_layouts/post.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{% include page-head.html %}
|
||||
<body>
|
||||
{% include header.html %}
|
||||
<div id="main" class="container main">
|
||||
<div class="row">
|
||||
<div id="my-article" class="col-sm-9">
|
||||
<div class="post-area post">
|
||||
<header>
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p>{{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
|
||||
</header>
|
||||
<hr>
|
||||
<article>
|
||||
{{ content }}
|
||||
</article>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div id="content" class="col-sm-3">
|
||||
<div id="my-affix" class="hidden-xs">
|
||||
<div class="categories-list-header">
|
||||
Contents
|
||||
</div>
|
||||
<div class="content-text"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include footer.html %}
|
||||
</body>
|
||||
</html>
|
||||
25
_posts/2023-09-02-hello-world.markdown
Normal file
25
_posts/2023-09-02-hello-world.markdown
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
layout: post
|
||||
title: Hello World!
|
||||
date: '2023-09-02T16:34:15.001+02:00'
|
||||
author: JackCarterSmith
|
||||
categories: Miscellaneous
|
||||
thumbnail: hello_world
|
||||
---
|
||||
|
||||
> "Programming is a skill best acquired by practice and example rather than from books." -
|
||||
> A.Turing.
|
||||
|
||||
From the beginning, I wanted to share my discoveries and my know-how.
|
||||
Just the same way as I've learned and I'm still learning from the work of others.
|
||||
|
||||
It's not easy to talk about a subject you're still working on at the risk of making
|
||||
mistakes or misrepresenting things. Although you can always review on it, it's important
|
||||
to be as precise as possible in your posts to avoid misinterpretation.
|
||||
In this sense, this blog is a way for me to work on this point. As much for the professional
|
||||
skills it develops, but once again for the sake of sharing knowledge and know-how, which must continue!
|
||||
|
||||
I work on my projects as a largely self-taught person, but always with passion.
|
||||
So it's not impossible to find errors of course and conclusions in my subjects, but for me, that's also part of learning.
|
||||
There can be no real success without failures as a basis. Of course, you also have to be able
|
||||
to question your work, on an ongoing basis.
|
||||
55
_sass/_common.scss
Normal file
55
_sass/_common.scss
Normal file
@ -0,0 +1,55 @@
|
||||
|
||||
// Common site fonts:
|
||||
$site-base-font-family: Helvetica, Arial, sans-serif;
|
||||
$site-base-font-weight: lighter;
|
||||
|
||||
// ========================================================
|
||||
// SCSS Mixins, common style blocks/macros:
|
||||
// ========================================================
|
||||
|
||||
//
|
||||
// Shadow effect used on images and embedded videos.
|
||||
//
|
||||
@mixin my-box-shadow {
|
||||
-webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 0, 0, 0.2) inset;
|
||||
-moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 0, 0, 0.2) inset;
|
||||
-o-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 0, 0, 0.2) inset;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 0, 0, 0.2) inset;
|
||||
}
|
||||
|
||||
//
|
||||
// Mouse hover transition used in the main page.
|
||||
//
|
||||
@mixin my-mouse-hover-transition {
|
||||
-webkit-transition: 0.4s ease;
|
||||
-moz-transition: 0.4s ease;
|
||||
-o-transition: 0.4s ease;
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
|
||||
//
|
||||
// Site background image and image sampling rules.
|
||||
//
|
||||
@mixin my-site-background {
|
||||
background: url("../static/images/site-bg.png") repeat-y left top;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
//
|
||||
// Set a flex-box display in a portable way and
|
||||
// aligns the content in the center of the parent box.
|
||||
//
|
||||
@mixin my-display-flex-center-align {
|
||||
display: -webkit-box; // OLD - iOS 6-, Safari 3.1-6
|
||||
display: -moz-box; // OLD - Firefox 19- (buggy but mostly works)
|
||||
display: -ms-flexbox; // TWEENER - IE 10
|
||||
display: -webkit-flex; // NEW - Chrome
|
||||
display: flex; // NEW, Spec - Opera 12.1, Firefox 20+
|
||||
|
||||
-webkit-justify-content: center; // Safari 6.1+
|
||||
justify-content: center; // Align horizontally
|
||||
|
||||
-webkit-align-items: center; // Safari 7.0+
|
||||
align-items: center; // Align vertically
|
||||
}
|
||||
|
||||
75
_sass/_highlight.scss
Normal file
75
_sass/_highlight.scss
Normal file
@ -0,0 +1,75 @@
|
||||
|
||||
//
|
||||
// Customized Zenburn theme for code syntax highlighting.
|
||||
//
|
||||
|
||||
.hll { background-color: rgb(63, 63, 63) }
|
||||
.err { color: #e37170; background-color: #3d3535 }
|
||||
.ge { color: #ccc; font-style: italic}
|
||||
.cs { color: #cd0000; font-weight: bold }
|
||||
.gh { color: #dcdccc; font-weight: bold }
|
||||
.gp { color: #dcdccc; font-weight: bold }
|
||||
.gs { color: #ccc; font-weight: bold }
|
||||
.gu { color: purple; font-weight: bold }
|
||||
.kn { color: #dfaf8f; font-weight: bold }
|
||||
.ne { color: #c3bf9f; font-weight: bold }
|
||||
.g { color: #7f9f7f }
|
||||
.k { color: #f0dfaf }
|
||||
.l { color: #ccc }
|
||||
.n { color: #dcdccc }
|
||||
.o { color: #f0efd0 }
|
||||
.x { color: #ccc }
|
||||
.p { color: #aebdbd }
|
||||
.c { color: #7f9f7f }
|
||||
.cm { color: #7f9f7f }
|
||||
.cp { color: #d44949 }
|
||||
.c1 { color: #7f9f7f }
|
||||
.gd { color: #cd0000 }
|
||||
.gr { color: red }
|
||||
.gi { color: #c79849 }
|
||||
.go { color: gray }
|
||||
.gt { color: #0040D0 }
|
||||
.kc { color: #dca3a3 }
|
||||
.kd { color: #ffff86 }
|
||||
.kp { color: #cdcf99 }
|
||||
.kr { color: #cdcd00 }
|
||||
.kt { color: #c79849 }
|
||||
.ld { color: #cc9393 }
|
||||
.m { color: #8cd0d3 }
|
||||
.s { color: #cc9393 }
|
||||
.na { color: #9ac39f }
|
||||
.nb { color: #efef8f }
|
||||
.nc { color: #dcdccc }
|
||||
.no { color: #ccc }
|
||||
.nd { color: #ccc }
|
||||
.ni { color: #c28182 }
|
||||
.nf { color: #dcdccc }
|
||||
.nl { color: #ccc }
|
||||
.nn { color: #8fbede }
|
||||
.nx { color: #ccc }
|
||||
.py { color: #ccc }
|
||||
.nt { color: #9ac39f }
|
||||
.nv { color: #dcdccc }
|
||||
.ow { color: #f0efd0 }
|
||||
.w { color: #ccc }
|
||||
.mf { color: #8cd0d3 }
|
||||
.mh { color: #8cd0d3 }
|
||||
.mi { color: #8cd0d3 }
|
||||
.mo { color: #8cd0d3 }
|
||||
.sb { color: #cc9393 }
|
||||
.sc { color: #cc9393 }
|
||||
.sd { color: #cc9393 }
|
||||
.s2 { color: #cc9393 }
|
||||
.se { color: #cc9393 }
|
||||
.sh { color: #cc9393 }
|
||||
.si { color: #cc9393 }
|
||||
.sx { color: #cc9393 }
|
||||
.sr { color: #cc9393 }
|
||||
.s1 { color: #cc9393 }
|
||||
.ss { color: #cc9393 }
|
||||
.bp { color: #efef8f }
|
||||
.vc { color: #efef8f }
|
||||
.vg { color: #dcdccc }
|
||||
.vi { color: #ffffc7 }
|
||||
.il { color: #8cd0d3 }
|
||||
|
||||
174
_sass/_sizefix.scss
Normal file
174
_sass/_sizefix.scss
Normal file
@ -0,0 +1,174 @@
|
||||
|
||||
// ========================================================
|
||||
// Common media queries to adjust for different
|
||||
// screen sizes and mobile devices.
|
||||
// ========================================================
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.post {
|
||||
padding: 10px 10px;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.post article ul {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 3px solid rgb(214, 219, 223);
|
||||
padding-left: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 995px) {
|
||||
.post-thumbnail {
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.post-list-item h2 {
|
||||
font-size: 20px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
img + em { font-size: 12px; } /* Reduce font size of image captions */
|
||||
.post-list-item { height: 148px; }
|
||||
.post-list-item span { font-size: 12px; }
|
||||
.post-list-item-text { top: 2%; }
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
#markdown-toc { display: none; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.navbar-text { display: none; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#my-banner-container { display: none; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
.footer-col-1,
|
||||
.footer-col-2 {
|
||||
float: none;
|
||||
width: auto;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.post-list-header { font-size: 26px; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.post-thumbnail {
|
||||
width: 110px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.post-thumbnail-image {
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
.post-list-item h2 {
|
||||
font-size: 16px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.post-list-item-text { top: 3%; }
|
||||
.post-list-item { height: 100px; }
|
||||
.post-list-header { font-size: 28px; }
|
||||
.post-list-item span { font-size: 10px; }
|
||||
.navbar-brand { font-size: 24px; }
|
||||
.categories-list-header { font-size: 14px; }
|
||||
.categories-list-item { font-size: 14px; }
|
||||
.my-badge { font-size: 14px; }
|
||||
.paginator { font-size: 14px; }
|
||||
.footer-col-wrapper { font-size: 14px; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 570px) {
|
||||
img + em { font-size: 10px; } /* Reduce font size of image captions */
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
#markdown-toc { padding-top: 30px; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
.post-thumbnail {
|
||||
width: 115px;
|
||||
height: 80px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar-brand { font-size: 22px; }
|
||||
.post-list-item { height: 145px; }
|
||||
.post-list-item-text { top: 4%; }
|
||||
.post-list-header { font-size: 24px; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.navbar-brand { font-size: 18px; }
|
||||
.post-list-header { font-size: 22px; }
|
||||
#site-logo-navbar { margin-right: 5px; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 425px) {
|
||||
.navbar-brand { font-size: 16px; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 380px) {
|
||||
.navbar-brand { font-size: 15px; }
|
||||
.footer-heading { font-size: 20px; }
|
||||
.post-list-header { font-size: 20px; }
|
||||
|
||||
/* iPhone and other Cells */
|
||||
.post-thumbnail {
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.categories-list-header { font-size: 12px; }
|
||||
.categories-list-item { font-size: 12px; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 370px) {
|
||||
.navbar-brand { font-size: 14px; }
|
||||
#site-logo-navbar { margin-right: 0; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
.navbar-brand { font-size: 12px; }
|
||||
#site-logo-navbar { margin-right: 0; }
|
||||
|
||||
/* Galaxy S4 (360x640) */
|
||||
.post-thumbnail {
|
||||
width: 90px;
|
||||
height: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
.post-list-item h2 { font-size: 14px; }
|
||||
|
||||
/* Tiny phone, hide it. */
|
||||
.post-subheading { display: none; }
|
||||
|
||||
/* Now that the subheading is hidden we can make the thumbnail slightly bigger */
|
||||
.post-thumbnail {
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
84
_sass/_slideshow.scss
Normal file
84
_sass/_slideshow.scss
Normal file
@ -0,0 +1,84 @@
|
||||
|
||||
// ========================================================
|
||||
// Styles for the slide show containers:
|
||||
// ========================================================
|
||||
|
||||
// Default sizes:
|
||||
$slide-base-width: 510px;
|
||||
$slide-base-height: 330px;
|
||||
|
||||
// Sizes for smaller screens:
|
||||
$slide-small-width: 340px;
|
||||
$slide-small-height: 220px;
|
||||
|
||||
.slideshow-container {
|
||||
width: $slide-base-width;
|
||||
height: $slide-base-height;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
color: white;
|
||||
background-color: white;
|
||||
|
||||
// Same shadowing effect used by common images.
|
||||
@include my-box-shadow;
|
||||
}
|
||||
|
||||
.slideshow-img-list {
|
||||
font-size: 0;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.slideshow-img-list img {
|
||||
width: $slide-base-width;
|
||||
height: $slide-base-height;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
display: none; // Initially hidden. Slide show script shows them when the images load.
|
||||
}
|
||||
|
||||
.slideshow-buttons {
|
||||
position: relative;
|
||||
margin-top: 60%;
|
||||
|
||||
@include my-display-flex-center-align;
|
||||
}
|
||||
|
||||
.slideshow-buttons a {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
border: 2px solid rgb(80, 80, 80);
|
||||
}
|
||||
|
||||
.slideshow-active-button {
|
||||
cursor: default;
|
||||
background-color: rgb(80, 80, 80);
|
||||
}
|
||||
|
||||
//
|
||||
// Shrink the slides to fit small screens:
|
||||
//
|
||||
@media screen and (max-width: 550px) {
|
||||
.slideshow-buttons {
|
||||
margin-top: 59%;
|
||||
}
|
||||
|
||||
.slideshow-container {
|
||||
width: $slide-small-width;
|
||||
height: $slide-small-height;
|
||||
}
|
||||
|
||||
.slideshow-img-list img {
|
||||
width: $slide-small-width;
|
||||
height: $slide-small-height;
|
||||
border-bottom-width: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
102
css/error.scss
Normal file
102
css/error.scss
Normal file
@ -0,0 +1,102 @@
|
||||
---
|
||||
#
|
||||
# Common stylesheet used by error pages (e.g.: 404, 403, etc)
|
||||
#
|
||||
---
|
||||
|
||||
@charset "utf-8";
|
||||
@import "common";
|
||||
|
||||
body {
|
||||
font-family: $site-base-font-family;
|
||||
font-weight: $site-base-font-weight;
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@include my-site-background;
|
||||
}
|
||||
|
||||
h3 {
|
||||
// Title in the page header
|
||||
color: rgb(157, 157, 157);
|
||||
font-weight: lighter;
|
||||
font-size: 26px;
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: rgb(100, 100, 100);
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 30px auto 30px auto;
|
||||
padding: 0;
|
||||
|
||||
@include my-box-shadow;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a:link { color: rgb( 85, 143, 218); text-decoration: none; }
|
||||
a:visited { color: rgb( 60, 102, 156); text-decoration: none; }
|
||||
a:active { color: rgb(145, 195, 207); text-decoration: none; }
|
||||
a:hover { color: rgb(115, 139, 170); text-decoration: underline; }
|
||||
|
||||
#page-header {
|
||||
height: 55px;
|
||||
color: rgb(34, 34, 34);
|
||||
background-color: rgb(34, 34, 34);
|
||||
}
|
||||
|
||||
#page-contents {
|
||||
word-wrap: break-word;
|
||||
text-align: justify;
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#page-footer {
|
||||
word-wrap: break-word;
|
||||
font-size: 16px;
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#footer-text {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
margin-left: 30%;
|
||||
margin-right: 30%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
// Make the size of text slightly smaller for tiny mobile screens:
|
||||
body { font-size: 16px; }
|
||||
h3 { font-size: 20px; }
|
||||
#page-footer { font-size: 12px; }
|
||||
|
||||
// Reduce margins on smaller screens:
|
||||
p {
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
#footer-text {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
margin-left: 25%;
|
||||
margin-right: 15%;
|
||||
}
|
||||
}
|
||||
|
||||
594
css/main.scss
Normal file
594
css/main.scss
Normal file
@ -0,0 +1,594 @@
|
||||
---
|
||||
#
|
||||
# Common styles used by the whole website.
|
||||
# This is SCSS (preprocessor CSS).
|
||||
#
|
||||
# Overwrites some classes from BootstrapJS and HighlightJS.
|
||||
# JavaScript might eventually overwrite some of these styles
|
||||
# dynamically. Classes are usually preferred over ids.
|
||||
#
|
||||
---
|
||||
|
||||
@charset "utf-8";
|
||||
@import "common";
|
||||
|
||||
// ========================================================
|
||||
// Reset some basic elements:
|
||||
// ========================================================
|
||||
|
||||
body {
|
||||
font-family: $site-base-font-family;
|
||||
font-weight: $site-base-font-weight;
|
||||
|
||||
@include my-site-background;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: rgb(220, 220, 220);
|
||||
color: rgb( 63, 63, 63);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
// Color set here will be the background color of code snippets.
|
||||
pre {
|
||||
background-color: rgb(63, 63, 63);
|
||||
color: rgb(63, 63, 63);
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
code {
|
||||
display: inline-block;
|
||||
white-space: pre;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
border-radius: 0;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-top: 2px solid rgb(119, 119, 119);
|
||||
border-bottom: 2px solid rgb(119, 119, 119);
|
||||
margin: 8px 0;
|
||||
|
||||
thead {
|
||||
border-bottom: 1px dashed rgb(119, 119, 119);
|
||||
background-color: rgb(170, 170, 170);
|
||||
color: white;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 2px 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:nth-child(2n) {
|
||||
background-color: rgb(229, 234, 237);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: rgb(68, 68, 68);
|
||||
background: rgba(112, 138, 153, 0.1);
|
||||
border-left: 5px solid rgb(214, 219, 223);
|
||||
padding-left: 15px;
|
||||
font-size: 16px;
|
||||
&:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
text-align: left; // Keep the headings left-aligned
|
||||
font-weight: normal; // Normal font for headings
|
||||
margin-top: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
// Make sure code markups inside headings use the proper font size:
|
||||
h1 code { font-size: inherit; }
|
||||
h2 code { font-size: inherit; }
|
||||
h3 code { font-size: inherit; }
|
||||
h4 code { font-size: inherit; }
|
||||
h5 code { font-size: inherit; }
|
||||
h6 code { font-size: inherit; }
|
||||
|
||||
// Custom HR, used in the index page.
|
||||
.my-hr {
|
||||
height: 1px;
|
||||
border: none;
|
||||
color: silver;
|
||||
background-color: silver;
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// Links/anchors:
|
||||
// ========================================================
|
||||
|
||||
// Ordinary links:
|
||||
a:link { color: rgb( 0, 0, 85); }
|
||||
a:visited { color: rgb( 0, 76, 153); }
|
||||
a:active { color: rgb(145, 195, 207); }
|
||||
a:hover { color: rgb( 51, 51, 102); text-decoration: underline; }
|
||||
|
||||
// Links with code markup get the same font
|
||||
// color and decoration of ordinary links:
|
||||
a:link code { color: rgb( 85, 143, 218); }
|
||||
a:visited code { color: rgb( 60, 102, 156); }
|
||||
a:active code { color: rgb(145, 195, 207); }
|
||||
a:hover code { color: rgb(115, 139, 170); text-decoration: underline; }
|
||||
|
||||
// Main post index links:
|
||||
#index a:link { color: rgb( 0, 0, 85); }
|
||||
#index a:visited { color: rgb( 0, 76, 153); }
|
||||
#index a:active { color: rgb(153, 153, 187); }
|
||||
#index a:hover { color: rgb( 51, 51, 102); text-decoration: none; }
|
||||
|
||||
// ========================================================
|
||||
// Embedded videos / iframes:
|
||||
// ========================================================
|
||||
|
||||
.embedded-video {
|
||||
// For embedded YouTube videos:
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 25px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
background-color: black;
|
||||
|
||||
// White border, like the images.
|
||||
border: 5px solid white;
|
||||
|
||||
// Shadow like other images.
|
||||
@include my-box-shadow;
|
||||
}
|
||||
|
||||
#cv-frame {
|
||||
// Sizes of the iframe where I display the Curriculum doc.
|
||||
width: 100%;
|
||||
height: 1000px;
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// Nav-bar / site logo:
|
||||
// ========================================================
|
||||
|
||||
.navbar {
|
||||
// Nav-bar inherits from Bootstrap, which
|
||||
// has a rounded border by default.
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navbar-nav li {
|
||||
width: 95px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
// A couple tweaks in the drop-down menu...
|
||||
.dropdown-menu {
|
||||
li { width: auto; }
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Big banners at the main page:
|
||||
.my-banner {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
border: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Big banner border/box:
|
||||
#my-banner-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 5px solid white;
|
||||
background-color: rgb(210, 210, 210);
|
||||
|
||||
@include my-box-shadow;
|
||||
}
|
||||
|
||||
// Tiny logo in the nav bar:
|
||||
#site-logo-navbar {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
padding: 0;
|
||||
margin: 0px 22px 0px 15px;
|
||||
border: none;
|
||||
float: left;
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// Main index / post area:
|
||||
// ========================================================
|
||||
|
||||
.main {
|
||||
min-height: 800px;
|
||||
}
|
||||
|
||||
.post {
|
||||
padding: 10px 30px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.post-area {
|
||||
margin: auto;
|
||||
max-width: 800px;
|
||||
text-align: justify; // Justify the post body
|
||||
}
|
||||
|
||||
.post-list-header {
|
||||
padding: 15px 30px;
|
||||
border-bottom: 1px solid silver;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.post-list-item-text {
|
||||
position: inherit;
|
||||
width: auto;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
.post-list-item {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 10px 15px 0px 15px;
|
||||
border-bottom: 1px solid rgb(221, 221, 221);
|
||||
height: 158px;
|
||||
|
||||
@include my-mouse-hover-transition;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.post-subheading {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// Inner-post images and the main index thumbnail:
|
||||
// ========================================================
|
||||
|
||||
.post {
|
||||
img {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
margin-top: 10px;
|
||||
|
||||
border: 10px solid white;
|
||||
border-bottom-width: 35px;
|
||||
|
||||
@include my-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
img + em {
|
||||
// This is a hack used for image captions. This selector
|
||||
// will affect only the <em>s that follow and image.
|
||||
// Images missing a caption get one dynamically via JS
|
||||
// when the page loads, using the image title text.
|
||||
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
font-family: monospace;
|
||||
font-style: normal;
|
||||
text-decoration: none;
|
||||
text-align: justify;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
top: -28px;
|
||||
|
||||
@include my-display-flex-center-align;
|
||||
}
|
||||
|
||||
.post-thumbnail {
|
||||
float: left;
|
||||
width: 220px;
|
||||
height: 140px;
|
||||
margin-right: 20px;
|
||||
color: white;
|
||||
background-color: white;
|
||||
|
||||
@include my-box-shadow;
|
||||
}
|
||||
|
||||
.post-thumbnail-image {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border: 5px solid white;
|
||||
// Thumbnails are lazily loaded by JavaScript,
|
||||
// so the images are initially hidden.
|
||||
display: none;
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// Explicitly sized images (centered in parent container):
|
||||
// ========================================================
|
||||
|
||||
.image512 {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 512px;
|
||||
max-height: 512px;
|
||||
position: relative;
|
||||
display: table;
|
||||
margin: auto;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.image300 {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 300px;
|
||||
max-height: 300px;
|
||||
position: relative;
|
||||
display: table;
|
||||
margin: auto;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
// Tiny Work In Progress icon we sometimes use in the tutorials page
|
||||
#wip-icon-image {
|
||||
vertical-align: middle;
|
||||
position: initial;
|
||||
border: none;
|
||||
margin: auto 5px auto 5px;
|
||||
max-width: 100px;
|
||||
max-height: 20px;
|
||||
|
||||
// Disable the shadow style used by most images:
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
-o-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// Paginator stuff:
|
||||
// ========================================================
|
||||
|
||||
.paginator {
|
||||
border-top: 1px solid rgb(221, 221, 221);
|
||||
text-align: center;
|
||||
padding: 15px 20px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
margin: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// Categories list:
|
||||
// ========================================================
|
||||
|
||||
.categories-list-header {
|
||||
display: block;
|
||||
padding: 12px 15px;
|
||||
padding-top: 37px;
|
||||
border-bottom: 1px solid silver;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.categories-list-item {
|
||||
display: block;
|
||||
padding: 8px 15px;
|
||||
border-bottom: 1px solid rgb(221, 221, 221);
|
||||
|
||||
@include my-mouse-hover-transition;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
color: rgb(153, 136, 51);
|
||||
}
|
||||
|
||||
.my-badge {
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
background-color: rgb(153, 153, 153);
|
||||
padding: 0 7px 1px 7px;
|
||||
border-radius: 9px;
|
||||
|
||||
@include my-mouse-hover-transition;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// Page content:
|
||||
// ========================================================
|
||||
|
||||
.page-content table {
|
||||
border-top: 1px dashed rgb(221, 221, 221);
|
||||
border-bottom: 1px dashed rgb(221, 221, 221);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.page-content table tr td {
|
||||
vertical-align: top;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.page-content table tr td:first-of-type {
|
||||
padding: 6px 10px 6px 10px;
|
||||
border-right: 1px dashed rgb(221, 221, 221);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#my-affix .affix {
|
||||
top: -20px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
max-width: 292px;
|
||||
}
|
||||
|
||||
#content .content-text {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
#content ul {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
#content ul li {
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
#content a:link { color: rgb(102, 102, 102); }
|
||||
#content a:visited { color: rgb(102, 102, 102); }
|
||||
#content a:active { color: rgb(153, 153, 187); }
|
||||
#content a:hover { color: rgb( 51, 51, 102); text-decoration: underline; }
|
||||
|
||||
// ========================================================
|
||||
// Site footer:
|
||||
// ========================================================
|
||||
|
||||
.site-footer {
|
||||
margin-top: 30px;
|
||||
border-top: 1px solid rgb(30, 30, 30);
|
||||
padding: 30px 0;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.footer-heading {
|
||||
font-size: 24px;
|
||||
margin-bottom: 15px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.contact-list, .social-media-list {
|
||||
list-style: none;
|
||||
line-height: 28px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.footer-col-wrapper {
|
||||
font-size: 15px;
|
||||
margin-left: -15px;
|
||||
color: rgb(130, 130, 130);
|
||||
}
|
||||
|
||||
.footer-col {
|
||||
float: left;
|
||||
margin-bottom: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.footer-col-1, .footer-col-2 {
|
||||
width: -webkit-calc(50% - 15px);
|
||||
width: calc(50% - 15px);
|
||||
|
||||
// Clip the email address if the window gets minimized
|
||||
// to a point where we can't show the whole line.
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
.user-link {
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// Stuff from the ABOUT page:
|
||||
// ========================================================
|
||||
|
||||
#medium-pic {
|
||||
max-width: 320px;
|
||||
max-height: 260px;
|
||||
border: 5px solid white;
|
||||
border-radius: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#profile-pic {
|
||||
max-width: 135px;
|
||||
max-height: 135px;
|
||||
margin-bottom: 25px;
|
||||
margin-right: 50px;
|
||||
border: 5px solid white;
|
||||
border-radius: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#stackexchange-flair {
|
||||
max-width: 245px;
|
||||
max-height: 70px;
|
||||
margin-bottom: 10px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// SVG icons (Github/Bitbucket/etc) at the footer:
|
||||
// ========================================================
|
||||
|
||||
.icon {
|
||||
svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================================
|
||||
// SCSS preprocessor includes:
|
||||
// ========================================================
|
||||
|
||||
@import "slideshow"; // Slide-show styles.
|
||||
@import "sizefix"; // Size fixes and adjustments for different screens/device.
|
||||
@import "highlight"; // Source code syntax highlighting styles.
|
||||
|
||||
83
index.html
Normal file
83
index.html
Normal file
@ -0,0 +1,83 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
<div id="index" class="row">
|
||||
<div class="col-sm-9">
|
||||
<div class="post-area">
|
||||
<div class="post-list-header">
|
||||
Articles
|
||||
</div>
|
||||
<div class="post-list-body">
|
||||
<div class="all-posts" post-cate="All">
|
||||
{% for post in paginator.posts %}
|
||||
{% include post-list.html %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="paginator">
|
||||
{% if paginator.total_pages > 1 %}
|
||||
|
||||
{% if paginator.previous_page %}
|
||||
<a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">Prev</a>
|
||||
{% endif %}
|
||||
|
||||
{% for page in (1..paginator.total_pages) %}
|
||||
{% if page == paginator.page %}
|
||||
<span class="active">{{ page }}</span>
|
||||
{% elsif page == 1 %}
|
||||
<a href="{{ '/index.html' | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
|
||||
{% else %}
|
||||
<a href="{{ site.paginate_path | prepend: '/' | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if paginator.next_page %}
|
||||
<a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next</a>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% for category in site.categories %}
|
||||
<div post-cate="{{ category | first }}">
|
||||
{% for posts in category %}
|
||||
{% for post in posts %}
|
||||
{% if post.url %}
|
||||
{% include post-list.html %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="categories-list-header">
|
||||
Categories
|
||||
</div>
|
||||
|
||||
<a href="javascript:;" class="categories-list-item" cate="All">
|
||||
All<span class="my-badge"> {{ site.posts | size }}</span>
|
||||
</a>
|
||||
|
||||
<!-- Categories list is sorted alphabetically according to category name. These display in the right-side menu. -->
|
||||
{% assign sorted_categories = site.categories | sort %}
|
||||
{% for category in sorted_categories %}
|
||||
<a href="javascript:;" class="categories-list-item" cate="{{ category | first }}">
|
||||
{% assign cat_name = category | first %}
|
||||
{{ cat_name }} <span class="my-badge">{{ category | last | size }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
<hr class="my-hr" />
|
||||
|
||||
<!-- The big site logo (the pixel-art computer - "Projects" page link) -->
|
||||
<div id="my-banner-container">
|
||||
<a href="{{ "/projects/" | prepend: site.baseurl }}">
|
||||
<img src="{{ "/static/images/banner-projects.jpg" | prepend: site.baseurl }}" alt="To Projects page..." title="To Projects page..." class="my-banner">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
44
pages/about.markdown
Normal file
44
pages/about.markdown
Normal file
@ -0,0 +1,44 @@
|
||||
---
|
||||
layout: page
|
||||
title: About
|
||||
permalink: /about/
|
||||
menu_index: 2
|
||||
menu_visible: true
|
||||
---
|
||||
|
||||
Wake up Neo! Ready to follow the white rabbit?
|
||||
|
||||
This is my personnal R&D journal of some projets I've started but not necessarily finished.
|
||||
I'm mostly self-taught on the subjects I deal with and would deal with. English language included.
|
||||
So, my approach will be mainly random, following a recurent scheme: try, "crash", re-try.
|
||||
But it's the right method to properly understand a topic and later, mastering this new skill.
|
||||
|
||||
I build this blog in the same idea to develop some litterals skills, like English (yeah, I'm FR_fr) and subjets synthesis.
|
||||
Including sharing reflections and experimentations on various topics.
|
||||
|
||||
I'm a digital and FPGA designer with 5 years of professionnals experiences.
|
||||
Currently I'm working in a French "CNRS" branch for the thermal imaging infrared sensor.
|
||||
I've an engineering degree in "industrial electronic and embedded system" and I've worked mostly in opto-electronic device conception.
|
||||
|
||||
----
|
||||
|
||||
Some of topics that you will find here:
|
||||
|
||||
- Embedded platform developement
|
||||
- FPGA and programmable logic
|
||||
- Game Engines programming
|
||||
- Retro-programming and reverse engineering
|
||||
- Compilers and low-levels languages
|
||||
- Home-FabLab feedback and tips
|
||||
- Theorical concept PoV and PoC
|
||||
|
||||
----
|
||||
|
||||
You can also find me on Discord(#jackcartersmith), [StackOverflow][link_so] and [GameDev.SE][link_gdse]:
|
||||
|
||||
As you can see, I'm "back-backend" developer and therefore, I'm lazzy with all of the "frontend" languages and codes...
|
||||
So thanks to G.Lampert for it's blog sources, I share some of it's interest in "Game Dev" and reverse engineering.
|
||||
Don't hesitate to take a pic' from it's own blog! (http://glampert.com/)
|
||||
|
||||
[link_so]: https://stackoverflow.com/users/18733995/jackcartersmith?tab=profile
|
||||
[link_gdse]: https://stackexchange.com/users/24857861/jackcartersmith?tab=profile
|
||||
25
pages/projects.markdown
Normal file
25
pages/projects.markdown
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
layout: post
|
||||
title: Projects
|
||||
permalink: /projects/
|
||||
menu_index: 1
|
||||
menu_visible: true
|
||||
---
|
||||
|
||||
* Contents
|
||||
{:toc}
|
||||
|
||||
List of my recurrents or "long" projects.
|
||||
|
||||
Source code can be found on [**JCS-Git**](https://git.jcsmith.fr/).
|
||||
|
||||
----
|
||||
|
||||
## This Website
|
||||
|
||||
[Jekyll](http://jekyllrb.com/) was the main tool used to build this site, but there's also [jQuery](https://jquery.com/),
|
||||
[Bootstrap](http://getbootstrap.com/), [Rouge](http://rouge.jneen.net/) for code syntax highlighting
|
||||
and some plain-old HTML and CSS ([SASS actually](http://sass-lang.com/)).
|
||||
|
||||
Thanks to G.Lampert for it's blog sources, I'm not a big fan of "front-conding"...
|
||||
So don't hesitate to take a pic' from it's own blog! (http://glampert.com/)
|
||||
BIN
static/icons/apple-touch-icon-114x114.png
Normal file
BIN
static/icons/apple-touch-icon-114x114.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
static/icons/apple-touch-icon-120x120.png
Normal file
BIN
static/icons/apple-touch-icon-120x120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
static/icons/apple-touch-icon-144x144.png
Normal file
BIN
static/icons/apple-touch-icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
static/icons/apple-touch-icon-152x152.png
Normal file
BIN
static/icons/apple-touch-icon-152x152.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
static/icons/apple-touch-icon-57x57.png
Normal file
BIN
static/icons/apple-touch-icon-57x57.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
static/icons/apple-touch-icon-60x60.png
Normal file
BIN
static/icons/apple-touch-icon-60x60.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
static/icons/apple-touch-icon-72x72.png
Normal file
BIN
static/icons/apple-touch-icon-72x72.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
static/icons/apple-touch-icon-76x76.png
Normal file
BIN
static/icons/apple-touch-icon-76x76.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
static/icons/favicon-196x196.png
Normal file
BIN
static/icons/favicon-196x196.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
static/icons/favicon-96x96.png
Normal file
BIN
static/icons/favicon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
static/icons/favicon.ico
Normal file
BIN
static/icons/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
static/icons/mstile-144x144.png
Normal file
BIN
static/icons/mstile-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
static/icons/mstile-150x150.png
Normal file
BIN
static/icons/mstile-150x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
static/icons/mstile-310x310.png
Normal file
BIN
static/icons/mstile-310x310.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
static/icons/mstile-70x70.png
Normal file
BIN
static/icons/mstile-70x70.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
static/images/banner-projects.jpg
Normal file
BIN
static/images/banner-projects.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
static/images/posts/good-news.jpg
Normal file
BIN
static/images/posts/good-news.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
BIN
static/images/posts/ps2/ps2-ee-diagram.jpg
Normal file
BIN
static/images/posts/ps2/ps2-ee-diagram.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
static/images/site-bg.png
Normal file
BIN
static/images/site-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 900 B |
BIN
static/images/site-logo.png
Normal file
BIN
static/images/site-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
static/images/slides/debug-draw-s1.jpg
Normal file
BIN
static/images/slides/debug-draw-s1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
BIN
static/images/slides/debug-draw-s2.jpg
Normal file
BIN
static/images/slides/debug-draw-s2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
static/images/slides/debug-draw-s3.jpg
Normal file
BIN
static/images/slides/debug-draw-s3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
static/images/thumbnails/cpp-lang.jpg
Normal file
BIN
static/images/thumbnails/cpp-lang.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
static/images/thumbnails/dll.jpg
Normal file
BIN
static/images/thumbnails/dll.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
static/images/thumbnails/hello_world.jpg
Normal file
BIN
static/images/thumbnails/hello_world.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
243
static/js/main.js
Normal file
243
static/js/main.js
Normal file
@ -0,0 +1,243 @@
|
||||
|
||||
/*
|
||||
* Common scripts used by the whole website.
|
||||
* - Performs setup of a few dynamic elements.
|
||||
* - Loads deferred images.
|
||||
* - DOM processing starts on jQuery.ready().
|
||||
*
|
||||
* Dependencies:
|
||||
* jQuery
|
||||
* BootstrapJS
|
||||
*
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
function myImgOnLoad(jqImg, callback) {
|
||||
// The callback gets fired once the image loads, even
|
||||
// after a dynamic reset of the 'src' attribute.
|
||||
jqImg.one("load", function() {
|
||||
callback();
|
||||
});
|
||||
}
|
||||
|
||||
function myImgLoadDeferred(jqImg) {
|
||||
// Slides and thumbnails set the 'defpath' attribute
|
||||
// with the image path, so that we can delay-load them.
|
||||
jqImg.attr("src", jqImg.attr("defpath"));
|
||||
jqImg.attr("defpath", null);
|
||||
}
|
||||
|
||||
function myImgIsLoaded(jqImg) {
|
||||
// Initially, the image should have no 'src', to avoid
|
||||
// sending invalid requests to the server. We also clear
|
||||
// the custom 'defpath' property to be sure once it is loaded.
|
||||
return jqImg.attr("src") != null &&
|
||||
jqImg.attr("defpath") == null;
|
||||
}
|
||||
|
||||
function setUpCategoryDisplay() {
|
||||
var imgFadeInDelay = 600;
|
||||
|
||||
// Show "All" and load the deferred images for the visible thumbnails:
|
||||
// ('img.defpath' property will have the actual path)
|
||||
$(".post-list-body>div[post-cate!=All]").hide();
|
||||
$(".post-list-body>div[post-cate=All] img").each(function(index, img) {
|
||||
var jqImg = $(img);
|
||||
if (!myImgIsLoaded(jqImg)) {
|
||||
myImgOnLoad(jqImg, function() { jqImg.fadeIn(imgFadeInDelay); });
|
||||
myImgLoadDeferred(jqImg);
|
||||
}
|
||||
});
|
||||
|
||||
// Show category when clicking the categories list:
|
||||
$(".categories-list-item").click(function() {
|
||||
var category = $(this).attr("cate");
|
||||
$(".post-list-body>div[post-cate!='" + category + "']").hide(250);
|
||||
$(".post-list-body>div[post-cate='" + category + "'] img").each(
|
||||
function(index, img) {
|
||||
var jqImg = $(img);
|
||||
if (!myImgIsLoaded(jqImg)) {
|
||||
myImgOnLoad(jqImg, function() { jqImg.fadeIn(imgFadeInDelay); });
|
||||
myImgLoadDeferred(jqImg);
|
||||
}
|
||||
});
|
||||
$(".post-list-body>div[post-cate='" + category + "']").show(400);
|
||||
});
|
||||
}
|
||||
|
||||
function setUpTableOfContents() {
|
||||
// Properly displays the main post list or the post contents.
|
||||
if (typeof $("#markdown-toc").html() === "undefined") {
|
||||
$("#content").hide();
|
||||
$("#my-article").removeClass("col-sm-9").addClass("col-sm-12");
|
||||
} else {
|
||||
$("#content .content-text").html("<ul>" + $("#markdown-toc").html() + "</ul>");
|
||||
}
|
||||
}
|
||||
|
||||
function setUpSlideShowContainers() {
|
||||
/*
|
||||
* Only loads the first image/slide. The following images are loaded
|
||||
* when the user clicks the given slide button, if not yet loaded.
|
||||
*
|
||||
* The img tags in the HTML must follow this convention:
|
||||
*
|
||||
* <img defpath="path/to/image.ext">
|
||||
*
|
||||
* No 'src' is required.
|
||||
*/
|
||||
|
||||
// Constants:
|
||||
var slideFadeMilliseconds = 300;
|
||||
var activeButtonClass = "slideshow-active-button";
|
||||
var buttonGroupClass = "slideshow-buttons";
|
||||
var slideShowClass = "slideshow-container";
|
||||
var buttonTargetHref = "javascript:;";
|
||||
|
||||
// Find all slide-shows and iterate them:
|
||||
$("." + slideShowClass).each(function(index, slideShowContainer) {
|
||||
|
||||
// Find all images inside the slideShowContainer, then load the first deferred image:
|
||||
var childImages = $(slideShowContainer).find("img");
|
||||
var jqImg = $(childImages[0]);
|
||||
|
||||
if (jqImg) {
|
||||
// Show the image only when loading completes.
|
||||
myImgOnLoad(jqImg, function() {
|
||||
jqImg.fadeIn(slideFadeMilliseconds);
|
||||
});
|
||||
// Start the download.
|
||||
myImgLoadDeferred(jqImg);
|
||||
}
|
||||
|
||||
// If the container has a single image, don't add the slide buttons.
|
||||
// Also shrink the base border to undo the "polaroid" look.
|
||||
if (childImages.length == 1) {
|
||||
jqImg.css("border-bottom-width", "10px");
|
||||
return;
|
||||
}
|
||||
|
||||
// Array to contain the buttons and their corresponding images.
|
||||
var buttons = [];
|
||||
|
||||
// Record which button/image is currently active.
|
||||
var current = 0;
|
||||
|
||||
// Build a div to contain the buttons:
|
||||
var buttonsContainer = $("<div>").addClass(buttonGroupClass);
|
||||
|
||||
// Iterate each child image to add the buttons:
|
||||
childImages.each(function(index, img) {
|
||||
|
||||
// Build a new button. If it's the first button it should be active.
|
||||
var button = $("<a>").prop("href", buttonTargetHref);
|
||||
|
||||
if (index == 0) {
|
||||
button.addClass(activeButtonClass);
|
||||
}
|
||||
|
||||
buttons.push({ "button": button, "image": img });
|
||||
buttonsContainer.append(button);
|
||||
|
||||
button.click(function() {
|
||||
if (current == index) {
|
||||
return; // Clicking the currently active button. Do nothing.
|
||||
}
|
||||
|
||||
function slideFade(jqImgIn, waitForLoading) {
|
||||
// Fade out the old current image:
|
||||
$(buttons[current].image).fadeOut(slideFadeMilliseconds,
|
||||
function() {
|
||||
// then fade in this slide/image:
|
||||
if (waitForLoading) {
|
||||
myImgOnLoad(jqImgIn, function() {
|
||||
jqImgIn.fadeIn(slideFadeMilliseconds);
|
||||
});
|
||||
myImgLoadDeferred(jqImgIn);
|
||||
} else {
|
||||
jqImgIn.fadeIn(slideFadeMilliseconds);
|
||||
}
|
||||
});
|
||||
|
||||
$(buttons[current].button).removeClass(activeButtonClass);
|
||||
$(buttons[index].button).addClass(activeButtonClass);
|
||||
current = index; // Remember the active button.
|
||||
}
|
||||
|
||||
// Load the image if not yet loaded. If it is loading for the first
|
||||
// time, then defer the fade-in until loading completes.
|
||||
var jqImg = $(img);
|
||||
if (!myImgIsLoaded(jqImg)) {
|
||||
slideFade(jqImg, /* waitForLoading = */ true); // Show the image only when loading completes.
|
||||
} else {
|
||||
slideFade(jqImg, /* waitForLoading = */ false); // Already loaded, fade-in/out now.
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add the expanded slide-show to the page:
|
||||
slideShowContainer.appendChild(buttonsContainer[0]);
|
||||
});
|
||||
}
|
||||
|
||||
function fixMissingImageCaptions() {
|
||||
//
|
||||
// Some post images don't have a caption.
|
||||
// Now that I've added the "polaroid"-like bottom
|
||||
// caption area, it looks better to make sure all
|
||||
// images have this description text. Some don't
|
||||
// have it, but they have a 'title' property, which
|
||||
// can be repurposed as a caption.
|
||||
//
|
||||
$(".post img").each(function(index, img) {
|
||||
var jqImg = $(img);
|
||||
|
||||
// If an <em> follows, it has a caption already.
|
||||
var immediateSibling = jqImg.next();
|
||||
if (immediateSibling && !$(immediateSibling).is("em")) {
|
||||
|
||||
// We won't add a caption to the profile picture
|
||||
// and the StackExchange flair thingy. Slide-show
|
||||
// images also don't get a caption.
|
||||
var id = jqImg.attr("id");
|
||||
var parentClass = jqImg.parent().attr("class");
|
||||
|
||||
if (!$(immediateSibling).html() &&
|
||||
(id != "profile-pic") && (id != "stackexchange-flair") &&
|
||||
(parentClass != "slideshow-img-list")) {
|
||||
|
||||
var title = jqImg.attr("title");
|
||||
if (title) {
|
||||
var imgCaption = $("<em>");
|
||||
imgCaption.html(title);
|
||||
jqImg.after(imgCaption);
|
||||
} else {
|
||||
// Looks like no title/caption is available, shrink back the bottom border.
|
||||
jqImg.css("border-bottom-width", "10px");
|
||||
jqImg.css("margin-bottom", "15px");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addBlankTargetToExternalLinks() {
|
||||
// This should make external links always open in a new browser tab.
|
||||
$("a[href^='http']").each(function() {
|
||||
$(this).attr("target", "_blank");
|
||||
});
|
||||
}
|
||||
|
||||
//
|
||||
// Sets up the dynamic site elements
|
||||
// when the pages finish loading.
|
||||
//
|
||||
$(document).ready(function() {
|
||||
setUpCategoryDisplay();
|
||||
setUpTableOfContents();
|
||||
setUpSlideShowContainers();
|
||||
fixMissingImageCaptions();
|
||||
addBlankTargetToExternalLinks();
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user