diff --git a/assets/_animations.scss b/assets/_animations.scss index 5e267de..d73a900 100644 --- a/assets/_animations.scss +++ b/assets/_animations.scss @@ -1,64 +1 @@ -@import 'colors'; - -@keyframes cycle-link-background { - 0% { - background-image: linear-gradient( - to right, - $highlight-3 0%, $highlight-3 10%, - $highlight-1 10%, $highlight-1 20%, - $highlight-2 20%, $highlight-2 30%, - $highlight-3 30%, $highlight-3 40%, - $highlight-2 40%, $highlight-2 50%, - $highlight-3 50%, $highlight-3 60%, - $highlight-1 60%, $highlight-1 70%, - $highlight-3 70%, $highlight-3 80%, - $highlight-1 80%, $highlight-1 90%, - $highlight-2 90%, - ); - } - 25% { - background-image: linear-gradient( - to right, - $highlight-2 0%, $highlight-2 10%, - $highlight-3 10%, $highlight-3 20%, - $highlight-1 20%, $highlight-1 30%, - $highlight-2 30%, $highlight-2 40%, - $highlight-3 40%, $highlight-3 50%, - $highlight-1 50%, $highlight-1 60%, - $highlight-2 60%, $highlight-2 70%, - $highlight-1 70%, $highlight-1 80%, - $highlight-3 80%, $highlight-3 90%, - $highlight-1 90% - ); - } - 50% { - background-image: linear-gradient( - to right, - $highlight-3 0%, $highlight-3 10%, - $highlight-2 10%, $highlight-2 20%, - $highlight-3 20%, $highlight-3 30%, - $highlight-1 30%, $highlight-1 40%, - $highlight-2 40%, $highlight-2 50%, - $highlight-3 50%, $highlight-3 60%, - $highlight-1 60%, $highlight-1 70%, - $highlight-2 70%, $highlight-2 80%, - $highlight-1 80%, $highlight-1 90%, - $highlight-3 90% - ); - } - 75% { - background-image: linear-gradient( - to right, - $highlight-1 0%, $highlight-1 10%, - $highlight-3 10%, $highlight-3 20%, - $highlight-2 20%, $highlight-2 30%, - $highlight-1 30%, $highlight-1 40%, - $highlight-3 40%, $highlight-3 50%, - $highlight-1 50%, $highlight-1 60%, - $highlight-2 60%, $highlight-2 70%, - $highlight-1 70%, $highlight-1 80%, - $highlight-2 80%, $highlight-2 90%, - $highlight-3 90% - ); - } -} +@import 'variables'; diff --git a/assets/_colors.scss b/assets/_colors.scss deleted file mode 100644 index 37c515a..0000000 --- a/assets/_colors.scss +++ /dev/null @@ -1,20 +0,0 @@ -$background: #100e23; -$fill-color: #eeeeee; -$text-color: #ffffff; -$text-darker: #aaaaaa; - -$primary-1: #b239ff; -$primary-2: #670295; -$primary-3: #440069; -$primary-4: #240038; - -$secondary-1: #6800e7; -$secondary-2: #41008b; -$secondary-3: #2a005e; -$secondary-4: #14002f; - -$highlight-1: #05b9ec; -$highlight-2: #0076a9; -$highlight-3: #025d84; -$highlight-4: #002a3a; - diff --git a/assets/_fonts.scss b/assets/_fonts.scss index 5ba660c..bbb6748 100644 --- a/assets/_fonts.scss +++ b/assets/_fonts.scss @@ -1,9 +1,59 @@ +/* space-mono-regular - latin */ @font-face { - font-family: Montserrat; - src: url(Montserrat/Montserrat-Regular.ttf); + font-family: 'Space Mono'; + font-style: normal; + font-weight: 400; + src: local(''), + url('fonts/space-mono-v6-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('fonts/space-mono-v6-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } +/* space-mono-italic - latin */ @font-face { - font-family: Orbitron; - src: url(Orbitron-VariableFont_wght.ttf); + font-family: 'Space Mono'; + font-style: italic; + font-weight: 400; + src: local(''), + url('fonts/space-mono-v6-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('fonts/space-mono-v6-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* space-mono-700 - latin */ +@font-face { + font-family: 'Space Mono'; + font-style: normal; + font-weight: 700; + src: local(''), + url('fonts/space-mono-v6-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('fonts/space-mono-v6-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* space-mono-700italic - latin */ +@font-face { + font-family: 'Space Mono'; + font-style: italic; + font-weight: 700; + src: local(''), + url('fonts/space-mono-v6-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('fonts/space-mono-v6-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* changa-500 - latin */ +@font-face { + font-family: 'Changa'; + font-style: normal; + font-weight: 500; + src: local(''), + url('../fonts/changa-v14-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/changa-v14-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* changa-600 - latin */ +@font-face { + font-family: 'Changa'; + font-style: normal; + font-weight: 600; + src: local(''), + url('../fonts/changa-v14-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../fonts/changa-v14-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } diff --git a/assets/_mixins.scss b/assets/_mixins.scss index 0d3b08a..67a66ae 100644 --- a/assets/_mixins.scss +++ b/assets/_mixins.scss @@ -1,23 +1,9 @@ @mixin heading { - font-family: Orbitron, sans-serif; - font-weight: 900; - text-transform: uppercase; - color: $primary-1; + font-family: Changa, sans-serif; + font-weight: 600; + text-transform: lowercase; } -@mixin hline($width, $height, $c1, $c2, $c3) { - background: repeat-x center bottom / $width $height; - background-image: linear-gradient( - to right, - $c3 0%, $c3 10%, - $c1 10%, $c1 20%, - $c2 20%, $c2 30%, - $c3 30%, $c3 40%, - $c2 40%, $c2 50%, - $c3 50%, $c3 60%, - $c1 60%, $c1 70%, - $c3 70%, $c3 80%, - $c1 80%, $c1 90%, - $c2 90%, $c2 100% - ); +@mixin aberration($offset, $blur: 0) { + filter: drop-shadow(-$offset 0 $blur $color-aberration-red) drop-shadow($offset 0 $blur $color-aberration-cyan); } diff --git a/assets/_variables.scss b/assets/_variables.scss new file mode 100644 index 0000000..955e9a2 --- /dev/null +++ b/assets/_variables.scss @@ -0,0 +1,22 @@ +$color-background: #000; +$color-fill: #eee; +$color-text: #fff; +$color-text-darker: #aaa; +$color-box-frame: #fff; +$color-box-header: #4c4c4c; +$color-box-background: rgba(0, 0, 0, 0.5); + +$color-aberration-red: rgba(255, 0, 0, 0.8); +$color-aberration-cyan: rgba(0, 255, 255, 0.8); + +$color-gradient-ccc-start: #4d7ffa; +$color-gradient-ccc-end: #f035e8; +$color-gradient-info-start: #0079fe; +$color-gradient-info-end: #1cff58; +$color-gradient-community-start: #00d5ff; +$color-gradient-community-end: #b2ff01; +$color-gradient-world-start: #ffb319; +$color-gradient-world-end: #5f24f8; + +$gap-horizontal: 17px; +$gap-vertical: 14px; diff --git a/assets/style.scss b/assets/style.scss index 918abcd..84e625e 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -1,71 +1,133 @@ @import 'animations'; @import 'breakpoints'; -@import 'colors'; +@import 'variables'; @import 'fonts'; @import 'mixins'; -* { - font-family: Montserrat, sans-serif; +html { + font-family: 'Space Mono', sans-serif; box-sizing: border-box; margin: 0; padding: 0; } +*, *::before, *::after { + box-sizing: inherit; +} + +.testus { +} + body { - background: $background; - color: $text-color; + background: $color-background; + background-image: + url('layout/bg_pixels.gif'), + url('layout/grid.png'), + linear-gradient(-45deg, $color-gradient-community-start, $color-gradient-community-end), + url('layout/background_mobile_01.jpg'); + background-blend-mode: + normal, + normal, + multiply, + normal; + background-attachment: + scroll, + fixed, + scroll, + fixed; + background-size: + cover, + cover, + 100% 100%, + cover; + background-repeat: no-repeat; + background-position: center; + color: $color-text; display: flex; flex-direction: column; min-height: 100vh; + align-items: center; + margin: 0; + + &::after { + content: ''; + display: block; + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + pointer-events: none; + background-image: + url('layout/vcr_overlay.png'), + radial-gradient(transparent, transparent, rgba(0, 0, 0, 0.5)); + } + + @media (min-width: $small) { + background-image: + url('layout/bg_pixels.gif'), + url('layout/grid.png'), + linear-gradient(-45deg, $color-gradient-community-start, $color-gradient-community-end) + url('layout/background_desktop_01.jpg'); + } } h1, h2, h3, h4, h5, h6, p, ul { - margin-top: 0.5em; - padding: 0 0.5rem; - - &:last-child { - margin-bottom: 0.5em; - } + margin-bottom: 1em; + margin-top: 1em; } h1, h2, h3, h4, h5, h6 { @include heading; } -h1, footer { - padding-bottom: 0.2em; - @include hline(250px, 4px, $primary-1, $primary-2, $primary-3); +h1 { + font-size: 3em; + text-align: center; } -a:not(.nav-logo) { - text-decoration: none; - color: $highlight-1; - text-shadow: -1px 1px 0 $background, 0 1px 0 $background, 1px 1px 0 $background; - @include hline(10em, 2px, $highlight-1, $highlight-2, $highlight-3); +a { + text-decoration: underline; + color: inherit; + transition: filter 0.2s ease 0s; &:hover, &:focus { - animation: cycle-link-background 2s steps(4) infinite 0ms; + @include aberration(0.05em, 0.001em) } } +.nav-logo { + text-decoration: none; +} + +.block-link { + display: block; +} + +.read-more-link { + font-size: 1.2em; + font-weight: bold; + text-transform: lowercase; +} + +header { + width: 100%; + padding: $gap-vertical $gap-horizontal; + max-width: $large; +} + main { width: 100%; + padding: $gap-vertical $gap-horizontal; max-width: $large; - margin: 0 auto; - flex-grow: 1; } footer { - background-position: right top; font-size: 0.9em; - color: $text-darker; - width: 100%; max-width: $large; - margin: 0 auto; - padding: 0.5em; - + padding: $gap-vertical $gap-horizontal; display: flex; align-items: center; flex-direction: column; @@ -92,12 +154,12 @@ figure { } &.cclogo { - width:200px; - height:48px; + width: 200px; + height: 48px; } &.fill { - background: $fill-color; + background: $color-fill; padding: 0.5em; } } @@ -141,11 +203,10 @@ table { } thead tr, { - @include hline(10em, 2px, $primary-1, $primary-2, $primary-3) } tr:not(:last-child) { - border-bottom: 1px solid $primary-3; + border-bottom: 1px solid currentColor; } td, th { @@ -159,12 +220,6 @@ table { flex-flow: column wrap; justify-content: flex-end; - &.nav-main { - max-width: $large; - margin: 0 auto; - padding: 0.5em; - } - hr { margin: 0.5em 40%; } @@ -172,7 +227,7 @@ table { .nav-logo { @include heading; text-decoration: none; - color: $text-color; + color: currentColor; margin: 0 auto; @@ -192,12 +247,13 @@ table { align-self: center; margin: 0 0.5em; padding: 0.5em 0; - background-position: center bottom 0.4em; - color: $text-color; - font-family: Orbitron,Montserrat,sans-serif; + font-weight: bold; + font-size: 1.2em; + text-decoration: none; + text-transform: lowercase; &.nav-link-active { - color: $highlight-1; + @include aberration(0.05em, 0.001em) } } @@ -211,6 +267,50 @@ table { } } +.box { + margin: 0; + padding: 0; + border: 1px solid $color-box-frame; + background: $color-box-background; + display: flex; + flex-direction: column; + + .box-header { + font-size: 1.2em; + margin: 0; + padding: 0 $gap-horizontal; + text-align: center; + background: $color-box-frame; + color: $color-box-header; + + a { + text-decoration: none; + } + } + + .box-content { + padding: $gap-vertical $gap-horizontal; + flex-grow: 1; + } + .box-footer { + padding: ($gap-vertical / 2) $gap-horizontal; + } +} + +.box-grid { + margin: 0; + padding: 0; + list-style: none; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + grid-gap: $gap-vertical $gap-horizontal; + + .box { + max-width: 100%; + min-width: 0; + } +} + .date { font-style: italic; } diff --git a/content/news/rc3-franconian-net-infos.de.md b/content/news/rc3-franconian-net-infos.de.md index 2eef4fd..48e3df0 100644 --- a/content/news/rc3-franconian-net-infos.de.md +++ b/content/news/rc3-franconian-net-infos.de.md @@ -6,8 +6,6 @@ menu: parent: News --- -## rC3 franconian.net Infos - Hi, heute beginnt die remote Chaos Experience (rC3) und wir bei franconian.net freuen uns, dass du ein Teil davon bist! diff --git a/i18n/de.toml b/i18n/de.toml index 2fd661c..c408ca0 100644 --- a/i18n/de.toml +++ b/i18n/de.toml @@ -1,2 +1,4 @@ [last_change] other = "Zuletzt geändert" +[read_more] +other = "Weiterlesen" diff --git a/i18n/en.toml b/i18n/en.toml index e62930e..c4efc66 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -1,2 +1,4 @@ [last_change] other = "Last update" +[read_more] +other = "Read more" diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 9540659..4071cfa 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -26,6 +26,7 @@ {{ end }} +
{{ block "main" . }} {{ end }}