mirror of
https://codeberg.org/danielsiepmann/news-reader-php.git
synced 2024-11-22 20:26:09 +01:00
Daniel Siepmann
bed87f8a10
Don't have left sidebar. Add small sidebar to the right of each entry to interact with each entry.
93 lines
2.6 KiB
CSS
93 lines
2.6 KiB
CSS
:root {
|
|
--color-background: #2E3436;
|
|
--color-foreground: #D3D7CF;
|
|
--color-blue-light: #9CD9F0;
|
|
--color-blue-dark: #72B3CC;
|
|
--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; }
|
|
|
|
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); }
|