M _includes/layouts/base.njk => _includes/layouts/base.njk +57 -64
@@ 1,70 1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
-
- {# <link #}
- {# rel="stylesheet" #}
- {# type="text/css" #}
- {# href="https://cdn.jsdelivr.net/npm/comic-mono@0.0.1/index.css"/> #}
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link
rel="stylesheet"
type="text/css"
href="/css/normalize.css"
- async/>
+ async
+ />
- <link rel="stylesheet" type="text/css" href="/css/style.css" async/>
+ <link rel="stylesheet" type="text/css" href="/css/style.css" async />
- <meta name="viewport" content="width=device-width, initial-scale=1"/>
- <meta charset="utf-8"/>
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta charset="utf-8" />
<title>chrono</title>
- <meta name="description" content="hi, i'm chrono. visit my site."/>
- <meta name="twitter:card" content="summary_large_image"/>
- <meta name="twitter:creator" content="@chronomly"/>
+ <meta name="description" content="hi, i'm chrono. visit my site." />
+ <meta name="twitter:card" content="summary_large_image" />
+ <meta name="twitter:creator" content="@chronomly" />
<meta
property="og:description"
content="hi, i'm chrono. visit my site."
-/>
- <meta property="og:type" content="website"/>
+ />
+ <meta property="og:type" content="website" />
<meta
property="og:image"
content="https://disilla.org/img/social.png"
-/>
- <meta property="og:image:alt" content="chrono-byte"/>
- <meta property="og:image:width" content="319"/>
- <meta property="og:image:height" content="161"/>
- <meta property="og:locale" content="en_US"/>
- <meta property="og:site_name" content="chrono"/>
- <meta name="robots" content="index,follow"/>
- <meta property="og:title" content="chrono"/>
- <meta property="og:url" content="https://disilla.org"/>
- <link rel="canonical" href="https://disilla.org/"/>
- <meta name="theme-color" content="#e9debb"/>
+ />
+ <meta property="og:image:alt" content="chrono-byte" />
+ <meta property="og:image:width" content="319" />
+ <meta property="og:image:height" content="161" />
+ <meta property="og:locale" content="en_US" />
+ <meta property="og:site_name" content="chrono" />
+ <meta name="robots" content="index,follow" />
+ <meta property="og:title" content="chrono" />
+ <meta property="og:url" content="https://disilla.org" />
+ <link rel="canonical" href="https://disilla.org/" />
+ <meta name="theme-color" content="#e9debb" />
</head>
- <body style="display: grid">
+ <body class="wrapper">
<header>
<h2>
<a href="/">/ home / chrono /</a>
<a>
{% if tags[0] == "positions" or tags[0] == "blog" %}
- <a href="/{{ tags [0] }}/">{{ tags [0] }} /</a>
- {% endif %}
- {% if id %}
- {{ id }}
- {% else %}
- {{ title }}
- {% endif %}
+ <a href="/{{ tags[0] }}/">{{ tags[0] }} /</a>
+ {% endif %} {% if id %} {{ id }} {% else %} {{ title }} {%
+ endif %}
</a>
</h2>
- {# header div #}
<div class="header">
<p>
<a href="/blog/">blog</a>
- / <a href="/projects/">current & past projects</a>
+ /
+ <a href="/projects/">current & past projects</a>
/ <a href="/positions/">political notes</a>
</p>
<p>
@@ 73,7 65,14 @@
var addr_org = "disilla";
var addr_tld = "org";
var address = name + "@" + addr_org + "." + addr_tld;
- document.write("<a href=" + "'mailto:" + address + "'>" + "email" + "</a>");
+ document.write(
+ "<a href=" +
+ "'mailto:" +
+ address +
+ "'>" +
+ "email" +
+ "</a>"
+ );
</script>
/
<a href="https://twitter.com/chronomly">twitter</a>
@@ 84,36 83,30 @@
</div>
</header>
- <content>
- {{ content | safe }}
- </content>
+ {{ content | safe }}
- <footer
- class="white background-card"
- style="background: rgba(0, 0, 0, 0.6); border: 6.45px solid #000;"
- >
+ <footer class="white">
<a href="https://ko-fi.com/P5P05A1PW" target="_blank"
- ><img
- height="36"
- style="border: 0px; height: 36px"
- src="https://storage.ko-fi.com/cdn/kofi3.png?v=3"
- border="0"
- alt="Buy Me a Coffee at ko-fi.com"
-/></a>
- <br/>
+ ><img
+ height="36"
+ style="border: 0px; height: 36px"
+ src="https://storage.ko-fi.com/cdn/kofi3.png?v=3"
+ border="0"
+ alt="Buy Me a Coffee at ko-fi.com"
+ /></a>
+ <br />
<a
- style="margin: 0.1vh 0.1vh 0em"
- href="https://www.digitalocean.com/?refcode=0cbd24ae5dba&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"
- ><img
- src="https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%201.svg"
- alt="DigitalOcean Referral Badge"
-/></a>
- <br/>
- Comic Mono font is by
- <a href="https://dtinth.github.io/comic-mono-font/"
- >dtinth</a
- >.<br/>
- The content of this site is all rights reserved. <br/>
+ style="margin: 0.1vh 0.1vh 0em"
+ href="https://www.digitalocean.com/?refcode=0cbd24ae5dba&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"
+ ><img
+ src="https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%201.svg"
+ alt="DigitalOcean Referral Badge"
+ /></a>
+ <br />
+ Comic Mono font is by
+ <a href="https://dtinth.github.io/comic-mono-font/">dtinth</a
+ >.<br />
+ The content of this site is all rights reserved. <br />
</footer>
</body>
</html>
M _includes/layouts/post.njk => _includes/layouts/post.njk +1 -1
@@ 3,7 3,7 @@ layout: layouts/base.njk
---
<div style="width: 100%" class="grid">
- <div class="background-card" style="color: #ffffff;" style="margin-bottom: 15px">
+ <div class="background-card" style="color: #ffffff; max-width: 82.48vw" style="margin-bottom: 15px">
<h1 style="margin-top: 0px; margin-bottom: 0px; padding-bottom: 0px;">{{ title }}</h1>
{# author disclaimer #}
<a style="font-size: 11px; margin-top: 0px; margin-bottom: 0px; padding-bottom: 0px;">
M blog/index.html => blog/index.html +29 -18
@@ 8,26 8,37 @@ pagination:
reverse: true
alias: posts
---
+<style>
+ @media (min-width: 1000px) {
+ .wrapper:not(.has-sidebar) {
+ grid-template-columns: 1fr;
+ grid-template-areas: "header" "content" "footer";
+ }
+ }
+</style>
-<div style="width: 100%" class="grid">
- <div style="margin-bottom: 0px" class="blog">
+<div style="grid-area: content" class="content">
+ <div class="background-card" style="color: #ffffff; margin-bottom: calc(0.75rem + 0.2vw);">
+ <div style="margin-bottom: 0px">Blog</div>
+ <p>Here you can find all my blog posts. I write about my projects, my thoughts and my life.</p>
+ </div>
+
+ <div style="grid-column: 1 / 3; grid-row: 2 / 3; gap: calc(0.75rem + 0.2vw);" class="postContainer blog">
{% for post in posts %}
- <div class="background-card" style="margin-bottom: 15px">
- <h1 style="margin-bottom: 0px">
- <a href="{{ post.url | url }}">{{ post.data.title }}</a>
- </h1>
- <time
- style="margin-bottom: 0px"
- datetime="{{ post.date | dateIso }}"
- >{{ post.date | dateReadable }}</time
- >
- <!-- rounded box -->
- <a>
- {% for tag in post.data.tags %} {% if tag != "blog" %}
- <span class="tags">{{ tag }}</span>
- {% endif %} {% endfor %}
- </a>
- </div>
+ <div class="post">
+ <h1 style="margin-bottom: 0px">
+ <a href="{{ post.url | url }}">{{ post.data.title }}</a>
+ </h1>
+ <time style="margin-bottom: 0px" datetime="{{ post.date | dateIso }}">{{ post.date | dateReadable }}</time>
+ <!-- rounded box -->
+ <a>
+ {% for tag in post.data.tags %}
+ {% if tag != "blog" %}
+ <span class="tags">{{ tag }}</span>
+ {% endif %}
+ {% endfor %}
+ </a>
+ </div>
{% endfor %}
</div>
</div>
M css/style.css => css/style.css +127 -38
@@ 18,20 18,77 @@ body {
color: #363f47;
background-color: #e9debb;
+ font-family: "Comic Mono";
+ font-size: calc(0.75rem + 0.2vw);
+
+ line-height: 2.23rem;
+}
+
+.wrapper {
+ display: grid;
gap: 1.3rem;
- margin: 1.3rem;
+ margin: 0.75rem;
+ grid-template-areas:
+ "header"
+ "sidebar"
+ "content"
+ "footer";
+}
+
+@media (min-width: 300px) {
+ .wrapper {
+ padding-left: 1vw;
+ padding-right: 1vw;
+ grid-template-columns: 2fr;
+ grid-template-areas:
+ "header"
+ "sidebar"
+ "content"
+ "footer";
+ }
- max-width: 82.48vw;
+ .tags {
+ /* hide */
+ display: none;
+ }
+}
- /* center the body */
- margin-left: 8.76vw;
- margin-right: 8.76vw;
+@media (min-width: 500px) {
+ .wrapper {
+ /* center the body */
+ padding-left: 5.67vw;
+ padding-right: 7vw;
- font-family: "Comic Mono";
- font-size: calc(0.75rem + 0.2vw);
+ grid-template-columns: 2fr;
+ grid-template-areas:
+ "header header"
+ "sidebar sidebar"
+ "content content"
+ "footer footer";
+ }
- font-weight: 400;
- line-height: 2.23rem;
+ .tags {
+ display: none;
+ }
+}
+
+@media (min-width: 1050px) {
+ .wrapper {
+ /* center the body */
+ padding-left: 7vw;
+ padding-right: 7vw;
+
+ grid-template-columns: 2fr;
+ grid-template-areas:
+ "header header header"
+ "sidebar content content"
+ "footer footer footer";
+ }
+
+ .tags {
+ /* hide */
+ display: inline;
+ }
}
.header a {
@@ 39,19 96,23 @@ body {
}
header {
- grid-row: 1;
+ grid-area: header;
}
content {
- /* display: inline-grid; */
-
- margin-top: 0;
- grid-row: 2;
+ grid-area: content;
}
footer {
- grid-row: 3;
+ grid-area: footer;
font-size: 0.75em;
+
+ background: rgba(0, 0, 0, 0.6);
+ border: 6.45px solid #000;
+ border-radius: 0.8rem;
+
+ padding: 25px;
+ margin-bottom: 0;
}
header h2,
@@ 112,61 173,89 @@ code {
}
.grid {
- /* gap: 1.3rem; */
+ display: grid;
+ gap: 1.3rem;
}
.lazy {
transition: opacity 0.8s;
}
-.profile-back {
- background: rgba(10, 0, 10, 0.4);
- border-radius: 0.8rem;
- border: 6.45px solid #555;
-}
-
.background-card {
+ grid-area: content;
+
background: rgba(0, 0, 0, 0.45);
border-radius: 0.8rem;
border: 6.45px solid #555;
-
padding: 25px;
- margin-bottom: 1.3rem;
+ margin-bottom: 0;
}
.profile-card {
- margin: 25px;
+ grid-area: sidebar;
+
+ background: rgba(10, 8, 0, 0.4);
+ border-radius: 0.8rem;
+ border: 6.45px solid #555;
+
+ padding: 25px;
+
+ min-width: 19vw;
+
color: #f0f0f0;
}
-.about p,
-li {
+.about {
color: #f0f0f0;
margin: 0;
+
+ min-height: 76%;
}
-.articles {
- font-size: 0.75rem;
- line-height: 2rem;
+.postContainer {
+ grid-area: content;
- color: #f0f0f0;
+ margin: 1vw;
+
+ display: grid;
+ gap: 1.3rem;
+ grid-template-columns: 33%;
+ grid-template-areas: "post post post";
}
.blog {
- font-size: 0.75rem;
+ /* set font size to 35% of parent height */
+ font-size: calc(0.75rem + 0.01vw);
line-height: 2rem;
color: #f0f0f0;
}
-.articles h {
- margin: 0;
+.post {
+ background: rgba(0, 0, 0, 0.45);
+ border-radius: 0.8rem;
+ border: 6.45px solid #555;
+
+ padding: 1.3rem;
+
+ max-height: fit-content;
+ width: 1
+
+ grid-row: auto;
+ grid-column: auto;
}
-/* change all links to brown */
-.background-card {
- font-weight: bold;
+/* @media (min-width: px) {
+ .postContainer {
+ grid-template-columns: 1fr 2fr;
+ grid-template-areas:
+ "post post post";
+ }
+} */
+
+.articles h {
+ margin: 0;
}
.profile-card {
@@ 193,7 282,7 @@ li {
/* f1 red */
.f1 {
- color: #E10600;
+ color: #e10600;
}
/* VEX V5 Red™ */
M index.html => index.html +75 -112
@@ 1,96 1,69 @@
---
layout: layouts/base.njk
-<!-- title: -->
pagination:
data: collections.blog
size: 3
reverse: true
alias: posts
---
-<div style="display: grid; flex-wrap: wrap; flex-direction: row" class="grid">
- <div style="flex: 1" class="profile-back">
- <div class="profile-card">
- <img
- src="/img/25267581.png"
- class="lazy"
- alt="logo"
- data-ll-status="loaded"
- width="55.3%"
- style="border: 6px solid #555; border-radius: 29.97%;"/>
- <div class="name">Michael Gummere</div>
- <div class="name-alt">@chrono / @chrono-byte</div>
- <div>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 16 16"
- width="16"
- height="16"
- >
- <path
- d="M1.75 16A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 0 0 .25-.25V8.285a.25.25 0 0 0-.111-.208l-1.055-.703a.749.749 0 1 1 .832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0 1 14.25 16h-3.5a.766.766 0 0 1-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 0 1-.75-.75V14h-1v1.25a.75.75 0 0 1-.75.75Zm-.25-1.75c0 .138.112.25.25.25H4v-1.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v1.25h2.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM3.75 6h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 3.75A.75.75 0 0 1 3.75 3h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 3.75Zm4 3A.75.75 0 0 1 7.75 6h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 7 6.75ZM7.75 3h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 9.75A.75.75 0 0 1 3.75 9h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 9.75ZM7.75 9h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"
- ></path>
- </svg>
- <a class="gold">Purdue University in Indianapolis</a>
- <a class="crimson" style="font-size: xx-small;"> @ IU<a class="gold" style="font-size: xx-small ;">PU</a>
- <a style="font-size: xx-small;">I (for now)</a>
- </div>
- <div>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 16 16"
- width="16"
- height="16"
- >
- <path
- d="m12.596 11.596-3.535 3.536a1.5 1.5 0 0 1-2.122 0l-3.535-3.536a6.5 6.5 0 1 1 9.192-9.193 6.5 6.5 0 0 1 0 9.193Zm-1.06-8.132v-.001a5 5 0 1 0-7.072 7.072L8 14.07l3.536-3.534a5 5 0 0 0 0-7.072ZM8 9a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 9Z"
- ></path>
- </svg>
- <!-- USA flag emoji -->
- Indianapolis, IN, USA
- </div>
- <div>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 16 16"
- width="16"
- height="16"
- >
- <path
- d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5a.75.75 0 0 1 1.5 0Z"
- ></path>
- </svg>
- <a id="time"></a>
- <script>
- // show ONLY time, no date, in EST time zone (UTC-5) every second
- document
- .getElementById("time")
- .innerHTML = new Date().toLocaleTimeString("en-US", {timeZone: "America/Indiana/Indianapolis"});
- setInterval(function () {
- document
- .getElementById("time")
- .innerHTML = new Date().toLocaleTimeString("en-US", {timeZone: "America/Indiana/Indianapolis"});
- }, 1000);
- </script>
- </div>
- <div>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 16 16"
- width="16"
- height="16"
- >
- <path
- d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"
- ></path>
- </svg>
- 🇺🇸 <a class="white" style="font-size: smaller;">(native)</a> / 🇫🇷 <a class="white" style="font-size: smaller;">(beginner)</a>
- </div>
- </div>
+<div style="" class="profile-card">
+ <img src="/img/25267581.png" class="lazy" alt="logo" data-ll-status="loaded" width="36.3%"
+ style="border: 6px solid #555; border-radius: 29.97%;" />
+ <div class="name">Michael Gummere</div>
+ <div class="name-alt">@chrono / @chrono-byte</div>
+
+ <div>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+ <path
+ d="M1.75 16A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 0 0 .25-.25V8.285a.25.25 0 0 0-.111-.208l-1.055-.703a.749.749 0 1 1 .832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0 1 14.25 16h-3.5a.766.766 0 0 1-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 0 1-.75-.75V14h-1v1.25a.75.75 0 0 1-.75.75Zm-.25-1.75c0 .138.112.25.25.25H4v-1.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v1.25h2.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM3.75 6h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 3.75A.75.75 0 0 1 3.75 3h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 3.75Zm4 3A.75.75 0 0 1 7.75 6h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 7 6.75ZM7.75 3h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 9.75A.75.75 0 0 1 3.75 9h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 9.75ZM7.75 9h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z">
+ </path>
+ </svg>
+ <a class="gold">Purdue University in Indianapolis</a>
+ <a class="crimson" style="font-size: xx-small;"> @ IU<a class="gold" style="font-size: xx-small ;">PU</a><a style="font-size: xx-small;">I (for now)</a>
</div>
- </div>
- <div style="flex: 2;">
- <div class="background-card">
+ <div>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+ <path
+ d="m12.596 11.596-3.535 3.536a1.5 1.5 0 0 1-2.122 0l-3.535-3.536a6.5 6.5 0 1 1 9.192-9.193 6.5 6.5 0 0 1 0 9.193Zm-1.06-8.132v-.001a5 5 0 1 0-7.072 7.072L8 14.07l3.536-3.534a5 5 0 0 0 0-7.072ZM8 9a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 9Z">
+ </path>
+ </svg>
+ <!-- USA flag emoji -->
+ Indianapolis, IN, USA
+ </div>
+ <div>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+ <path
+ d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5a.75.75 0 0 1 1.5 0Z">
+ </path>
+ </svg>
+ <a id="time"></a>
+ <script>
+ // show ONLY time, no date, in EST time zone (UTC-5) every second
+ document
+ .getElementById("time")
+ .innerHTML = new Date().toLocaleTimeString("en-US", { timeZone: "America/Indiana/Indianapolis" });
+ setInterval(function () {
+ document
+ .getElementById("time")
+ .innerHTML = new Date().toLocaleTimeString("en-US", { timeZone: "America/Indiana/Indianapolis" });
+ }, 1000);
+ </script>
+ </div>
+ <div>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+ <path
+ d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z">
+ </path>
+ </svg>
+ 🇺🇸 <a class="white" style="font-size: smaller;">(native)</a> / 🇫🇷 <a class="white"
+ style="font-size: smaller;">(beginner)</a>
+ </div>
+</div>
+
+<div style="grid-area: content">
+ <div style="gap: 1.3rem;" class="grid">
+ <div style="grid-column: 1 / 3; grid-row: 1;" class="background-card">
<article class="about">
<p>
I'm a software developer / engineering student and a rising
@@ 114,11 87,8 @@ pagination:
<ul>
<li>
🤖 4 years of experience competing in the
- <a
- class="crimson"
- href="https://www.robotevents.com/teams/VRC/7701F"
- >VEX Robotics Competition</a
- >
+ <a class="crimson" href="https://www.robotevents.com/teams/VRC/7701F">VEX Robotics
+ Competition</a>
as a team programmer and designer.
</li>
<li>
@@ 129,35 99,28 @@ pagination:
<li>
📫 If you want to reach me, you can email, or DM me on
<a class="discord">Discord</a> at chrono#8108. I'm
- always open to talking about almost anything.
+ always open to talking about anything.
</li>
</ul>
</article>
</div>
-
- <div class="background-card" style="margin-bottom: 0;">
- <div class="articles">
- {% for post in posts %}
- <div>
- <h1 style="margin-bottom: 0px;">
- <a href="{{ post.url | url }}">{{ post.data.title }}</a>
- </h1>
- <time
- style="margin-bottom: 0px;"
- datetime="{{ post.date | dateIso }}"
- >{{ post.date | dateReadable }}</time
- >
- <!-- rounded box -->
- <a>
- {% for tag in post.data.tags %}
- {% if tag != "blog" %}
- <span class="tags">{{ tag }}</span>
- {% endif %}
- {% endfor %}
- </a>
- </div>
- {% endfor %}
+ <div style="grid-column: 1 / 3; grid-row: 2; gap: calc(0.75rem + 0.2vw);" class="grid">
+ {% for post in posts %}
+ <div class="post white">
+ <h1 style="margin-bottom: 0px">
+ <a href="{{ post.url | url }}">{{ post.data.title }}</a>
+ </h1>
+ <time style="margin-bottom: 0px" datetime="{{ post.date | dateIso }}">{{ post.date | dateReadable }}</time>
+ <!-- rounded box -->
+ <a>
+ {% for tag in post.data.tags %}
+ {% if tag != "blog" %}
+ <span class="tags">{{ tag }}</span>
+ {% endif %}
+ {% endfor %}
+ </a>
</div>
+ {% endfor %}
</div>
</div>
</div>
M positions/index.html => positions/index.html +4 -4
@@ 8,9 8,9 @@ pagination:
alias: beliefs
---
-<div style="width: 100%" class="grid">
- <div class="background-card" style="color: #ffffff;" style="margin-bottom: 15px">
- <h3 style="margin: 0">Notes:</h3>
+<div style="grid-area: content; grid-column: 1/4;">
+ <div class="background-card" style="color: #ffffff; margin-bottom: calc(0.75rem + 0.2vw);">
+ <h3>Notes:</h3>
The contents of these articles have timestamps for when the page had a
last major revision. The contents of these articles are not meant to be
a complete list of my beliefs, but rather a list of my beliefs that I
@@ 18,7 18,7 @@ pagination:
articles as I learn more and change my mind.
</div>
- <div style="margin-bottom: 0px" class="blog">
+ <div>
{% for post in beliefs %}
<div class="background-card" style="margin-bottom: 15px">
<h1 style="margin-bottom: 0px">
M projects/index.html => projects/index.html +4 -6
@@ 3,8 3,7 @@ layout: layouts/base.njk
id: projects.md
title: projects
---
-
-<div style="width: 100%; color: #ffffff" class="grid">
+<div style="grid-area: content; grid-column: 1/4" class="white">
<div class="background-card" style="margin-bottom: 15px">
<div style="margin-bottom: 0px">
VEX Robotics Competition<br />
@@ 23,7 22,7 @@ title: projects
>
</p>
</div>
- <div class="background-card">
+ <div class="background-card" style="margin-bottom: 15px">
<div style="margin-bottom: 0px">
Hammer<br />
2019-2023
@@ 37,7 36,7 @@ title: projects
<a href="https://github.com/Hammer-Institute/hammer">GitHub</a>
</p>
</div>
- <div class="background-card">
+ <div class="background-card" style="margin-bottom: 15px">
<div style="margin-bottom: 0px">
Katana<br />
2022
@@ 51,8 50,7 @@ title: projects
<a href="https://github.com/Chrono-byte/Katana">GitHub</a>
</p>
</div>
-
- <div style="margin-bottom: 0px" class="background-card">
+ <div class="background-card" style="margin-bottom: 15px">
<div style="margin-bottom: 0px">
SmoreSoftware<br />
2017-2018