style.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&display=swap");:root{--color-white: #fff;--width-body: 900px;--item-title-link-line-height: 1.23;--entry-content-line-height: 1.5;--item-title-link-font-size: 28px;--font-size-smaller: 16px;--font-size-meta: var(--font-size-smaller);--font-size-larger: 20px;--font-size-body: 18px;--item-meta-color: #fff;--item-meta-li-color-hover: #fff;--entry-date-color: #fff;--input-placeholder-color: #fff;--entry-header-border-color: transparent;--pagination-border-color: transparent;--font-family: "Inter", system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--body-color: #efefef;--body-background: #0d1118;--hr-border-color: #555;--title-color: var(--color-white);--link-color: var(--color-white);--link-focus-color: #ddd;--link-hover-color: #ddd;--header-list-border-color: #333;--header-link-color: #ddd;--header-link-focus-color: rgba(82, 168, 236, .85);--header-link-hover-color: rgba(82, 168, 236, .85);--header-active-link-color: #9b9494;--page-header-title-color: var(--color-white);--page-header-title-border-color: #333;--logo-color: #bbb;--logo-hover-color-span: #bbb;--table-border-color: #555;--table-th-background: #333;--table-th-color: var(--color-white);--table-tr-hover-background-color: #333;--table-tr-hover-color: var(--color-white);--button-primary-border-color: transparent;--button-primary-background: #000;--button-primary-color: #fff;--button-primary-focus-border-color: #888;--button-primary-focus-background: #555;--input-border: 0;--input-background: #000;--input-color: #fff;--input-focus-color: #fff;--input-focus-border-color: rgba(82, 168, 236, .8);--input-focus-box-shadow: 0;--alert-color: #efefef;--alert-background-color: transparent;--alert-border-color: transparent;--alert-success-color: #2eb54d;--alert-success-background-color: transparent;--alert-success-border-color: transparent;--alert-error-color: #efefef;--alert-error-background-color: #333;--alert-error-border-color: #888;--alert-info-color: #efefef;--alert-info-background-color: transparent;--alert-info-border-color: transparent;--panel-background: #333;--panel-border-color: #555;--panel-color: #9b9b9b;--modal-background: #333;--modal-color: #efefef;--modal-box-shadow: 0 0 10px rgba(82, 168, 236, .6);--pagination-link-color: var(--color-white);--category-color: #efefef;--category-background-color: #333;--category-border-color: #888;--category-link-color: #999;--category-link-hover-color: var(--color-white);--item-border-color: transparent;--item-padding: 10px;--item-title-link-font-weight: 700;--item-status-read-title-link-color: #aaa;--item-status-read-title-focus-color: rgba(82, 168, 236, .6);--item-meta-focus-color: var(--color-white);--item-meta-li-color: #888;--current-item-border-width: 2px;--current-item-border-color: transparent;--current-item-box-shadow: 0 0 8px rgba(82, 168, 236, .6);--entry-header-title-link-color: var(--color-white);--entry-content-color: var(--color-white);--entry-content-code-color: var(--color-white);--entry-content-code-background: #000;--entry-content-code-border-color: transparent;--entry-content-quote-color: #777;--entry-content-abbr-border-color: #777;--entry-enclosure-border-color: #333;--parsing-error-color: #eee;--feed-parsing-error-background-color: transparent;--keyboard-shortcuts-li-color: #9b9b9b;--counter-color: #bbb}@media (max-width: 600px){:root{--item-title-link-font-size: 24px}}@media (max-width: 600px){:root{--item-padding: 15px}}.logo{color:var(--color-white);font-family:'Merriweather', serif;font-weight:900;margin-left:0;position:relative}.logo a,.logo a span{color:var(--color-white);font-family:'Merriweather', serif;font-weight:900;letter-spacing:0;transition:opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1),background-color 0.2s cubic-bezier(0.19, 1, 0.22, 1)}.logo a:hover,.logo a:hover span,.logo a:focus,.logo a:focus span{color:var(--color-white);opacity:.7}@media (max-width: 600px){.logo{margin-bottom:40px}}body{font-size:var(--font-size-body);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;max-width:var(--width-body);text-rendering:geometricPrecision}body main,body .header{padding-bottom:var(--item-padding);padding-left:var(--item-padding);padding-right:var(--item-padding);padding-top:var(--item-padding)}.header ul,.header li{list-style:none}.flash-message,.alert-success{padding-left:5px;padding-right:5px}.page-header>h1{padding-bottom:10px}.page-header+p.alert,.page-header+p.alert.alert-info{background-image:url("https://www.rollemaa.fi/done.svg");background-position:center bottom;background-repeat:no-repeat;background-size:400px auto;border-radius:4px;height:400px;overflow:auto;text-align:center}@media (max-width: 600px){.page-header+p.alert,.page-header+p.alert.alert-info{background-size:230px auto;height:250px}}.page-header>ul{list-style:none;margin-left:0;margin-top:10px;padding-left:0}.page-header>ul a{font-size:var(--font-size-larger);opacity:.5;text-decoration:none;transition:opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1),background-color 0.2s cubic-bezier(0.19, 1, 0.22, 1)}.page-header>ul a:hover,.page-header>ul a:focus{opacity:1}.items{overflow:visible}body .item{display:grid;margin-bottom:20px;margin-top:30px;overflow:visible;padding-left:0;padding-right:0}.item-title img{display:none}.item-title{display:block;font-size:var(--item-title-link-font-size);line-height:var(--item-title-link-line-height)}.category{background-color:transparent;border:0;border-radius:0;clear:left;display:inline-block;float:left;font-size:inherit;margin-bottom:10px;margin-left:0;margin-right:10px;margin-top:10px;padding:0;white-space:normal}.category a{border:1px solid transparent;border-radius:2em;color:var(--category-color);font-size:12px;font-weight:500;line-height:18px;padding:2px 7px}.category a[href="/category/1/entries"]{background-color:#2e363e;border-color:#5b6876;color:#bbd5eb}.category a[href="/category/2/entries"]{background-color:#0d2816;border-color:#125c1a;color:#1fd622}.category a[href="/category/3/entries"]{background-color:#2e1528;border-color:#673d56;color:#e697bf}.category a[href="/category/4/entries"]{background-color:#1e2933;border-color:#3f5772;color:#80b5ea}.category a[href="/category/5/entries"]{background-color:#252c1d;border-color:#56723f;color:#b0ea80}.category a[href="/category/6/entries"]{background-color:#25181c;border-color:#723f53;color:#ea80a3}.category a[href="/category/7/entries"]{background-color:#28280d;border-color:#5c5512;color:#cad61f}.category a[href="/category/8/entries"]{background-color:#100d28;border-color:#292a81;color:#5654e0}.category a[href="/category/9/entries"]{background-color:#0d2328;border-color:#296c81;color:#54d4e0}.category a[href="/category/10/entries"]{background-color:#20280d;border-color:#628129;color:#b6e054}.item-meta li,.item-meta a{color:var(--item-meta-li-color)}.item-meta a{transition:color 0.5s cubic-bezier(0.19, 1, 0.22, 1),background-color 0.2s cubic-bezier(0.19, 1, 0.22, 1)}.item-meta a:hover,.item-meta a:focus{color:var(--item-meta-li-color-hover)}.item-meta .item-meta-info{margin-top:5px}.item-meta .item-meta-icons{clear:both;float:left;opacity:.7;transition:opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1),background-color 0.2s cubic-bezier(0.19, 1, 0.22, 1)}.item-meta .item-meta-icons:hover,.item-meta .item-meta-icons:focus{opacity:1}.entry{padding:0}.entry-content{line-height:var(--entry-content-line-height)}body .entry-header h1{margin:80px 0 20px}.entry-header{margin-bottom:40px;margin-top:60px;position:relative}.entry-header .entry-date{font-size:16px;font-style:normal;margin-bottom:-30px;margin-top:0;opacity:.4;text-align:right}.entry-header .entry-meta{display:flex;flex-wrap:wrap;margin-bottom:10px}.entry-header .entry-meta *{font-size:var(--font-size-meta)}.entry-header .entry-meta .category{float:none;margin-bottom:20px;margin-top:0;order:1;width:100%}.entry-header .entry-meta .category a{font-weight:500;line-height:18px;padding:4px 12px}.entry-header .entry-meta .entry-website{filter:grayscale(100%);order:2;position:absolute;right:0}.entry-header .entry-meta .entry-author{margin-left:0;margin-top:25px;order:3;position:absolute;right:0}@media (max-width: 600px){.entry-header,body .entry-header h1{margin-top:0}}.entry header h1 a:hover,.entry header h1 a:focus{color:var(--color-white)}.entry-website,.entry-author,.entry-date{color:var(--item-meta-color);opacity:.8}.entry-website a,.entry-author a,.entry-date a{color:var(--item-meta-color);opacity:1}.item-meta .icon,.entry-actions .icon{margin-right:5px}a:focus{outline:max(0.1em, 0.1em) dashed currentColor;outline-offset:.35em}@media (prefers-reduced-motion: no-preference){.item.current-item,.item,:focus,*:focus,[data-whatinput="keyboard"] :focus,[data-whatinput="keyboard"] a:focus{outline-offset:5px;transition:outline-offset .25s ease}}.pagination-top{display:none}.pagination{padding:var(--item-padding)}body .pagination-bottom{margin-bottom:60px}body .pagination-bottom a{font-size:var(--font-size-smaller);text-decoration:none}.page-footer{margin-bottom:30px;margin-top:30px;padding-left:0;padding-right:0}.page-footer a{font-size:var(--font-size-larger);opacity:.5;text-decoration:none;transition:opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1),background-color 0.2s cubic-bezier(0.19, 1, 0.22, 1)}.page-footer a:hover,.page-footer a:focus{opacity:1}.page-header li,.page-footer li{list-style:none}body .page-header ul,body .page-footer ul{margin-left:0}.entry-content pre,.entry-content code{border-radius:6px}.entry-content pre code{font-size:var(--font-size-smaller)}.entry-content pre{line-height:1.33;padding:15px}.feed-entries-counter{font-size:var(--font-size-smaller);margin-left:5px;opacity:.5;position:relative;top:12px}input[type="search"],input[type="url"],input[type="password"],input[type="text"],input[type="number"],select,textarea{background-color:var(--input-background);border:0;border-radius:0;color:var(--input-color);padding:10px}.button-primary{border:0;border-radius:0;padding:10px 20px}article.feed-parsing-error{border-color:transparent}.parsing-error{margin-top:10px}.item.current-item{border:1px dotted var(--item-border-color);box-shadow:none;display:grid;margin-bottom:20px;margin-top:30px;outline:max(0.2em, 0.2em) dashed #3df57f;outline-offset:20px;overflow:visible;padding-bottom:var(--item-padding);padding-left:0;padding-right:0;padding-top:var(--item-padding)}.item.current-item *:focus{outline:none}.header a{align-items:center;display:inline-flex;gap:.2rem}.header .logo a{display:inline-block}.unread-counter-wrapper,.error-feeds-counter-wrapper{visibility:hidden}.unread-counter,.error-feeds-counter{visibility:visible}.header a .unread-counter,.header a .error-feeds-counter{align-items:center;border-radius:50%;color:#fff !important;display:inline-flex;font-size:11px;font-weight:700;height:22px;justify-content:center;line-height:1.5;width:22px}.header a .error-feeds-counter{background-color:#d96d6d}.header a .unread-counter{background-color:#93d96d}