Gulp system

Needs adding to the automation pipeline but manual will do for now...
This commit is contained in:
2020-07-15 22:58:44 +01:00
parent 64df2c52e8
commit 4c7b7b479d
10 changed files with 4381 additions and 4611 deletions

44
gulpfile.js Normal file
View File

@@ -0,0 +1,44 @@
"use strict";
var gulp = require('gulp');
var autoprefixer = require('autoprefixer')
var terser = require('gulp-terser');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss')
var flatten = require('gulp-flatten');
var csso = require('gulp-csso');
var spawn = require('child_process').spawn;
sass.compiler = require('node-sass');
function styles(done) {
return gulp.src(['src/sass/screen.scss'])
.pipe(sass().on('error', sass.logError))
.pipe(flatten())
.pipe(postcss([ autoprefixer() ]))
.pipe(csso())
.pipe(gulp.dest('static/css/'))
.on('end', done);
}
function scripts(done) {
return gulp.src(['node_modules/@fortawesome/fontawesome-free/js/all.min.js'])
.pipe(flatten())
.pipe(terser())
.pipe(gulp.dest('static/js/'))
.on('end', done);
}
function up(done) {
spawn('hugo', ['serve', '-w', '-D'], {stdio: 'inherit'});
done();
}
function watchFiles(done) {
gulp.watch("src/sass/*.scss", styles);
done();
}
exports.build = gulp.parallel(styles, scripts);
exports.watch = gulp.parallel(watchFiles, up);

View File

@@ -4,5 +4,5 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{if .IsHome}}{{ $.Site.Title }}{{else}}{{.Description}}{{end}}" /> <meta name="description" content="{{if .IsHome}}{{ $.Site.Title }}{{else}}{{.Description}}{{end}}" />
<link rel="stylesheet" type="text/css" href="/css/screen.css"> <link rel="stylesheet" type="text/css" href="/css/screen.css">
<script defer src="/js/fontawesome.js"></script> <script defer src="/js/all.min.js"></script>
</head> </head>

4075
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

29
package.json Normal file
View File

@@ -0,0 +1,29 @@
{
"name": "website",
"version": "1.0.0",
"description": "Arona Jones's Website",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://git.aronajones.com/arona/website"
},
"keywords": [
"website"
],
"author": "FreneticScribbler",
"license": "ISC",
"dependencies": {
"@fortawesome/fontawesome-free": "^5.14.0",
"autoprefixer": "^9.8.5",
"gulp": "^4.0.2",
"gulp-csso": "^4.0.1",
"gulp-flatten": "^0.4.0",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.1.0",
"gulp-terser": "^1.2.0",
"node-sass": "^4.14.1"
}
}

216
src/sass/screen.scss Normal file
View File

@@ -0,0 +1,216 @@
*, *::before, *::after {
box-sizing: inherit;
}
/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }
/** `main` element */
main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }
/** Images */
img { max-width: 100%; vertical-align: middle; }
/** Figures */
figure > img { display: block; }
figcaption { font-size: 14px; }
/** Lists */
ul, ol { margin-left: 30px; }
li > ul, li > ol { margin-bottom: 0; }
/** Links */
a { color: #2a7ae2; text-decoration: none; }
a:visited { color: #1756a9; }
a:hover { color: #111; text-decoration: underline; }
/** Blockquotes */
blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }
blockquote > :last-child { margin-bottom: 0; }
/** Code formatting */
pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; }
code { padding: 1px 5px; }
pre { padding: 8px 12px; overflow-x: auto; }
pre > code { border: 0; padding-right: 0; padding-left: 0; }
/** Tables */
table { margin-bottom: 30px; width: 100%; text-align: left; color: #3f3f3f; border-collapse: collapse; border: 1px solid #e8e8e8; }
table tr:nth-child(even) { background-color: #f7f7f7; }
table th, table td { padding: 10px 15px; }
table th { background-color: #f0f0f0; border: 1px solid #dedede; border-bottom-color: #c9c9c9; }
table td { border: 1px solid #e8e8e8; }
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
font-family: helvetica, arial;
font-size: 100%;
box-sizing: border-box;
}
header, footer {
background: #202226;
padding: 1rem;
text-align: center;
}
header > * {
padding-top: 0.5em;
}
header {
box-shadow: 0 0 25px 0 black;
}
footer {
color: white;
}
figcaption {
text-align: center;
color: #999;
}
footer > a {
font-size: x-large;
color: white;
padding: 0.5rem;
}
h1 {
color: #00ADFF;
}
img {
max-width: 100%;
}
p, figure {
margin: 15px 0;
}
h3 {
color: white;
}
article, .contained {
width: 70vw;
margin-left: auto;
margin-right: auto;
}
.container {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
.bigimage {
transform: skew(-10deg);
color: white;
padding: 2em;
width: 100%;
height: 100%;
text-align: center;
}
/*My kingdom for a 'backdrop-filter'!*/
img.background {
object-fit: cover;
color: black;
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
filter: blur(2px);
transition: .3s ease-in-out;
}
.bigimage:hover img {
filter: blur(0);
}
a.button {
/* Counteract skew of image */
transform: skew(10deg);
color: white;
touch-callout: none;
user-select: none;
display: inline-block;
border-radius: 0.5em;
position: relative;
cursor: pointer;
overflow: hidden;
padding: 0.8em;
background: rgba(32, 34, 38, 0.7);
}
.badge {
/* Center the content */
align-items: center;
display: inline-flex;
justify-content: center;
/* Rounded border */
border-radius: 0.5em;
/* Spacing */
padding: 4px 8px;
}
.bg-green {
background: green;
}
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
nav {
display: flex;
/* Looks crap, but better than broken nav */
flex-wrap: wrap;
align-items: center;
width: 70%;
}
nav > * {
padding-left: 2em;
padding-right: 2em;
border-left: 2px solid black;
}
nav :first-child {
padding-left: 0;
border-left: none;
}
nav a:hover {
color: white;
}
@media only screen and (max-width: 800px) {
nav {
flex-direction: column;
}
nav > * {
margin-right: auto;
padding-bottom: 0.5em;
}
nav :first-child {
padding-left: 2em;
border-left: 2px solid black;
}
#homepage-container {
flex-wrap: wrap;
}
.bigimage {
max-height: 20vh;
transform: skew(0deg);
}
a.button {
transform: skew(0deg);
}
}

View File

@@ -1,219 +1 @@
*, *::before, *::after { *,::after,::before{box-sizing:inherit}body,dd,hr{margin:0;padding:0}blockquote,dl,figure,h1,h2,h3,h4,h5,h6,ol,p,ul{padding:0}blockquote,dl,h1,h2,h3,h4,h5,h6,ol,pre,ul{margin:0 0 15px}.highlight{margin-bottom:15px}figure>img,main{display:block}img{vertical-align:middle;max-width:100%}figcaption{font-size:14px;text-align:center;color:#999}ol,ul{margin-left:30px}li>ol,li>ul{margin-bottom:0}a{color:#2a7ae2;text-decoration:none}a:visited{color:#1756a9}a:hover{color:#111;text-decoration:underline}blockquote{color:#828282;border-left:4px solid #e8e8e8;padding-left:15px;font-size:18px;letter-spacing:-1px;font-style:italic}blockquote>:last-child{margin-bottom:0}code,pre,table{border:1px solid #e8e8e8}code,pre{font-size:15px;border-radius:3px;background-color:#eef}code{padding:1px 5px}pre{padding:8px 12px;overflow-x:auto}pre>code{border:0;padding-right:0;padding-left:0}table{margin-bottom:30px;width:100%;text-align:left;color:#3f3f3f;border-collapse:collapse}table tr:nth-child(even){background-color:#f7f7f7}table td,table th{padding:10px 15px}table th{background-color:#f0f0f0;border:1px solid #dedede;border-bottom-color:#c9c9c9}table td{border:1px solid #e8e8e8}body,html{width:100%;height:100%;overflow-x:hidden;font-family:helvetica,arial;font-size:100%;box-sizing:border-box}footer,header{background:#202226;padding:1rem;text-align:center}header>*{padding-top:.5em}header{box-shadow:0 0 25px 0 #000}a.button,footer,footer>a,h3,nav a:hover{color:#fff}footer>a{font-size:x-large;padding:.5rem}h1{color:#00adff}figure,p{margin:15px 0}.contained,article{width:70vw;margin-left:auto;margin-right:auto}.container{min-height:100%;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:100%}.bigimage{transform:skew(-10deg);color:#fff;padding:2em;width:100%;height:100%;text-align:center}img.background{-o-object-fit:cover;object-fit:cover;color:#000;width:100%;height:100%;position:absolute;left:0;top:0;z-index:-1;-webkit-filter:blur(2px);filter:blur(2px);transition:.3s ease-in-out}.bigimage:hover img{-webkit-filter:blur(0);filter:blur(0)}a.button{transform:skew(10deg);touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;position:relative;cursor:pointer;overflow:hidden;padding:.8em;background:rgba(32,34,38,.7)}.badge,nav{align-items:center}.badge,a.button{border-radius:.5em}.badge{display:inline-flex;justify-content:center;padding:4px 8px}.bg-green{background:green}.full-width{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}nav{display:flex;flex-wrap:wrap;width:70%}nav>*{padding-left:2em;padding-right:2em;border-left:2px solid #000}nav :first-child{padding-left:0;border-left:none}@media only screen and (max-width:800px){nav{flex-direction:column}nav>*{margin-right:auto;padding-bottom:.5em}nav :first-child{padding-left:2em;border-left:2px solid #000}#homepage-container{flex-wrap:wrap}.bigimage{max-height:20vh}.bigimage,a.button{transform:skew(0deg)}}
box-sizing: inherit;
}
/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }
/** `main` element */
main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }
/** Images */
img { max-width: 100%; vertical-align: middle; }
/** Figures */
figure > img { display: block; }
figcaption { font-size: 14px; }
/** Lists */
ul, ol { margin-left: 30px; }
li > ul, li > ol { margin-bottom: 0; }
/** Links */
a { color: #2a7ae2; text-decoration: none; }
a:visited { color: #1756a9; }
a:hover { color: #111; text-decoration: underline; }
/** Blockquotes */
blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }
blockquote > :last-child { margin-bottom: 0; }
/** Code formatting */
pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; }
code { padding: 1px 5px; }
pre { padding: 8px 12px; overflow-x: auto; }
pre > code { border: 0; padding-right: 0; padding-left: 0; }
/** Tables */
table { margin-bottom: 30px; width: 100%; text-align: left; color: #3f3f3f; border-collapse: collapse; border: 1px solid #e8e8e8; }
table tr:nth-child(even) { background-color: #f7f7f7; }
table th, table td { padding: 10px 15px; }
table th { background-color: #f0f0f0; border: 1px solid #dedede; border-bottom-color: #c9c9c9; }
table td { border: 1px solid #e8e8e8; }
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
font-family: helvetica, arial;
font-size: 100%;
box-sizing: border-box;
}
header, footer {
background: #202226;
padding: 1rem;
text-align: center;
}
header > * {
padding-top: 0.5em;
}
header {
box-shadow: 0 0 25px 0 black;
}
footer {
color: white;
}
figcaption {
text-align: center;
color: #999;
}
footer > a {
font-size: x-large;
color: white;
padding: 0.5rem;
}
h1 {
color: #00ADFF;
}
img {
max-width: 100%;
}
p, figure {
margin: 15px 0;
}
h3 {
color: white;
}
article, .contained {
width: 70vw;
margin-left: auto;
margin-right: auto;
}
.container {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
.bigimage {
transform: skew(-10deg);
color: white;
padding: 2em;
width: 100%;
height: 100%;
text-align: center;
}
/*My kingdom for a 'backdrop-filter'!*/
img.background {
object-fit: cover;
color: black;
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
-webkit-filter: blur(2px);
filter: blur(2px);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.bigimage:hover img {
-webkit-filter: blur(0);
filter: blur(0);
}
a.button {
/* Counteract skew of image */
transform: skew(10deg);
color: white;
touch-callout: none;
user-select: none;
display: inline-block;
border-radius: 0.5em;
position: relative;
cursor: pointer;
overflow: hidden;
padding: 0.8em;
background: rgba(32, 34, 38, 0.7);
}
.badge {
/* Center the content */
align-items: center;
display: inline-flex;
justify-content: center;
/* Rounded border */
border-radius: 0.5em;
/* Spacing */
padding: 4px 8px;
}
.bg-green {
background: green;
}
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
nav {
display: flex;
/* Looks crap, but better than broken nav */
flex-wrap: wrap;
align-items: center;
width: 70%;
}
nav > * {
padding-left: 2em;
padding-right: 2em;
border-left: 2px solid black;
}
nav :first-child {
padding-left: 0;
border-left: none;
}
nav a:hover {
color: white;
}
@media only screen and (max-width: 800px) {
nav {
flex-direction: column;
}
nav > * {
margin-right: auto;
padding-bottom: 0.5em;
}
nav :first-child {
padding-left: 2em;
border-left: 2px solid black;
}
#homepage-container {
flex-wrap: wrap;
}
.bigimage {
max-height: 20vh;
transform: skew(0deg);
}
a.button {
transform: skew(0deg);
}
}

5
static/js/all.js Normal file

File diff suppressed because one or more lines are too long

5
static/js/all.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

5
static/js/fontawesome.min.js vendored Normal file

File diff suppressed because one or more lines are too long