jonny/jonnybarnes.uk
Watch
1
0
Fork
You've already forked jonnybarnes.uk
 0
Code Issues 9 Pull requests Projects Releases 35 Packages Wiki Activity Actions

New style for the website

Browse source 
Squashed commit of the following:

commit ade162a90192325721fb5007dbd9976a3121c968
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sat Nov 4 12:08:51 2017 +0000

    Compress frontend assets

commit cbb35750b1068f0cc5eaccd330ac5ba6ad514491
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sat Nov 4 12:02:58 2017 +0000

    the brotli executable has been renamed to `brotli`

commit 413b330d6982653fb7edf49c83a3464335dde1ad
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sat Nov 4 11:17:32 2017 +0000

    Update changelog

commit 4fc41cf546743fc6ae31a4c62c0f8152f13067d7
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sat Nov 4 09:47:55 2017 +0000

    Add some minor layout improvements for mobile

commit 5b4c5a16589f54469bdbb6aa3829a5e0d2ed2591
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Nov 2 10:26:47 2017 +0000

    Recompiled assets

commit fe14725f39d529c560f47c525e4deb70ea60b990
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Nov 2 10:26:11 2017 +0000

    Add solarized light colour scheme

commit e359f66b069efbe65b60780687a8d21d09f259c2
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Nov 2 10:24:50 2017 +0000

    Refer to termcolors not base16 base numbers

commit 0d794e1b69dc2f98bc663d4b4804fa47d484dc98
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Nov 2 10:23:07 2017 +0000

    Use termcolors so we can pull in other colour schemes such as solarized

commit 28e2ec2a4495d045876677703158ff3c547dd503
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Nov 1 20:56:55 2017 +0000

    Allow theme to be selected, save the selection in the session

commit 53e2aafa93324538dbcc8220b1eca5a1087d2a2f
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Oct 30 15:41:18 2017 +0000

    colour picker now shows current value

commit 6a9a0a880bbd0d01394bf6403f5ec607d5b300f6
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Oct 30 15:14:19 2017 +0000

    Use a form element

commit ff7f0e35c3e17872bebc45c8eba328f4a4352903
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Oct 30 15:10:57 2017 +0000

    Add option to change colour scheme in the HTML, js to add next

commit 6b9de5869835cc44d9db162f0d217f302f7025ec
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Oct 30 15:07:52 2017 +0000

    Add the base16 colour schemes

commit e18ff119c33edd135e4b4b34052381803d39734f
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Oct 30 11:59:40 2017 +0000

    Remove bullet points from tags

commit f4f013c323073f7b4e8b7e196d0078aab3d29878
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Oct 30 10:30:39 2017 +0000

    Some more styling, particularly tags, added a base16 colour scheme

commit 81e8773969503e8d52840039b6fe0922cabd3dcc
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Oct 27 16:20:29 2017 +0100

    Compiled app.css

commit 19e960b713fd880cccfd7e2db63013b5b2127dbd
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Oct 27 16:17:17 2017 +0100

    Remove unused .scss files

commit 5900d8a4bb4fc54003b84e42dd938d44e8fb46ea
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Oct 27 16:14:58 2017 +0100

    Most pages now have acceptible layout, removed colour scheme, will be in future commit

commit ec15d1c5e388f8224ffbc3a2074714cc9bc4ce6b
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Oct 26 19:02:40 2017 +0100

    Updated frontend css

commit 2000e5c582ac3dd45c9b67bf680d219a60190725
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Oct 26 19:01:14 2017 +0100

    Very basic restyling of the site

commit a3959377ff4595ab956dfb82fa7404fcdde81310
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Oct 23 09:00:30 2017 +0100

    Improved spacing/indenting of html in views

commit 66f2dcfd1f2c5a779cedad78c11f627c2d39e01f
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sun Oct 22 22:45:10 2017 +0100

    Remove most styles
This commit is contained in:
Jonny Barnes 2017-11-04 12:10:46 +00:00
commit f8e27600ef
73 changed files with 3237 additions and 1357 deletions
Download patch file Download diff file Expand all files Collapse all files

30
resources/assets/es6/colours.js vendored Normal file
View file

@ -0,0 +1,30 @@
//colours.js
let link = document.querySelector('#colourScheme');
let css = link.getAttribute('href').split('/').pop();
// update selected item in colour scheme list
document.getElementById('colourSchemeSelect').value = css;
// fix form
let form = document.getElementById('colourSchemeForm');
let btn = form.childNodes[5];
btn.addEventListener('click', function (e) {
e.preventDefault();
let newCss = document.getElementById('colourSchemeSelect').value;
let link = document.querySelector('#colourScheme');
let css = link.getAttribute('href');
let parts = css.split('/');
parts.pop();
parts.push(newCss);
link.setAttribute('href', parts.join('/'));
let formData = new FormData(form);
fetch('/update-colour-scheme', {
method: 'POST',
credentials: 'same-origin',
body: formData
}).catch(function (error) {
console.warn(error);
});
});

9
resources/assets/sass/_base-font.scss vendored Normal file
View file

@ -0,0 +1,9 @@
//base-font.scss
html {
font-size: 10px;
}
a.u-syndication {
text-decoration: none;
}

14
resources/assets/sass/_border-box.scss vendored Normal file
View file

@ -0,0 +1,14 @@
//border-box.scss
//use universal box sizing with inheritance
//from https://css-tricks.com/box-sizing/
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}

6
resources/assets/sass/_bridgy-links.scss vendored Normal file
View file

@ -0,0 +1,6 @@
// bridgy-links.scss
.p-bridgy-twitter-content,
.p-bridgy-facebook-content {
display: none;
}

16
resources/assets/sass/_colors.scss vendored Normal file
View file

@ -0,0 +1,16 @@
//colors.scss
body {
background-color: var(--brwhite);
color: var(--black);
}
#topheader {
background-color: var(--black);
color: var(--white);
}
a,
a:visited {
color: var(--blue);
}

14
resources/assets/sass/_contacts-page.scss vendored Normal file
View file

@ -0,0 +1,14 @@
//contacts-page.scss
main .contact {
font-size: 2rem;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
margin-top: 2rem;
}
.contact .u-photo {
width: auto;
height: 8rem;
}

51
resources/assets/sass/_emoji.scss vendored Normal file
View file

@ -0,0 +1,51 @@
//emoji.scss
//thanks to http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html
span[role=img][aria-label],
span[role=img][aria-label] {
position: relative;
}
span[role=img][aria-label]:focus::after,
span[role=img][aria-label]:hover::after {
position: absolute;
display: block;
z-index: 1;
bottom: 1.5em;
left: 0;
max-width: 5em;
padding: 0.5em 0.75em;
border: 0.05em solid rgba(255, 255, 255, 1);
border-radius: 0.2em;
box-shadow: 0.15em 0.15em 0.5em rgba(0, 0, 0, 1);
content: attr(aria-label);
background-color: rgba(0, 0, 0, 0.85);
color: rgba(255, 255, 255, 1);
font-size: 80%;
animation: TOOLTIP 0.1s ease-out 1;
}
@keyframes TOOLTIP {
from {
bottom: 0.5em;
background-color: rgba(0, 0, 0, 0);
border: 0.05em solid rgba(255, 255, 255, 0);
color: rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(0, 0, 0, 1);
}
to {
bottom: 1.5em;
background-color: rgba(0, 0, 0, 0.85);
border: 0.05em solid rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, 1);
box-shadow: 0.15em 0.15em 0.5em rgba(0, 0, 0, 1);
}
}
@media print {
span[role=img][aria-label]::after {
content: " (" attr(aria-label) ") ";
}
}

15
resources/assets/sass/_footer.scss vendored Normal file
View file

@ -0,0 +1,15 @@
//footer.scss
body > div.h-card {
max-width: $body-width;
margin: 0 auto;
font-size: 1.5rem;
}
footer {
max-width: $body-width;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}

18
resources/assets/sass/_header.scss vendored Normal file
View file

@ -0,0 +1,18 @@
//header.scss
#topheader {
display: flex;
flex-flow: row;
align-items: center;
width: 100%;
min-height: $header-height;
}
#topheader h1 {
font-size: 2rem;
padding: 0 2rem;
}
#topheader nav {
font-size: 2rem;
}

42
resources/assets/sass/_hovercard.scss vendored Normal file
View file

@ -0,0 +1,42 @@
//hovercard.scss
.mini-h-card {
position: relative;
}
.mini-h-card .p-name {
position: relative;
}
.mini-h-card:hover .p-name {
z-index: 100;
}
.mini-h-card:hover .hovercard {
display: flex;
}
.hovercard {
position: absolute;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
background: white;
width: 30rem;
left: -10px;
top: -10px;
z-index: 50;
padding: 2rem 1rem 1rem;
border-radius: 2px;
box-shadow: 3px 3px 2px 1px hsla(190, 11%, 7%, 1);
display: none;
}
.mini-h-card .social-icon {
width: auto;
height: 2rem;
}
.mini-h-card .u-photo {
height: 10rem;
}

19
resources/assets/sass/_main.scss vendored Normal file
View file

@ -0,0 +1,19 @@
//main.scss
main {
display: flex;
flex-direction: column;
align-items: stretch;
max-width: $body-width;
margin: 0 auto;
padding: 0 0.5rem;
}
.h-entry {
font-size: 2rem;
}
// add some padding to the top for pages that need it
.top-space {
padding-top: 2rem;
}

29
resources/assets/sass/_mapbox.scss vendored Normal file
View file

@ -0,0 +1,29 @@
// mapbox.scss
.map {
height: 200px;
}
.mapboxgl-ctrl-logo {
border-bottom: none;
}
.marker {
background-image: url(data:image/png;base64,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);
background-size: contain;
width: 20px;
height: 20px;
}
.map-menu {
position: absolute;
top: 0;
left: 0;
background: white;
padding: 0.4rem;
}
.map-menu label {
margin-left: 3px;
margin-right: 3px;
}

24
resources/assets/sass/_notes.scss vendored Normal file
View file

@ -0,0 +1,24 @@
//notes.scss
//the hovercard that is displayed in notes
@import "hovercard";
.note {
display: flex;
flex-direction: column;
font-size: 2rem;
}
.note-metadata {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.icon {
width: auto;
height: 1em;
}
//style the pagination links
@import "pagination";

9
resources/assets/sass/_pagination.scss vendored Normal file
View file

@ -0,0 +1,9 @@
//pagination.scss
.pagination {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 2rem;
list-style-type: none;
}

5
resources/assets/sass/_projects.scss vendored Normal file
View file

@ -0,0 +1,5 @@
//projects.scss
#projects {
font-size: 2rem;
}

12
resources/assets/sass/_styles.scss vendored Normal file
View file

@ -0,0 +1,12 @@
//styles.scss
#topheader a {
text-decoration: none;
}
h1 a {
text-decoration: none;
}
// tags
@import "tags";

48
resources/assets/sass/_tags.scss vendored Normal file
View file

@ -0,0 +1,48 @@
//tags.scss
//sourced from https://codepen.io/wbeeftink/pen/dIaDH
.tags {
margin: 0;
overflow: hidden;
padding: 0;
}
.tags li {
float: left;
list-style-type: none;
}
.tag {
background: var(--white);
border-radius: 3px 0 0 3px;
color: var(--black);
display: inline-block;
height: 2.6rem;
line-height: 2.6rem;
padding: 0 2rem 0 1rem;
position: relative;
margin: 0 1rem 1rem 0;
text-decoration: none;
transition: color 0.2s;
}
.tag::after {
background: var(--brwhite);
border-bottom: 1.3rem solid transparent;
border-left: 1rem solid var(--white);
border-top: 1.3rem solid transparent;
content: '';
position: absolute;
right: 0;
top: 0;
}
.tag:hover {
background-color: var(--red);
color: var(--black);
}
.tag:hover::after {
border-left-color: var(--red);
}

4
resources/assets/sass/_variables.scss vendored Normal file
View file

@ -0,0 +1,4 @@
//variables.scss
$body-width: 512px;
$header-height: 5rem;

46
resources/assets/sass/app.scss vendored
View file

@ -1,23 +1,33 @@
// app.scss
// https://css-tricks.com/box-sizing/#article-header-id-6
// and https://css-tricks.com/rems-ems/
html {
box-sizing: border-box;
font-size: 24px;
}
//variables used elsewhere
@import "variables";
*,
*::before,
*::after {
box-sizing: inherit;
}
//border-box
@import "border-box";
@import "layout";
@import "styles";
@import "pagination";
@import "note-form";
@import "mapbox";
@import "contacts";
@import "emoji";
//base font styles
@import "base-font";
//layouts
@import "header";
@import "main";
@import "notes";
@import "contacts-page";
@import "projects";
@import "footer";
//hide the custom bridgy posse content
@import "bridgy-links";
//style the emoji alt-text (a11y)
@import "emoji";
//style the mapbox maps
@import "mapbox";
//apply colors
@import "colors";
//apply styles
@import "styles";

14
resources/assets/sass/contacts.scss vendored
View file

@ -1,14 +0,0 @@
//contacts.scss
.contact {
display: flex;
flex-direction: row;
margin-top: 1em;
border-bottom: 1px dashed grey;
}
.contact img {
margin-right: 0.2rem;
width: 100px;
height: 100px;
}

Some files were not shown because too many files have changed in this diff Show more