Show portfolios

build/style.css

@@ -1,3 +1,11 @@
+@font-face {
+  src: url("/assets/fonts/04b24.ttf");
+  font-display: swap;
+  font-family: "04b24";
+  font-style: normal;
+  font-weight: 400;
+}
+
 /* basic colours */
 
 :root {
@@ -134,3 +142,381 @@ h2.collectingheader {
   top: 0;
   background-color: Canvas;
 }
+
+/* portfolios */
+a:has(div.foliocase) {
+  text-decoration: none;
+}
+
+div.foliocase {
+  display: flex;
+  flex-direction: row;
+  gap: 3px;
+  flex-wrap: wrap;
+  margin-bottom: 5px;
+}
+
+table.portfolio {
+  letter-spacing: 0px;
+  font-family: "04b24", sans-serif;
+  background-color: black;
+  width: 111px;
+  height: 75px;
+  -webkit-font-smoothing: none;
+  font-smooth: never;
+  text-transform: lowercase;
+  white-space: nowrap;
+  font-size: 8px;
+  color: white;
+  /* filter: contrast(1); */
+}
+
+table.portfolio tr:last-of-type {
+  text-align: right;
+}
+
+table.portfolio.palette {
+  background: url("/assets/portfolio/palette.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+table.portfolio.red {
+  background: url("/assets/portfolio/red.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+table.portfolio.orange {
+  background: url("/assets/portfolio/orange.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+table.portfolio.yellow {
+  background: url("/assets/portfolio/yellow.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+table.portfolio.green {
+  background: url("/assets/portfolio/green.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+table.portfolio.blue {
+  background: url("/assets/portfolio/blue.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+table.portfolio.purple {
+  background: url("/assets/portfolio/purple.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+table.portfolio.brown {
+  background: url("/assets/portfolio/brown.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+table.portfolio.gray {
+  background: url("/assets/portfolio/gray.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+table.portfolio td {
+  overflow-x: hidden;
+}
+
+table.portfolio.palette td.deck1 {
+  color: #ff2424;
+}
+
+table.portfolio.palette td.deck2 {
+  color: #ff890d;
+}
+
+table.portfolio.palette td.deck3 {
+  color: #f6d600;
+}
+
+table.portfolio.palette td.deck4 {
+  color: #3bc803;
+}
+
+table.portfolio.palette td.deck5 {
+  color: #1798ea;
+}
+
+table.portfolio.palette td.deck6 {
+  color: #e300f7;
+}
+
+table.portfolio.palette td.deck7 {
+  color: #b57a5e;
+}
+
+table.portfolio.palette td.deck8 {
+  color: #8c8989;
+}
+
+table.portfolio.red td.deck1 {
+  color: rgb(164,1,1);
+}
+
+table.portfolio.red td.deck2 {
+  color: rgb(196,2,2);
+}
+
+table.portfolio.red td.deck3 {
+  color: rgb(210,30,21);
+}
+
+table.portfolio.red td.deck4 {
+  color: rgb(246,25,25);
+}
+
+table.portfolio.red td.deck5 {
+  color: rgb(244,57,48);
+}
+
+table.portfolio.red td.deck6 {
+  color: rgb(222,86,79);
+}
+
+table.portfolio.red td.deck7 {
+  color: rgb(241,149,145);
+}
+
+table.portfolio.red td.deck8 {
+  color: rgb(255,196,196);
+}
+
+table.portfolio.orange td.deck1 {
+  color: rgb(253,107,0);
+}
+
+table.portfolio.orange td.deck2 {
+  color: rgb(255,137,51);
+}
+
+table.portfolio.orange td.deck3 {
+  color: rgb(244,156,78);
+}
+
+table.portfolio.orange td.deck4 {
+  color: rgb(246,165,47);
+}
+
+table.portfolio.orange td.deck5 {
+  color: rgb(235,167,70);
+}
+
+table.portfolio.orange td.deck6 {
+  color: rgb(244,188,109);
+}
+
+table.portfolio.orange td.deck7 {
+  color: rgb(246,194,144);
+}
+
+table.portfolio.orange td.deck8 {
+  color: rgb(250,225,193);
+}
+
+table.portfolio.yellow td.deck1 {
+  color: rgb(187,176,0);
+}
+
+table.portfolio.yellow td.deck2 {
+  color: rgb(226,215,32);
+}
+
+table.portfolio.yellow td.deck3 {
+  color: rgb(246,255,0);
+}
+
+table.portfolio.yellow td.deck4 {
+  color: rgb(255,216,0);
+}
+
+table.portfolio.yellow td.deck5 {
+  color: rgb(249,216,33);
+}
+
+table.portfolio.yellow td.deck6 {
+  color: rgb(252,225,74);
+}
+
+table.portfolio.yellow td.deck7 {
+  color: rgb(250,229,115);
+}
+
+table.portfolio.yellow td.deck8 {
+  color: rgb(255,241,166);
+}
+
+table.portfolio.green td.deck1 {
+  color: rgb(9,140,2);
+}
+
+table.portfolio.green td.deck2 {
+  color: rgb(23,167,47);
+}
+
+table.portfolio.green td.deck3 {
+  color: rgb(15,204,6);
+}
+
+table.portfolio.green td.deck4 {
+  color: rgb(38,220,29);
+}
+
+table.portfolio.green td.deck5 {
+  color: rgb(58,249,89);
+}
+
+table.portfolio.green td.deck6 {
+  color: rgb(111,243,81);
+}
+
+table.portfolio.green td.deck7 {
+  color: rgb(147,247,124);
+}
+
+table.portfolio.green td.deck8 {
+  color: rgb(197,255,183);
+}
+
+table.portfolio.blue td.deck1 {
+  color: rgb(0,30,214);
+}
+
+table.portfolio.blue td.deck2 {
+  color: rgb(14,31,255);
+}
+
+table.portfolio.blue td.deck3 {
+  color: rgb(47,61,240);
+}
+
+table.portfolio.blue td.deck4 {
+  color: rgb(51,102,250);
+}
+
+table.portfolio.blue td.deck5 {
+  color: rgb(93,160,244);
+}
+
+table.portfolio.blue td.deck6 {
+  color: rgb(58,221,250);
+}
+
+table.portfolio.blue td.deck7 {
+  color: rgb(92,253,225);
+}
+
+table.portfolio.blue td.deck8 {
+  color: rgb(161,255,238);
+}
+
+table.portfolio.purple td.deck1 {
+  color: rgb(97,0,171);
+}
+
+table.portfolio.purple td.deck2 {
+  color: rgb(135,2,238);
+}
+
+table.portfolio.purple td.deck3 {
+  color: rgb(159,42,249);
+}
+
+table.portfolio.purple td.deck4 {
+  color: rgb(154,50,234);
+}
+
+table.portfolio.purple td.deck5 {
+  color: rgb(159,57,238);
+}
+
+table.portfolio.purple td.deck6 {
+  color: rgb(154,80,238);
+}
+
+table.portfolio.purple td.deck7 {
+  color: rgb(159,113,244);
+}
+
+table.portfolio.purple td.deck8 {
+  color: rgb(194,161,255);
+}
+
+table.portfolio.brown td.deck1 {
+  color: rgb(147,66,0);
+}
+
+table.portfolio.brown td.deck2 {
+  color: rgb(123,65,17);
+}
+
+table.portfolio.brown td.deck3 {
+  color: rgb(107,73,20);
+}
+
+table.portfolio.brown td.deck4 {
+  color: rgb(113,86,43);
+}
+
+table.portfolio.brown td.deck5 {
+  color: rgb(144,109,76);
+}
+
+table.portfolio.brown td.deck6 {
+  color: rgb(178,139,101);
+}
+
+table.portfolio.brown td.deck7 {
+  color: rgb(189,151,126);
+}
+
+table.portfolio.brown td.deck8 {
+  color: rgb(208,184,168);
+}
+
+table.portfolio.gray td.deck1 {
+  color: rgb(76,74,76);
+}
+
+table.portfolio.gray td.deck2 {
+  color: rgb(108,98,100);
+}
+
+table.portfolio.gray td.deck3 {
+  color: rgb(124,118,116);
+}
+
+table.portfolio.gray td.deck4 {
+  color: rgb(140,126,124);
+}
+
+table.portfolio.gray td.deck5 {
+  color: rgb(156,146,148);
+}
+
+table.portfolio.gray td.deck6 {
+  color: rgb(180,170,172);
+}
+
+table.portfolio.gray td.deck7 {
+  color: rgb(196,182,180);
+}
+
+table.portfolio.gray td.deck8 {
+  color: rgb(228,222,220);
+}