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" slug: "shure-se215-opinions-2021-04-22"
title: "Opinions on the Shure SE215 In-Ear Monitors" title: "Opinions on the Shure SE215 In-Ear Monitors"
date: "2021-04-22" date: "2021-04-22"
modified: "2021-04-22" modified: "2021-04-23"
description: "Personal thoughts on a pair of in-ears I bought." 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> <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> <html>
<head> <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" /> <link rel="stylesheet" type="text/css" href="/style.css" />
<meta charset="utf-8" /> <meta charset="utf-8" />

4
content/layouts/blogpost.njk
View File

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

62
content/style.scss
View File

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