RikSolo/eleventy-riksolo-com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

implement scss. begin work on styling

Browse source
This commit is contained in:
Rik Berkelder 2025-01-28 03:12:25 +01:00
parent af0f3e6268
commit c2595ed3f2
8 changed files with 501 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

3
content/content.json
View file

@ -1,3 +0,0 @@
{
"layout": "base.njk"
}

46
content/layouts/base.njk
View file

@ -18,6 +18,9 @@
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css">
<link rel="stylesheet" type="text/css" href="/style.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="index, follow" />
@ -25,40 +28,27 @@
<meta name="language" content="English" />
<meta name="google-site-verification" content="x17arJy33V33DYnmMYybZciXngFd8R8xn1UZRdp7qxo" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css">
<title>{% if title %}{{title}} | {% endif %}Rik Berkelder</title>
<style>
/* Specify in CSS */
body {
font-family: 'Fira Code', monospace;
}
@supports (font-variation-settings: normal) {
body {
font-family: 'Fira Code VF', monospace;
}
}
</style>
</head>
<body>
<div>
{% for ni in collections.page %}
{{navItem(ni.data.title, ni.data.permalink, not loop.last )}}
{% endfor %}
<span> | </span>
{% for ni in nav %}
{{navItem(ni.title, ni.url, not loop.last , '_blank')}}
{% endfor %}
<span> | </span>
{{navItem("RBLicht", "https://rblicht.nl", true, '_blank')}}
{{navItem("RBSolutions", "https://rbsolutions.cc", false, '_blank')}}
<div class="container">
<div class="nav">
{% for ni in collections.page %}
{{navItem(ni.data.title, ni.data.permalink, not loop.last )}}
{% endfor %}
<span> | </span>
{% for ni in nav %}
{{navItem(ni.title, ni.url, not loop.last , '_blank')}}
{% endfor %}
<span> | </span>
{{navItem("RBLicht", "https://rblicht.nl", true, '_blank')}}
{{navItem("RBSolutions", "https://rbsolutions.cc", false, '_blank')}}
</div>
{{content | safe}}
</div>
{{content | safe}}
<script src="//instant.page/5.2.0" type="module"
integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
</body>

12
content/layouts/blogpost.njk
View file

@ -2,7 +2,11 @@
layout: 'base.njk'
---
<h1>{{title}}</h1>
<small>{{date}} {% if modified !== date %}(Last modified: {{modified}}){% endif %}</small> </br>
<a href="/blog/">&lt;- Back to posts list</a>
{{content | safe}}
<div class="blog-main">
<h1>{{title}}</h1>
<small>{{date}} {% if modified !== date %}(Last modified: {{modified}}){% endif %}</small> </br>
<a href="/blog/">&lt;- Back to posts list</a>
<div class="blog-content">
{{content | safe}}
</div>
</div>

3
content/pages/pages.json
View file

@ -1,3 +1,4 @@
{
"tags": "page"
"tags": "page",
"layout": "base.njk"
}

74
content/style.scss Normal file
View file

@ -0,0 +1,74 @@
$grey-dark: #2e3440;
$grey-vdark: darken($grey-dark, 5);
$grey-medium: #3b4252;
$grey-light: #4c566a;
$white-dark: #d8dee9;
$white-light: #eceff4;
$blue: #88c0d0;
$blue-med: #81a1c1;
$blue-dark: #5e81ac;
$text-default: $white-light;
$primary: $blue;
$secondary: $blue-med;
body {
.container {
max-width: 900px;
margin-left: auto;
margin-right: auto;
.blog-main {
max-width: 750px;
margin-left: auto;
margin-right: auto;
.blog-content {
border-top: 1px solid $grey-dark;
margin-top: 0.6em;
}
}
}
color: $text-default;
background-color: $grey-vdark;
font-family: 'Fira Code',
monospace;
@supports (font-variation-settings: normal) {
font-family: 'Fira Code VF', monospace;
}
.nav {
width: 100%;
padding-bottom: 0.6em;
margin-bottom: 0.6em;
border-bottom: 1px $grey-medium solid;
a,
a:visited {
color: $primary !important;
}
}
a {
color: $primary;
&:visited {
color: $secondary;
}
}
h1,
h2,
h3,
h4 {
margin-bottom: 0;
margin-top: 0.1em;
}
}