einundzwanzig/einundzwanzig.space
1
0
Fork 0
mirror of https://github.com/Einundzwanzig-Podcast/einundzwanzig.space.git synced 2025-12-14 16:56:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add events section (#18)

Browse Source 
* Add events section

* Try build fix

* Header improvements

* Update almost everything
This commit is contained in:
d11n
2021-10-01 09:15:19 +02:00
committed by GitHub
parent f9f920654e
commit 86141a9e7c
24 changed files with 419 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/css/base/elements.css
View File

@@ -48,13 +48,15 @@ h6 {
}
h1 {
font-size: var(--font-size-xxxl);
font-weight: var(--font-weight-regular);
font-size: var(--font-size-xxl);
color: var(--color-secondary);
margin-bottom: var(--space-l);
}
h2 {
font-size: var(--font-size-xl);
color: var(--color-secondary);
margin-bottom: var(--space-l);
}
h3 {
@@ -66,6 +68,10 @@ h4, h5, h6 {
font-size: var(--font-size-m);
}
section {
margin-bottom: var(--space-xxl);
}
a {
outline: 0;
color: var(--color-accent);
@@ -107,8 +113,24 @@ ul ul {
margin-bottom: 0;
}
table {
border-collapse: collapse;
& th,
& td {
border-bottom: 1px solid var(--color-border-medium);
padding: var(--space-s) var(--space-m);
text-align: left;
}
& td {
border-bottom-color:var(--color-border-light);
}
}
p,
ul {
ul,
table {
& + h2 {
margin-top: var(--space-xl);
}

71
src/css/base/header.css
View File

@@ -31,7 +31,11 @@
& a {
color: var(--color-body-text);
&:hover {
&[href="#"] {
cursor: context-menu;
}
&:not([href="#"]):hover {
@media not all and (hover: none) {
color: var(--color-accent);
text-decoration: none;
@@ -67,13 +71,10 @@
@media (--up_to_M) {
margin-bottom: var(--space-s);
font-size: 3.85vw;
margin-top: var(--space-l);
font-size: var(--font-size-l);
}
@media (--M_to_L) {
margin-top: var(--space-m);
font-size: 3.5vw;
}
@media (--L_and_up) {
@media (--M_and_up) {
margin-top: var(--space-l);
font-size: var(--font-size-xl);
}
@@ -82,14 +83,50 @@
display: flex;
align-items: center;
& a {
margin-right: 1em;
& .navItem {
position: relative;
margin-right: var(--space-xl);
overflow: hidden;
text-transform: uppercase;
font-weight: var(--font-weight-bold);
cursor: pointer;
min-width: 3em;
z-index: 1;
&.current {
color: var(--color-accent);
& a {
position: relative;
display: block;
font-weight: var(--font-weight-bold);
z-index: 1;
&.current {
color: var(--color-accent);
}
}
& .more {
position: absolute;
z-index: 0;
top: calc(var(--space-m) * -1);
left: calc(var(--space-l) * -1);
right: calc(var(--space-l) * -1);
opacity: 0;
padding: 1.5em var(--space-l) var(--space-m);
background: var(--color-flyout-bg);
transition-property: background, position, opacity;
transition-duration: var(--transition-duration-fast);
border-radius: var(--space-m);
& a {
margin-top: var(--space-l);
}
}
&:hover,
&:focus {
overflow: visible;
& .more {
opacity: 1;
}
}
}
}
@@ -101,10 +138,6 @@
position: relative;
top: 1px;
@media (--up_to_M) {
visibility: hidden;
}
& svg {
height: 4.5vw;
width: 4.5vw;
@@ -128,6 +161,10 @@
border: 0;
outline: 0;
@media screen and (max-width: 399px) {
visibility: hidden;
}
&:hover {
@media not all and (hover: none) {
color: var(--color-accent);

12
src/css/base/layout.css
View File

@@ -19,16 +19,4 @@
@media (--L_and_up) {
padding-top: var(--space-l);
}
& h1 {
display: none;
}
& h2 {
margin-bottom: var(--space-l);
}
& section {
margin-bottom: var(--space-xxl);
}
}

24
src/css/base/variables.css
View File

@@ -9,14 +9,21 @@
:root {
--color-neutral-0: #fff;
--color-neutral-10: #f2f2f2;
--color-neutral-25: #d2d2d2;
--color-neutral-50: #888;
--color-neutral-75: #555;
--color-neutral-80: #333;
--color-neutral-90: #222;
--color-neutral-95: #1B1B1B;
--color-overlay-bg: rgba(200, 200, 200, .95);
--color-border-light: var(--color-neutral-10);
--color-border-medium: var(--color-neutral-25);
--color-overlay-bg: rgba(230, 230, 230, .95);
--color-body-text: var(--color-neutral-90);
--color-body-bg: var(--color-neutral-0);
--color-card-bg: var(--color-neutral-10);
--color-flyout-bg: var(--color-overlay-bg);
--color-accent: #f7931a;
--color-accent-highlight: #dd7901;
--color-derweg: #00B4CF;
@@ -46,7 +53,6 @@
--font-size-l: 1.25rem;
--font-size-xl: 1.75rem;
--font-size-xxl: 2.5rem;
--font-size-xxxl: 4rem;
@media (--up_to_M) {
--wrap-padding-horizontal: var(--space-l);
@@ -61,18 +67,22 @@
--logo-height: calc((100vw - var(--wrap-padding-horizontal) * 2) / 134 * 12);
}
:root[data-theme="dark"] {
%dark-theme {
--color-body-text: var(--color-neutral-0);
--color-body-bg: var(--color-neutral-90);
--color-card-bg: var(--color-neutral-95);
--color-overlay-bg: rgba(20, 20, 20, .95);
--color-flyout-bg: var(--color-overlay-bg);
--color-border-light: var(--color-neutral-80);
--color-border-medium: var(--color-neutral-75);
}
:root[data-theme="dark"] {
@extend %dark-theme;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--color-body-text: var(--color-neutral-0);
--color-body-bg: var(--color-neutral-90);
--color-card-bg: var(--color-neutral-95);
--color-overlay-bg: rgba(20, 20, 20, .95);
@extend %dark-theme;
}
}

1
src/css/main.css
View File

@@ -11,6 +11,7 @@
@import 'sections/podcast.css';
@import 'sections/team.css';
@import 'sections/meetups.css';
@import 'sections/events.css';
@import 'sections/media.css';
@import 'sections/spenden.css';
@import 'sections/soundboard.css';

5
src/css/sections/events.css Normal file
View File

@@ -0,0 +1,5 @@
#events {
& img {
max-width: 100%;
}
}

18
src/css/sections/podcast.css
View File

@@ -1,4 +1,12 @@
#podcast {
&.podcast-home h1 {
display: none;
}
&.podcast-category h1 {
margin-top: var(--space-l);
}
& .categories {
display: inline-flex;
flex-wrap: wrap;
@@ -25,11 +33,17 @@
text-decoration: none;
}
}
&.current {
color: var(--color-neutral-0);
background-color: var(--color-secondary);
text-decoration: none;
}
}
}
& .current {
margin-bottom: 4rem;
& .latest {
margin-bottom: var(--space-xxl);
}
}

4
src/css/sections/spenden.css
View File

@@ -1,6 +1,6 @@
#spenden {
& h2 {
margin-bottom: var(--space-xl);
& .spenden {
margin-top: var(--space-xxl);
}
}