/* =========================== Site styles Dark theme is the default. The light theme only swaps the variables below (theme.js sets data-theme="light" on ). =========================== */ :root { --page-bg: #414141; --text: #969696; --text-bold: #f5f5f5; --link: #c3c4c1; --link-hover: #f5f5f5; --icon-hover: #ffffff; --toggle-bg: rgba(0, 0, 0, .55); /* Section colors (header bar + header text) */ --about: #84e6c0; --gallery: #ff6277; --tools: #7f71b3; --blog: #ffa6e9; /* Chromatic aberration-ish split: red right, cyan left + glow */ --ca-header-bar: 1px 1px 0 rgba(255, 0, 0, 0.3), 0 -1px 0 rgba(0, 255, 255, 0.3); --ca-header-text: 1px 1px 0 rgba(255, 0, 0, 0.3), -1px -1px 0 rgba(0, 255, 255, 0.3), 0 0 25px rgba(255, 0, 0, 0.3), 0 0 5px rgba(0, 255, 255, 0.5); --ca-link-hover: 1px 1px 0 rgba(255, 0, 0, 0.3), -1px -1px 0 rgba(0, 255, 255, 0.3), 0 0 25px cyan, 0 0 5px red; --ca-menu: 1px 1px 0 rgba(255, 0, 0, 0.3), -1px -1px 0 rgba(0, 255, 255, 0.3), 0 0 25px rgba(255, 0, 0, 0.3), 0 0 5px rgba(0, 255, 255, 0.5); --ca-image: drop-shadow(1px 1px 0 rgba(255, 0, 0, 0.2)) drop-shadow(-1px -1px 0 rgba(0, 255, 255, 0.2)) drop-shadow(0 0 5px rgba(255, 0, 0, 0.3)) drop-shadow(0 0 25px rgba(0, 255, 255, 0.2)); --ca-blog-image: var(--ca-image); } :root[data-theme="light"] { --page-bg: #ffffff; --text: #444444; --text-bold: #444444; --link: #444444; --link-hover: #999999; --icon-hover: #999999; --toggle-bg: rgba(255, 255, 255, .75); --about: #ffc87e; --gallery: #f588af; --tools: #59bff7; --blog: #d3a6ff; --ca-header-bar: 1px 1px 0 rgba(255, 0, 0, 0.22), 0 -1px 0 rgba(0, 255, 255, 0.22); --ca-header-text: 1px 1px 0 rgba(255, 0, 0, 0.22), -1px -1px 0 rgba(0, 255, 255, 0.22), 0 0 18px rgba(0, 255, 255, 0.20), 0 0 4px rgba(255, 0, 0, 0.20); --ca-link-hover: 1px 1px 0 rgba(255, 0, 0, 0.22), -1px -1px 0 rgba(0, 255, 255, 0.22), 0 0 18px rgba(0, 255, 255, 0.25), 0 0 4px rgba(255, 0, 0, 0.25); --ca-menu: 1px 1px 0 rgba(255, 0, 0, 0.22), -1px -1px 0 rgba(0, 255, 255, 0.22), 0 0 20px rgba(255, 0, 0, 0.22), 0 0 4px rgba(0, 255, 255, 0.35); --ca-image: drop-shadow(1px 1px 0 rgba(255, 0, 0, 0.30)) drop-shadow(-1px -1px 0 rgba(0, 255, 255, 0.30)) drop-shadow(0 0 4px rgba(255, 0, 0, 0.30)) drop-shadow(0 0 18px rgba(0, 255, 255, 0.30)); --ca-blog-image: drop-shadow(1px 1px 0 rgba(255, 0, 0, 0.22)) drop-shadow(-1px -1px 0 rgba(0, 255, 255, 0.22)) drop-shadow(0 0 4px rgba(255, 0, 0, 0.22)) drop-shadow(0 0 18px rgba(0, 255, 255, 0.22)); } /* Body */ .main_body { margin: 0; background-color: var(--page-bg); } /* ---------- Icons ---------- */ .social-icons { text-align: center; margin-top: 20px; } .social-icons a { margin: 0 10px; font-size: 24px; } .social-icons a:hover { color: var(--icon-hover); } /* ---------- Images ---------- */ .standard_box { text-align: center; } .image_box { filter: var(--ca-image); } /* Glow around embedded galleries (Picflow) */ .ca_gallery { display: inline-block; filter: drop-shadow(1px 1px 0 rgba(255, 0, 0, 0.2)) drop-shadow(-1px -1px 0 rgba(0, 255, 255, 0.2)) drop-shadow(0 0 5px rgba(255, 0, 0, 0.3)) drop-shadow(0 0 25px rgba(0, 255, 255, 0.2)); } /* ---------- Text ---------- */ .standard_text { font-family: "dejarip-1", "dejarip-2", Helvetica, Arial, sans-serif; padding: 20px 80px 20px 40px; font-size: 13px; font-weight: 400; color: var(--text); } .regular { padding: 20px 80px 20px 50px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: var(--text); } .regular_bold { font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-weight: bold; color: var(--text-bold); } /* ---------- Section Headers ---------- */ .header_cell_index, .header_cell_gallery, .header_cell_blog, .header_cell_tools { padding-left: 0; padding-bottom: 0; vertical-align: bottom; height: 30px; box-shadow: var(--ca-header-bar); } .header_index, .header_gallery, .header_blog, .header_tools { font-family: "museo-sans-1", "museo-sans-2", Helvetica, Arial, sans-serif; background-color: var(--page-bg); padding-bottom: 5px; padding-right: 3px; font-size: 21px; font-weight: 900; text-shadow: var(--ca-header-text); } .header_cell_index { background-color: var(--about); } .header_cell_gallery { background-color: var(--gallery); } .header_cell_tools { background-color: var(--tools); } .header_cell_blog { background-color: var(--blog); } .header_index { color: var(--about); } .header_gallery { color: var(--gallery); } .header_tools { color: var(--tools); } .header_blog { color: var(--blog); } /* ---------- Links ---------- */ a:link, a:visited, a:active { color: var(--link); text-decoration: none; font-weight: 700; } a:hover { color: var(--link-hover); text-decoration: none; font-weight: 700; text-shadow: var(--ca-link-hover); } /* ---------- Tables & Layout ---------- */ .feed_table_index { vertical-align: top; width: 660px; margin-left: auto; margin-right: auto; } .feed_table { vertical-align: top; width: 800px; margin-left: auto; margin-right: auto; } .index_box, .selection_box, .feed_box, .standard_box, .welcome_box { vertical-align: top; } /* Extra strip length below the page content */ .feed_box { padding-bottom: 71px; } .index_box { margin: 0; padding: 0; width: 73px; line-height: 0; /* fix for Firefox */ position: relative; /* anchor for theme toggle + bottom strip */ box-shadow: 1px 1px 0 rgba(255, 0, 0, 0.22), -1px -1px 0 rgba(0, 255, 255, 0.22), 0 0 20px rgba(255, 0, 0, 0.22), 0 0 4px rgba(0, 255, 255, 0.35); } .selection_box { margin: 0; padding: 0; width: 20px; line-height: 0; /* fix for Firefox */ position: relative; /* anchor for bottom strip */ box-shadow: var(--ca-menu); } .top_spacer { height: 80px; width: 100%; } .feed_spacer { height: 50px; } .welcome_box { padding-left: 20px; } /* ---------- Menu Strips ---------- */ /* Top part: fixed 274px image. Bottom part: stretches to the page height. */ .index_color { display: table-row; margin: 0; width: 70px; height: 274px; } .selection_top { display: table-row; margin: 0 0 0 3px; border: 0; } .index_color_bottom, .selection_bottom { position: absolute; top: 274px; left: 0; height: calc(100% - 274px); border: 0; } /* Paint order: strip images above the menu glows, left bar's glow above the menu */ .index_color_bottom, .selection_bottom, .index_color, .selection_top { z-index: 1; } .index_color, .selection_top { position: relative; } .index_box { z-index: 2; } .index_color_bottom { margin: 0; width: 70px; } .selection_bottom { margin: 0 0 0 3px; width: 17px; } /* ---------- Theme Toggle Button (overlay) ---------- */ .theme-toggle-btn { position: absolute; top: 8px; right: 8px; z-index: 10; border: 0; border-radius: 999px; padding: 6px 8px; background: var(--toggle-bg); color: var(--link); cursor: pointer; line-height: 1; } /* ---------- Blog ---------- */ /* Clamp blog embed width and center it */ #blog-list, #blog-list .post, #blog-list .embedded-post { max-width: 100ch; /* readable line length */ margin-left: auto; margin-right: auto; text-align: left; } /* Make content fit the clamp */ #blog-list img, #blog-list video, #blog-list table, #blog-list pre { max-width: 100%; box-sizing: border-box; } #blog-list pre { overflow: auto; padding: 0.75rem; } /* .standard_text has big side padding; reduce it for the blog */ #blog-list.standard_text { padding-left: 20px; padding-right: 20px; } #blog-list .post-content img, #blog-list [itemprop="articleBody"] img, #blog-list .embedded-post img { filter: var(--ca-blog-image); } #blog-list .post { padding-top: 1rem; margin-top: 1rem; } .blog-post-date { font-size: 0.8rem; margin-bottom: 0.25rem; } .blog-post-title { font-weight: 600; margin-bottom: 0.75rem; } .blog-post-more { margin-top: 1rem; font-size: 0.9rem; } .blog-all-posts { margin-top: 2rem; font-size: 0.8rem; } .blog-post-separator { margin: 2rem 0; border: none; border-top: 1px solid rgba(255, 255, 255, 0.1); } /* ---------- Picflow overrides ---------- */ .picflow-gallery-section-container, picflow-gallery .gallery-section-container { background-color: transparent !important; }