There be a website

app/assets/images/progress.svg

@@ -0,0 +1,31 @@
+<!--
+  pride flag - copyright (c) 2024 ari melody
+
+  this code is provided AS-IS, WITHOUT ANY WARRANTY, to be
+  freely redistributed and/or modified as you please, however
+  retaining this license in any redistribution.
+
+  please use this flag to link to an LGBTQI+-supporting page
+  of your choosing!
+
+  web: https://arimelody.me
+  source: https://git.arimelody.me/ari/prideflag
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120">
+    <path id="red" d="M120,80 L100,100 L120,120 Z" style="fill:#d20605"/>
+    <path id="orange" d="M120,80 V40 L80,80 L100,100 Z" style="fill:#ef9c00"/>
+    <path id="yellow" d="M120,40 V0 L60,60 L80,80 Z" style="fill:#e5fe02"/>
+    <path id="green" d="M120,0 H80 L40,40 L60,60 Z" style="fill:#09be01"/>
+    <path id="blue" d="M80,0 H40 L20,20 L40,40 Z" style="fill:#081a9a"/>
+    <path id="purple" d="M40,0 H0 L20,20 Z" style="fill:#76008a"/>
+
+    <rect id="black" x="60" width="60" height="60" style="fill:#010101"/>
+    <rect id="brown" x="70" width="50" height="50" style="fill:#603814"/>
+    <rect id="lightblue" x="80" width="40" height="40" style="fill:#73d6ed"/>
+    <rect id="pink" x="90" width="30" height="30" style="fill:#ffafc8"/>
+    <rect id="white" x="100" width="20" height="20" style="fill:#fff"/>
+
+    <rect id="intyellow" x="110" width="10" height="10" style="fill:#fed800"/>
+    <circle id="intpurple" cx="120" cy="0" r="5" stroke="#7601ad" stroke-width="2" fill="none"/>
+</svg>

app/assets/stylesheets/application.css

@@ -8,3 +8,363 @@
  *
  * Consider organizing styles into separate files for maintainability.
  */
+
+:root {
+    --background: hsl(214, 67%, 85%);
+    --foreground: hsl(214, 20%, 14%);
+    --border-color: hsl(214, 96%, 48%);
+    --border: var(--border-color) 2px solid;
+    --shadow-color: hsla(214, 96%, 43%, 0.4);
+    --shadow: drop-shadow(8px 8px var(--shadow-color));
+    --shadow-small: drop-shadow(3px 3px var(--shadow-color));
+    --links: hsl(214, 27%, 22%);
+    --links-hover: hsl(214, 27%, 15%);
+    --table-header: hsla(214, 96%, 43%, 0.2);
+}
+
+/* ───────────────────────────────────── Fonts ────────────────────────────────────── */
+@font-face {
+    font-family: "PT Sans";
+    src: url("PTSans-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "PT Sans";
+    src: url("PTSans-Italic.ttf") format("truetype");
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "PT Sans";
+    src: url("PTSans-Bold.ttf") format("truetype");
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "PT Sans";
+    src: url("PTSans-BoldItalic.ttf") format("truetype");
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "PT Serif";
+    src: url("PTSerif-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "PT Serif";
+    src: url("PTSerif-Italic.ttf") format("truetype");
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "PT Serif";
+    src: url("PTSerif-Bold.ttf") format("truetype");
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "PT Serif";
+    src: url("PTSerif-BoldItalic.ttf") format("truetype");
+    font-weight: bold;
+    font-style: italic;
+}
+
+/* ───────────────────────────────────── Pride ────────────────────────────────────── */
+#prideflag {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 120px;
+    transform-origin: 100% 0;
+    transition: transform .5s cubic-bezier(.32,1.63,.41,1.01);
+    z-index: 8008135;
+}
+#prideflag:hover {
+    transform: scale(110%);
+}
+#prideflag:active {
+    transform: scale(110%);
+}
+#prideflag * {
+    pointer-events: all;
+}
+
+/* ───────────────────────────────────── Global ───────────────────────────────────── */
+html {
+    height: 100%;
+    color-scheme: light;
+    scrollbar-color: var(--border-color) var(--background);
+}
+
+body {
+    color: var(--foreground);
+    min-height: 100%;
+    background: url('roscoe_tile.jpg');
+    padding: 5px;
+    font-family: "PT Serif", serif;
+}
+
+img.logo_paw {
+    filter: grayscale(100%) sepia(100%) hue-rotate(180deg) saturate(300%);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 20px 0 0 0;
+}
+
+p,
+ul,
+ol,
+dl,
+menu,
+dir {
+    margin: 0;
+}
+
+hr {
+    border: none;
+    border-top: var(--border);
+}
+
+a {
+    color: var(--links);
+    text-decoration: underline dotted;
+}
+
+a:hover {
+    color: var(--links-hover);
+    text-decoration: underline solid;
+}
+
+div.page-container {
+    width: 800px;
+    margin: 5px auto;
+}
+
+div.page-container > div {
+    background-color: var(--background);
+    filter: var(--shadow);
+    padding: 10px;
+    border: var(--border);
+    margin-bottom: 20px;
+}
+
+div.page-container > div:last-child {
+    margin-bottom: 0;
+}
+
+header {
+    display: grid;
+    grid-template-columns: 64px 1fr;
+    grid-template-rows: 1fr;
+    grid-column-gap: 15px;
+    grid-row-gap: 0;
+    align-items: center;
+}
+
+header img {
+    image-rendering: pixelated;
+}
+
+header h1 {
+    margin: 0;
+    font-style: italic;
+}
+
+header h1,
+header p {
+    display: inline;
+}
+
+main>div {
+    position: relative;
+}
+
+main>div::after {
+    display: block;
+    content: "";
+    clear: both;
+}
+
+div#footer {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 1fr;
+    grid-column-gap: 0;
+    grid-row-gap: 0;
+    align-items: center;
+}
+
+div#footer div:last-child {
+    text-align: right;
+}
+
+div#footer div:last-child img {
+    image-rendering: pixelated;
+    margin: 0;
+    padding: 0;
+    width: 88px;
+    height: 31px;
+}
+
+/** Wah! **/
+div.wah {
+    float: right;
+    border: var(--border);
+    padding: 5px;
+    filter: var(--shadow-small);
+    background-color: var(--background);
+}
+
+div.wah img {
+    display: block;
+}
+
+div.wah h3,
+div.wah p {
+    text-align: center;
+    margin: 5px 0;
+    font-style: italic;
+}
+
+div.wah p {
+    margin-bottom: 0;
+}
+
+div.wah img {
+    width: 250px;
+}
+
+/** Guestbook **/
+table.form input,
+table.form textarea,
+table.form button {
+    background-color: var(--background);
+    border: var(--border);
+    filter: var(--shadow-small);
+}
+
+table.form input,
+table.form textarea {
+    width: 250px;
+}
+
+table.form textarea {
+    resize: none;
+}
+
+table.form button:hover {
+    background-color: var(--border-color);
+    color: var(--background);
+    filter: none;
+}
+
+table.form tr td,
+table.gb-entry-form-container td:last-child {
+    vertical-align: top;
+}
+
+div.gb-entry {
+    border: var(--border);
+    filter: var(--shadow-small);
+    background-color: var(--background);
+    width: 75%;
+    padding: 10px;
+}
+
+/** Music **/
+table.music-top10 {
+    border: var(--border);
+    filter: var(--shadow-small);
+    background-color: var(--background);
+    border-collapse: collapse;
+}
+
+table.music-top10 th,
+table.music-top10 td {
+    padding: 2px 5px;
+}
+
+table.music-top10 th:first-child {
+    text-align: left;
+}
+
+table.music-top10 tr:first-child th {
+    border-right: var(--border);
+    border-bottom: var(--border);
+}
+
+table.music-top10 tr:first-child th:last-child {
+    border-right: none;
+}
+
+table.music-top10 tr td {
+    border-right: var(--border);
+}
+
+table.music-top10 tr td:last-child {
+    border-right: none;
+}
+table.music-top10 tr:first-child th,
+table.music-top10 tr td:first-child {
+    background-color: var(--table-header);
+}
+
+div.current-track {
+    display: grid;
+    grid-template-columns: 180px auto;
+    grid-template-rows: 1fr;
+    grid-column-gap: 10px;
+    align-items: center;
+}
+
+div.current-track img {
+    float: left;
+    filter: var(--shadow-small);
+    border: var(--border);
+    width: 174px;
+    height: 174px;
+}
+
+/** Bookmarks **/
+div.bookmark-category:first-child h2 {
+    margin: 0;
+}
+
+
+
+/* ────────────────────────────────── Rosco & Leko ────────────────────────────────── */
+div.rosco-leko-gallery {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+div.rosco-leko-gallery > div {
+    border: var(--border);
+    padding: 5px;
+    filter: var(--shadow-small);
+    background-color: var(--background);
+    margin: 10px;
+    height: auto;
+}
+
+div.rosco-leko-gallery > div,
+div.rosco-leko-gallery > div img {
+    max-width: 220px;
+}