Tweaks - profile pic, extracting more templates, rel

I added the rel=me to the Mastodon link for verification
I added profile pics but haven't actually used them on the pages anywhere
I pulled in a lot of the CSS from the template so I could start to
modify it

config.toml

@@ -6,6 +6,7 @@ build_search_index = true
 
 theme = "apollo"
 
+title = "jamesbrechtel.com"
 [markdown]
 highlight_code = true
 highlight_theme = "ayu-dark"
@@ -13,9 +14,9 @@ highlight_theme = "ayu-dark"
 [extra]
 theme = "dark"
 socials = [
-    { name = "mastodon", url = "https://hachyderm.io/web/@eightball", icon = "mastodon" },
-    { name = "twitter", url = "https://twitter.com/8brechtel", icon = "twitter" },
-    { name = "github", url = "https://github.com/jbrechtel/", icon = "github" },
+    { name = "mastodon", rel = "me", url = "https://hachyderm.io/web/@eightball", icon = "mastodon" },
+    { name = "github", rel = {}, url = "https://github.com/jbrechtel/", icon = "github" },
+    { name = "twitter", rel = {}, url = "https://twitter.com/8brechtel", icon = "twitter" },
 ]
 
 menu = [

sass/fonts.scss

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Jetbrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/JetbrainsMono/JetBrainsMono-Regular.ttf'), local('ttf');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/SpaceGrotesk/SpaceGrotesk-Regular.ttf'), local('ttf');
+  font-display: swap;
+}

sass/main.scss

@@ -0,0 +1,49 @@
+@import "parts/_cards.scss";
+@import "parts/_code.scss";
+@import "parts/_header.scss";
+@import "parts/_image.scss";
+@import "parts/misc.scss";
+@import "parts/table.scss";
+@import "parts/tags.scss";
+
+:root {
+  /* Used for: block comment, hr, ... */
+  --border-color: var(--bg-1);
+
+  /* Fonts */
+  --text-font: 'Jetbrains Mono';
+  --header-font: 'Space Grotesk';
+  --code-font: 'Jetbrains Mono';
+}
+
+html {
+  background-color: var(--bg-0);
+  color: var(--text-0);
+  font-family: var(--text-font);
+  line-height: 1.6em;
+}
+
+.content {
+  max-width: 944px;
+  margin: 0 auto;
+  padding: 0 24px;
+  word-wrap: break-word;
+}
+
+@media all and (min-width:640px) {
+  html {
+    font-size: 16.5px;
+  }
+}
+
+@media all and (min-width:720px) {
+  html {
+    font-size: 17px;
+  }
+}
+
+@media all and (min-width:960px) {
+  html {
+    font-size: 18px;
+  }
+}

sass/parts/_cards.scss

@@ -0,0 +1,44 @@
+.cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-template-rows: auto;
+    gap: 24px;
+    padding: 12px 0;
+}
+
+.card {
+    min-height: 100px;
+    background: var(--bg-2);
+    border: 2px solid var(--border-color);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.card-info {
+    padding: 0 24px 24px 24px;
+}
+
+.card-title {
+    margin-top: 0.7em;
+}
+
+.card-image {
+    border: unset;
+    width: 100%;
+}
+
+.card-image-placeholder {
+    height: 12px;
+    width: 100%;
+}
+
+.card-description {
+    margin-top: 0.5em;
+    overflow: hidden;
+}
+
+@media all and (max-width:720px) {
+    .cards {
+        gap: 18px;
+    }
+}

sass/parts/_code.scss

@@ -0,0 +1,113 @@
+
+code {
+  background-color: var(--bg-1);
+  padding: 0.1em 0.2em;
+  border-radius: 5px;
+  border: 1px solid var(--border-color);
+}
+
+pre {
+  /* Rounded border */
+  border-radius: 5px;
+  border: 1px solid var(--border-color);
+
+  line-height: 1.4;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+pre code {
+  background-color: transparent;
+  color: inherit;
+  font-size: 100%;
+  padding: 0;
+
+  // We only want a border around `code` and not `pre code` blocks.
+  border: 0;
+}
+
+pre {
+  font-family: var(--code-font);
+  position: relative;
+  -webkit-overflow-scrolling: touch;
+}
+
+pre code[class*="language-"] {
+  -webkit-overflow-scrolling: touch;
+}
+
+pre code[class*="language-"]::before {
+  background: black;
+  border-radius: 0 0 0.25rem 0.25rem;
+  color: white;
+  font-size: 12px;
+  letter-spacing: 0.025rem;
+  padding: 0.1rem 0.5rem;
+  position: absolute;
+  right: 0.1rem;
+  margin-top: 0.1rem;
+  text-align: right;
+  text-transform: uppercase;
+  top: 0;
+}
+
+pre code[class="language-javaScript"]::before,
+pre code[class="language-js"]::before {
+  content: "js";
+  background: #f7df1e;
+  color: black;
+}
+
+pre code[class*="language-yml"]::before,
+pre code[class*="language-yaml"]::before {
+  content: "yaml";
+  background: #f71e6a;
+  color: white;
+}
+
+pre code[class*="language-shell"]::before,
+pre code[class*="language-bash"]::before,
+pre code[class*="language-sh"]::before {
+  content: "shell";
+  background: green;
+  color: white;
+}
+
+pre code[class*="language-json"]::before {
+  content: "json";
+  background: dodgerblue;
+  color: #000000;
+}
+
+pre code[class*="language-python"]::before,
+pre code[class*="language-py"]::before {
+  content: "py";
+  background: blue;
+  color: yellow;
+}
+
+pre code[class*="language-css"]::before {
+  content: "css";
+  background: cyan;
+  color: black;
+}
+
+pre code[class*="language-go"]::before {
+  content: "Go";
+  background: cyan;
+  color: royalblue;
+}
+
+pre code[class*="language-md"]::before,
+pre code[class*="language-md"]::before {
+  content: "Markdown";
+  background: royalblue;
+  color: whitesmoke;
+}
+
+pre code[class*="language-rust"]::before,
+pre code[class*="language-rs"]::before {
+  content: "rust";
+  background: #fff8f6;
+  color: #ff4647;
+}

sass/parts/_header.scss

@@ -0,0 +1,114 @@
+.page-header {
+  font-size: 3em;
+  line-height: 100%;
+  font-family: var(--header-font);
+  margin: 4rem 0px 1rem 0px;
+}
+
+.centered-header {
+  font-family: var(--header-font);
+
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  font-size: 4em;
+}
+
+header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 1em 0;
+}
+
+header .main {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  font-size: 1.5rem;
+
+  /* Otherwise header and menu is too close on small screens*/
+  margin-bottom: 10px;
+}
+
+.socials {
+  /* flex-child */
+  flex-grow: 0;
+  /* flex-container */
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: flex-end;
+  gap: 6px;
+}
+
+.social {
+  border-bottom: unset;
+  background-image: unset;
+  padding: 2px;
+}
+
+.social>img {
+  border: unset;
+  width: 24px;
+  height: 24px;
+
+}
+
+.meta {
+  color: #999;
+  letter-spacing: -0.5px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 1.2rem;
+  margin-top: 2em;
+}
+
+h1::before {
+  color: var(--primary-color);
+  content: "# ";
+}
+
+h2::before {
+  color: var(--primary-color);
+  content: "## ";
+}
+
+h3::before {
+  color: var(--primary-color);
+  content: "### ";
+}
+
+h4::before {
+  color: var(--primary-color);
+  content: "#### ";
+}
+
+h5::before {
+  color: var(--primary-color);
+  content: "##### ";
+}
+
+h6::before {
+  color: var(--primary-color);
+  content: "###### ";
+}
+
+@media (prefers-color-scheme: dark) {
+  .social>img {
+    filter: invert(1);
+  }
+}

sass/parts/_image.scss

@@ -0,0 +1,40 @@
+img.profile {
+  border: 0px;
+  max-width: 100%;
+}
+
+img {
+  border: 3px solid #ececec;
+  max-width: 100%;
+}
+
+figure {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  max-width: 100%;
+}
+
+figure img {
+  max-height: 500px;
+}
+
+@media screen and (min-width: 600px) {
+  figure {
+    padding: 0 40px;
+  }
+}
+
+figure h4 {
+  font-size: 1rem;
+  margin: 0;
+  margin-bottom: 1em;
+}
+
+figure h4::before {
+  content: "↳ ";
+}
+
+svg {
+  max-height: 15px;
+}

sass/parts/_misc.scss

@@ -0,0 +1,63 @@
+.primary-color {
+  color: var(--primary-color);
+}
+
+.draft-label {
+  color: var(--hover-color);
+  text-decoration: none;
+  padding: 2px 4px;
+  border-radius: 4px;
+  margin-left: 6px;
+  background-color: var(--primary-color);
+}
+
+::-moz-selection {
+  background: var(--primary-color);
+  color: var(--hover-color);
+  text-shadow: none;
+}
+
+::selection {
+  background: var(--primary-color);
+  color: var(--hover-color);
+}
+
+p {
+  line-height: 1.5;
+}
+
+hr {
+  border: 0;
+  border-top: 3px solid var(--border-color);
+  margin: 1em 0;
+}
+
+blockquote {
+  border-left: 3px solid var(--border-color);
+  color: #737373;
+  margin: 0;
+  padding-left: 1em;
+}
+
+a {
+  border-bottom: 3px solid var(--primary-color);
+  color: inherit;
+  text-decoration: none;
+}
+
+a:hover {
+  background-color: var(--primary-color);
+  color: var(--hover-color);
+}
+
+time {
+  color: grey;
+}
+
+/* Remove post list padding */
+@media screen and (max-width: 600px) {
+  .list>ul {
+    margin: 0;
+    padding: 0;
+  }
+}

sass/parts/_table.scss

@@ -0,0 +1,15 @@
+table {
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+table th {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+  font-size: large;
+}
+
+table td {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+}

sass/parts/_tags.scss

@@ -0,0 +1,12 @@
+.tags li::before {
+  content: "🏷 ";
+}
+
+.tags a {
+  border-bottom: 3px solid var(--primary-color);
+}
+
+.tags a:hover {
+  color: var(--hover_color);
+  background-color: var(--primary-color);
+}

sass/theme/dark.scss

@@ -0,0 +1,11 @@
+:root {
+  --text-0: rgba(255, 255, 255, 87%);
+  --text-1: rgba(255, 255, 255, 60%);
+
+  --bg-0: #121212;
+  --bg-1: rgba(255, 255, 255, 5%);
+  --bg-2: rgba(23, 23, 23, 100%);
+
+  --primary-color: #ef5350;
+  --hover-color: white;
+}

sass/theme/light.scss

@@ -0,0 +1,11 @@
+:root {
+  --text-0: rgba(0, 0, 0, 87%);
+  --text-1: rgba(0, 0, 0, 66%);
+
+  --bg-0: #fff;
+  --bg-1: #f2f2f2;
+  --bg-2: #fefefe;
+
+  --primary-color: #ef5350;
+  --hover-color: white;
+}

templates/partials/nav.html

@@ -1,21 +1,19 @@
 <header>
     <div class="main">
-        <a href={{ config.base_url }}>{{ config.title }}</a>
-
-        <div class="socials">
-            {% for social in config.extra.socials %}
-            <a href="{{ social.url }}" class="social">
-                <img alt={{ social.name }} src="/social_icons/{{ social.icon }}.svg">
-            </a>
-            {% endfor %}
-        </div>
+      <div class="socials">
+        {% for social in config.extra.socials %}
+        <a href="{{ social.url }}" class="social">
+          <img rel={{ social.rel }} alt={{ social.name }} src="/social_icons/{{ social.icon }}.svg">
+        </a>
+        {% endfor %}
+      </div>
+      <a class="h-card" href={{ config.base_url }}>{{ config.title }}</a>
     </div>
 
     <nav>
-        <a href="https://jamesbrechtel.com/" class="h-card" style="margin-left: 0.7em">/home</a>
-        {% for menu in config.extra.menu %}
-            <a href={{ menu.url }} style="margin-left: 0.7em">{{ menu.name }}</a>
-        {% endfor %}
+      {% for menu in config.extra.menu %}
+      <a href={{ menu.url }} style="margin-left: 0.7em">{{ menu.name }}</a>
+      {% endfor %}
     </nav>
 </header>