jonny/jonnybarnes.uk
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases 5 Packages Wiki Activity Actions

Some redesign work, that didnt actually use grid

Browse source 
Squashed commit of the following:

commit 1701a33d313d0969b061c8a87734395312045d9a
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sat Mar 16 18:44:29 2019 +0000

    Try and get security checker working again

commit 2f81f28419304cad1678c6ee054eb3c8782fa082
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sat Mar 16 18:38:41 2019 +0000

    Make sure aaron's profile pic is saved

commit 8a78aeec9c648a647fcb5d778b3003df5c3f653e
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sat Mar 16 18:16:16 2019 +0000

    Lets push out the new style as is

commit a8015907d44370600ae3711605f96c4e3a637fca
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Mar 15 21:31:19 2019 +0000

    More design work

commit 12cb6e1bfc23ca9591e5348ebc6e49614d686722
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sun Mar 10 16:00:30 2019 +0000

    Updating CSS styles for design v2
This commit is contained in:
Jonny Barnes 2019-03-16 21:48:54 +00:00
parent 91890fa41f
commit 26c4bc82d6
32 changed files with 237 additions and 365 deletions
Download patch file Download diff file Expand all files Collapse all files

6
resources/sass/_admin-form.scss vendored
View file

@ -1,6 +0,0 @@
//admin-form.scss
.admin-form {
margin-top: 2rem;
margin-bottom: 2rem;
}

5
resources/sass/_articles.scss vendored
View file

@ -1,6 +1,5 @@
//articles.scss
.h-entry pre code {
padding: 1.5rem 2rem;
border-radius: 4px;
article.h-entry {
width: $mainWidth;
}

10
resources/sass/_base-font.scss vendored
View file

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

22
resources/sass/_base.scss vendored Normal file
View file

@ -0,0 +1,22 @@
// _base.scss
// Fonts
html {
font-family: montserrat, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 20px;
}
h1 {
font-family: bebas-neue, sans-serif;
font-weight: 400;
font-style: normal;
}
code {
font-family: "Operator Mono", monospace;
}
// Variables
$mainWidth: 40rem;

5
resources/sass/_bio.scss vendored Normal file
View file

@ -0,0 +1,5 @@
// bio.scss
.personal-bio {
width: $mainWidth;
}

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

@ -1,14 +0,0 @@
//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/sass/_bridgy-links.scss vendored
View file

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

16
resources/sass/_colors.scss vendored
View file

@ -1,16 +0,0 @@
//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/sass/_contacts-page.scss vendored
View file

@ -1,14 +0,0 @@
//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;
}

25
resources/sass/_footer.scss vendored
View file

@ -1,15 +1,22 @@
//footer.scss
body > div.h-card {
max-width: $body-width;
margin: 0 auto;
font-size: 1.5rem;
}
// footer.scss
footer {
max-width: $body-width;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--white);
color: var(--black);
a {
color: var(--blue);
text-decoration: none;
}
form:first-child {
margin-bottom: 1rem;
}
p {
margin-bottom: 0;
}
}

15
resources/sass/_form.scss vendored
View file

@ -1,15 +0,0 @@
//form.scss
.form {
display: flex;
flex-direction: column;
}
.form > div {
display: flex;
flex-direction: column;
}
div.form-row {
flex-direction: row;
}

18
resources/sass/_header.scss vendored
View file

@ -1,18 +0,0 @@
//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/sass/_hovercard.scss vendored
View file

@ -1,42 +0,0 @@
//hovercard.scss
.mini-h-card {
position: relative;
}
.mini-h-card .p-name {
position: relative;
}
.mini-h-card:hover .p-name {
z-index: 100;
}
.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:hover .hovercard {
display: flex;
}
.mini-h-card .social-icon {
width: auto;
height: 2rem;
}
.mini-h-card .u-photo {
height: 10rem;
}

5
resources/sass/_likes.scss vendored
View file

@ -1,5 +0,0 @@
//likes.scss
.u-like-of {
margin-top: 1rem;
}

25
resources/sass/_main.scss vendored
View file

@ -1,16 +1,21 @@
//main.scss
// main.scss
main {
display: flex;
flex-direction: column;
align-items: stretch;
max-width: $body-width;
margin: 0 auto;
padding: 0 0.5rem;
font-size: 2rem;
align-items: center;
background-color: var(--white);
color: var(--black);
a {
color: var(--blue);
text-decoration: none;
}
.h-entry {
margin: 3rem 0;
}
}
// add some padding to the top for pages that need it
.top-space {
padding-top: 2rem;
}
@import "pagination";
@import "bio";

26
resources/sass/_mapbox.scss vendored
View file

@ -1,29 +1,5 @@
// mapbox.scss
//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;
}

41
resources/sass/_notes.scss vendored
View file

@ -1,34 +1,17 @@
//notes.scss
// notes.scss
//the hovercard that is displayed in notes
@import "hovercard";
.note {
display: flex;
flex-direction: column;
font-size: 2rem;
.h-entry .note {
width: $mainWidth;
}
.note img {
max-width: 100%;
max-height: 80vh;
}
@media screen and (max-width: $mainWidth) {
.h-entry .note {
width: 95vw;
.note-metadata {
display: flex;
flex-direction: row;
justify-content: space-between;
.e-content {
img {
width: 100%;
}
}
}
}
.icon {
width: auto;
height: 1em;
}
.note pre code {
padding: 1.5rem 2rem;
border-radius: 4px;
}
//style the pagination links
@import "pagination";

7
resources/sass/_pagination.scss vendored
View file

@ -1,9 +1,10 @@
//pagination.scss
// pagination.scss
.pagination {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 2rem;
align-items: center;
justify-content: space-around;
list-style-type: none;
width: $mainWidth;
}

5
resources/sass/_projects.scss vendored
View file

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

25
resources/sass/_site-header.scss vendored Normal file
View file

@ -0,0 +1,25 @@
// site-header.scss
#topheader {
display: flex;
width: 100vw;
flex-direction: column;
align-items: center;
background-color: var(--black);
a {
color: var(--white);
text-decoration: none;
}
h1 {
margin-top: 0;
padding-top: 1rem;
font-size: 3rem;
}
nav {
padding-bottom: 1rem;
font-size: 1.5rem;
}
}

19
resources/sass/_styles.scss vendored
View file

@ -1,19 +0,0 @@
//styles.scss
html {
text-rendering: optimizeLegibility;
//text-decoration-skip-ink: auto;
overflow-wrap: break-word;
font-kerning: normal;
}
h1 a {
text-decoration: none;
}
#topheader a {
text-decoration: none;
}
// tags
@import "tags";

16
resources/sass/_syndication.scss vendored Normal file
View file

@ -0,0 +1,16 @@
//syndication.scss
.note-metadata {
display: flex;
flex-direction: row;
justify-content: space-between;
.social-links {
flex-direction: row;
svg {
height: 1em;
width: auto;
}
}
}

49
resources/sass/_tags.scss vendored
View file

@ -1,49 +0,0 @@
//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,
.tag:visited {
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/sass/_variables.scss vendored
View file

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

35
resources/sass/app.scss vendored
View file

@ -1,37 +1,18 @@
// app.scss
//variables used elsewhere
@import "variables";
//border-box
@import "border-box";
//base font styles
@import "base-font";
//layouts
@import "header";
// General styles
@import "base";
@import "site-header";
@import "main";
@import "articles";
@import "notes";
@import "contacts-page";
@import "projects";
@import "footer";
@import "admin-form";
@import "form";
@import "likes";
//hide the custom bridgy posse content
@import "bridgy-links";
//style the emoji alt-text (a11y)
@import "emoji";
//style the mapbox maps
// Mapbox styles
@import "mapbox";
//apply colors
@import "colors";
// The syndication links at the end of notes
@import "syndication";
//apply styles
@import "styles";
// Accessible emoji
@import "emoji";