import output from require 'params'
import slotty from require 'skooma'
import 'config'

styles = [[
	@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

	:root { container: style; }
	:is(h1, h2, h3, h4, h5, h6) { font-family: "Raleway", sans-serif; }
	:is(code, kbd, var, samp) { font-family: "Fira Code", monospace; }
	.badge { font-family: "Open Sans", sans-serif }
]]

slots = slotty!

slots.footer aside id: "contact"
	* h2 "Social"
	* p
		* "Got feedback? — Tag me on fedi!"
		* br
		* a "@darkwiiplayer@tech.lgbt", href: 'https://tech.lgbt/@darkwiiplayer', rel: 'me'

slots.footer aside id: "git"
	* h2 "Git"
	* ul
		* li a "Github", href: "https://github.com/darkwiiplayer"
		* li a "Gitea", href: "https://git.but.gay/darkwiiplayer"

slots.footer aside id: "platforms"
	* h2 "Federated cloud"
	* p "darkwiiplayer@cloud.but.gay"

css = =>
	link rel: 'stylesheet', href: @

content, data = select 1, ...
html
	lang: "english"
	* head
		* meta name: "view-transition", content: "same-origin"
		* meta charset: "UTF-8"
		* meta name: "viewport", content: "width=device-width"
		* css 'https://darkwiiplayer.github.io/css/all.css'
		* css 'https://darkwiiplayer.github.io/css/schemes/talia.css'
		* css "/css/site.css"
		* style styles
		* slots.head
		* [ link rel: "modulepreload", href: module.url for module in *config.modules when module.preload ]
	* body
		* slots.top
		* header class: 'sticky', style: "view-transition-name: header"
			* h1 "Talia's Blog"
			* nav { class: 'right bar' }
				* ul li a "Home", href: "/"
		* main
			* content slots, data
		* ->
			footer class: "box"
				* gridBox columns: math.min(#slots.footer, 3), class: 'content-padding'
					* slots.footer