M _includes/layouts/base.njk => _includes/layouts/base.njk +10 -19
@@ 3,9 3,10 @@
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
- <link
- rel="stylesheet"
- href="https://cdn.jsdelivr.net/npm/comic-mono@0.0.1/index.css"/>
+ {# <link #}
+ {# rel="stylesheet" #}
+ {# type="text/css" #}
+ {# href="https://cdn.jsdelivr.net/npm/comic-mono@0.0.1/index.css"/> #}
<link
rel="stylesheet"
@@ 88,11 89,10 @@
</content>
<footer
- class="white"
- style="background: rgba(0, 0, 0, 0.6); border-radius: 0.8rem"
+ class="white background-card"
+ style="background: rgba(0, 0, 0, 0.6); border: 6.45px solid #000;"
>
- <div style="margin: 15px">
- <a href="https://ko-fi.com/P5P05A1PW" target="_blank"
+ <a href="https://ko-fi.com/P5P05A1PW" target="_blank"
><img
height="36"
style="border: 0px; height: 36px"
@@ 100,29 100,20 @@
border="0"
alt="Buy Me a Coffee at ko-fi.com"
/></a>
- <br/>
- <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/>
+ <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/>
- The
- <a href="https://git.sr.ht/~chrono/disilla.org"
- >code used to host this site</a
- >
- is
- <a href="https://opensource.org/licenses/AGPL-3.0"
- >AGPL-3.0-only</a
- >.<br/>
- </div>
</footer>
</body>
</html>
M css/style.css => css/style.css +32 -23
@@ 1,29 1,37 @@
-a {
+* a {
text-decoration: none;
}
-html {
- font-family: "Comic Mono", Fallback, sans-serif;
- /* font-size: calc(0.6em + 0.5vw); */
-
- /* exponentially scale font size based on smaller screen size */
- font-size: calc(0.75rem + 0.2vw);
- font-weight: 100;
- line-height: 1.25rem;
+@font-face {
+ font-family: Comic Mono;
+ font-weight: normal;
+ src: url(/fonts/ComicMono.ttf);
+}
- font-weight: 400;
- line-height: 2.25;
+@font-face {
+ font-family: Comic Mono;
+ font-weight: bold;
+ src: url(/fonts/ComicMono-Bold.ttf);
+}
+body {
color: #363f47;
background-color: #e9debb;
-}
-body {
gap: 1.3rem;
margin: 1.3rem;
- margin-left: 8.5vw;
- margin-right: 8.5vw;
+ max-width: 82.48vw;
+
+ /* center the body */
+ margin-left: 8.76vw;
+ margin-right: 8.76vw;
+
+ font-family: "Comic Mono";
+ font-size: calc(0.75rem + 0.2vw);
+
+ font-weight: 400;
+ line-height: 2.23rem;
}
.header a {
@@ 104,7 112,7 @@ code {
}
.grid {
- gap: 1.3rem;
+ /* gap: 1.3rem; */
}
.lazy {
@@ 114,21 122,17 @@ code {
.profile-back {
background: rgba(10, 0, 10, 0.4);
border-radius: 0.8rem;
- border: 6px solid #555;
-
- max-width: fit-content;
+ border: 6.45px solid #555;
}
.background-card {
background: rgba(0, 0, 0, 0.45);
border-radius: 0.8rem;
- border: 6px solid #555;
+ border: 6.45px solid #555;
+
padding: 25px;
margin-bottom: 1.3rem;
-
- margin-top: 0;
- margin-left: 0;
}
.profile-card {
@@ 187,6 191,11 @@ li {
color: #000000;
}
+/* f1 red */
+.f1 {
+ color: #E10600;
+}
+
/* VEX V5 Redâ„¢ */
.red {
color: #d22630;
M index.html => index.html +49 -48
@@ 7,7 7,7 @@ pagination:
reverse: true
alias: posts
---
-<div style="display: flex; flex-wrap: wrap; flex-direction: row" class="grid">
+<div style="display: grid; flex-wrap: wrap; flex-direction: row" class="grid">
<div style="flex: 1" class="profile-back">
<div class="profile-card">
<img
@@ 16,10 16,10 @@ pagination:
alt="logo"
data-ll-status="loaded"
width="55.3%"
- style="border: 6px solid #555; border-radius: 29.97%;"
- />
+ 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"
@@ 32,66 32,66 @@ pagination:
></path>
</svg>
<a class="gold">Purdue University in Indianapolis</a>
- </div>
- <div>
- <svg
+ <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
+ <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 -->
+ </svg>
+ <!-- USA flag emoji -->
Indianapolis, IN, USA
</div>
- <div>
- <svg
+ <div>
+ <svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
width="16"
height="16"
>
- <path
+ <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
+ </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
+ <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>
+ </svg>
🇺🇸 <a class="white" style="font-size: smaller;">(native)</a> / 🇫🇷 <a class="white" style="font-size: smaller;">(beginner)</a>
+ </div>
</div>
</div>
</div>
-
<div style="flex: 2;">
<div class="background-card">
- <div class="about">
+ <article class="about">
<p>
I'm a software developer / engineering student and a rising
freshman at
@@ 132,31 132,32 @@ pagination:
always open to talking about almost anything.
</li>
</ul>
- </div>
+ </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
+ <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>
+ <!-- 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>
-
</div>