/* * THEME: SKETCHBOOK (HAND-DRAWN) v2 * Generated for the Rum Review Log * - Redesigned tables for a more unified, hand-drawn chart feel. * * NOTE: Ensure the viewport meta tag is in your HTML for mobile to work. * */ /* --- FONT IMPORT --- */ @import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap'); /* --- ROOT VARIABLES & GLOBAL STYLES --- */ :root { --bg-color: #F8F4E8; /* Paper */ --card-bg-color: #FFFFFF; --text-color: #333333; --border-color: #000000; --accent-color: #3498db; /* Blue */ --border-radius: 8px 12px 7px 14px; /* Imperfect radius */ --sticker-shadow: 4px 4px 0px var(--border-color); --main-font: 'Patrick Hand', cursive; } *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--bg-color); color: var(--text-color); font-family: var(--main-font); font-size: 20px; line-height: 1.6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } /* --- TYPOGRAPHY & LINKS --- */ h1, h2, h3, h4, h5, h6 { font-family: var(--main-font); margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.2; } a { color: var(--accent-color); text-decoration: none; transition: all 0.2s ease-out; } a:hover { color: #e74c3c; /* Red */ } /* --- LAYOUT & MAIN CONTAINERS --- */ #site-header, main, footer { max-width: 960px; margin-left: auto; margin-right: auto; } #site-header { margin-top: 2rem; margin-bottom: 1.5rem; padding: 1.5rem; background: var(--card-bg-color); border: 2px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--sticker-shadow); } #site-header nav { padding: 0; gap: 1.5rem; } #site-header nav .site-logo { margin-left: 0; } #site-header h1 { margin: 0; margin-right: 0; font-size: 2rem; } footer { text-align: center; margin-top: 4rem; padding: 2rem 0; } /* --- POSTS LIST PAGE --- */ .posts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2.5rem; padding: 0; margin: 0; } article.post-preview { background-color: var(--card-bg-color); border: 2px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--sticker-shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease-out; } article.post-preview:hover { transform: rotate(2deg) scale(1.02); } .post-preview .featured-image-preview { width: 100%; height: auto; object-fit: cover; display: block; } .post-preview .post-content { padding: 1.5rem; flex-grow: 1; } .post-preview h3 { margin: 0 0 0.5rem 0; font-size: 1.8rem; } /* --- SINGLE POST PAGE --- */ article > header { margin-bottom: 2rem; text-align: center; } article > header .featured-image { display: inline-block; margin-top: 2rem; max-width: 100%; height: auto; width: auto; border: 2px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--sticker-shadow); } .rating-badge { border: 2px solid var(--border-color) !important; box-shadow: var(--sticker-shadow) !important; border-radius: 50px !important; background: #f1c40f !important; /* Yellow */ color: var(--border-color) !important; padding: 0.6rem 1rem !important; } .review-layout.card { padding: 0; } /* v2 UPDATE: New table styling */ table.specs, table.ratings { width: 100%; margin-bottom: 2rem; background: var(--card-bg-color); border: 2px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--sticker-shadow); border-collapse: collapse; padding: 1rem; } table.specs th, table.specs td, table.ratings th, table.ratings td { padding: 0.75rem; text-align: left; /* Resetting individual styles from v1 */ background: none; border: none; border-radius: 0; box-shadow: none; } table tr { /* Wavy line SVG for the border image */ border-bottom: 3px solid transparent; /* border-image: url("data:image/svg+xml,%3csvg width='100' height='4' viewBox='0 0 100 4' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M-10 2c15 0 15 2 30 2s15-2 30-2 15 2 30 2 15-2 30-2' stroke='%23000' stroke-width='1' fill='none' stroke-linecap='round'/%3e%3c/svg%3e") 1 stretch; */ } table tr:last-child { border-bottom: none; } /* End of v2 table update */ /* ============================================= */ /* --- RESPONSIVE ADJUSTMENTS --- */ /* ============================================= */ @media (max-width: 600px) { #site-header, main { padding-left: 1rem; padding-right: 1rem; } main { margin-top: 1rem; } .posts-list { grid-template-columns: 1fr; } }