near/arnes.space-bagatto
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Allow different layouts for different pages

Browse source
This commit is contained in:
heyarne 2021-07-30 09:43:45 +02:00
commit d2c7ec794b
3 changed files with 83 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

86
assets/style.scss
View file

@ -1,4 +1,10 @@
$font-path: 'ibm-plex';
// the base size of the header svg is 500 * 500, strokes will need to be
// adjusted for exact pixel sizes
$logo-size: 208;
$factor: 1 / ($logo-size / 500);
@import 'ibm-plex/css/ibm-plex.scss';
*, *:before, *:after {
@ -19,25 +25,33 @@ body {
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
margin: 0;
}
h1 {
font-size: 32px;
padding: 0 0 24px;
}
// the base size of the header svg is 500 * 500, strokes will need to be
// adjusted for exact pixel sizes
$logo-size: 216;
$factor: 1 / ($logo-size / 500);
h2 {
font-size: 24px;
padding: 0 0 16px;
}
p {
margin: 0 0 16px;
}
.ten-print {
width: $logo-size;
height: $logo-size;
}
width: $logo-size * 1px;
height: $logo-size * 1px;
.ten-print path {
stroke: #ff005f;
fill: transparent;
stroke-width: 1.5px * $factor;
stroke-linecap: round;
path {
stroke: #ff005f;
fill: transparent;
stroke-width: 1.5px * $factor;
stroke-linecap: round;
}
}
main {
@ -45,21 +59,49 @@ main {
max-width: 960px;
margin: 48px auto 48px 48px;
grid-gap: 32px;
grid-auto-rows: 1fr;
grid-template-columns: repeat(16, 1fr);
// grid-auto-rows: 1fr;
// grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"header header header header"
"nav content content content";
grid-auto-flow: dense;
}
aside {
grid-column: span 4;
header {
grid-area: header;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
nav {
grid-area: nav;
ul {
list-style: none;
margin: 0;
padding: 0;
}
}
article {
grid-column: span 12;
grid-area: content;
ul {
padding: 0 0 0 16px;
margin: 0 0 32px;
}
}
// special page styling
.home { // == main
grid-template-areas:
"header header header header"
"nav nav nav nav";
nav {
ul {
list-style: inside;
padding: 0 0 0 16px;
margin: 0 0 32px;
}
}
}