Home of the SYSTRON Lab
based in the Department of Computer Science at the University of York
Table of Contents
This repository holds the files that provide the SYSTRON Lab website, which is powered by GitHub Pages. The site is written in Jekyll, making it a combination of HTML/CSS/JS and also markdown pages.
To update the site, simply follow the instructions in the rest of this document.
This site is primarily written using markdown. When you commit a new markdown file, it will automatically be processed by Jekyll into a webpage, making it incredibly simple to add new content.
You can update content by modifying the site's markdown files, which all end in .md. These are housed in the root directory, or in:
_opportunitiesfor job, PhD or research opportunities_peoplefor members of the SYSTRON team_publicationsfor research outputs (with supporting files, such as PDFs, in/files/publications/)_researchfor research themesnews/_postsfor news items
Make a copy of the template _opportunities/template.md and complete the mandatory fields:
title, such as what the position will bedateof publicationclosing, when the applicant must apply before
Then add an overview of the role, or the role description, to the main body. These can by stylised using markdown or HTML.
You can optionally add:
subtitle, such as the research theme or fundersalary, the advertised salary bracketlinkto an external place to applybackgroundto provide a background image (also used in Twitter, Facebook and LinkedIn cards)
Make a copy of the template _people/template.md and complete the mandatory fields:
name, the person's namerole, the person's role
Then add a short description of the person and/or their resarch to the main body of the file.
You can optionally add:
photo, the path to a person's photo, if uploaded to/img/people. If this isn't present, it'll default to a placeholder imagesite, the person's personal websiteorder, the card's position on About Us: smaller numbers appear first. Current values increase by 10, so use an intermediate number to insert a person between two others. Every three consecutive people share a row on desktop. Homepage selection still usespriority.
Keep full-resolution originals outside this repository. After adding photos to img/, run python3 scripts/optimize-images.py (requires Pillow with WebP support: python3 -m pip install Pillow). The script compresses JPEGs to a maximum of 1920 pixels per side, optimizes PNG originals losslessly, and creates 160, 480 and 960 pixel variants in img/responsive/ where the source is large enough. PNGs also get WebP variants, including one at their original width when smaller than the PNG. Commit those files together with _data/image_variants.json. To process only specific images, pass their paths, for example python3 scripts/optimize-images.py img/minirobot.png.
The homepage, team, project and post templates, and Facilities use _includes/image-srcset.html to select smaller images on narrow screens. New images still display before running the script; responsive variants become available after it runs. Inline images added to Markdown can use the same include, for example:
<img src="{{ '/img/example.jpg' | relative_url }}" alt="Describe the image" loading="lazy" {% include image-srcset.html src='/img/example.jpg' %}>Make a copy of the template _projects/template.md and complete the mandatory fields:
authors, the authors name(s)title, the project titledesc, a description from the project
Then add the contents of the project article to the main body of the file.
You can optionally add:
image, the path to an image associated with the project.
All changes must be added through an approved Pull Request. To do this create a different branch either through the GitHub GUI or using git branch [branch name] and git checkout [branch name], then opening a PR when you have finished committing your changes.
This site is written in Jekyll, and then published to GitHub Pages. To modify the underlying template, you can edit the HTML files and publish these as commits, but it is recommended to create a local copy and test these changes first.
- Ruby (2.5.0+)
- RubyGems
Install Jekyll and Bundler:
gem install jekyll bundlerThen in the same directory as this site's files, run:
bundle exec jekyll serveThis should run a local copy of the site, accessible from localhost:4000.
Fonts and core scripts are served locally to avoid third-party network delays. assets/fonts/ contains DM Sans and Outfit from Google Fonts and their OFL licenses. assets/vendor/ contains jQuery 3.5.1, Bootstrap 4.6.0 and license files. The six Font Awesome 5.15.3 icons used by the site are inline SVG includes in _includes/icons/, with their license in assets/vendor/. Keep the corresponding licenses when updating these assets. Use _includes/youtube.html with an id, title and optional local poster image for videos. It displays a lightweight preview and creates the YouTube player only when clicked; without JavaScript the preview links to YouTube. Video previews use local thumbnails in img/videos/ or existing lab photos.
*** Primary color:
shade 0 = #003A21 = rgb( 0, 58, 33) = rgba( 0, 58, 33,1) = rgb0(0,0.227,0.129)
shade 1 = #277453 = rgb( 39,116, 83) = rgba( 39,116, 83,1) = rgb0(0.153,0.455,0.325)
shade 2 = #0D5536 = rgb( 13, 85, 54) = rgba( 13, 85, 54,1) = rgb0(0.051,0.333,0.212)
shade 3 = #002314 = rgb( 0, 35, 20) = rgba( 0, 35, 20,1) = rgb0(0,0.137,0.078)
shade 4 = #000F09 = rgb( 0, 15, 9) = rgba( 0, 15, 9,1) = rgb0(0,0.059,0.035)
*** Secondary color (1):
shade 0 = #042036 = rgb( 4, 32, 54) = rgba( 4, 32, 54,1) = rgb0(0.016,0.125,0.212)
shade 1 = #294F6D = rgb( 41, 79,109) = rgba( 41, 79,109,1) = rgb0(0.161,0.31,0.427)
shade 2 = #113450 = rgb( 17, 52, 80) = rgba( 17, 52, 80,1) = rgb0(0.067,0.204,0.314)
shade 3 = #011321 = rgb( 1, 19, 33) = rgba( 1, 19, 33,1) = rgb0(0.004,0.075,0.129)
shade 4 = #00080E = rgb( 0, 8, 14) = rgba( 0, 8, 14,1) = rgb0(0,0.031,0.055)
*** Secondary color (2):
shade 0 = #224B00 = rgb( 34, 75, 0) = rgba( 34, 75, 0,1) = rgb0(0.133,0.294,0)
shade 1 = #609732 = rgb( 96,151, 50) = rgba( 96,151, 50,1) = rgb0(0.376,0.592,0.196)
shade 2 = #3B6E11 = rgb( 59,110, 17) = rgba( 59,110, 17,1) = rgb0(0.231,0.431,0.067)
shade 3 = #142D00 = rgb( 20, 45, 0) = rgba( 20, 45, 0,1) = rgb0(0.078,0.176,0)
shade 4 = #091400 = rgb( 9, 20, 0) = rgba( 9, 20, 0,1) = rgb0(0.035,0.078,0)
*** Complement color:
shade 0 = #551800 = rgb( 85, 24, 0) = rgba( 85, 24, 0,1) = rgb0(0.333,0.094,0)
shade 1 = #A95938 = rgb(169, 89, 56) = rgba(169, 89, 56,1) = rgb0(0.663,0.349,0.22)
shade 2 = #7C3113 = rgb(124, 49, 19) = rgba(124, 49, 19,1) = rgb0(0.486,0.192,0.075)
shade 3 = #330E00 = rgb( 51, 14, 0) = rgba( 51, 14, 0,1) = rgb0(0.2,0.055,0)
shade 4 = #170600 = rgb( 23, 6, 0) = rgba( 23, 6, 0,1) = rgb0(0.09,0.024,0)