113 lines
3.6 KiB
CSS
113 lines
3.6 KiB
CSS
@font-face {
|
|
font-family: "Special Elite";
|
|
src: url("../fonts/SpecialElite-Regular.ttf") format("truetype");
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "IM Fell English";
|
|
src: url("../fonts/IMFeENrm28P.ttf") format("truetype");
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "IM Fell English";
|
|
src: url("../fonts/IMFeENit28P.ttf") format("truetype");
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Courier Prime";
|
|
src: url("../fonts/CourierPrime-Regular.ttf") format("truetype");
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Courier Prime";
|
|
src: url("../fonts/CourierPrime-Bold.ttf") format("truetype");
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
--font-type: "Special Elite", "Courier New", monospace;
|
|
--font-head: "IM Fell English", Georgia, serif;
|
|
--font-num: "Courier Prime", "Courier New", monospace;
|
|
|
|
--ink: #1c2a44;
|
|
--ink-red: #8d2b1f;
|
|
--ink-green: #2c5a3a;
|
|
--text: #2b2418;
|
|
--paper: #efe4c8;
|
|
--news-paper: #e2dccb;
|
|
|
|
--paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .38 0 0 0 0 .30 0 0 0 0 .18 .5 0 0 0 -.08'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
|
|
--leather-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0 0 0 -.25'/></filter><rect width='100%' height='100%' filter='url(%23l)'/></svg>");
|
|
--wood-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='260'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.45' numOctaves='4' seed='4'/><feColorMatrix values='0 0 0 0 .10 0 0 0 0 .05 0 0 0 0 .02 1.3 0 0 0 -.45'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: #4b2f1b;
|
|
background-image:
|
|
var(--wood-grain),
|
|
repeating-linear-gradient(0deg, transparent 0 258px, rgba(0, 0, 0, 0.5) 258px 261px, rgba(255, 215, 160, 0.07) 261px 263px),
|
|
linear-gradient(90deg, #3d2615, #5d3b22 35%, #47301b 70%, #603d22);
|
|
color: var(--text);
|
|
font-family: var(--font-type);
|
|
font-size: 14px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
#desk {
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
display: grid;
|
|
place-items: center;
|
|
box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
/* Leather desk pad with a stitched border */
|
|
#pad {
|
|
position: relative;
|
|
width: min(1320px, 100%);
|
|
height: calc(100vh - 40px);
|
|
min-height: 640px;
|
|
padding: 30px;
|
|
display: grid;
|
|
grid-template-columns: minmax(360px, 1.1fr) minmax(300px, 1fr) minmax(300px, 0.9fr);
|
|
gap: 24px;
|
|
background-color: #26322c;
|
|
background-image:
|
|
var(--leather-grain),
|
|
radial-gradient(ellipse at 30% 15%, rgba(255, 255, 255, 0.08), transparent 60%);
|
|
border-radius: 16px;
|
|
box-shadow:
|
|
inset 0 0 0 2px rgba(0, 0, 0, 0.45),
|
|
inset 0 0 80px rgba(0, 0, 0, 0.6),
|
|
0 20px 44px rgba(0, 0, 0, 0.65);
|
|
}
|
|
|
|
#pad::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 12px;
|
|
border: 2px dashed rgba(224, 196, 140, 0.4);
|
|
border-radius: 10px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#side {
|
|
display: grid;
|
|
grid-template-rows: auto auto minmax(0, 1fr);
|
|
gap: 18px;
|
|
min-height: 0;
|
|
}
|
|
|
|
#pad > * { min-height: 0; }
|