Last active
November 15, 2022 13:08
-
-
Save Sevichecc/dd534c114a23bb410baeab3287f134e8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Noto+Serif+SC:wght@300;400;500&display=swap"); | |
@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 { | |
--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: #1e293b; | |
--item-meta-li-color-hover: #1e293b; | |
--entry-date-color: #; | |
--input-placeholder-color: #1e293b; | |
--entry-header-border-color: transparent; | |
--pagination-border-color: transparent; | |
--font-family:"IBM Plex Sans", sans-serif,Noto Serif SC, | |
"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: #1e293b; | |
--body-background: #f8fafc; | |
--hr-border-color: #555; | |
--title-color: #0f172a; | |
--link-color: #0f172a; | |
--link-focus-color: #1e293b; | |
--link-hover-color: #0f172a; | |
--header-list-border-color: #333; | |
--header-link-color: #1e293b; | |
--header-link-focus-color: rgba(82, 168, 236, 0.85); | |
--header-link-hover-color: rgba(82, 168, 236, 0.85); | |
--header-active-link-color: #9b9494; | |
--page-header-title-color: #44403c; | |
--page-header-title-border-color: #333; | |
--logo-color: #111827; | |
--logo-hover-color-span: #1e293b; | |
--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, 0.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: #1e293b; | |
--modal-box-shadow: 0 0 10px rgba(82, 168, 236, 0.6); | |
--pagination-link-color: var(--color-white); | |
--category-color: #1e293b; | |
--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, 0.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, 0.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: #bfdbfe; | |
--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: #1e293b; | |
} | |
@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; | |
} | |
@media (max-width: 600px) { | |
.logo { | |
margin-bottom: 40px; | |
} | |
.entry-content { | |
font-size: 1rem; | |
} | |
} | |
.logo a, | |
.logo a span { | |
color: #71717a; | |
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: 0.7; | |
} | |
@media (max-width: 600px) { | |
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: 0.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); | |
} | |
/* .item-title a { | |
/* background: rgb(224, 242, 254, 0.25); */ | |
.item-title a:hover { | |
background: #bfdbfe; | |
transition: all 0.3s; | |
} | |
.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-link-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; | |
} | |
.category a[href="/category/11/entries"] { | |
background-color: #2e363e; | |
border-color: #5b6876; | |
color: #bbd5eb; | |
} | |
.category a[href="/category/12/entries"] { | |
background-color: #0d2816; | |
border-color: #125c1a; | |
color: #1fd622; | |
} | |
.category a[href="/category/13/entries"] { | |
background-color: #2e1528; | |
border-color: #673d56; | |
color: #e697bf; | |
} | |
.category a[href="/category/14/entries"] { | |
background-color: #1e2933; | |
border-color: #3f5772; | |
color: #80b5ea; | |
} | |
.category a[href="/category/15/entries"] { | |
background-color: #252c1d; | |
border-color: #56723f; | |
color: #b0ea80; | |
} | |
.category a[href="/category/16/entries"] { | |
background-color: #25181c; | |
border-color: #723f53; | |
color: #ea80a3; | |
} | |
.category a[href="/category/17/entries"] { | |
background-color: #28280d; | |
border-color: #5c5512; | |
color: #cad61f; | |
} | |
.category a[href="/category/18/entries"] { | |
background-color: #100d28; | |
border-color: #292a81; | |
color: #5654e0; | |
} | |
.category a[href="/category/19/entries"] { | |
background-color: #0d2328; | |
border-color: #296c81; | |
color: #54d4e0; | |
} | |
.category a[href="/category/20/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: 0.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); | |
font-size: 1.15rem; | |
} | |
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: 0.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-content figure img { | |
border: none; | |
border-radius: 8px; | |
margin-bottom: 1rem; | |
} | |
.entry-content img { | |
display: block; | |
margin: 0 auto; | |
} | |
.entry-content figcaption { | |
margin: 0 auto; | |
display: block; | |
text-align: center; | |
} | |
blockquote { | |
font-family: "Noto Sans SC", sans-serif; | |
} | |
.entry-website, | |
.entry-author, | |
.entry-date { | |
color: var(--item-meta-color); | |
opacity: 0.8; | |
} | |
.entry-website img { | |
vertical-align: middle; | |
} | |
.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; | |
} | |
@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 0.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: 0.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: 4px; | |
} | |
.entry-content pre code { | |
font-size: var(--font-size-smaller); | |
} | |
.entry-content pre { | |
line-height: 1.33; | |
padding: 15px; | |
} | |
.entry-content p { | |
margin-top: 0.8rem; | |
} | |
.entry-content img { | |
border: none; | |
border-radius: 8px; | |
} | |
.feed-entries-counter { | |
font-size: var(--font-size-smaller); | |
margin-left: 5px; | |
opacity: 0.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: .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; | |
} | |
/*# sourceMappingURL=style.css.map */ | |
.header a { | |
align-items: center; | |
display: inline-flex; | |
gap: 0.2rem; | |
} | |
.header .logo a { | |
display: inline-block; | |
} | |
// More visible error counter | |
.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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment