feat(grfn/bbbg): Begin styles

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
This commit is contained in:
Griffin Smith 2021-12-24 13:24:44 -05:00 committed by clbot
parent ad57a833c8
commit 4ad4e7346b
20 changed files with 256 additions and 19 deletions

View file

@ -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;
}
}

View file

@ -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]

View file

@ -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))

View file

@ -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