Add code for the buttons

2 files changed, 75 insertions, 7 deletions

diff --git a/styles/index.module.css b/styles/index.module.css
index 2314363..582cf74 100644
--- a/styles/index.module.css
+++ b/styles/index.module.css
@@ -9,3 +9,42 @@
   color: var(--text-dimmed);
   margin-right: var(--text-padding);
 }
+
+.the88x31s {
+  column-width: 90px;
+  text-align: center;
+}
+
+.the88x31s > a {
+  width: 88px;
+  height: 31px;
+  margin: 2px;
+  display: inline-block;
+}
+
+.the88x31s img {
+  width: inherit;
+  height: inherit;
+  overflow: hidden;
+  object-fit: cover;
+  filter: grayscale(1) brightness(.8) opacity(.8);
+  transition: .4s ease-in-out filter;
+}
+
+.the88x31s a:has(img + img) img:first-child {
+  position: absolute;
+  display: none;
+  z-index: 2;
+}
+
+.the88x31s a:hover img {
+  display: initial!important;
+  filter: none;
+  transition: .025s ease-in-out filter;
+}
+
+@media (pointer:coarse) or (pointer:none) {
+  .the88x31s img {
+    filter: contrast(.6) brightness(.6) grayscale(.2);
+  }
+}
diff --git a/styles/layout.css b/styles/layout.css
index abc709a..a797740 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -13,6 +13,7 @@
   --text-dimmed:rgba(255,255,255, .55);
   --text-padding: 16px;
   --card-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
+  --current-content-width: min(var(--main-width), calc(100vw - var(--text-padding)));
 }
 
 @media (max-width: 500px) {
@@ -166,29 +167,57 @@ header:not(.homepage) ~ h1.pageTitle {
   margin-top: -80px;
 }
 
-main.mainColumn {
-  min-height: calc(var(--header-overlap) + var(--min-main-overhang));
-}
-
 .mainColumn {
   width: var(--main-width);
   max-width: calc(100vw - var(--text-padding));
   box-sizing: border-box;
   padding: var(--text-padding);
   margin: 0 auto;
+}
+
+.mainColumn.card {
+  min-height: calc(var(--header-overlap) + var(--min-main-overhang));
   background: var(--main-background);
   box-shadow: var(--card-shadow);
 }
 
-header.homepage ~ .mainColumn {
+.mainColumn.postscript h2:first-child {
+  margin-top: 24px;
+  font-weight: 500;
+  opacity: .6;
+  font-size: 18px;
+  position: relative;
+}
+
+.mainColumn.postscript h2:first-child::after {
+  content: ' ';
+  position: absolute;
+  display: block;
+  background: #666;
+  width: 100%;
+  height: 1px;
+}
+
+.mainColumn.postscript h2 a.asideLink {
+  position: absolute;
+  right: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.mainColumn.postscript p {
+  opacity: .6;
+}
+
+header.homepage ~ .mainColumn.card {
   min-height: calc(var(--header-overlap) + var(--min-main-overhang) - var(--header-bar-height));
 }
 
-.mainColumn ~ .mainColumn {
+.mainColumn.card ~ .mainColumn.card {
   margin-top: calc(2 * var(--text-padding));
 }
 
-main.mainColumn > p:first-child {
+main.mainColumn.card > p:first-child {
   margin-top: 0;
 }