Re-Theming My Demo Site

After a year of no posts, through occupation with other things (GCSEs, and beginning A Levels!), I am back!

Recently I haven't been doing much software design, instead focussing on photography, school work and other school activities - including editing a magazine, auditing my school's websites, some video editing, and more. However, I have finally again ventured deep into the world of endless coding, beginning with redesigning my demo site. Originally, this was a dilapidated site based on the unsightly Material Design 2.0 for web design language.

I've never been particularly happy with this site, but as it had low traffic and wasn't overly important, I left it as it was. However, recently I created a new page on it that students at Reading School will be using to generate markdown files for their BBC Young Reporter news articles.

Because of this, I wanted to make this site look visually attractive, and so spent some time finding open-source templates (as I didn't want to re-code the entire site). Eventually I found Industrious by TEMPLATED - and I love it. I spent a few hours editing this theme, and then deployed it on the site.

The changes included adjusting the colour values referenced throughout the main stylesheet to use variables, so I could easily the change the colours site-wide by just changing a few values, instead of hundreds.

Originally, it was:

input[type="checkbox"] + label,
input[type="radio"] + label {
  color: #eeeeee; }
  input[type="checkbox"] + label:before,
  input[type="radio"] + label:before {
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.25); }
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
  background-color: #c72a32;
  border-color: #c72a32;
  color: #ffffff; }
input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
  border-color: #c72a32;
  box-shadow: 0 0 0 1px #c72a32; }

::-webkit-input-placeholder {
  color: #444444 !important; }

:-moz-placeholder {
  color: #444444 !important; }

::-moz-placeholder {
  color: #444444 !important; }

:-ms-input-placeholder {
  color: #444444 !important; }

And then after my edits:

:root {
    --text-colour: #dddddd;
    --header-colour: #eeeeee;
    --background-colour: #181a1b;
    --background-colour-dark-rgb: 24, 26, 27;
    --background-colour-tint: #141617;
    --secondary-colour: #c72a32;
    --secondary-colour-rgb: 199, 42, 50;
    --button-text-colour: #ffffff;
    --secondary-colour-hover: #d92b34;
    --secondary-colour-active: #b5242c;
    --background-colour-dark: #111111;
    --placeholder-colour: #444444;
    --list-icon-colour: #ffffff;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  color: var(--header-colour); }
  input[type="checkbox"] + label:before,
  input[type="radio"] + label:before {
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.25); }
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
  background-color: var(--secondary-colour);
  border-color: var(--secondary-colour);
  color: var(--button-text-colour); }
input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
  border-color: var(--secondary-colour);
  box-shadow: 0 0 0 1px var(--secondary-colour); }

::-webkit-input-placeholder {
  color: var(--placeholder-colour) !important; }

:-moz-placeholder {
  color: var(--placeholder-colour) !important; }

::-moz-placeholder {
  color: var(--placeholder-colour) !important; }

:-ms-input-placeholder {
  color: var(--placeholder-colour) !important; }

I also changed the theme from light to dark (just changing the background colours to greys instead of white, and adjusting text colours accordingly), and eventually arrived at the theme now available.

Overall, I'm delighted with this theme - and its ease of use is very satisfying.

Only a short post this time, but I'm now starting work on a larger project - so there may be something more significant within the next 12 months.

Please check out my GitHub, @mgrove36, and GitLab, @mgrove36.