changed up the ui

project.clj

@@ -1,4 +1,4 @@
-(defproject bitgloo-web "0.5"
+(defproject bitgloo-web "0.7"
   :description "bitgloo website framework"
   :url "https://bitgloo.com"
   :license {:name "GPL-3.0-or-later" :url "https://www.gnu.org/licenses/gpl-3.0.en.html"}

resources/public/main.css

@@ -1,93 +1,80 @@
-@font-face {
-	/* https://indestructibletype.com/Jost.html */
-	font-family: Jost;
-	src: url('/Jost-400-Book.otf');
+/*@font-face
+{
+    font-family: Jost;
+    src: url('/Jost-400-Book.otf');
+}*/
+html {
+    background: #d8f0ff;
+    font-family: sans-serif;
+}
+#container {
+    background: white;
+    margin: 2em auto;
+    box-shadow: 0px 0px 12px 4px lightgray;
+    width: 1024px;
+    max-width: 97%;
+}
+#header {
+    padding: 1.2em;
 }
-
-html, body {
-	background: #d8f0ff;
-	font-family: Jost;
-}
-
-body {
-	padding: 0em 1.5em;
-}
-
-#title-container {
-	padding-top: 4em;
-	padding-bottom: 0.5em;
-}
-
-#posts {
-	min-height: 400px;
-}
-
 #logo {
-	height: 90px;
+    float: right;
+    height: inherit;
 }
-
-.block {
-	padding-bottom: 20px;
-	border-top: 1px solid #888;
+#menu {
+    background: #555;
+    border-bottom: 3px solid #0066cc;
 }
-
-.block img {
-	max-width: 40em;
-	border: 1px solid #888;
+.menu-item {
+    display: inline-block;
+    color: white;
+    border-left: 1px solid gray;
+    padding: 0.5em 1em;
+    font-weight: bold;
+    text-decoration: none;
 }
-
-h1 {
-	font-size: 4em;
-	display: inline;
-	padding-left: 0.1em;
-	color: black;
+.menu-item:first {
+    border-left: 0;
 }
-
-h1:hover {
-	color: #ff3300;
+.menu-item:hover {
+    background: #0066cc;
 }
-
-h2 {
-	font-size: 2.2em;
+.content {
+    padding: 0.75em 1.5em;
+    font-size: 1.2em;
 }
-
-h3 {
-	font-size: 1.7em;
+#footer {
+    font-size: 6px;
+    color: lightgray;
+    text-align: right;
 }
-
-h4, h5 {
-	font-size: 1.6em;
+#title {
+    border-bottom: 1px solid lightgray;
+    height: 60px;
+    position: relative;
+    margin-bottom: 0.2em;
 }
-
-p, li {
-	font-size: 1.5em;
-	max-width: 50em;
+#subtitle {
+    color: gray;
 }
-
-a, a code {
-	text-decoration: none;
-	color: #ff3300;
+h1 {
+    margin-bottom: 0.2em;
+    position: absolute;
+    bottom: 0;
+    font-size: 2.5em;
+    color: black;
 }
-
-#footer {
-	color: #666;
-	text-align: right;
+img {
+    max-width: 100%;
 }
-
-code {
-	padding: 2px;
-	font-family: monospace, monospace;
-	font-size: 0.8em;
+table {
+    width: 100%;
 }
-
-pre {
-	padding: 4px;
-	background: #333;
-	color: #ccc;
-	font-family: fixed;
+td {
+    vertical-align: top;
+    min-width: 240px;
+}
+td:first-child {
+    padding-right: 2em;
 }
 
-.codecolor0 { color: #2c6; }
-.codecolor1 { color: yellow; }
-.codecolor2 { color: pink; }
-.codecolor3 { color: #c44; }

src/bitgloo_web/content.clj

@@ -6,12 +6,19 @@
   (:require [markdown.core :refer [md-to-html-string]]))
 
 (def page-header
-  [:div#title-container
-   [:a {:href "/"}
+  [:div#header
+   [:div#title
     [:img#logo {:src "/logo.jpg" :alt "bitgloo logo"}]
-    [:h1 "bitgloo"]]])
+    [:a {:href "/"}
+     [:h1 "bitgloo"]]]])
+   ;[:div#subtitle "Electronics design services"]])
 
-(def page-footer [:div#footer [:span "© Clyne Sullivan 2023"]])
+(def page-menu
+  [:div#menu
+   [:a.menu-item {:href "/"} "Home"]
+   [:a.menu-item {:href "/projects"} "Projects"]])
+
+(def page-footer [:div#footer "© Clyne Sullivan 2023"])
 
 (defn md-file? [path] (str/ends-with? path ".md"))
 
@@ -19,12 +26,12 @@
 
 (defn parse-md-file [file] (-> file slurp md-to-html-string))
 
-(defn render-md-files [file-list] (for [f file-list] [:div.block (parse-md-file f)]))
+(defn render-md-files [file-list] (for [f file-list] [:div.content (parse-md-file f)]))
 
 (defn load-page [path]
   (let [file-list (filter md-file? (get-file-list path))]
     (when-not (empty? file-list)
       (page/html5
         [:head [:title "bitgloo"] (page/include-css "/main.css")]
-        [:body page-header [:div#posts (render-md-files file-list)] page-footer]))))
+        [:body [:div#container page-header page-menu (render-md-files file-list) page-footer]]))))
 

src/bitgloo_web/core.clj

@@ -15,7 +15,8 @@
 
 (defn image? [path] (some (partial str/ends-with? path) image-extensions))
 
-(defn home-redirect [uri] (if (= "/" uri) "/home" uri))
+;(defn home-redirect [uri] (if (= "/" uri) "/home" uri))
+(defn home-redirect [uri] uri)
 
 (defn request-handler [content-path request]
   (let [path (str content-path (home-redirect (:uri request)))]
@@ -31,6 +32,10 @@
         (when (.exists (io/file path)) (resp/file-response path))
         (handler request)))))
 
+(defn wrap-no-params [handler]
+  (fn [request]
+    (when (nil? (:query-string request)) (handler request))))
+
 (defn wrap-only-gets [handler]
   (fn [request]
     (when (= :get (:request-method request)) (handler request))))
@@ -61,6 +66,7 @@
           (wrap-resource "public")
           (wrap-content-type)
           (wrap-not-modified)
+          (wrap-no-params)
           (wrap-only-gets)
           (wrap-not-found)
           (wrap-log-transactions)