CSS fails with extended paths in Compojure / Hiccup - clojure

Question

I've been converting some Noir websites to Compojure.
I have a function here that creates the layout of the page:
(defn layout [title & content]
(html5
[:head
[:title "My Site | " title]
(include-css "css/main.css")
[:body
[:header
[:h1 (link-to "/" "My Site")]]
content]))
And this is the function and the routes:
(defn home-page []
(layout
"Home"
[:div [:p "Home Page"]])))
(defn article-list []
(layout
"Article List"
[:div [:p "Article List"]])))
(defroutes app-routes
(GET "/" [] (home-page))
(GET "/article-list" [] (article-list))
When I open up localhost:3000/article-list all of the CSS rules work fine.
However, when I attempt to extend the URL path and change the program to:
(defn article-list []
(layout
"Article List"
[:div [:p "Article List"]])))
(defn article-one []
(layout
"Article One"
[:div [:p "Article One"]])))
(defroutes app-routes
(GET "/" [] (home-page))
(GET "/article-list" [] (article-list)
(GET "/article-list/article-one" [] (article-one))
And go to localhost:3000/article-list/article-one, I get all of the HTML but the CSS rules no longer work. When I inspect the page, the css paths are included in the < head > element but there are no styles on the page.
I've searched for a solution to this issue, but there doesn't seem to be any writing on this. I've also tried pulling out the routes so that I have:
(defroutes article-routes
(GET "/article-list/article-one" [] (article-one))
(defroutes app-routes
(GET "/" [] (home-page))
(GET "/article-list" [] (article-list)
(context "article-list" [] article-routes)
but I have the same issue. How can I get the CSS rules to work on pages with extended paths?

Answer 1

Your CSS is being included with a relative path, which means the when you go to localhost:3000/article-list/article-one your browser is looking for the CSS at localhost:3000/article-list/css/main.css.
The easiest way to fix this would be to include the CSS with (include-css "/css/main.css"). The / at the beginning will ensure it always searches for localhost:3000/css/main.css.