Add projects, CV, remove notes

public/styles/common.css

@@ -9,3 +9,30 @@ body {
   font-family: 'Vollkorn', serif;
   width: 100%;
 }
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-items: center;
+  width: 100%;
+  max-width: 100vw;
+}
+
+@media (max-width: 768px) {
+  main {
+    padding: 0;
+  }
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: calc(100% - 1rem * 2);
+  padding: 2rem 1rem;
+}
+
+section:not(:first-of-type) {
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}

public/styles/cv.css

@@ -0,0 +1,15 @@
+@import './common.css';
+
+#about {
+  max-width: 42rem;
+}
+
+big {
+  font-size: xx-large;
+  margin: 1rem 0;
+}
+
+#about p {
+  margin: 1rem;
+  width: 100%;
+}

public/styles/index.css

@@ -1,43 +1 @@
 @import './common.css';
-
-main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 2rem 0;
-}
-
-.posts {
-  /* list-style: none; */
-  margin-top: 0;
-  padding-left: 0;
-}
-
-.posts li {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  column-gap: 0.5rem;
-}
-
-.posts .date {
-  text-align: right;
-}
-
-@media (max-width: 768px) {
-  main {
-    padding: 0;
-  }
-
-  .posts {
-    padding-left: 2rem;
-    padding-right: 1rem;
-  }
-
-  .posts .date {
-    display: none;
-  }
-
-  .posts li {
-    display: list-item;
-  }
-}

public/styles/post.css

@@ -1,16 +1,10 @@
 @import './common.css';
 
 main {
-  display: flex;
-  flex-direction: column;
-  justify-items: center;
-  align-items: center;
   padding: 2rem 0;
-  width: 100%;
-  max-width: 100vw;
 }
 
-main > h1 {
+main>h1 {
   font-size: 3rem;
   line-height: 3rem;
   margin-bottom: 0;
@@ -19,21 +13,22 @@ main > h1 {
 }
 
 @media (max-width: 768px) {
-  main > h1 {
+  main>h1 {
     font-size: 2rem;
     line-height: 2rem;
   }
 }
 
-main > .meta {
+main>.meta {
   font-style: italic;
 }
 
-main > h1, main > .meta {
+main>h1,
+main>.meta {
   text-align: center;
 }
 
-main > hr {
+main>hr {
   border: none;
   height: 1px;
   background-color: lightgray;
@@ -44,7 +39,11 @@ main > hr {
 
 article {
   width: 100%;
-  max-width: 35rem;
+  max-width: 42rem;
+}
+
+article p {
+  width: 100%;
 }
 
 article .secret-link {
@@ -57,16 +56,15 @@ article .secret-link {
   zoom: .6;
 } */
 
-main > h1,
-main > .meta,
-article > p,
-article > h2,
-article > h3,
-article > h4,
-article > h5,
-article > h6,
-article.asciidoctor .paragraph
-{
+main>h1,
+main>.meta,
+article>p,
+article>h2,
+article>h3,
+article>h4,
+article>h5,
+article>h6,
+article.asciidoctor .paragraph {
   margin-left: 1rem;
   margin-right: 1rem;
 }
@@ -97,10 +95,12 @@ blockquote {
   background-color: rgba(0, 0, 0, 0.025);
 }
 
-pre[class*="language-"], pre.highlight {
+pre[class*="language-"],
+pre.highlight {
   width: 100%;
   box-sizing: border-box;
   max-width: 100vw;
+  font-size: 1rem !important;
 }
 
 pre.highlight {
@@ -114,17 +114,17 @@ code {
   /* padding: 0 0.25rem; */
 }
 
-article.asciidoctor .exampleblock {
-  width: 100%;
-  box-sizing: border-box;
-  max-width: 100vw;
-  padding: 0.5rem 1rem;
-  background-color: rgba(0, 0, 0, 0.05);
+.header-anchor {
+  opacity: 0;
 }
 
-article.asciidoctor .listingblock > .title {
-  font-style: italic;
-  margin-bottom: -0.5rem;
+h1:hover>.header-anchor,
+h2:hover>.header-anchor,
+h3:hover>.header-anchor,
+h4:hover>.header-anchor,
+h5:hover>.header-anchor,
+h6:hover>.header-anchor {
+  opacity: 1;
 }
 
 details {
@@ -187,7 +187,8 @@ table {
   border-spacing: 0;
 }
 
-th, td {
+th,
+td {
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   padding: 1rem;
 }

public/styles/posts.css

@@ -0,0 +1,30 @@
+.posts {
+  /* list-style: none; */
+  margin-top: 0;
+  padding-left: 0;
+}
+
+.posts li {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 0.5rem;
+}
+
+.posts .date {
+  text-align: right;
+}
+
+@media (max-width: 768px) {
+  .posts {
+    padding-left: 2rem;
+    padding-right: 1rem;
+  }
+
+  .posts .date {
+    display: none;
+  }
+
+  .posts li {
+    display: list-item;
+  }
+}

public/styles/projects.css

@@ -0,0 +1,77 @@
+/* TODO: Improve scoping. */
+small.annotation {
+  text-align: center;
+  margin-top: -1rem;
+  margin-bottom: 1rem;
+}
+
+/* TODO: Improve scoping. */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 1rem 0;
+  text-align: center;
+}
+
+ul.projects {
+  --gap: 1rem;
+
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 768px;
+  padding: 0;
+  gap: var(--gap);
+}
+
+ul.projects>li.project-card {
+  --border-width: 1px;
+  --border-radius: 4px;
+  --padding: 1.5rem;
+
+  display: block;
+  width: calc(50% - (var(--padding) * 2) - var(--gap) / 2 - var(--border-width) * 2);
+  padding: var(--padding);
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid rgba(0, 0, 0, 0.1)
+}
+
+ul.projects>li.project-card>.title {
+  display: block;
+  margin-bottom: -0.25rem;
+  font-weight: bold;
+}
+
+ul.projects>li.project-card>p {
+  margin: 0.5rem 0;
+}
+
+ul.projects>li.project-card>p:last-child {
+  margin-bottom: 0;
+}
+
+ul.projects>li.project-card .stack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+ul.projects>li.project-card .stack>span {
+  display: block;
+  padding: 0.25rem 0.5rem;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  font-size: small;
+}
+
+@media(max-width: 768px) {
+  ul.projects {
+    padding: 0
+  }
+
+  ul.projects>li.project-card {
+    width: 100%;
+  }
+}