Reword + layout

bcomnes · Jan 9, 2024 · 83a0820 · 83a0820
1 parent 19587b8
commit 83a0820
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 23 deletions.
diff --git a/src/globals/global.css b/src/globals/global.css
@@ -88,6 +88,10 @@ footer > .top-bar-link:first-child {
   }
 }
 
+.hide {
+  display: none;
+}
+
 @media print {
   nav.top-bar, footer.top-bar {
     position: inherit;

diff --git a/src/page.html b/src/page.html
@@ -4,11 +4,18 @@ <h1 class="title p-name" itemprop="name"><a class="u-url" rel="me" href="/">Bret
   <p class="subtitle p-job-title p-note" itemprop="jobTitle">Professional & amateur computer programmer</p>
 </header>
 
+<section class="recent-post-section">
+  <h2 id="recent-posts" class="section-header"><a href="#recent-posts">Posts</a></h2>
+  <div class="recent-post-container">
+    {{{ vars.blogPostsHtml }}}
+  </div>
+</section>
+
 <section>
-  <h2 id="current-projects" class="section-header"><a href="#current-projects">Current Projects</a></h2>
-  <div class="portfolio grid-container-2">
-    <div>
-      <h3 id="breadcrum"><a href="https://breadcrum.net">Breadcrum</a></h3>
+  <h2 id="current-projects" class="section-header"><a href="#featured ">Featured</a></h2>
+  <div class="portfolio grid-container">
+    <div class="grid-center-start">
+      <h3 id="breadcrum" class="hide"><a href="https://breadcrum.net">Breadcrum</a></h3>
       <figure>
         <a href="https://breadcrum.net">
           <picture>
@@ -25,6 +32,15 @@ <h3 id="breadcrum"><a href="https://breadcrum.net">Breadcrum</a></h3>
       </ul>
     </div>
 
+  </div>
+</section>
+
+<section>
+
+  <h2 id="open-source" class="section-header"><a href="#current">Current</a></h2>
+
+  <div class="portfolio grid-container">
+
     <div>
       <h3 id="gumcast"><a href="https://gumcast.com/">gumcast</a></h3>
       <figure>
@@ -38,22 +54,6 @@ <h3 id="gumcast"><a href="https://gumcast.com/">gumcast</a></h3>
       </ul>
     </div>
 
-  </div>
-</section>
-
-<section class="recent-post-section">
-  <h2 id="recent-posts" class="section-header"><a href="#recent-posts">Recent Posts</a></h2>
-  <div class="recent-post-container">
-    {{{ vars.blogPostsHtml }}}
-  </div>
-</section>
-
-<section>
-
-  <h2 id="open-source" class="section-header"><a href="#open-source">Open Source</a></h2>
-
-  <div class="portfolio grid-container">
-
     <div>
       <h3 id="top-bun">🥐 <a href="https://top-bun.org">top-bun</a></h3>
       <figure>
@@ -294,7 +294,7 @@ <h3 id="hifiwifi"><a href="https://hifiwi.fi">HifiWi.fi</a></h3>
 </section>
 
 <section>
-  <h2 id="past-projects" class="section-header"><a href="#past-projects">Past Projects</a></h2>
+  <h2 id="past-projects" class="section-header"><a href="#past">Past</a></h2>
 
   <div class="portfolio grid-container">
     <div>

diff --git a/src/style.css b/src/style.css
@@ -39,13 +39,16 @@
   grid-column-gap: 1em;
 }
 
+.grid-center-start {
+  grid-column-start: 2;
+}
+
 .grid-container-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-column-gap: 1em;
 }
 
-
 .markdown-body {
   max-width: 68em;
 }
@@ -67,7 +70,8 @@
 
 @media screen and (max-width: 45em) {
   .grid-container,
-  .grid-container-2 {
+  .grid-container-2,
+  .grid-container-1 {
     grid-template-columns: 1fr;
   }
 }