/* ========================================================= Andrius Dereviancenko — Portfolio Brutalist / experimental, warm-dark palette ========================================================= */ :root { /* Background colors */ --bg: #f2ede4; --bg-raised: #ebe4d8; --bg-panel: #e0d8c8; /* text colors */ --ink: #1a1008; --ink-dim: #5a4535; --ink-faint: #9a8570; /* border/linke colors */ --rule: #d4cabb; --rule-strong: #b0a090; /* accent colors */ --ember: #4a3f8f; --ember-bright: #6355b5; --oxblood: #2e2660; /* light theme colors */ --bg-light: #efe9dd; --bg-raised-light: #e3dcca; --bg-panel-light: #d9d1bb; --ink-light: #1a120b; --ink-dim-light: #55463a; --ink-faint-light: #8b7a66; --rule-light: #c9bfa8; --rule-strong-light: #8b7a66; /* fonts */ --f-display: 'DM Sans', 'Helvetica Neue', sans-serif; --f-body: 'DM Sans', 'Helvetica Neue', sans-serif; --f-mono: 'DM Mono', 'Courier New', monospace; /* layout measures */ --sidebar-w: 240px; --pad: 32px; } /* here basicaly if you got then these rules apply overriting the ones above */ [data-theme="light"] { --bg: var(--bg-light); --bg-raised: var(--bg-raised-light); --bg-panel: var(--bg-panel-light); --ink: var(--ink-light); --ink-dim: var(--ink-dim-light); --ink-faint: var(--ink-faint-light); --rule: var(--rule-light); --rule-strong: var(--rule-strong-light); } * { box-sizing: border-box; margin: 0; padding: 0; } /* two different HTML elements. html = most outer, body is inside html */ html, body { background: var(--bg); color: var(--ink); font-family: var(--f-body); /* sets default text size */ font-size: 15px; /* sets the spacing between the lines of texdt */ line-height: 1.5; /* Makes fonts render on Mac/iOS screens */ -webkit-font-smoothing: antialiased; /* prevents horizontal scrolling */ overflow-x: hidden; } /* THESE ARE THE RESET AND THE UTILITY CLASSES */ /* Removes default browsing styles that you don't want */ /* RESETS */ /* By default browsers make links blue and underline. This removes that - links inherit the color of their parent element instead */ a { color: inherit; text-decoration: none; } /* By default browsers style buttons with their own font, background and border. This strips all that so you start from scratch when styling buttons. */ button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } img, video { /* removes the small gap that appears under images by default */ display: block; /* prevents images from overflowing their container on small screens */ max-width: 100%; } /* UTILITY CLASSES */ /* Makes any text look like a small monospace label — used for dates, tags, buttons throughout the site. */ .mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); } /* Makes any text look like a heading — large, tight letter spacing. */ .display { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.02em; line-height: 0.95; } /* Makes any text uppercase with wide letter spacing. */ .caps { text-transform: uppercase; letter-spacing: 0.14em; } /* DEVIDER LINES */ /* Reusable horizontal divider lines. Add
anywhere in HTML to get a thin line. */ .rule { height: 1px; background: var(--rule); width: 100%; } .rule-strong { height: 1px; background: var(--rule-strong); width: 100%; }