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

Merge pull request #173 from jonnybarnes/some-theming

Browse source 
Some theming
This commit is contained in:
Jonny Barnes 2020-06-23 21:23:10 +01:00 • committed by GitHub
commit c4af4b9984
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 162 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/Http/Middleware/CSPHeader.php
View file

@ -32,9 +32,7 @@ blob:; \
style-src 'self' 'unsafe-inline' \
https://api.mapbox.com \
https://api.tiles.mapbox.com \
https://fonts.googleapis.com \
use.typekit.net \
p.typekit.net; \
cloud.typography.com; \
img-src 'self' data: blob: \
https://pbs.twimg.com \
https://api.mapbox.com \

97
public/assets/app.css vendored
View file

@ -1,10 +1,28 @@
:root {
--font-stack-body: montserrat, sans-serif;
--font-stack-headings: bebas-neue, sans-serif; }
/* fonts */
--font-stack-body: "Whitney SSm A", "Whitney SSm B", sans-serif;
--font-stack-headings: "Quarto A", "Quarto B", serif;
--font-stack-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace;
/* colours */
--color-background: #004643;
--color-headline: #fffffe;
--color-paragraph: #abd1c6;
--color-button: #f9bc60;
--color-button-text: #001e1d;
/* colours - illustrations */
--color-stroke: #001e1d;
--color-main: #e8e4e6;
--color-highlight: #f9bc60;
--color-secondary: #abd1c6;
--color-tertiary: #e16162; }
body {
font-family: var(--font-stack-body);
font-size: 2rem; }
font-style: normal;
font-weight: 400;
font-size: 2rem;
background-color: var(--color-background);
color: var(--color-paragraph); }
h1,
h2,
@ -12,44 +30,45 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-stack-headings); }
font-family: var(--font-stack-headings);
font-style: normal;
font-weight: 800; }
pre,
code {
font-family: var(--font-stack-monospace);
font-style: normal;
font-weight: 400; }
a {
color: var(--color-highlight);
text-decoration: none; }
.h-feed > .note,
.h-feed > .h-entry {
margin-top: 4rem; }
body {
display: flex;
flex-direction: column; }
#top-header {
display: flex;
flex-direction: column;
justify-content: center; }
#top-header h1 {
width: 100%;
text-align: center; }
#top-header nav {
display: flex;
justify-content: center;
flex-wrap: wrap; }
#top-header nav a {
margin: 0 0.5rem; }
@media screen and (max-width: 699px) {
main {
margin-left: 5px;
margin-right: 5px; } }
main .h-feed {
main {
display: flex;
flex-direction: column;
margin: auto; }
main .h-feed img {
@media screen and (max-width: 699px) {
main {
margin-left: 5px;
margin-right: 5px; } }
main img {
max-width: 100%; }
@media screen and (min-width: 700px) {
main .h-feed {
main {
max-width: 700px; }
main .h-feed > .note,
main .h-feed > .h-entry {
main > .note,
main > .h-entry {
padding: 0 1rem; } }
main .h-feed .h-entry:first-child > .bookmark-link {
main .h-entry:first-child > .bookmark-link {
padding-top: 2rem; }
.note {
@ -67,6 +86,12 @@ main .h-feed {
.note > .e-content > .naked-link .u-photo {
margin: 2rem 0; }
article header > h1 {
margin-bottom: 0; }
article header .post-info {
font-size: 1.4rem; }
.pagination {
display: flex;
flex-direction: row;
@ -92,6 +117,20 @@ footer {
margin-left: 5px;
margin-right: 5px; } }
#top-header {
display: flex;
flex-direction: column;
justify-content: center; }
#top-header h1 {
width: 100%;
text-align: center; }
#top-header nav {
display: flex;
justify-content: center;
flex-wrap: wrap; }
#top-header nav a {
margin: 0 0.5rem; }
.post-info a {
text-decoration: none; }

2
public/assets/app.css.map
View file

File diff suppressed because one or more lines are too long

23
resources/sass/_base.scss vendored
View file

@ -1,6 +1,10 @@
body {
font-family: var(--font-stack-body);
font-style: normal;
font-weight: 400;
font-size: 2rem;
background-color: var(--color-background);
color: var(--color-paragraph);
}
h1,
@ -10,4 +14,23 @@ h4,
h5,
h6 {
font-family: var(--font-stack-headings);
font-style: normal;
font-weight: 800;
}
pre,
code {
font-family: var(--font-stack-monospace);
font-style: normal;
font-weight: 400;
}
a {
color: var(--color-highlight);
text-decoration: none;
}
.h-feed > .note,
.h-feed > .h-entry {
margin-top: 4rem;
}

90
resources/sass/_layout-main.scss vendored
View file

@ -3,55 +3,32 @@ body {
flex-direction: column;
}
#top-header {
display: flex;
flex-direction: column;
justify-content: center;
h1 {
width: 100%;
text-align: center;
}
nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
a {
margin: 0 0.5rem;
}
}
}
main {
@media screen and (max-width: 699px) {
margin-left: 5px;
margin-right: 5px;
}
.h-feed {
display: flex;
flex-direction: column;
margin: auto;
display: flex;
flex-direction: column;
margin: auto;
img {
max-width: 100%;
img {
max-width: 100%;
}
@media screen and (min-width: 700px) {
max-width: 700px;
> .note,
> .h-entry {
padding: 0 1rem;
}
}
@media screen and (min-width: 700px) {
max-width: 700px;
> .note,
> .h-entry {
padding: 0 1rem;
}
}
.h-entry:first-child {
> .bookmark-link {
padding-top: 2rem;
}
.h-entry:first-child {
> .bookmark-link {
padding-top: 2rem;
}
}
}
@ -86,6 +63,18 @@ main {
}
}
article {
header {
> h1 {
margin-bottom: 0;
}
.post-info {
font-size: 1.4rem;
}
}
}
.pagination {
display: flex;
flex-direction: row;
@ -119,3 +108,24 @@ footer {
margin-right: 5px;
}
}
#top-header {
display: flex;
flex-direction: column;
justify-content: center;
h1 {
width: 100%;
text-align: center;
}
nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
a {
margin: 0 0.5rem;
}
}
}

20
resources/sass/_variables.scss vendored
View file

@ -1,4 +1,20 @@
:root {
--font-stack-body: montserrat, sans-serif;
--font-stack-headings: bebas-neue, sans-serif;
/* fonts */
--font-stack-body: "Whitney SSm A", "Whitney SSm B", sans-serif;
--font-stack-headings: "Quarto A", "Quarto B", serif;
--font-stack-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace;
/* colours */
--color-background: #004643;
--color-headline: #fffffe;
--color-paragraph: #abd1c6;
--color-button: #f9bc60;
--color-button-text: #001e1d;
/* colours - illustrations */
--color-stroke: #001e1d;
--color-main: #e8e4e6;
--color-highlight: #f9bc60;
--color-secondary: #abd1c6;
--color-tertiary: #e16162;
}

1
resources/views/master.blade.php
View file

@ -5,6 +5,7 @@
<title>@if (App::environment() == 'local'){!! "[testing] -"!!}@endif @yield('title'){{ config('app.display_name') }}</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/assets/frontend/normalize.css">
<link rel="stylesheet" href="https://cloud.typography.com/6554898/6676412/css/fonts.css">
<link rel="stylesheet" href="/assets/app.css">
<link rel="stylesheet" href="/assets/highlight/zenburn.css">
<link rel="alternate" type="application/rss+xml" title="Blog RSS Feed" href="/blog/feed.rss">

1
resources/views/notes/show.blade.php
View file

@ -46,6 +46,5 @@
@section('scripts')
<link rel="stylesheet" href="/assets/highlight/zenburn.css">
<script defer src="/assets/js/links.js"></script>
@include('templates.mapbox-links')
@stop