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: python3 -m pip install Pillow). The script compresses JPEGs to a maximum of 1920 pixels per side, optimizes PNGs losslessly, and creates smaller variants in img/responsive/. Commit those files together with _data/image_variants.json.
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.
*** 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)