commit 2e1a23f82dd4670691fddd05a70714f64ef3f16e
parent 803303fcf30139960a9c32d54e38302a93b7f58e
Author: knutsen <samuel@knutsen.co>
Date: Sun, 21 Mar 2021 22:28:02 +0000
Make slightly more mobile friendly.
Diffstat:
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
