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

some styling

This commit is contained in:
Rik Berkelder 2025-01-28 03:35:11 +01:00
parent c2595ed3f2
commit d2888356b4
4 changed files with 57 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/blogposts/2021-04-22-SE215.md
View File

@ -2,7 +2,7 @@
slug: "shure-se215-opinions-2021-04-22"
title: "Opinions on the Shure SE215 In-Ear Monitors"
date: "2021-04-22"
modified: "2021-04-22"
modified: "2021-04-23"
description: "Personal thoughts on a pair of in-ears I bought."
---
<span class="text-sm">Disclaimer: This should not be trusted as a review. While I enjoy good audio, I am by no means an expert.</span>

4
content/layouts/base.njk
View File

@ -18,7 +18,9 @@
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/style.css" />
<meta charset="utf-8" />

10
content/layouts/blogpost.njk
View File

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

68
content/style.scss
View File

@ -1,6 +1,6 @@
$grey-dark: #2e3440;
$grey-vdark: darken($grey-dark, 5);
$grey-medium: #3b4252;
$grey-vdark: rgb(17, 24, 39);
$grey-dark: lighten($grey-vdark, 5);
$grey-medium: lighten($grey-vdark, 15);
$grey-light: #4c566a;
$white-dark: #d8dee9;
$white-light: #eceff4;
@ -12,42 +12,56 @@ $text-default: $white-light;
$primary: $blue;
$secondary: $blue-med;
body {
color: $text-default;
background-color: $grey-vdark;
font-family: 'Inconsolata',
monospace;
line-height: 1.3rem;
.container {
max-width: 900px;
margin-left: auto;
margin-right: auto;
.blog-main {
max-width: 750px;
.blog {
max-width: 700px;
margin-left: auto;
margin-right: auto;
.blog-content {
border-top: 1px solid $grey-dark;
margin-top: 0.6em;
&-header {
&>* {
display: block;
}
a,
a:visited {
color: $primary;
}
small {
margin-top: 0.1em;
margin-bottom: 0.4em;
}
}
&-content {
border-top: 1px solid $grey-medium;
margin-top: 1em;
}
}
}
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;
border-bottom: 1px $grey-dark solid;
a,
a:visited {
@ -67,8 +81,20 @@ body {
h2,
h3,
h4 {
margin-bottom: 0;
margin-top: 0.1em;
margin-bottom: 0rem;
margin-top: 1rem;
font-weight: 700;
}
p {
margin-top: 0.6rem;
margin-bottom: 1.2rem;
}
code,
pre {
background-color: $grey-dark;
padding: 0.1rem 0.4rem;
display: inline-block;
}
}