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;
}
}
}

6
index.janet
View file

@ -12,7 +12,7 @@
# build config
# ---
(def base-path "/")
(def base-url "/")
(bagatto/set-output-dir! "site")
# ---
@ -42,7 +42,7 @@
post))
(defn absolute-url [path]
(string base-path path))
(string base-url path))
(defn files-in [base]
(fn []
@ -70,7 +70,7 @@
# ---
(def data {:config {:attrs {:title "arnes.space"
:base-path base-path
:base-url base-url
:stylesheet (absolute-url "assets/style.css")}}
:assets {:src (bagatto/* "assets/*")
:attrs bagatto/parse-base}

31
views.janet
View file

@ -86,15 +86,15 @@
You can call this with some content and have it generate an entire HTML
structure for you.
```
[data nav body &opt raw?]
[page data nav body &opt raw?]
(default raw? false)
(as-html [(html-head data)
[:body
[:main
[:aside
(ten-print body)
[:main {:class page}
[:header (ten-print body)]
[:nav
[:h1 (get-in data [:config :title])]
[:nav nav]]
nav]
[:article (if raw? (html/raw body) body)]]]]))
#
@ -105,23 +105,26 @@
(string/format "%j" jdn))
(defn home [data]
(base data
[]
[[:h1 "Projects"]
(base "home"
data
[[:h2 "Projects"]
[:ul
[:li "Berliner Winter"]
[:li "Vanilla Sky"]
[:li "All My Friends"]
[:li "Kosmopolit"]]
[:h1 "Recent Posts"]
[:h2 "Recent Posts"]
[:ul
(map (fn [post]
[:li [:a {:href (utils/slugify-content data post)} (post "title")]]) (data :posts))]]))
[:li [:a {:href (utils/slugify-content data post)} (post "title")]]) (data :posts))]]
[]))
(defn post [data item]
(base data
(base "post"
data
[:ul
[:li [:a {:href "#"}] "Projects"]
[:li [:a {:href "#"}] "Posts"]
[:li [:a {:href "#"}] "About"]]
[:li [:a {:href (get-in data [:config :base-url])} "Home"]]
[:li [:a {:href "#"} "Projects"]]
[:li [:a {:href "#"} "Posts"]]
[:li [:a {:href "#"} "About"]]]
(bagatto/mmarkdown->html (item :contents)) true))