knutsen.co

Knutsen Homepage Source - knutsen.co
git clone git://git.knutsen.co/knutsen.co
Log | Files | Refs | README | LICENSE

commit 2e1a23f82dd4670691fddd05a70714f64ef3f16e
parent 803303fcf30139960a9c32d54e38302a93b7f58e
Author: knutsen <samuel@knutsen.co>
Date:   Sun, 21 Mar 2021 22:28:02 +0000

Make slightly more mobile friendly.

Diffstat:
Mabout.sex | 6+++---
Acomponents/date-mark.sex | 9+++++++++
Acomponents/footer.sex | 15+++++++++++++++
Acomponents/head.sex | 9+++++++++
Acomponents/header.sex | 24++++++++++++++++++++++++
Acomponents/nav.sex | 29+++++++++++++++++++++++++++++
Acomponents/source.sex | 7+++++++
Ddate-mark.sex | 12------------
Memail.sex | 6+++---
Dfooter.sex | 3---
Dhead.sex | 28----------------------------
Dheader.sex | 24------------------------
Mindex.sex | 6+++---
Dsource.sex | 10----------
Mstyles/main.sex | 7++++---
15 files changed, 106 insertions(+), 89 deletions(-)

diff --git a/about.sex b/about.sex @@ -3,11 +3,11 @@ (!DOCTYPE html) (html :lang en (head - (%include "head")) + (%include "components/head")) (body - (%include "header") + (%include "components/header") (div :id container (%nav %title) (p My name is Samuel.) (img :src "https://knutsen.co/frcat.png" :alt "This is me.") - (%include "footer")))) + (%include "components/footer")))) diff --git a/components/date-mark.sex b/components/date-mark.sex @@ -0,0 +1,9 @@ +(time :id date + :title "Date webpage was last compiled." + ~(%date "%Y.%m.%d")) + +(style + (#date + :font-family ("IBM Plex Mono", monospace) + :font-size 0.9em + :color (rgba 0 0 0 0.4))) diff --git a/components/footer.sex b/components/footer.sex @@ -0,0 +1,15 @@ +(footer + (%include "components/source") + (%include "components/date-mark")) + +(style (footer :position fixed + :bottom 0 :left 0 + :width (calc (- 100% 4em)) + :height 5em + :display flex + :align-items center + :justify-content space-between + :padding (0 2em)) + (@media only screen and :max-width 700px + (footer :position absolute) + (body :padding-bottom 3em))) diff --git a/components/head.sex b/components/head.sex @@ -0,0 +1,9 @@ +(%ifdef title + (title %title" | Knutsen") + (%log "No title set.")) +(meta :http-equiv "Content-Type" :content "text/html; charset=UTF-8") +(meta :name viewport :content "width=device-width, initial-scale=1.0") +(link :rel icon :type image/png :href "favicon.png") +(link :href "https://fonts.googleapis.com/css2?family=Cantarell:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400&family=Playfair+Display+SC&display=swap" :rel stylesheet) +(style (%include "styles/main.sex")) +(%include "components/nav.sex") diff --git a/components/header.sex b/components/header.sex @@ -0,0 +1,24 @@ +(style + (header + :position fixed + :top 0 + :left 0) + (header .logo + :opacity 0.2 + :font-family ("Playfair Display SC" , serif) + :font-size 3em + :text-decoration none + :border-right (0px solid #000) + :border-bottom (0px solid #000) + ;:border-bottom-right-radius 5pt + :display block + :margin 0 + :padding (0.2em 0.5em)) + (header .logo:hover + :opacity 1.0 + :cursor pointer + )) + +(header + (a :class logo :href "/" + (span K))) diff --git a/components/nav.sex b/components/nav.sex @@ -0,0 +1,29 @@ +(%define (nav title) + (nav (h1 %title) + (ul + (li (a :href "/" /home)) + (li (a :href "/about" /about)) + (li (a :href "/email" /email)) + (li (a :href "https://canvas.knutsen.co" /canvas))))) + +(style + (nav :display flex + :justify-content space-between + :align-items center + :margin (2em 0)) + (nav h1 :font-size 2em + :margin 0 + :display inline-block) + (nav ul :list-style none + :margin 0 :padding 0 + :display inline-block) + (nav li :margin-left 0.5em + :display inline-block) + (nav "li:nth-child(1)" + :margin-left 0) + (nav li:before :display none) + + (@media only screen and :max-width 700px + (nav h1 , nav ul :display block) + (nav :display block + :text-align center))) diff --git a/components/source.sex b/components/source.sex @@ -0,0 +1,7 @@ +(a :id source-code :href "https://git.knutsen.co/knutsen.co/files" source) + +(style + (#source-code + :color (rgba 0 0 0 0.4)) + (#source-code:hover + :color (rgba 0 0 0 0.9))) diff --git a/date-mark.sex b/date-mark.sex @@ -1,12 +0,0 @@ -(time :id date - :title "Date webpage was last compiled." - ~(%date "%Y.%m.%d")) - -(style - (#date - :font-family ("IBM Plex Mono", monospace) - :font-size 0.9em - :position fixed - :bottom 1.8em - :right 2.2em - :color (rgba 0 0 0 0.4))) diff --git a/email.sex b/email.sex @@ -2,9 +2,9 @@ (!DOCTYPE html) (html :lang en (head - (%include "head.sex")) + (%include "components/head.sex")) (body - (%include "header.sex") + (%include "components/header.sex") (div :id container (%nav Authenticating) (p You'll need an E-mail client, such as @@ -31,4 +31,4 @@ (img :class card :alt "Configuration example" :src "./media/email-thunderbird.png") - (%include "footer.sex")))) + (%include "components/footer.sex")))) diff --git a/footer.sex b/footer.sex @@ -1,3 +0,0 @@ -(footer - (%include "source") - (%include "date-mark")) diff --git a/head.sex b/head.sex @@ -1,28 +0,0 @@ -(%define (nav title) - (nav (h1 %title) - (ul - (li (a :href "/" /home)) - (li (a :href "/about" /about)) - (li (a :href "/email" /email)) - (li (a :href "https://canvas.knutsen.co" /canvas))))) - -(style - (nav :display flex - :justify-content space-between) - (nav h1 :font-size 2em - :display inline-block) - (nav ul :list-style none - :margin (auto 0) - :display inline-block) - (nav li :margin-left 0.5em - :display inline-block) - (nav li:before :display none)) - -(%ifdef title - (title %title" | Knutsen") - (%log "No title set.")) -(meta :http-equiv "Content-Type" :content "text/html; charset=UTF-8") -(meta :name viewport :content "width=device-width, initial-scale=1.0") -(link :rel icon :type image/png :href "favicon.png") -(link :href "https://fonts.googleapis.com/css2?family=Cantarell:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400&family=Playfair+Display+SC&display=swap" :rel stylesheet) -(style (%include "styles/main.sex")) diff --git a/header.sex b/header.sex @@ -1,24 +0,0 @@ -(style - (header - :position fixed - :top 0 - :left 0) - (header .logo - :opacity 0.2 - :font-family ("Playfair Display SC" , serif) - :font-size 3em - :text-decoration none - :border-right (1px solid #000) - :border-left (1px solid #000) - :border-bottom-right-radius 5pt - :display block - :margin 0 - :padding (0.2em 0.5em)) - (header .logo:hover - :opacity 1.0 - :cursor pointer - )) - -(header - (a :class logo :href "/" - (span K))) diff --git a/index.sex b/index.sex @@ -3,9 +3,9 @@ (!DOCTYPE html) (html :lang en (head - (%include "head")) + (%include "components/head")) (body - (%include "header") + (%include "components/header") (div :id container (%nav Knutsen) (p This is the homepage for the Knutsen \(web, mail, &c.\) @@ -30,5 +30,5 @@ (p E-mail me any time, for questions about the server, the website, or getting your own (code @knutsen.co) e-mail.) (center (a :href "mailto:postmaster@knutsen.co" postmaster@knutsen.co)) - (%include "footer")))) + (%include "components/footer")))) diff --git a/source.sex b/source.sex @@ -1,10 +0,0 @@ -(a :id source-code :href "https://git.knutsen.co/knutsen.co/files" source) - -(style - (#source-code - :position fixed - :bottom 1.8em - :left 2.2em - :color (rgba 0 0 0 0.4)) - (#source-code:hover - :color (rgba 0 0 0 0.9))) diff --git a/styles/main.sex b/styles/main.sex @@ -1,6 +1,7 @@ (html + :position relative :width 100% - :height 100% + :min-height 100% :color #000 :font-size 16px :font-family ('Cantarell' , sans-serif)) @@ -15,7 +16,7 @@ :padding 2em :width (calc (- 100% 4em)) :min-height (calc (- 95% 4em)) - :align-items center + ;:align-items center ;; For vertical alignment. :justify-content center) ("::selection" @@ -38,7 +39,7 @@ (#container :overflow auto :padding (2em 1em) - :margin (auto 0 auto 0) + ;:margin (auto 0 auto 0) ;; For vertical alignment. :width 40em) (h1 , h2 , h3