Compare commits

..

7 Commits

Author SHA1 Message Date
Sam fd861d9bf4 Tweak index content 2024-08-08 11:15:03 +01:00
Sam 87df76ffdd Modify list div classnames 2024-08-08 11:14:44 +01:00
Sam 4f6d67a6ba Add fira font 2024-08-08 11:14:23 +01:00
Sam 6296292179 Style tweaks 2024-08-08 11:13:50 +01:00
Sam 12e2fc2fe1 Syntax highlighting 2024-08-08 11:13:18 +01:00
Sam 7489fd3f90 Rename card-list to content-list shortcode 2024-08-08 11:11:45 +01:00
Sam 420c04f916 More css organisation 2024-08-07 15:51:19 +01:00
12 changed files with 265 additions and 573 deletions

View File

@ -3,7 +3,7 @@ toc: False
---
# Grounded Insights from Open Data
### Deriving meaningful insights from data enables us to make better decisions.
## Deriving meaningful insights from data enables us to make better decisions.
Data is often chaotic and dispersed. This requires us to build solid data pipelines to efficiently transform data into a unified and useful format. We can think of this as a path with the following steps:
@ -21,7 +21,7 @@ Insights are the deep understanding we've derived from our data. Specifically, t
### Explore Based Data
{{< card-list >}}
{{< content-list >}}
["Data Lab"]
pic = "/pics/home/data-lab.webp"
content = "Analysis and Insights derived from Open Data"
@ -33,5 +33,5 @@ Insights are the deep understanding we've derived from our data. Specifically, t
["Services"]
pic = "/pics/home/services.webp"
content = "Please reach out if you wish to work with me."
link = "/services"
{{</ card-list >}}
link = "/about-me"
{{</ content-list >}}

View File

@ -2,12 +2,20 @@ baseURL = 'https://baseddate.io/'
languageCode = 'en-gb'
title = 'baseddata.io'
[markup]
[highlight]
noClasses=false
[markup.highlight]
pygmentsUseClasses = false
codeFences = true
guessSyntax = true
hl_Lines = ""
lineNoStart = 1
lineNos = false
lineNumbersInTable = false
tabWidth = 4
noClasses = true
style = "catppuccin-latte"
[markup.tableOfContents]
endLevel = 2
ordered = false
startLevel = 2
[markup.tableOfContents]
endLevel = 2
ordered = false
startLevel = 2

View File

@ -1,10 +1,10 @@
{{ define "main" }}
<div class="page-content">
<h1>{{ .Title }}</h1>
{{ .Content }}
</div>
<div class="list-content-container">
<div class="article-card-flex-container">
<div class="page-content">
<h1>{{ .Title }}</h1>
{{ .Content }}
</div>
<div class="article-card-container">
{{ range.Pages }}
<a class="article-card" href="{{ .RelPermalink }}">
<div class="article-card-info">
@ -13,12 +13,10 @@
<h3><strong>{{ .Title | safeHTML }}</strong></h3>
<p>{{ .Summary | safeHTML }}</p>
<br />
<div class="article-card-author-row">
<time>{{ .Date.Format "January 2, 2006" }}</time>
</div>
</div>
{{ if isset .Params "date" }}
<div class="article-card-author-row">
<time>{{ .Date.Format "January 2, 2006" }}</time>
</div>
{{ end }}
</div>
</a>
{{ end }}

View File

@ -7,17 +7,17 @@
<link rel="stylesheet" href="/css/tables.css" type="text/css" media="all" />
<link rel="stylesheet" href="/css/toc.css" type="text/css" media="all" />
<link rel="stylesheet" href="/css/articles.css" type="text/css" media="all" />
<link rel="stylesheet" href="/css/charts.css" type="text/css" media="all" />
<link
rel="stylesheet"
href="/css/codeblock.css"
type="text/css"
media="all"
/>
<link rel="stylesheet" href="/css/syntax.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=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
</html>

View File

@ -1,16 +0,0 @@
<div class="list-content-container">
<div class="article-card-flex-container">
{{ $items := .Inner | unmarshal }} {{ range $k, $v := $items }}
<a class="article-card" href="{{ $v.link }}">
<div class="article-card-info">
<img class="article-card-thumbnail" src="{{ $v.pic }}" />
<div class="article-card-summary">
<h3><strong>{{ $k | safeHTML }}</strong></h3>
<p>{{ $v.content | safeHTML }}</p>
<br />
</div>
</div>
</a>
{{ end }}
</div>
</div>

View File

@ -0,0 +1,15 @@
<section class="content-list-container">
{{ $items := .Inner | unmarshal }} {{ range $k, $v := $items }}
<a class="content-list-item" href="{{ $v.link }}">
<div class="content-list-info">
<img class="content-list-thumbnail" src="{{ $v.pic }}" />
<div class="content-list-summary">
<div class="content-list-title"><p>{{ $k | safeHTML }}</p></div>
<div class="content-list-description">
<p>{{ $v.content | safeHTML }}</p>
</div>
</div>
</div>
</a>
{{ end }}
</section>

View File

@ -1,31 +1,41 @@
.page-container {
width: 100%;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-content {
flex: 1;
}
.article-container {
display: flex;
justify-content: center;
}
.page-container {
.author-row {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: left;
align-items: center;
color: var(--subtext-color);
font-size: var(--author-row-font-size);
margin-bottom: 20px;
}
.author-name {
margin: 2px;
}
.author-row time {
margin: 2px;
}
.article-container {
width: 100%;
display: flex;
justify-content: center;
}
.page-content {
color: var(--text-color);
padding-top: var(--content-padding);
padding: var(--content-padding);
padding-left: var(--content-padding);
padding-right: var(--content-padding);
max-width: 1000px;
line-height: var(--line-height);
text-align: left;
}
@ -46,11 +56,17 @@
margin-bottom: 120px;
}
.home-page-content h2 {
font-weight: normal;
font-size: 28px;
text-align: center;
margin-bottom: 60px !important;
}
.home-page-content h3 {
font-weight: normal;
font-size: 28px;
text-align: center;
margin-bottom: 60px;
}
.home-page-content h4 {
@ -91,8 +107,8 @@ figcaption h4 {
}
.main-article {
width: 70%;
padding: var(--content-padding);
width: var(--article-max-width);
line-height: 1.5;
text-align: left;
border-left: var(--border-width) var(--border-style) var(--border-color);
@ -125,66 +141,118 @@ ol {
max-width: 100%;
}
.article-card-flex-container {
margin-left: var(--content-margin);
margin-right: var(--content-margin);
margin-bottom: var(--content-margin);
/* article cards */
.list-content-container {
display: flex;
flex-wrap: wrap;
justify-content: left;
line-height: var(--line-height);
text-align: left;
}
.article-card {
margin: var(--element-margin);
background-color: black;
width: 200px;
min-height: 100%;
border-radius: var(--radius);
transition: background-color 0.3s ease;
text-decoration: none; /* Remove underline */
position: relative;
}
.article-card-text p,
.article-text a {
color: var(--subtext-color);
margin-bottom: var(--element-margin);
}
.article-card-summary h3 {
color: var(--heading3-color);
margin: var(--article-margin);
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
flex-direction: column;
min-width: 100%;
justify-content: center;
padding: var(--content-padding);
}
.article-card-summary p {
color: var(--subtext-color);
margin: var(--article-margin);
color: var(--text-color);
text-align: left;
margin: 0px;
border: none;
}
.article-card-container a:hover {
text-decoration: underline;
color: var(--text-color) !important;
}
.article-card-info {
display: flex;
border-top: var(--border-width) var(--border-style) var(--border-color);
}
.article-card-info img {
width: 300px;
height: auto;
padding: 30px;
}
@media (max-width: 600px) {
.article-card {
display: flex;
justify-content: center;
}
.article-card-info {
display: flex;
justify-content: center;
flex-direction: column;
border-bottom: var(--border-width) var(--border-style) var(--border-color);
}
.article-card-info img {
width: 80vw;
padding: 10px;
}
.article-card-summary {
margin-bottom: 30px;
padding: 10px;
}
.article-card-summary h3 {
margin-top: 0px;
}
}
/* horizontal list*/
.content-list-container {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 100%;
justify-content: left;
}
.article-card-thumbnail {
max-width: 100%;
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
.article-card-author-row {
font-size: 10px;
position: absolute;
bottom: 0;
.content-list-item {
width: 100%;
margin: var(--element-margin);
}
.article-card:hover {
background-color: var(--summary-container-hover-bg);
.content-list-container a:hover {
text-decoration: underline;
color: var(--text-color) !important;
}
.content-list-info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: left;
border-bottom: var(--border-width) var(--border-style) var(--border-color);
}
.content-list-info img {
padding: 10px;
height: 100%;
width: 200px;
}
.content-list-summary {
display: flex;
flex-direction: column;
justify-content: left;
}
.content-list-summary p {
color: var(--text-color);
text-align: left;
margin: 0px;
border: none;
}
.content-list-description p {
margin: 0px;
font-size: 16px;
line-height: 1.2;
width: 100%;
}
.content-list-title p {
margin-bottom: 1rem;
font-size: 22px;
}

18
static/css/charts.css Normal file
View File

@ -0,0 +1,18 @@
/* Charts */
.chart-flex-container {
display: flex;
}
.chart-flex-container article {
flex: 1;
}
#chart {
width: 100%;
height: 50vh;
}
.chart-area {
width: 60%;
margin: var(--article-margin);
}

View File

@ -1,4 +1,3 @@
/* Code block */
pre {
overflow-x: auto;
}
@ -19,7 +18,6 @@ pre {
font-size: var(--code-block-font-size);
}
/* Code block language label */
.codeblock::before {
font-family: var(--code-font-family);
content: attr(data-lang);
@ -34,9 +32,8 @@ code {
font-family: var(--code-font-family);
}
/* Styles for inline <code> */
:not(pre) > code {
color: #aaa4a0;
color: var(--inline-code-color);
background-color: var(--inline-code-bg-color);
padding: 5px;
border-radius: 2px;

View File

@ -13,18 +13,40 @@
.navbar a {
color: var(--navbar-text-color);
padding: 10px;
margin: 5px;
text-decoration: none;
padding: 10px 10px 5px 5px;
transition: background-color 0.3s ease;
border-radius: var(--radius);
border-bottom: 3px var(--border-style) transparent;
}
.navbar a:hover {
padding: 10px;
background-color: var(--navbar-hover);
border-radius: var(--radius);
color: var(--text-color);
border-bottom: 3px var(--border-style) var(--hover-color);
}
.navbar-link-dropdown-content {
display: none;
position: absolute;
flex-direction: column;
right: 20px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-color: var(--navbar-background-color);
border-radius: 5px;
border: var(--border-width) var(--border-style) var(--border-color) !important;
}
.navbar_link_dropdown:hover .navbar-link-dropdown-content {
display: flex;
border: none;
}
.navbar-link-dropdown-content a {
border: none;
}
.navbar-link-dropdown-content a:hover {
border: none;
background-color: var(--navbar-hover);
}
.navbar__left a {
@ -38,6 +60,11 @@
align-items: center;
}
.navbar__right {
display: flex;
align-items: center;
}
.navbar-links ul {
list-style-type: none;
margin: 0;
@ -52,16 +79,3 @@
.navbar-links ul li a {
display: inline-block;
}
.navbar-link-dropdown-content {
display: none;
position: absolute;
flex-direction: column;
right: 20px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-color: var(--navbar-background-color);
}
.navbar_link_dropdown:hover .navbar-link-dropdown-content {
display: flex;
}

View File

@ -5,14 +5,32 @@
}
:root {
/* root */
--font-family: "Montserrat", sans-serif;
--code-font-family: "IBM Plex Mono", monospace;
--font-size: 10;
--author-row-font-size: 12px;
--background-color: #f9f9f9;
--text-color: #373841;
--subtext-color: #6c757d;
--link-color: #438bb1;
--hover-color: #fc8452;
--border-color: #c4c9d9;
--border-width: 1px;
--border-style: solid;
/* navbar/footer */
--navbar-background-color: #f9f9f9;
--navbar-text-color: #373841;
--navbar-hover: #e7e7f5;
--footer-background-color: #f9f9f9;
/* headings */
--heading1-color: #fc8452;
--heading2-color: #373841;
--heading3-color: #373841;
--heading1-font-size: 25px;
--code-block-font-size: 10px;
--chart-modifier-height: 60px;
--article-max-width: 70%;
/* content */
--author-row-font-size: 12px;
--content-padding: 40px;
--content-margin: 40px;
--element-padding: 20px;
@ -21,33 +39,21 @@
--heading-margin: 30px;
--radius: 5px;
--line-height: 1.5;
--checkbox-width: max-content;
--checkbox-font-size: 16px;
--avatar-width: 20px;
--background-color: #181a1b;
--text-color: #e0ddd9;
--subtext-color: #6c757d;
--link-color: #60b2f1;
--hover-color: #0056b3;
--heading1-color: #fc8452;
--heading2-color: #e0ddd9;
--heading3-color: #e0ddd9;
--navbar-background-color: #181a1b;
--navbar-text-color: #e0ddd9;
--navbar-hover: #333;
--footer-background-color: #333;
--summary-container-hover-bg: #343a40;
--codeblock-bg-color: #1b1d1e;
--inline-code-bg-color: #353535;
/* code */
--code-block-font-size: 10px;
--codeblock-bg-color: #edeeee;
--inline-code-color: #373841;
--inline-code-bg-color: #edeeee;
--code-font-family: "Fira Mono", monospace;
/* table */
--table-even-row-bg-color: #343a40;
--table-odd-row-bg-color: #515c66;
--table-header-bg: #212529;
--table-font-color: #e0ddd9;
--table-header-font-size: 14px;
--table-row-font-size: 12px;
--border-color: #363a3d;
--border-width: 2px;
--border-style: solid;
}
@media (max-width: 600px) {
@ -79,11 +85,18 @@
background: #454445; /* Background color on hover */
}
html {
height: 100%;
display: flex;
}
body {
font-family: var(--font-family);
background-color: var(--background-color);
font-size: var(--font-size);
color: var(--text-color);
display: flex;
width: 100%;
}
a {
@ -101,26 +114,6 @@ time {
margin-bottom: var(--article-margin);
}
/* Charts */
.chart-flex-container {
display: flex;
}
.chart-flex-container article {
flex: 1;
}
#chart {
width: 100%;
height: 50vh;
}
.chart-area {
width: 60%;
margin: var(--article-margin);
}
/* Footer */
footer {
background-color: var(--footer-background-color);
color: var(--text-color);
@ -128,37 +121,5 @@ footer {
height: 10vh;
display: flex;
justify-content: space-between;
}
footer a:hover {
background-color: #ddd;
color: black;
}
.author-row {
display: flex;
justify-content: left;
align-items: center;
color: var(--subtext-color);
font-size: var(--author-row-font-size);
margin-bottom: 20px;
}
.avatar-container {
width: var(--avatar-width);
margin-right: var(--element-margin);
}
.avatar {
display: block;
width: 100%;
height: auto;
}
.author-name {
margin: 2px;
}
.author-row time {
margin: 2px;
border-top: var(--border-width) var(--border-style) var(--border-color);
}

View File

@ -1,371 +0,0 @@
/* Background */
.bg {
color: #e6edf3;
background-color: #1b1d1e;
}
/* PreWrapper */
.chroma {
color: #e6edf3;
background-color: #1b1d1e;
}
/* Other */
.chroma .x {
}
/* Error */
.chroma .err {
color: #f85149;
}
/* CodeLine */
.chroma .cl {
}
/* LineLink */
.chroma .lnlinks {
outline: none;
text-decoration: none;
color: inherit;
}
/* LineTableTD */
.chroma .lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0;
}
/* LineTable */
.chroma .lntable {
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
}
/* LineHighlight */
.chroma .hl {
color: #6e7681;
}
/* LineNumbersTable */
.chroma .lnt {
white-space: pre;
-webkit-user-select: none;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #737679;
}
/* LineNumbers */
.chroma .ln {
white-space: pre;
-webkit-user-select: none;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #6e7681;
}
/* Line */
.chroma .line {
display: flex;
}
/* Keyword */
.chroma .k {
color: #ff7b72;
}
/* KeywordConstant */
.chroma .kc {
color: #79c0ff;
}
/* KeywordDeclaration */
.chroma .kd {
color: #ff7b72;
}
/* KeywordNamespace */
.chroma .kn {
color: #ff7b72;
}
/* KeywordPseudo */
.chroma .kp {
color: #79c0ff;
}
/* KeywordReserved */
.chroma .kr {
color: #ff7b72;
}
/* KeywordType */
.chroma .kt {
color: #ff7b72;
}
/* Name */
.chroma .n {
}
/* NameAttribute */
.chroma .na {
}
/* NameBuiltin */
.chroma .nb {
}
/* NameBuiltinPseudo */
.chroma .bp {
}
/* NameClass */
.chroma .nc {
color: #f0883e;
font-weight: bold;
}
/* NameConstant */
.chroma .no {
color: #79c0ff;
font-weight: bold;
}
/* NameDecorator */
.chroma .nd {
color: #d2a8ff;
font-weight: bold;
}
/* NameEntity */
.chroma .ni {
color: #ffa657;
}
/* NameException */
.chroma .ne {
color: #f0883e;
font-weight: bold;
}
/* NameFunction */
.chroma .nf {
color: #d2a8ff;
font-weight: bold;
}
/* NameFunctionMagic */
.chroma .fm {
}
/* NameLabel */
.chroma .nl {
color: #79c0ff;
font-weight: bold;
}
/* NameNamespace */
.chroma .nn {
color: #ff7b72;
}
/* NameOther */
.chroma .nx {
}
/* NameProperty */
.chroma .py {
color: #79c0ff;
}
/* NameTag */
.chroma .nt {
color: #7ee787;
}
/* NameVariable */
.chroma .nv {
color: #79c0ff;
}
/* NameVariableClass */
.chroma .vc {
}
/* NameVariableGlobal */
.chroma .vg {
}
/* NameVariableInstance */
.chroma .vi {
}
/* NameVariableMagic */
.chroma .vm {
}
/* Literal */
.chroma .l {
color: #a5d6ff;
}
/* LiteralDate */
.chroma .ld {
color: #79c0ff;
}
/* LiteralString */
.chroma .s {
color: #a5d6ff;
}
/* LiteralStringAffix */
.chroma .sa {
color: #79c0ff;
}
/* LiteralStringBacktick */
.chroma .sb {
color: #a5d6ff;
}
/* LiteralStringChar */
.chroma .sc {
color: #a5d6ff;
}
/* LiteralStringDelimiter */
.chroma .dl {
color: #79c0ff;
}
/* LiteralStringDoc */
.chroma .sd {
color: #a5d6ff;
}
/* LiteralStringDouble */
.chroma .s2 {
color: #a5d6ff;
}
/* LiteralStringEscape */
.chroma .se {
color: #79c0ff;
}
/* LiteralStringHeredoc */
.chroma .sh {
color: #79c0ff;
}
/* LiteralStringInterpol */
.chroma .si {
color: #a5d6ff;
}
/* LiteralStringOther */
.chroma .sx {
color: #a5d6ff;
}
/* LiteralStringRegex */
.chroma .sr {
color: #79c0ff;
}
/* LiteralStringSingle */
.chroma .s1 {
color: #a5d6ff;
}
/* LiteralStringSymbol */
.chroma .ss {
color: #a5d6ff;
}
/* LiteralNumber */
.chroma .m {
color: #a5d6ff;
}
/* LiteralNumberBin */
.chroma .mb {
color: #a5d6ff;
}
/* LiteralNumberFloat */
.chroma .mf {
color: #a5d6ff;
}
/* LiteralNumberHex */
.chroma .mh {
color: #a5d6ff;
}
/* LiteralNumberInteger */
.chroma .mi {
color: #a5d6ff;
}
/* LiteralNumberIntegerLong */
.chroma .il {
color: #a5d6ff;
}
/* LiteralNumberOct */
.chroma .mo {
color: #a5d6ff;
}
/* Operator */
.chroma .o {
color: #ff7b72;
font-weight: bold;
}
/* OperatorWord */
.chroma .ow {
color: #ff7b72;
font-weight: bold;
}
/* Punctuation */
.chroma .p {
}
/* Comment */
.chroma .c {
color: #8b949e;
font-style: italic;
}
/* CommentHashbang */
.chroma .ch {
color: #8b949e;
font-style: italic;
}
/* CommentMultiline */
.chroma .cm {
color: #8b949e;
font-style: italic;
}
/* CommentSingle */
.chroma .c1 {
color: #8b949e;
font-style: italic;
}
/* CommentSpecial */
.chroma .cs {
color: #8b949e;
font-weight: bold;
font-style: italic;
}
/* CommentPreproc */
.chroma .cp {
color: #8b949e;
font-weight: bold;
font-style: italic;
}
/* CommentPreprocFile */
.chroma .cpf {
color: #8b949e;
font-weight: bold;
font-style: italic;
}
/* Generic */
.chroma .g {
}
/* GenericDeleted */
.chroma .gd {
color: #ffa198;
background-color: #490202;
}
/* GenericEmph */
.chroma .ge {
font-style: italic;
}
/* GenericError */
.chroma .gr {
color: #ffa198;
}
/* GenericHeading */
.chroma .gh {
color: #79c0ff;
font-weight: bold;
}
/* GenericInserted */
.chroma .gi {
color: #56d364;
background-color: #0f5323;
}
/* GenericOutput */
.chroma .go {
color: #8b949e;
}
/* GenericPrompt */
.chroma .gp {
color: #8b949e;
}
/* GenericStrong */
.chroma .gs {
font-weight: bold;
}
/* GenericSubheading */
.chroma .gu {
color: #79c0ff;
}
/* GenericTraceback */
.chroma .gt {
color: #ff7b72;
}
/* GenericUnderline */
.chroma .gl {
text-decoration: underline;
}
/* TextWhitespace */
.chroma .w {
color: #6e7681;
}