Add styling from old site
This commit is contained in:
parent
631c878c9b
commit
94fcb98ec3
93
package-lock.json
generated
93
package-lock.json
generated
@ -8,8 +8,10 @@
|
|||||||
"name": "personal-site",
|
"name": "personal-site",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@fortawesome/fontawesome-free": "^6.1.1",
|
||||||
"css-loader": "^6.7.1",
|
"css-loader": "^6.7.1",
|
||||||
"dart-sass": "^1.25.0",
|
"dart-sass": "^1.25.0",
|
||||||
|
"file-loader": "^6.2.0",
|
||||||
"html-webpack-plugin": "^5.5.0",
|
"html-webpack-plugin": "^5.5.0",
|
||||||
"mini-css-extract-plugin": "^2.6.0",
|
"mini-css-extract-plugin": "^2.6.0",
|
||||||
"pug": "^2.0.4",
|
"pug": "^2.0.4",
|
||||||
@ -31,6 +33,16 @@
|
|||||||
"node": ">=10.0.0"
|
"node": ">=10.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@fortawesome/fontawesome-free": {
|
||||||
|
"version": "6.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz",
|
||||||
|
"integrity": "sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg==",
|
||||||
|
"dev": true,
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@leichtgewicht/ip-codec": {
|
"node_modules/@leichtgewicht/ip-codec": {
|
||||||
"version": "2.0.4",
|
"version": "2.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
|
||||||
@ -1578,6 +1590,52 @@
|
|||||||
"node": ">=0.8.0"
|
"node": ">=0.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/file-loader": {
|
||||||
|
"version": "6.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
|
||||||
|
"integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"loader-utils": "^2.0.0",
|
||||||
|
"schema-utils": "^3.0.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 10.13.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/webpack"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"webpack": "^4.0.0 || ^5.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/file-loader/node_modules/json5": {
|
||||||
|
"version": "2.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
|
||||||
|
"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
|
||||||
|
"dev": true,
|
||||||
|
"bin": {
|
||||||
|
"json5": "lib/cli.js"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=6"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/file-loader/node_modules/loader-utils": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"big.js": "^5.2.2",
|
||||||
|
"emojis-list": "^3.0.0",
|
||||||
|
"json5": "^2.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=8.9.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/fill-range": {
|
"node_modules/fill-range": {
|
||||||
"version": "7.0.1",
|
"version": "7.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||||
@ -4734,6 +4792,12 @@
|
|||||||
"integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
|
"integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"@fortawesome/fontawesome-free": {
|
||||||
|
"version": "6.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.1.1.tgz",
|
||||||
|
"integrity": "sha512-J/3yg2AIXc9wznaVqpHVX3Wa5jwKovVF0AMYSnbmcXTiL3PpRPfF58pzWucCwEiCJBp+hCNRLWClTomD8SseKg==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"@leichtgewicht/ip-codec": {
|
"@leichtgewicht/ip-codec": {
|
||||||
"version": "2.0.4",
|
"version": "2.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
|
||||||
@ -6006,6 +6070,35 @@
|
|||||||
"websocket-driver": ">=0.5.1"
|
"websocket-driver": ">=0.5.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"file-loader": {
|
||||||
|
"version": "6.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
|
||||||
|
"integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"loader-utils": "^2.0.0",
|
||||||
|
"schema-utils": "^3.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"json5": {
|
||||||
|
"version": "2.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
|
||||||
|
"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"loader-utils": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"big.js": "^5.2.2",
|
||||||
|
"emojis-list": "^3.0.0",
|
||||||
|
"json5": "^2.1.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"fill-range": {
|
"fill-range": {
|
||||||
"version": "7.0.1",
|
"version": "7.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||||
|
|||||||
@ -19,8 +19,10 @@
|
|||||||
],
|
],
|
||||||
"author": "Daniel \"Daniel_I_Am\" de Cloet",
|
"author": "Daniel \"Daniel_I_Am\" de Cloet",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@fortawesome/fontawesome-free": "^6.1.1",
|
||||||
"css-loader": "^6.7.1",
|
"css-loader": "^6.7.1",
|
||||||
"dart-sass": "^1.25.0",
|
"dart-sass": "^1.25.0",
|
||||||
|
"file-loader": "^6.2.0",
|
||||||
"html-webpack-plugin": "^5.5.0",
|
"html-webpack-plugin": "^5.5.0",
|
||||||
"mini-css-extract-plugin": "^2.6.0",
|
"mini-css-extract-plugin": "^2.6.0",
|
||||||
"pug": "^2.0.4",
|
"pug": "^2.0.4",
|
||||||
|
|||||||
19
src/sass/_base.scss
Normal file
19
src/sass/_base.scss
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
html,
|
||||||
|
body {
|
||||||
|
background-color: #162028;
|
||||||
|
font-family: $font-family-sans-serif;
|
||||||
|
font-size: $font-size-base;
|
||||||
|
line-height: $line-height-base;
|
||||||
|
color: $text-color;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
transition: color 100ms ease-in-out;
|
||||||
|
color: darken($text-color, 15%);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: darken($text-color, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
128
src/sass/_blog.scss
Normal file
128
src/sass/_blog.scss
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
$article-image-size: 24px;
|
||||||
|
|
||||||
|
section.blog-recent {
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.all-articles {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: "»";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section.blog-recent,
|
||||||
|
section.blog {
|
||||||
|
.list {
|
||||||
|
.blog-items {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.blog-item {
|
||||||
|
background-color: $background-lighter;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 8px;
|
||||||
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
transition: transform 250ms ease-in-out;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateX(2rem);
|
||||||
|
|
||||||
|
@media (max-width: $xl) {
|
||||||
|
transform: translateX(1rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $lg) {
|
||||||
|
transform: translateX(0.5rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-image {
|
||||||
|
max-width: $article-image-size;
|
||||||
|
max-height: $article-image-size;
|
||||||
|
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-text {
|
||||||
|
.article-title {
|
||||||
|
line-height: $article-image-size;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-desc,
|
||||||
|
.article-date,
|
||||||
|
.article-published {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-date {
|
||||||
|
color: darken($text-color, 15%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-published {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section.blog-popular {
|
||||||
|
.popular-items {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 25px 1fr;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
width: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-links {
|
||||||
|
&> :not(:first-child) {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
74
src/sass/_blogedit.scss
Normal file
74
src/sass/_blogedit.scss
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
.blog-edit {
|
||||||
|
.article-form {
|
||||||
|
input,
|
||||||
|
textarea {
|
||||||
|
padding: .1rem;
|
||||||
|
width: calc(100% - .2rem);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-editor {
|
||||||
|
margin-top: .5rem;
|
||||||
|
|
||||||
|
:first-child {
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:last-child {
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
border-bottom-right-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&> * {
|
||||||
|
border-width: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
background-color: $background-lighter;
|
||||||
|
border-color: $background-darker;
|
||||||
|
border-bottom-width: 0;
|
||||||
|
border-style: solid;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
padding: .25rem;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
button {
|
||||||
|
background-color: $background-lighter;
|
||||||
|
border-color: $background-darker;
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
55
src/sass/_container.scss
Normal file
55
src/sass/_container.scss
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
// Source: https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.css
|
||||||
|
|
||||||
|
.container,
|
||||||
|
.container-fluid,
|
||||||
|
.container-xxl,
|
||||||
|
.container-xl,
|
||||||
|
.container-lg,
|
||||||
|
.container-md,
|
||||||
|
.container-sm {
|
||||||
|
padding-right: 0.75rem;
|
||||||
|
padding-left: 0.75rem;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $sm) {
|
||||||
|
.container-sm,
|
||||||
|
.container {
|
||||||
|
max-width: 540px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: $md) {
|
||||||
|
.container-md,
|
||||||
|
.container-sm,
|
||||||
|
.container {
|
||||||
|
max-width: 720px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: $lg) {
|
||||||
|
.container-lg,
|
||||||
|
.container-md,
|
||||||
|
.container-sm,
|
||||||
|
.container {
|
||||||
|
max-width: 960px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: $xl) {
|
||||||
|
.container-xl,
|
||||||
|
.container-lg,
|
||||||
|
.container-md,
|
||||||
|
.container-sm,
|
||||||
|
.container {
|
||||||
|
max-width: 1140px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: $xxl) {
|
||||||
|
.container-xxl,
|
||||||
|
.container-xl,
|
||||||
|
.container-lg,
|
||||||
|
.container-md,
|
||||||
|
.container-sm,
|
||||||
|
.container {
|
||||||
|
max-width: 1320px;
|
||||||
|
}
|
||||||
|
}
|
||||||
5
src/sass/_fontawesome.scss
Normal file
5
src/sass/_fontawesome.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
|
||||||
|
|
||||||
|
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
|
||||||
|
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
|
||||||
|
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
|
||||||
52
src/sass/_footer.scss
Normal file
52
src/sass/_footer.scss
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
$icon-size: 2rem;
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
@media (max-width: $sm) {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.credits {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.credits {
|
||||||
|
p {
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $text-color;
|
||||||
|
margin: 0.5rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: darken($text-color, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
line-height: $icon-size;
|
||||||
|
font-size: $icon-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
78
src/sass/_header.scss
Normal file
78
src/sass/_header.scss
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
$brand-height: 64px;
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
display: flex;
|
||||||
|
text-decoration: none;
|
||||||
|
color: $text-color;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
.brand-logo {
|
||||||
|
width: auto;
|
||||||
|
height: $brand-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-name {
|
||||||
|
line-height: $brand-height;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 28px;
|
||||||
|
|
||||||
|
margin-left: 2rem;
|
||||||
|
|
||||||
|
@media (max-width: $sm) {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav {
|
||||||
|
flex-grow: 1;
|
||||||
|
max-width: 250px;
|
||||||
|
|
||||||
|
.nav-items {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: $text-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: darken($text-color, 15%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $md) {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.site-nav {
|
||||||
|
flex-grow: unset;
|
||||||
|
max-width: unset;
|
||||||
|
|
||||||
|
.nav-items {
|
||||||
|
justify-content: unset;
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
flex-basis: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#app > .header {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
30
src/sass/_hero.scss
Normal file
30
src/sass/_hero.scss
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
section.hero {
|
||||||
|
max-width: 60%;
|
||||||
|
margin-top: 4rem;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
|
||||||
|
@media (max-width: $lg) {
|
||||||
|
max-width: 75%;
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $md) {
|
||||||
|
max-width: 100%;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: $primary;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
|
||||||
|
@media (max-width: $md) {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
56
src/sass/_home.scss
Normal file
56
src/sass/_home.scss
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
.split-content {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin-right: 4rem;
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: $lg) {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
main,
|
||||||
|
aside {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-header {
|
||||||
|
position: relative;
|
||||||
|
background-color: rgba($black, 0.5);
|
||||||
|
padding-bottom: 90px;
|
||||||
|
padding-top: 45px;
|
||||||
|
|
||||||
|
@media (max-width: $md) {
|
||||||
|
padding-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave {
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 90px;
|
||||||
|
transform: translateY(1px);
|
||||||
|
z-index: 3;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
position: absolute;
|
||||||
|
left: -3%;
|
||||||
|
right: -3%;
|
||||||
|
bottom: 0;
|
||||||
|
width: 106%;
|
||||||
|
min-width: 600px;
|
||||||
|
|
||||||
|
fill: $background;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
24
src/sass/_markdown.scss
Normal file
24
src/sass/_markdown.scss
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
.markdown-editor {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.input {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit {
|
||||||
|
padding: .5rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup {
|
||||||
|
position: absolute;
|
||||||
|
background-color: $background-lighter;
|
||||||
|
border: 2px solid $background-darker;
|
||||||
|
color: $text-color;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.render {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
42
src/sass/_pagination.scss
Normal file
42
src/sass/_pagination.scss
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
&:not(:last-of-type) {
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background-color: $background;
|
||||||
|
border: 1px solid white;
|
||||||
|
color: $text-color;
|
||||||
|
|
||||||
|
height: 40px;
|
||||||
|
width: 120px;
|
||||||
|
padding: .5rem;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:not(.unselectable) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:not(.unselectable):hover,
|
||||||
|
button.active {
|
||||||
|
background-color: $background-lighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:not(:last-child) {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:first-child {
|
||||||
|
border-top-left-radius: 15px;
|
||||||
|
border-bottom-left-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:last-child {
|
||||||
|
border-top-right-radius: 15px;
|
||||||
|
border-bottom-right-radius: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/sass/_variables.scss
Normal file
32
src/sass/_variables.scss
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
// Typography
|
||||||
|
$font-family-sans-serif: "Nunito", sans-serif;
|
||||||
|
$font-size-base: 0.9rem;
|
||||||
|
$line-height-base: 1.6;
|
||||||
|
|
||||||
|
// Base colors
|
||||||
|
$white: #ffffff;
|
||||||
|
$black: #000000;
|
||||||
|
$blue: #3490dc;
|
||||||
|
$indigo: #6574cd;
|
||||||
|
$purple: #9561e2;
|
||||||
|
$pink: #f66d9b;
|
||||||
|
$red: #e3342f;
|
||||||
|
$orange: #f6993f;
|
||||||
|
$yellow: #ffed4a;
|
||||||
|
$green: #38c172;
|
||||||
|
$teal: #4dc0b5;
|
||||||
|
$cyan: #6cb2eb;
|
||||||
|
|
||||||
|
// Theme colors
|
||||||
|
$background: #162028;
|
||||||
|
$background-lighter: #1c2d35;
|
||||||
|
$background-darker: #0f171d;
|
||||||
|
$primary: #a1fab3;
|
||||||
|
$text-color: #ecf8ff;
|
||||||
|
|
||||||
|
// Breakpoints
|
||||||
|
$sm: 576px;
|
||||||
|
$md: 768px;
|
||||||
|
$lg: 992px;
|
||||||
|
$xl: 1200px;
|
||||||
|
$xxl: 1400px;
|
||||||
@ -1,4 +1,21 @@
|
|||||||
html,
|
// Reusable variables
|
||||||
body {
|
@import "variables";
|
||||||
background-color: black;
|
|
||||||
}
|
// Plugins
|
||||||
|
@import "fontawesome";
|
||||||
|
|
||||||
|
// Base styling
|
||||||
|
@import "base";
|
||||||
|
|
||||||
|
// Generic styling
|
||||||
|
@import "container";
|
||||||
|
|
||||||
|
// Component specific styling
|
||||||
|
@import "header";
|
||||||
|
@import "hero";
|
||||||
|
@import "blog";
|
||||||
|
@import "footer";
|
||||||
|
@import "home";
|
||||||
|
@import "pagination";
|
||||||
|
@import "markdown";
|
||||||
|
@import "blogedit";
|
||||||
|
|||||||
0
src/snippets.pug
Normal file
0
src/snippets.pug
Normal file
@ -55,6 +55,17 @@ module.exports = (env, argv) => {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'file-loader',
|
||||||
|
options: {
|
||||||
|
outputPath: '../fonts/',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user