opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Use sass again

Browse source
This commit is contained in:
Oliver Davies 2018-06-03 09:33:12 +01:00
parent aa612a8d84
commit 97737eba1b
29 changed files with 159 additions and 213 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
assets/less/base/base.less
View file

@ -1,37 +0,0 @@
a {
color: inherit;
text-decoration: none;
&:focus,
&:hover {
text-decoration: underline;
}
}
main a {
text-decoration: underline;
&:focus,
&:hover {
text-decoration: none;
}
}
h1, h2, h3 {
@apply .mb-2;
}
.content {
h2,
h3 {
@apply .mt-6;
}
}
p,
ul,
ol,
table,
pre {
@apply .mb-4;
}

7
assets/less/base/images.less
View file

@ -1,7 +0,0 @@
img.with-border {
@apply .border .border-solid .border-grey-light;
}
svg {
fill: currentColor;
}

3
assets/less/components/blockquote.less
View file

@ -1,3 +0,0 @@
blockquote {
@apply .border-l-4 .border-blue .pl-4;
}

13
assets/less/components/button.less
View file

@ -1,13 +0,0 @@
.button {
@apply .bg-blue;
@apply .inline-block;
@apply .rounded;
@apply .text-white;
@apply .px-4;
@apply .py-2;
&:active,
&:hover {
@apply .bg-blue-dark;
}
}

3
assets/less/components/link.less
View file

@ -1,3 +0,0 @@
.link {
@apply .text-blue;
}

14
assets/less/components/listing.less
View file

@ -1,14 +0,0 @@
.listing {
@apply .pl-0;
}
.listing-item {
@apply .overflow-hidden;
@apply .pb-8;
&:not(:last-child) {
@apply .border-b;
@apply .border-grey-light;
@apply .mb-8;
}
}

31
assets/less/components/markdown.less
View file

@ -1,31 +0,0 @@
.markdown {
p,
li {
a {
@apply .link;
}
}
p,
li {
code {
@apply .bg-grey-lighter .inline-block .font-mono .text-xs;
padding: 1px 3px;
}
}
pre code,
pre code.hljs,
.hljs {
@apply .bg-grey-lighter;
@apply .block;
@apply .border-grey-dark;
@apply .border-l-4;
@apply .font-mono;
@apply .leading-loose;
@apply .overflow-x-scroll;
@apply .p-4;
@apply .rounded;
@apply .text-xs;
}
}

16
assets/less/components/note.less
View file

@ -1,16 +0,0 @@
.note {
@apply .bg-blue-lighter;
@apply .border-blue;
@apply .border-l-4;
@apply .mb-4;
@apply .p-4;
@apply .rounded;
& > *:last-child {
@apply .mb-0;
}
p a {
@apply .text-black;
}
}

0
assets/less/components/post/code.less
View file

30
assets/less/components/table.less
View file

@ -1,30 +0,0 @@
.table-collapse {
border-collapse: collapse;
}
.table-responsive {
@apply .mb-4 .border .w-full;
overflow-x: auto;
overflow-y: hidden;
}
.table-responsive table {
@apply .mb-0 .border-0 .whitespace-no-wrap;
}
.table {
@apply .w-full;
@apply .table-collapse;
}
.table tr:nth-child(odd) {
@apply .bg-grey-lighter;
}
.table tr th {
@apply .text-left .px-3 .py-2 .bg-white;
}
.table td {
@apply .px-3 .py-2 .border-t;
}

22
assets/less/components/talk/slides.less
View file

@ -1,22 +0,0 @@
.talk-slides {
background: url('../../../images/loading.gif') center no-repeat;
min-height: 275px;
@screen md {
& {
min-height: 375px;
}
}
@screen lg {
& {
min-height: 450px;
}
}
@screen xl {
& {
min-height: 560px;
}
}
}

13
assets/less/components/talk/video.less
View file

@ -1,13 +0,0 @@
.talk-video {
@apply .relative .w-full;
padding-top: 56.25%
}
.talk-video iframe,
.talk-video embed {
@apply .absolute;
@apply .pin-l;
@apply .pin-t;
@apply .h-full;
@apply .w-full;
}

3
assets/less/components/widget.less
View file

@ -1,3 +0,0 @@
.widget {
@apply .mb-6 .block;
}

19
assets/less/site.less
View file

@ -1,19 +0,0 @@
@import (css) "~font-awesome/css/font-awesome.css";
@import (css) "~highlightjs/styles/github-gist.css";
@tailwind preflight;
@import 'base/base';
@import 'base/images';
@import 'components/button';
@import 'components/link';
@import 'components/listing';
@import 'components/markdown';
@import 'components/note';
@import 'components/table';
@import 'components/talk/slides';
@import 'components/talk/video';
@import 'components/widget';
@tailwind utilities;

29
assets/sass/base/base.sass Normal file
View file

@ -0,0 +1,29 @@
a
color: inherit
text-decoration: none
&:focus,
&:hover
text-decoration: underline
main a
text-decoration: underline
&:focus,
&:hover
text-decoration: none
h1, h2, h3
@apply .mb-2
.content
h2,
h3
@apply .mt-6
p,
ul,
ol,
table,
pre
@apply .mb-4

5
assets/sass/base/images.sass Normal file
View file

@ -0,0 +1,5 @@
img.with-border
@apply .border .border-solid .border-grey-light
svg
fill: currentColor

2
assets/sass/components/blockquote.sass Normal file
View file

@ -0,0 +1,2 @@
blockquote
@apply .border-l-4 .border-blue .pl-4

11
assets/sass/components/button.sass Normal file
View file

@ -0,0 +1,11 @@
.button
@apply .bg-blue
@apply .inline-block
@apply .rounded
@apply .text-white
@apply .px-4
@apply .py-2
&:active,
&:hover
@apply .bg-blue-dark

2
assets/sass/components/link.sass Normal file
View file

@ -0,0 +1,2 @@
.link
@apply .text-blue

11
assets/sass/components/listing.sass Normal file
View file

@ -0,0 +1,11 @@
.listing
@apply .pl-0
.listing-item
@apply .overflow-hidden
@apply .pb-8
&:not(:last-child)
@apply .border-b
@apply .border-grey-light
@apply .mb-8

21
assets/sass/components/markdown.sass Normal file
View file

@ -0,0 +1,21 @@
.markdown
p,
li
a
@apply .link
code
@apply .bg-grey-lighter .inline-block .font-mono
padding: 1px 3px
pre code,
pre code.hljs,
.hljs
@apply .p-4
@apply .text-sm
@apply .border-l-4
@apply .border-grey-dark
@apply .block
@apply .bg-grey-lighter
@apply .overflow-x-scroll
@apply .font-mono

8
assets/sass/components/note.sass Normal file
View file

@ -0,0 +1,8 @@
.note
@apply .bg-blue-lighter
@apply .p-4
@apply .border-l-4
@apply .border-blue
& > *:last-child
@apply .mb-0

23
assets/sass/components/table.sass Normal file
View file

@ -0,0 +1,23 @@
.table-collapse
border-collapse: collapse
.table-responsive
@apply .mb-4 .border .w-full
overflow-x: auto
overflow-y: hidden
table
@apply .mb-0 .border-0 .whitespace-no-wrap
.table
@apply .w-full
@apply .table-collapse
tr:nth-child(odd)
@apply .bg-grey-lighter
tr th
@apply .text-left .px-3 .py-2 .bg-white
td
@apply .px-3 .py-2 .border-t

15
assets/sass/components/talk/slides.sass Normal file
View file

@ -0,0 +1,15 @@
.talk-slides
background: url('../images/loading.gif') center no-repeat
min-height: 275px
@screen md
&
min-height: 375px
@screen lg
&
min-height: 450px
@screen xl
&
min-height: 560px

8
assets/sass/components/talk/video.sass Normal file
View file

@ -0,0 +1,8 @@
.talk-video
iframe,
embed
@apply .absolute
@apply .h-full
@apply .pin-l
@apply .pin-t
@apply .w-full

2
assets/sass/components/widget.sass Normal file
View file

@ -0,0 +1,2 @@
.widget
@apply .mb-6 .block

20
assets/sass/site.sass Normal file
View file

@ -0,0 +1,20 @@
@import '~font-awesome/css/font-awesome.css'
@import '~highlightjs/styles/github-gist.css'
@tailwind preflight
@import 'base/base'
@import 'base/images'
@import 'components/blockquote'
@import 'components/button'
@import 'components/link'
@import 'components/listing'
@import 'components/markdown'
@import 'components/note'
@import 'components/table'
@import 'components/talk/slides'
@import 'components/talk/video'
@import 'components/widget'
@tailwind utilities

2
source/_partials/talk/video.html.twig
View file

@ -2,7 +2,7 @@
<div class="mt-4">
<h2>Video</h2>
<div class="talk-video">
<div class="w-full relative" style="padding-top: 56.25%">
{% if page.youtube.id %}
<iframe
width="678"

2
webpack.mix.js
View file

@ -4,7 +4,7 @@ require('laravel-mix-purgecss');
require('laravel-mix-tailwind');
mix.disableNotifications()
.less('assets/less/site.less', 'source/build/css')
.sass('assets/sass/site.sass', 'source/build/css')
.combine([
'node_modules/jquery/dist/jquery.js',
'node_modules/highlightjs/highlight.pack.js',