Adjust design

This commit is contained in:
Daniel Siepmann 2020-01-10 15:50:09 +01:00
parent 2bafe757fc
commit c6365e6b4a
10 changed files with 125 additions and 70 deletions

View file

@ -39,6 +39,10 @@ class PageLayoutHeader
): string { ): string {
$this->pageLayoutController = $pageLayoutController; $this->pageLayoutController = $pageLayoutController;
// TODO: Check whether two levels up is uid 2, which holds all blog posts
// To prevent rendering on non blog posts
// Maybe we have rootline ?
$view = $this->getView(); $view = $this->getView();
$view->assignMultiple([ $view->assignMultiple([
'record' => $this->pageLayoutController->pageinfo, 'record' => $this->pageLayoutController->pageinfo,

View file

@ -44,9 +44,9 @@ $body-color: #D3D7CF;
$text-muted: $white-dark; $text-muted: $white-dark;
$font-family-sans-serif: "Helvetica", sans-serif; $font-family-sans-serif: 'Montserrat', 'Avenir', 'Roboto', sans-serif;
$font-family-serif: "Georgia", serif; $font-family-serif: "Georgia", serif;
$font-family-monospace: monospace; $font-family-monospace: "DejaVu Sans Mono", "Menlo", "Consolas", monospace;
$font-family-base: $font-family-monospace; $font-family-base: $font-family-monospace;
$font-size-base: 1.25rem; $font-size-base: 1.25rem;

View file

@ -2,11 +2,12 @@ aside {
&[class^='admonition-'] { &[class^='admonition-'] {
border: none; border: none;
border-left: solid $spacer / 4; border-left: solid $spacer / 4;
padding: $spacer; padding: $spacer * 2;
margin-top: $spacer * 2; margin-top: $spacer * 2;
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
padding-top: 0; padding-top: 0;
letter-spacing: 1em;
} }
} }

View file

@ -1,3 +1,18 @@
// Increases download size a lot, so better do not include for now
// @font-face {
// font-family: "DejaVu Sans Mono";
// src: local("DejaVuSansMono"),
// local("DejaVu Sans Mono"),
// url('/typo3conf/ext/ds_site/Resources/Public/Fonts/DejaVuSansMono.ttf') format("truetype");
// }
// @font-face {
// font-family: "DejaVu Sans";
// src: local("DejaVuSansBold"),
// local("DejaVu Sans Bold"),
// url('/typo3conf/ext/ds_site/Resources/Public/Fonts/DejaVuSansBold.ttf') format("truetype");
// font-weight: bold;
// }
// Required // Required
@import "bootstrap/scss/functions"; @import "bootstrap/scss/functions";
@import "variables"; @import "variables";

View file

@ -1,8 +1,10 @@
// Basic layout of content
body > main { body > main {
@extend .row; @extend .row;
& > header { & > header {
@extend .col-12; @extend .col-12;
margin-bottom: $spacer * 2;
} }
& > section { & > section {
@ -14,9 +16,6 @@ body > main {
@extend .col-xl-4; @extend .col-xl-4;
@extend .col-12; @extend .col-12;
// For padding
@extend article;
nav ul { nav ul {
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
@ -24,8 +23,68 @@ body > main {
} }
} }
aside,
main > header {
h1, h2, h3, h4, h5, h6 {
padding : 0;
margin: 0;
}
}
section > article {
margin-bottom: 4rem;
&:last-of-type {
margin-bottom: 0;
}
}
article {
&:first-of-type {
padding-top: 0;
}
main {
h1:first-of-type {
padding-top: 0;
}
}
& > header {
font-size: 1.25em;
margin-bottom: $spacer * 2;
h1, h2, h3, h4, h5, h6 {
padding-bottom: 0;
}
p {
font-size: 0.75em;
margin: 0;
}
}
}
main > section > h2:first-of-type,
main article h1 {
padding-top: 0;
}
aside {
h1 {
font-size: 1.5em;
}
nav {
h1 {
font-size: 1.25em;
}
}
}
@media (max-width: 1439px) { @media (max-width: 1439px) {
body > main > aside { body > main > aside {
margin-top: $spacer * 4;
padding-bottom: 0; padding-bottom: 0;
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@ -42,70 +101,26 @@ body > main {
display: inline; display: inline;
} }
} }
}
@media (min-width: 1440px) {
section {
& > a:first-child + {
h1, h2, h3, h4, h5, h6 {
margin-top: $spacer * 4;
}
}
}
}
li {
padding: {
bottom: $spacer / 2;
top: $spacer / 2;
}
}
section {
& > header {
font-size: 1.5em;
padding-bottom: $spacer * 2;
}
}
article { article {
padding: { padding-top: 0;
top: $spacer * 2;
bottom: $spacer * 2;
}
h1, h2, h3, h4, h5, h6 { header h1 {
margin-bottom: 0; padding-top: 0;
padding: {
top: $spacer * 2;
bottom: $spacer;
}
}
& > header {
font-size: 1.25em;
margin-bottom: $spacer * 2;
h1, h2, h3, h4, h5, h6 {
margin-bottom: 0;
padding-bottom: 0;
}
p {
font-size: 0.75em;
margin: 0;
} }
} }
} }
// Make main text on pages and blog posts readable
article main, article main,
main > section { main > section {
-webkit-hyphens: auto; -webkit-hyphens: auto;
-ms-hyphens: auto; -ms-hyphens: auto;
hyphens: auto; hyphens: auto;
li,
p { p {
text-align: justify;
// SOURCE: https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ // SOURCE: https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */ /* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
word-break: break-all; word-break: break-all;
@ -113,4 +128,8 @@ main > section {
/* Non standard for webkit */ /* Non standard for webkit */
word-break: break-word; word-break: break-word;
} }
p {
text-align: justify;
}
} }

View file

@ -1,4 +1,16 @@
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: $font-family-sans-serif;
letter-spacing: 0.14em;
font-weight: 300;
word-spacing: 0.3em;
margin: 0;
padding: {
top: $spacer * 4;
bottom: $spacer * 1;
}
small a { small a {
display: none; display: none;
color: $gray-500; color: $gray-500;
@ -39,3 +51,14 @@ img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
ul {
padding-inline-start: inherit;
}
li {
padding: {
bottom: $spacer / 2;
top: $spacer / 2;
}
}

View file

@ -1,4 +1,9 @@
body > header { body > header {
font-family: $font-family-sans-serif;
letter-spacing: 0.5em;
word-spacing: 0.75em;
font-weight: lighter;
padding-bottom: $spacer * 4; padding-bottom: $spacer * 4;
a { a {

View file

@ -6,7 +6,6 @@ body.LayoutBlogPost {
& > header { & > header {
@extend .col-12; @extend .col-12;
@extend .order-xl-1; @extend .order-xl-1;
margin-bottom: 0;
} }
& > aside { & > aside {
@extend .col-12; @extend .col-12;
@ -29,14 +28,3 @@ body.LayoutBlogPost {
} }
} }
} }
@media (max-width: 1439px) {
body.LayoutBlogPost {
article {
padding-top: 0;
header h1 {
padding-top: 0;
}
}
}
}

Binary file not shown.

Binary file not shown.