diff options
author | Griffin Smith <grfn@gws.fyi> | 2021-12-24T18·24-0500 |
---|---|---|
committer | clbot <clbot@tvl.fyi> | 2021-12-24T18·27+0000 |
commit | 4ad4e7346b53209979244dbd558ca08ab2bb50ce (patch) | |
tree | 14ab79512395f54d0f514b5de9525de37edf93d4 /users/grfn/bbbg | |
parent | ad57a833c8e53f8699a7e1196b0f25175ed8c599 (diff) |
feat(grfn/bbbg): Begin styles r/3361
Start working on styles for the app, beginning with a global stylesheet/reset and styles for the nav. Change-Id: Ie15e549d7bb4e0116582f4099752aa2503eb9ce7 Reviewed-on: https://cl.tvl.fyi/c/depot/+/4583 Reviewed-by: grfn <grfn@gws.fyi> Autosubmit: grfn <grfn@gws.fyi> Tested-by: BuildkiteCI
Diffstat (limited to 'users/grfn/bbbg')
20 files changed, 256 insertions, 19 deletions
diff --git a/users/grfn/bbbg/resources/base.css b/users/grfn/bbbg/resources/base.css new file mode 100644 index 000000000000..c86c3f24f009 --- /dev/null +++ b/users/grfn/bbbg/resources/base.css @@ -0,0 +1,152 @@ +/* montserrat-italic - latin */ +@font-face { + font-family: "Montserrat"; + font-style: italic; + font-weight: 400; + src: local("Montserrat Italic"), local("Montserrat-Italic"), + url("/fonts/montserrat-v15-latin-italic.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("/fonts/montserrat-v15-latin-italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* montserrat-regular - latin */ +@font-face { + font-family: "Montserrat"; + font-style: normal; + font-weight: 400; + src: local("Montserrat Regular"), local("Montserrat-Regular"), + url("/fonts/montserrat-v15-latin-regular.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("/fonts/montserrat-v15-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* montserrat-500 - latin */ +@font-face { + font-family: "Montserrat"; + font-style: normal; + font-weight: 500; + src: local("Montserrat Medium"), local("Montserrat-Medium"), + url("/fonts/montserrat-v15-latin-500.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("/fonts/montserrat-v15-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* montserrat-500italic - latin */ +@font-face { + font-family: "Montserrat"; + font-style: italic; + font-weight: 500; + src: local("Montserrat Medium Italic"), local("Montserrat-MediumItalic"), + url("/fonts/montserrat-v15-latin-500italic.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("/fonts/montserrat-v15-latin-500italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* montserrat-600 - latin */ +@font-face { + font-family: "Montserrat"; + font-style: normal; + font-weight: 600; + src: local("Montserrat SemiBold"), local("Montserrat-SemiBold"), + url("/fonts/montserrat-v15-latin-600.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("/fonts/montserrat-v15-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* montserrat-800 - latin */ +@font-face { + font-family: "Montserrat"; + font-style: normal; + font-weight: 800; + src: local("Montserrat ExtraBold"), local("Montserrat-ExtraBold"), + url("/fonts/montserrat-v15-latin-800.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("/fonts/montserrat-v15-latin-800.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* montserrat-800italic - latin */ +@font-face { + font-family: "Montserrat"; + font-style: italic; + font-weight: 800; + src: local("Montserrat ExtraBold Italic"), local("Montserrat-ExtraBoldItalic"), + url("/fonts/montserrat-v15-latin-800italic.woff2") format("woff2"), + /* Chrome 26+, Opera 23+, Firefox 39+ */ + url("/fonts/montserrat-v15-latin-800italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +body { + width: 100%; + font-family: "Montserrat", Helvetica, sans-serif; + margin: 0; + box-sizing: border-box; +} + +*, +::before, +::after { + box-sizing: border-box; +} + +ul, +ol { + padding: 0; +} + +body, +h1, +h2, +h3, +h4, +p, +ul, +ol, +li, +figure, +figcaption, +blockquote, +dl, +dd { + margin: 0; +} + +body { + min-height: 100vh; + scroll-behavior: smooth; + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +ul[class], +ol[class] { + list-style: none; +} + +a:not([class]) { + text-decoration-skip-ink: auto; +} + +img { + max-width: 100%; + display: block; +} + +article > * + * { + margin-top: 1em; +} + +input, +button, +textarea, +select { + font: inherit; +} + +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} diff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500.woff b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500.woff new file mode 100644 index 000000000000..1c83d8518d3d --- /dev/null +++ b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500.woff Binary files differdiff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500.woff2 b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500.woff2 new file mode 100644 index 000000000000..9dc5c7f158af --- /dev/null +++ b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500.woff2 Binary files differdiff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500italic.woff b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500italic.woff new file mode 100644 index 000000000000..71476d858fd5 --- /dev/null +++ b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500italic.woff Binary files differdiff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500italic.woff2 b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500italic.woff2 new file mode 100644 index 000000000000..0fb9838c9d76 --- /dev/null +++ b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-500italic.woff2 Binary files differdiff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-600.woff b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-600.woff new file mode 100644 index 000000000000..e7f8a31ba35c --- /dev/null +++ b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-600.woff Binary files differdiff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-600.woff2 b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-600.woff2 new file mode 100644 index 000000000000..29cc1a973450 --- /dev/null +++ b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-600.woff2 Binary files differdiff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800.woff b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800.woff new file mode 100644 index 000000000000..79203dd7801d --- /dev/null +++ b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800.woff Binary files differdiff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800.woff2 b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800.woff2 new file mode 100644 index 000000000000..0abb707aeddf --- /dev/null +++ b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800.woff2 Binary files differdiff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800italic.woff b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800italic.woff new file mode 100644 index 000000000000..65415571a7f4 --- /dev/null +++ b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800italic.woff Binary files differdiff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800italic.woff2 b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800italic.woff2 new file mode 100644 index 000000000000..674e6eabe747 --- /dev/null +++ b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-800italic.woff2 Binary files differdiff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-italic.woff b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-italic.woff new file mode 100644 index 000000000000..67f1e85379c2 --- /dev/null +++ b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-italic.woff Binary files differdiff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-italic.woff2 b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-italic.woff2 new file mode 100644 index 000000000000..469aede09c6b --- /dev/null +++ b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-italic.woff2 Binary files differdiff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-regular.woff b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-regular.woff new file mode 100644 index 000000000000..676a065e24ff --- /dev/null +++ b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-regular.woff Binary files differdiff --git a/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-regular.woff2 b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-regular.woff2 new file mode 100644 index 000000000000..70788c273207 --- /dev/null +++ b/users/grfn/bbbg/resources/public/fonts/montserrat-v15-latin-regular.woff2 Binary files differdiff --git a/users/grfn/bbbg/resources/main.js b/users/grfn/bbbg/resources/public/main.js index d4752f114167..d4752f114167 100644 --- a/users/grfn/bbbg/resources/main.js +++ b/users/grfn/bbbg/resources/public/main.js diff --git a/users/grfn/bbbg/resources/robots.txt b/users/grfn/bbbg/resources/public/robots.txt index 1f53798bb4fe..1f53798bb4fe 100644 --- a/users/grfn/bbbg/resources/robots.txt +++ b/users/grfn/bbbg/resources/public/robots.txt diff --git a/users/grfn/bbbg/src/bbbg/handlers/core.clj b/users/grfn/bbbg/src/bbbg/handlers/core.clj index d8359bc1881c..4bb7cf629035 100644 --- a/users/grfn/bbbg/src/bbbg/handlers/core.clj +++ b/users/grfn/bbbg/src/bbbg/handlers/core.clj @@ -23,18 +23,21 @@ (defn global-nav [] [:nav.global-nav [:ul + [:li [:a {:href "/events"} + "Events"]] (when *authenticated?* [:li [:a {:href "/attendees"} "Attendees"]]) - [:li [:a {:href "/events"} - "Events"]] - (if *authenticated?* - [:li [:form {:method :post - :action "/auth/sign-out"} - [:input {:type "submit" - :value "Sign Out"}]]] - [:li [:a {:href "/auth/discord"} - "Sign In"]])]]) + [:li.spacer] + [:li + (if *authenticated?* + [:form.link-form + {:method :post + :action "/auth/sign-out"} + [:input {:type "submit" + :value "Sign Out"}]] + [:a {:href "/auth/discord"} + "Sign In"])]]]) (defn render-page [opts & body] (let [[{:keys [title]} body] diff --git a/users/grfn/bbbg/src/bbbg/styles.clj b/users/grfn/bbbg/src/bbbg/styles.clj index 07ed87ba1a40..8e39f5c0e628 100644 --- a/users/grfn/bbbg/src/bbbg/styles.clj +++ b/users/grfn/bbbg/src/bbbg/styles.clj @@ -1,9 +1,88 @@ +;; -*- eval: (rainbow-mode) -*- (ns bbbg.styles - (:require [garden.def :refer [defstyles]] - [garden.compiler :refer [compile-css]])) + (:require + [garden.compiler :refer [compile-css]] + [garden.def :refer [defstyles]] + [garden.selectors :refer [attr= visited hover active & descendant]])) + +(def black "#342e37") + +(def silver "#f9fafb") + +(def gray "#aaa") + +(def gray-light "#ddd") + +(def purple "#837aff") + +(def red "#c42348") + +(def orange "#fa824c") + +(def yellow "#FACB0F") + +(def blue "#026fb1") + +(def green "#BEEF9E") + +(def contextual + {:success green + :info blue + :warning yellow + :error red}) + +;;; + +(defstyles global-nav + [:.global-nav + {:background-color silver} + + [:>ul + {:display :flex + :flex-direction :row + :list-style :none}] + + [:a (descendant :.link-form (attr= "type" "submit")) + {:padding "1rem 1.5rem" + :display :block + :color black + :text-decoration :none} + + [(& hover) + {:color blue}]] + + [:.spacer + {:flex 1}]]) + +(def link-conditional-styles + (list + [(& hover) (& active) + {:text-decoration :underline}] + [(& active) + {:color purple}])) + +(defstyles link-form + [:form.link-form + {:margin 0} + [(attr= "type" "submit") + {:background "none" + :border "none" + :padding 0 + :color blue + :text-decoration :none + :cursor :pointer} + link-conditional-styles]]) (defstyles styles - ) + global-nav + link-form + + [:body + {:color black}] + + [:a {:color blue + :text-decoration :none} + link-conditional-styles]) (def stylesheet (compile-css styles)) diff --git a/users/grfn/bbbg/src/bbbg/web.clj b/users/grfn/bbbg/src/bbbg/web.clj index c9d0fd0d4406..bb47efbdadbe 100644 --- a/users/grfn/bbbg/src/bbbg/web.clj +++ b/users/grfn/bbbg/src/bbbg/web.clj @@ -20,9 +20,11 @@ [ring.middleware.keyword-params :refer [wrap-keyword-params]] [ring.middleware.multipart-params :refer [wrap-multipart-params]] [ring.middleware.params :refer [wrap-params]] + [ring.middleware.resource :refer [wrap-resource]] [ring.middleware.session :refer [wrap-session]] [ring.middleware.session.cookie :refer [cookie-store]] - [ring.util.response :refer [content-type resource-response response]]) + [ring.util.response :refer [content-type resource-response response]] + [clojure.java.io :as io]) (:import java.util.Base64)) @@ -70,13 +72,13 @@ (defn app-routes [env] (routes (GET "/main.css" [] - (-> (response stylesheet) + (-> (response + (str + "\n/* begin base.css */\n" + (slurp (io/resource "base.css")) + "\n/* end base.css */\n" + stylesheet)) (content-type "text/css"))) - (GET "/main.js" [] - (-> (resource-response "main.js") - (content-type "text/javascript"))) - (GET "/robots.txt" [] - (resource-response "robots.txt")) (attendees/attendees-routes env) (attendee-checks/attendee-checks-routes env) @@ -86,6 +88,7 @@ (defn middleware [app env] (-> app + (wrap-resource "public") wrap-dynamic-auth (wrap-discord-auth env) wrap-keyword-params |