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 {
|
||||
$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->assignMultiple([
|
||||
'record' => $this->pageLayoutController->pageinfo,
|
||||
|
|
|
@ -44,9 +44,9 @@ $body-color: #D3D7CF;
|
|||
|
||||
$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-monospace: monospace;
|
||||
$font-family-monospace: "DejaVu Sans Mono", "Menlo", "Consolas", monospace;
|
||||
$font-family-base: $font-family-monospace;
|
||||
|
||||
$font-size-base: 1.25rem;
|
||||
|
|
|
@ -2,11 +2,12 @@ aside {
|
|||
&[class^='admonition-'] {
|
||||
border: none;
|
||||
border-left: solid $spacer / 4;
|
||||
padding: $spacer;
|
||||
padding: $spacer * 2;
|
||||
margin-top: $spacer * 2;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
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
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "variables";
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
// Basic layout of content
|
||||
body > main {
|
||||
@extend .row;
|
||||
|
||||
& > header {
|
||||
@extend .col-12;
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
& > section {
|
||||
|
@ -14,9 +16,6 @@ body > main {
|
|||
@extend .col-xl-4;
|
||||
@extend .col-12;
|
||||
|
||||
// For padding
|
||||
@extend article;
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
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) {
|
||||
body > main > aside {
|
||||
margin-top: $spacer * 4;
|
||||
padding-bottom: 0;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
@ -42,70 +101,26 @@ body > main {
|
|||
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 {
|
||||
padding: {
|
||||
top: $spacer * 2;
|
||||
bottom: $spacer * 2;
|
||||
}
|
||||
padding-top: 0;
|
||||
|
||||
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;
|
||||
header h1 {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Make main text on pages and blog posts readable
|
||||
article main,
|
||||
main > section {
|
||||
-webkit-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
|
||||
li,
|
||||
p {
|
||||
text-align: justify;
|
||||
|
||||
// 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 */
|
||||
word-break: break-all;
|
||||
|
@ -113,4 +128,8 @@ main > section {
|
|||
/* Non standard for webkit */
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,16 @@
|
|||
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 {
|
||||
display: none;
|
||||
color: $gray-500;
|
||||
|
@ -39,3 +51,14 @@ img {
|
|||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-inline-start: inherit;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: {
|
||||
bottom: $spacer / 2;
|
||||
top: $spacer / 2;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,9 @@
|
|||
body > header {
|
||||
font-family: $font-family-sans-serif;
|
||||
letter-spacing: 0.5em;
|
||||
word-spacing: 0.75em;
|
||||
font-weight: lighter;
|
||||
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
a {
|
||||
|
|
|
@ -6,7 +6,6 @@ body.LayoutBlogPost {
|
|||
& > header {
|
||||
@extend .col-12;
|
||||
@extend .order-xl-1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
& > aside {
|
||||
@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