test

test

〜は日本語で何ですか

hey-おっす

bye-おつ

Website source-code

(ns website.core
  (:require
   [hiccup2.core :as h] ; clj -> html
   [garden.core :refer [css]] ; clj -> css
   [garden.stylesheet :refer [at-font-face]]
   [org.satta.glob :refer [glob]]))

(def theme
  {:font  {:family  "camcorder, dotgothic16"
           :code "Lilex Nerd Font Mono, monospace"
           :size    "1rem"
           :size-lg "2rem"
           :lh      1.4}
   :color {:ink    "blue"
           :invert "#fff"}
   :space {:xs "0.25rem"
           :sm "0.5rem"
           :md "1rem"
           :lg "2rem"
           :xl "4rem"}})

(defn- tok [& ks]
  (get-in theme ks))

(defn col [n]
  [[(str ".col-" n)
    {:columns     n
     :column-gap  "15px"
     :margin-right "15px"
     :padding     "15px"}]
   [(str ".col-" n " img")
    {:width       "100%"
     :height      "auto"
     :padding-top "15px"
     :display     "block"
     :break-inside "avoid"
     :filter      "sepia(1) saturate(5) hue-rotate(180deg)"
     :transition  "filter 1s cubic-bezier(0.075, 0.82, 0.165, 1)"}]
   [(str ".col-" n " img:hover")
    {:filter "none"}]])

(defn styles []
  (css
   (at-font-face
    {:font-family  "camcorder"
     :src          "url(camcorder_ms_reg-webfont.woff)"
     :font-display "swap"})
   (at-font-face
    {:font-family  "dotgothic16"
     :src          "url(DotGothic16-Regular.ttf)"
     :font-display "swap"})
   [:* {:box-sizing "border-box"}]
   [:body
    {:margin      0
     :font-family (tok :font :family)
     :font-size   (tok :font :size)
     :color       (tok :color :ink)
     :word-wrap   "break-word"}]
   ["body::selection"
    {:background-color (tok :color :ink)
     :color            (tok :color :invert)}]
   [:code
    {:font-family (tok :font :code)}]
   [:main
    {:display        "flex"
     :flex-direction "column"
     :gap            (tok :space :md)
     :padding        (str (tok :space :md) " "
                          (tok :space :md) " "
                          (tok :space :xl))}]
   [:section
    {:display        "flex"
     :flex-direction "column"
     :gap            (tok :space :md)}]
   (col 5)
   [:p
    {:margin      0
     :font-size   (tok :font :size-lg)
     :line-height (tok :font :lh)}]
   [".invert span"
    {:background-color (tok :color :ink)
     :color            (tok :color :invert)
     :padding          (str (tok :space :xs) " " (tok :space :sm))}]
   [:hr
    {:border-color (tok :color :ink)}]
   [:.divider
    {:overflow     "hidden"
     :height       "1em"
     :line-height  1
     :margin-block (tok :space :lg)
     :font-size    (tok :font :size-lg)}]))

(defn inverted [text]
  [:p.invert
   [:span text]])

(defn divider
  ([c] (divider c 160))
  ([c l] [:div.divider (apply str (repeat l c))]))

(def divider-chars
  ["‹" "@" "✥" "¤" "×" "¥" "—" "Æ" "$" "%" "~"])

(defn images []
  (glob "images/*.jpg"))

(def page
  [:html {:lang "en"}
   [:head
    [:title "Projects"]
    [:meta {:charset "UTF-8"}]
    [:meta {:name "viewport" :content "width=device-width, initial-scale=1"}]
    [:link {:rel "stylesheet" :href "style.css"}]]
   [:body
    [:header
     [:nav
      [:ul
       (for [x ["test" "wsc" "cga" "fa"]]
        [:li [:a {:href (str "#" x)} x]])]]
     (divider "/")]
    [:main
     [:section#test
      (inverted "test")
      [:p "test"]
      (divider "*")
      [:p "〜は日本語で何ですか"]
      [:p "hey" "-" "おっす"]
      [:p "bye" "-" "おつ"]]
     [:section#wsc
      (divider "&")
      [:h1 "Website source-code"]
      [:pre [:code (slurp "src/website/core.clj")]]]
     [:section#cga
      (divider "›")
      [:h1 "Computer Generated Art"]
      [:div.col-5
       (for [img (images)]
         [:img {:src img :loading "lazy"}])]]
     [:section#fa
      (divider "#")
      [:h1 "Facharbeit"]
      [:a {:href "main.pdf"} "main.pdf"]]]
      ;(map divider divider-chars)
    [:footer
     (divider "\\")
     [:p "Hello, World!"]]]])

(defn generate! []
  (spit "style.css" (styles))
  (spit "index.html" (str "<!DOCTYPE html>\n" (h/html page))))

(defn -main [& _]
  (generate!))

(generate!)

Computer Generated Art

Facharbeit