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:
parent
ad57a833c8
commit
4ad4e7346b
20 changed files with 256 additions and 19 deletions
152
users/grfn/bbbg/resources/base.css
Normal file
152
users/grfn/bbbg/resources/base.css
Normal 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;
|
||||
}
|
||||
}
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -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]
|
||||
|
|
|
@ -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))
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue