Adjust design
This commit is contained in:
parent
2bafe757fc
commit
c6365e6b4a
10 changed files with 125 additions and 70 deletions
|
@ -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,
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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";
|
||||||
|
|
|
@ -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) {
|
article {
|
||||||
section {
|
padding-top: 0;
|
||||||
& > a:first-child + {
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
header h1 {
|
||||||
margin-top: $spacer * 4;
|
padding-top: 0;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
|
||||||
padding: {
|
|
||||||
bottom: $spacer / 2;
|
|
||||||
top: $spacer / 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
|
||||||
& > header {
|
|
||||||
font-size: 1.5em;
|
|
||||||
padding-bottom: $spacer * 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
article {
|
|
||||||
padding: {
|
|
||||||
top: $spacer * 2;
|
|
||||||
bottom: $spacer * 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
margin-bottom: 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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
BIN
Resources/Public/Fonts/DejaVuSansMono-Bold.ttf
Normal file
BIN
Resources/Public/Fonts/DejaVuSansMono-Bold.ttf
Normal file
Binary file not shown.
BIN
Resources/Public/Fonts/DejaVuSansMono.ttf
Normal file
BIN
Resources/Public/Fonts/DejaVuSansMono.ttf
Normal file
Binary file not shown.
Loading…
Reference in a new issue