mirror of
https://codeberg.org/danielsiepmann/news-reader-php.git
synced 2024-11-24 21:06:09 +01:00
Daniel Siepmann
a4e4f5da0d
Add new read link to each entry. If entry was read the link will be replaced with an unread link. Clicking the link will mark the entry as read or unread. Afterwards a redirect to referrer happens. If it is unkown, for whatever reason, fallback to start. Flash messages are added and rendered to let user know what happened. Also respect already read entries when opening a feed. WIP: Still need to adjust entry listing for buckets. Still need to add tests for new feature. Still need to add new start page to show newest unread entries from all buckets.
110 lines
3.2 KiB
CSS
110 lines
3.2 KiB
CSS
:root {
|
|
--color-background: #2E3436;
|
|
--color-foreground: #D3D7CF;
|
|
--color-blue-light: #9CD9F0;
|
|
--color-blue-dark: #72B3CC;
|
|
--color-green-light: #CDEE69;
|
|
--color-green-dark: #8EB33B;
|
|
--color-yellow-light: #FFE377;
|
|
--color-yellow-dark: #D0B03C;
|
|
--color-black-light: #5D5D5D;
|
|
--color-black-dark: #000000;
|
|
--color-white-light: #F7F7F7;
|
|
--color-white-dark: #B0B0B0;
|
|
--spacing-elements: 2rem;
|
|
--spacing-small-elements: 1rem;
|
|
--spacing-large-elements: 4rem;
|
|
--width-border-default: 0.2rem;
|
|
--width-sidebar-max: 15rem;
|
|
--font-family-default: "DejaVu Sans Mono", "Menlo", "Consolas", monospace;
|
|
--font-family-headlines: "Montserrat", "Avenir", "Roboto", sans-serif;
|
|
--font-size-base: 1.5em;
|
|
--font-size-header-base: 2.5em;
|
|
--font-size-header-sub: 1.5em;
|
|
--line-height: 1.33em; }
|
|
|
|
body {
|
|
font-family: var(--font-family-default);
|
|
font-size: var(--font-size-base);
|
|
background: var(--color-background);
|
|
color: var(--color-foreground);
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
h1 {
|
|
color: var(--color-blue-dark);
|
|
font-family: var(--font-family-headlines);
|
|
font-weight: 300;
|
|
font-size: var(--font-size-header-base);
|
|
letter-spacing: .14em;
|
|
word-spacing: .3em; }
|
|
|
|
a {
|
|
color: var(--color-wihte-light);
|
|
text-decoration: underline;
|
|
line-height: var(--line-height); }
|
|
a:active, a:visited {
|
|
color: var(--color-wihte-light); }
|
|
a:hover {
|
|
color: var(--color-black-dark);
|
|
background: var(--color-blue-light); }
|
|
|
|
body > header {
|
|
padding: var(--spacing-small-elements);
|
|
border-bottom: var(--color-blue-light) solid var(--width-border-default); }
|
|
body > header h1 {
|
|
margin: 0; }
|
|
|
|
body > main {
|
|
padding: var(--spacing-elements); }
|
|
body > main header h1 {
|
|
margin: 0; }
|
|
|
|
body > aside ul {
|
|
list-style: none;
|
|
color: var(--color-black-dark);
|
|
margin: var(--spacing-elements); }
|
|
body > aside ul li {
|
|
padding: var(--spacing-small-elements); }
|
|
body > aside ul.success {
|
|
background-color: var(--color-green-dark);
|
|
border: var(--color-green-light) solid var(--width-border-default); }
|
|
body > aside ul.notice {
|
|
background-color: var(--color-yellow-dark);
|
|
border: var(--color-yellow-light) solid var(--width-border-default); }
|
|
|
|
article {
|
|
display: grid;
|
|
grid-template-columns: 50em var(--width-sidebar-max);
|
|
-moz-column-gap: var(--spacing-elements);
|
|
column-gap: var(--spacing-elements);
|
|
margin-top: var(--spacing-large-elements); }
|
|
#layout-entryDetail article {
|
|
margin-top: 0; }
|
|
article h1 {
|
|
grid-column: 1 / 3;
|
|
margin-bottom: 0;
|
|
font-size: var(--font-size-header-sub); }
|
|
#layout-entryDetail article h1 {
|
|
margin-top: 0;
|
|
font-size: var(--font-size-header-base); }
|
|
article main {
|
|
margin-top: var(--spacing-elements);
|
|
line-height: var(--line-height); }
|
|
article main h1,
|
|
article main h2,
|
|
article main h3,
|
|
article main h4,
|
|
article main h5,
|
|
article main h6 {
|
|
font-size: calc(var(--font-size-header-sub) - 0.5); }
|
|
article nav {
|
|
grid-row: 2 / 4;
|
|
grid-column: 2; }
|
|
article nav a {
|
|
display: block;
|
|
margin-bottom: var(--spacing-small-elements); }
|
|
|
|
body > footer {
|
|
padding: var(--spacing-small-elements);
|
|
border-top: var(--color-blue-light) solid var(--width-border-default); }
|