Added Sass configuration and some basic theming
This commit is contained in:
Claudia Reynders
parent
6d358612d8
commit
abcc738ee4
11
package.json
11
package.json
|
|
@ -4,9 +4,13 @@
|
||||||
"description": "A not so minimal starter for building a website + blog using the Eleventy static site generator.",
|
"description": "A not so minimal starter for building a website + blog using the Eleventy static site generator.",
|
||||||
"main": "index.md",
|
"main": "index.md",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "npx eleventy",
|
"generate:sprite": "svg-icon-generate --folder=src/assets/icons --output=src/assets/sprite.svg",
|
||||||
"watch": "npx eleventy --watch",
|
"watch:eleventy": "eleventy --serve",
|
||||||
"serve": "npx eleventy --serve",
|
"watch:sass": "sass --watch src/assets/theming:_site/assets",
|
||||||
|
"build:eleventy": "eleventy",
|
||||||
|
"build:sass": "sass --no-source-map --style=compressed src/assets/theming:_site/assets",
|
||||||
|
"start": "npm-run-all build:sass generate:sprite --parallel watch:*",
|
||||||
|
"build": "npm-run-all build:*",
|
||||||
"debug": "DEBUG=* npx eleventy"
|
"debug": "DEBUG=* npx eleventy"
|
||||||
},
|
},
|
||||||
"author": {
|
"author": {
|
||||||
|
|
@ -26,3 +30,4 @@
|
||||||
"svg-icon-sprite": "^1.1.1"
|
"svg-icon-sprite": "^1.1.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✨</text></svg>">
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✨</text></svg>">
|
||||||
<title>{{ title or metadata.title }}</title>
|
<title>{{ title or metadata.title }}</title>
|
||||||
<script type="module" src="/assets/svg-icon-sprite.js"></script>
|
<script type="module" src="/assets/svg-icon-sprite.js"></script>
|
||||||
|
<link rel="stylesheet" href="{{'/assets/theme.css' | url }}" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
article {
|
||||||
|
.category {
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
margin-left: 1rem;
|
||||||
|
padding: .4rem 1rem;
|
||||||
|
border: 1px solid $base-clr;
|
||||||
|
border-radius: 6px;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $base-clr;
|
||||||
|
color: $bg-clr;
|
||||||
|
transition: all 400ms ease-in;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
+ * {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,157 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: $bg-clr;
|
||||||
|
color: $base-clr;
|
||||||
|
font-family: $main-font;
|
||||||
|
font-size: 50%;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
|
||||||
|
/* Better Font Rendering =========== */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
|
|
||||||
|
@include breakpoint-md {
|
||||||
|
font-size: 62.5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 2.25rem;
|
||||||
|
height: 100vh;
|
||||||
|
line-height: 140%;
|
||||||
|
min-width: 320px;
|
||||||
|
margin: 0 5em 0 1.5em;
|
||||||
|
|
||||||
|
@include breakpoint-md {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
justify-self: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: $accent-font;
|
||||||
|
line-height: 140%;
|
||||||
|
margin: 0 0 0.7em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $link-clr;
|
||||||
|
transition: color 400ms;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $link-hvr-clr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 600px;
|
||||||
|
+ p {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 0 1 100%;
|
||||||
|
margin: 1em 0 2em 0;
|
||||||
|
|
||||||
|
&:not(nav) {
|
||||||
|
ul {
|
||||||
|
margin: .7em 0 .7em 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
span {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
margin: .2em 0 2em 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
header,
|
||||||
|
main,
|
||||||
|
footer {
|
||||||
|
max-width: 1440px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header,
|
||||||
|
footer {
|
||||||
|
padding: 2em 0 .7em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer span {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul li {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 2rem;
|
||||||
|
|
||||||
|
+ li {
|
||||||
|
margin-left: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active a {
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
text-decoration: none;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
transition: color 400ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sr-only {
|
||||||
|
border: 0 !important;
|
||||||
|
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||||
|
-webkit-clip-path: inset(50%) !important;
|
||||||
|
clip-path: inset(50%) !important;
|
||||||
|
height: 1px !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
position: absolute !important;
|
||||||
|
width: 1px !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-family: $accent-font;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
.article__item {
|
||||||
|
+.article__item {
|
||||||
|
margin-top: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
/*===============================*/
|
||||||
|
/* breakpoints */
|
||||||
|
/*===============================*/
|
||||||
|
@mixin breakpoint-xs {
|
||||||
|
@media screen and (max-width: 599px) { @content };
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin breakpoint-sm {
|
||||||
|
@media screen and (min-width: 600px) { @content };
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin breakpoint-md {
|
||||||
|
@media screen and (min-width: 960px) { @content };
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin breakpoint-lg {
|
||||||
|
@media screen and (min-width: 1280px) { @content };
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin breakpoint-xl {
|
||||||
|
@media screen and (min-width: 1920px) { @content };
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Montagu+Slab:wght@400;700&display=swap');
|
||||||
|
|
||||||
|
$main-font: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', 'sans-serif';
|
||||||
|
$accent-font: 'Montagu Slab', serif;
|
||||||
|
|
||||||
|
/* Colours */
|
||||||
|
$light-shade: #E9EFC0;
|
||||||
|
$dark-shade: #4E944F;
|
||||||
|
$darkest-shade: darken($dark-shade, 17%);
|
||||||
|
$accent-shade:#FF8C32;
|
||||||
|
|
||||||
|
/*========================================*/
|
||||||
|
|
||||||
|
$base-clr: $darkest-shade;
|
||||||
|
$bg-clr: lighten($light-shade, 7%);
|
||||||
|
$link-clr: $darkest-shade;
|
||||||
|
$link-hvr-clr: $accent-shade;
|
||||||
|
$cat-clr: $darkest-shade;
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
@import './variables';
|
||||||
|
@import './mixins';
|
||||||
|
@import './base';
|
||||||
|
|
||||||
|
@import './blog';
|
||||||
|
@import './article';
|
||||||
Loading…
Reference in New Issue