do what Big Style says to do with your website

assets/elements.css

@@ -38,6 +38,7 @@ hr {
   background-color: currentColor;
   color: inherit;
   height: 1px;
+  margin: 2em;
 }
 
 li {

assets/layout.css

@@ -95,13 +95,3 @@
   opacity: 0.5;
   user-select: none;
 }
-
-.satisfiedBox {
-  margin: 2rem 0;
-  padding-inline-start: 1rem;
-}
-
-.satisfiedBox h2::before {
-  content: "↗ ";
-  margin-inline-start: -1em;
-}

assets/style.css

@@ -1,4 +1,5 @@
 @import url("/assets/styles/fade-in.css");
+@import url("/assets/styles/fader.css");
 
 @font-face {
   font-family: "Red Hat Display";
@@ -11,24 +12,81 @@
 }
 
 body {
-  --bg: white;
+  --bg: 255, 255, 255;
   background-color: white;
   color: black;
   font-family: "Red Hat Text";
 }
 
+body::after {
+  display: inline-block;
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  image-rendering: pixelated;
+  background: 
+    linear-gradient(to left, white, transparent calc(50% - 384px)), 
+    linear-gradient(to right, white, transparent calc(50% - 384px)), 
+    linear-gradient(to top, white 1rem, transparent 5rem), 
+    url("/assets/imgs/stylistic/bg_pattern.png");
+  background-position: 50% 0;
+  /* background-size: 3840px 1080px; */
+  mask-image: url("/assets/imgs/stylistic/bg_dust.png");
+  mask-repeat: repeat;
+  mask-composite: exclude;
+  mask-size: 960px 270px;
+  mask-position: 50% 0;
+  opacity: 0.25;
+  z-index: -1;
+  pointer-events: none;
+  user-select: none;
+}
+
 h1, h2, h3, h4, h5, h6 {
   font-family: "Red Hat Display";
 }
 
+main .cakeView {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-height: calc(100svh - 14rem);
+  margin-bottom: calc((100vh - 100svh) + 4rem);
+}
+
+main .cakeView section {
+  background-color: rgba(var(--bg), 1);
+  box-shadow: 0px 0px 4rem 4rem rgba(var(--bg), 1);
+}
+
+/* @media (prefers-color-scheme: dark) {
+  main .cakeView section {
+    background-color: transparent;
+    box-shadow: none;
+  }
+} */
+
+main .cakeView h2 {
+  font-size: 3em;
+  /* word-wrap: break-word; */
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
-    --bg: black;
+    --bg: 0,0,0;
     background-color: black;
     color: white;
   }
 
-  img:not(.screen) {
+  img:not(.screen),
+  body::after {
     filter: invert(100%) hue-rotate(180deg);
   }
 }
@@ -56,3 +114,47 @@ a,
 button {
   transition: 0.25s opacity;
 }
+
+.satisfiedBox {
+  margin: 2rem 0;
+  padding-inline-start: 1rem;
+}
+
+.satisfiedBox h2::before {
+  content: "↗ ";
+  margin-inline-start: -1em;
+}
+
+.satisfiedBox a {
+  display: inline-block;
+  vertical-align: baseline;
+  background-color: rgb(var(--bg));
+  transition: all 0.25s;
+}
+
+.satisfiedBox a:hover {
+  filter: invert(100%);
+  text-decoration-color: transparent;
+  padding: 4px;
+  margin: -4px;
+}
+
+.satisfiedBox a:active {
+  translate: 4px 0;
+}
+
+.satisfiedBox a::after {
+  display: inline-block;
+  content: ">>";
+  margin-inline-start: 0;
+  width: 0;
+  opacity: 0.5;
+  overflow: hidden;
+  vertical-align: top;
+  transition: width 0.25s, margin 0.25s;
+}
+
+.satisfiedBox a:hover::after {
+  margin-inline-start: 1ch;
+  width: 2ch;
+}

assets/styles/fader.css

@@ -0,0 +1,23 @@
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+body::before {
+  display: inline-block;
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgb(var(--bg));
+  z-index: 9;
+  pointer-events: none;
+  user-select: none;
+  animation: fade-out 0.5s cubic-bezier(0.87, 0, 0.13, 1) both;
+}

views/components/cakeView.ejs

@@ -1,5 +1,8 @@
-<section class="cakeView">
+<div class="cakeView">
-  <h2><%= title %></h2>
+  <section>
+    <h2><%- title %></h2>
     <img src="<%= image %>" alt="<%= alt %>" title="<%= alt %>" width="128" height="128"/>
     <p><%- description %></p>
-</section>
+    <hr />
+  </section>
+</div>

views/components/specific/head.ejs

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<title>abtmtr.link site commissions</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="/assets/layout.css">
+<link rel="stylesheet" href="/assets/elements.css">
+<link rel="stylesheet" href="/assets/style.css">
+<script>
+  /*to prevent Firefox FOUC, this must be here*/
+  let FF_FOUC_FIX;
+</script>

views/pages/contact.ejs

@@ -1,12 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="utf-8">
+    <%- include(__dirname + "/views/components/specific/head.ejs") %>
-    <title>abtmtr.link site commissions</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/assets/layout.css">
-    <link rel="stylesheet" href="/assets/elements.css">
-    <link rel="stylesheet" href="/assets/style.css">
   </head>
   <body>
     <main>

views/pages/index.ejs

@@ -1,12 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="utf-8">
+    <%- include(__dirname + "/views/components/specific/head.ejs") %>
-    <title>abtmtr.link site commissions</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/assets/layout.css">
-    <link rel="stylesheet" href="/assets/elements.css">
-    <link rel="stylesheet" href="/assets/style.css">
   </head>
   <body>
     <main>
@@ -14,7 +9,7 @@
       <%- include(__dirname + "/views/components/cakeView.ejs", {
         image: "/assets/imgs/homosuckMatkap.png",
         alt: "matkap looking ridiculous with his hands in the air",
-        title: "hey, i'm MeowcaTheoRange.",
+        title: "hey, i'm Meowca&shy;Theo&shy;Range.",
         description: `i've got a feeling you want a <b>good site</b> that's <b>special</b>, <b>performs well</b> on <b>all devices</b>, and <b>pleases new visitors</b> and <b>existing fans</b> alike. 
         you want it to <b>bring attention to what you do</b>, what you <b>dedicate yourself to</b>, what you're <b>passionate about</b>, or <b>what you're selling</b>... but you <b>don't quite have the know-how to get it done</b>.
         

views/pages/pricing.ejs

@@ -1,12 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="utf-8">
+    <%- include(__dirname + "/views/components/specific/head.ejs") %>
-    <title>abtmtr.link site commissions</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/assets/layout.css">
-    <link rel="stylesheet" href="/assets/elements.css">
-    <link rel="stylesheet" href="/assets/style.css">
   </head>
   <body>
     <main>
@@ -60,7 +55,7 @@ est. time: 1-2 weeks`,
         alt: "a couple pages, and a browser with a gallery and an advertisement with an among us crewmate and the word \"adversising [sic]\".",
         title: "good site ($30 USD)",
         description: `this site type is good if you don't need a lot out of your site.
-if you already use some kind of commission management system, and are happy with just making your requests more parseable, this is a good pick for you.
+if you use some kind of commission management system, and are happy with just making your requests more parseable, this is a good pick for you.
 
 minimum deadline: 1 month
 est. time: 2-4 weeks`,
@@ -78,7 +73,7 @@ est. time: 2-4 weeks`,
       <%- include(__dirname + "/views/components/yesNoListView.ejs", {
         image: "/assets/imgs/pricing/type_awesome.png",
         alt: "a portfolio website, with a sale dialog over it. the sale code is \"HIIIIALL\".",
-        title: "awesome site ($80 USD)",
+        title: "awesome site ($50 USD)",
         description: `good site, but better. or: matkap special, but more basic.
 the Nitro Basic of abtmtr.link's site commissions.
 
@@ -88,30 +83,9 @@ minimum deadline: 2 months
 est. time: 1-2 months`,
         yes: [
           ["Everything from <i>good site</i>"],
-          ["20 pages max (incl. homepage)"],
+          ["10 pages max (incl. homepage)"],
           ["functional cookies, local storage, and session storage"],
-          ["Dynamic assets (fetch from other places/APIs)"],
+          ["popups and stuff"],
-          ["framework usage (Next.js, React, EJS)"],
-        ],
-        no: [
-        ]
-      }) %>
-      <%- include(__dirname + "/views/components/yesNoListView.ejs", {
-        image: "/assets/imgs/pricing/type_matkap.png",
-        alt: "matkap sitting wall-eyed at a computer, chewing on grass. he is coding a website displaying the word \"SITE.\" on the screen.",
-        title: "matkap special site ($100 USD)",
-        description: `channel the spirit of matkap and... eat grass or something. i don't know what he does.
-
-this site type is good for handling customer tickets/messages/whatever without requiring a Trello board.
-
-minimum deadline: 4 months
-est. time: 2-3 months`,
-        yes: [
-          ["Everything from <i>awesome site</i>"],
-          ["no page maximum"],
-          ["Forms with custom APIs"],
-          ["Express server"],
-          ["SQLite database"],
         ],
         no: [
         ]
@@ -119,12 +93,13 @@ est. time: 2-3 months`,
       <br />
       <h2>or, i can quote you a site</h2>
       <%- include(__dirname + "/views/components/yesNoListView.ejs", {
-        image: "/assets/imgs/pricing/type_all.png",
+        image: "/assets/imgs/pricing/type_quote.png",
-        alt: "matkap smiling at the viewer, with a browser on the other side. sparkles are around both.",
+        alt: "matkap chewing on a calculator. there's a quote that is reported to be \"$?!?!\". a browser is below it.",
-        title: "quoted site ($20+ USD)",
+        title: "\"site\" ($20+ USD)",
         description: `oh god oh fuck it looks like i'll have to do some mental math.
 
 this site type is good if you need something specific.
+it's also the worst pun i think i've ever made.
 
 price depends on quoted content, plus the base fee.
 (the quote itself is free i'm not gonna charge you for a damn email exchange)

views/pages/tos.ejs

@@ -1,12 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="utf-8">
+    <%- include(__dirname + "/views/components/specific/head.ejs") %>
-    <title>abtmtr.link site commissions</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/assets/layout.css">
-    <link rel="stylesheet" href="/assets/elements.css">
-    <link rel="stylesheet" href="/assets/style.css">
   </head>
   <body>
     <main>

views/pages/whaticando.ejs

@@ -1,12 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="utf-8">
+    <%- include(__dirname + "/views/components/specific/head.ejs") %>
-    <title>abtmtr.link site commissions</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/assets/layout.css">
-    <link rel="stylesheet" href="/assets/elements.css">
-    <link rel="stylesheet" href="/assets/style.css">
   </head>
   <body>
     <main>