Styling pass

resources/public/css/styles.css

@@ -4,6 +4,7 @@
   --sessions-arc-color: var(--lime-5);
   --hoc-pink: #e25f7d;
   --hoc-pink-3: var(--hoc-pink);
+  --hoc-green: #99db70;
   --sessions-arc-degrees: 240deg;
   --profiles-arc-thickness: 30px;
   --sessions-arc-thickness: 30px;
@@ -47,7 +48,7 @@ body #app {
 }
 
 body #app >main {
-  padding: 0.5rem;
+  padding: var(--size-2);
 }
 
 ul, ol {
@@ -66,7 +67,23 @@ h5, h4, h2, h1, h3 {
 }
 
 button, .btn {
-  border-radius: 0.5rem;
+  border-radius: 0.4rem;
+}
+
+dialog {
+  padding: var(--size-0);
+}
+
+body {
+  font-family: Open Sans, sans-serif;
+}
+
+@keyframes dash {
+
+  to {
+    stroke-dashoffset: 0;
+  }
+
 }
 
 .graphics-compass_logo path {
@@ -137,6 +154,51 @@ button, .btn {
   font-size: var(--font-size-3);
 }
 
+.co_gaiwan_compass_html_auth__popup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--size-4);
+}
+
+.co_gaiwan_compass_html_auth__popup .top {
+  display: flex;
+  align-self: flex-end;
+  padding: var(--size-2);
+}
+
+.co_gaiwan_compass_html_auth__popup p {
+  margin: var(--size-4);
+}
+
+.co_gaiwan_compass_html_auth__popup .discord-login {
+  margin-bottom: var(--size-4);
+  padding-top: var(--size-3);
+  padding-bottom: var(--size-3);
+  padding-left: var(--size-4);
+  padding-right: var(--size-4);
+  background-color: #7289da;
+  border-radius: 0.5rem;
+  color: var(--gray-0);
+  text-align: center;
+}
+
+.co_gaiwan_compass_html_auth__popup .discord-login:hover {
+  text-decoration: none;
+}
+
+.co_gaiwan_compass_html_auth__popup .graphics-cross {
+  width: 3rem;
+  height: 2.25rem;
+  padding: 0.4rem;
+}
+
+.co_gaiwan_compass_html_auth__popup .graphics-discord {
+  height: 2rem;
+  width: 2rem;
+  --_logo-color: var(--gray-0);
+}
+
 .co_gaiwan_compass_html_components__toggle_button {
   color: var(--text-2);
 }
@@ -218,7 +280,6 @@ button, .btn {
   height: 100%;
   align-items: center;
   font-size: 5rem;
-  color: var(--hoc-pink);
 }
 
 .sessions-capacity_gauge.checked .checkmark {
@@ -242,6 +303,11 @@ button, .btn {
   background-position: 50% 50%;
 }
 
+.sessions-capacity_gauge .graphics-checkmark {
+  padding: var(--size-3);
+  --icon-color: var(--hoc-green);
+}
+
 .sessions-participate_btn {
   --_bg: var(--surface-3);
   --_border: none;
@@ -288,6 +354,10 @@ button, .btn {
   margin-bottom: var(--size-2);
 }
 
+.sessions-session_card .title a {
+  color: var(--text-1);
+}
+
 .sessions-session_card .subtitle {
   font-size: var(--size-3);
   font-weight: 500;
@@ -408,4 +478,20 @@ button, .btn {
   display: grid;
   grid-template-columns: 10rem 1fr;
   gap: var(--size-2);
+}
+
+.graphics-discord {
+  --_logo-color: #5865F2;
+}
+
+.graphics-discord path {
+  fill: var(--_logo-color);
+}
+
+.graphics-checkmark path {
+  stroke: var(--icon-color);
+  stroke-width: 0.8;
+  stroke-dasharray: 10;
+  stroke-dashoffset: 10;
+  animation: dash 1s linear forwards;
 }

resources/public/fonts/b612/b612.css

@@ -0,0 +1,35 @@
+/* b612-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'B612';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/b612-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* b612-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'B612';
+  font-style: italic;
+  font-weight: 400;
+  src: url('/fonts/b612-v12-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* b612-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'B612';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/b612-v12-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* b612-700italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'B612';
+  font-style: italic;
+  font-weight: 700;
+  src: url('/fonts/b612-v12-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}

resources/public/fonts/open-sans/open-sans.css

@@ -0,0 +1,107 @@
+/* open-sans-300 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: url('/fonts/open-sans/open-sans-v40-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* open-sans-300italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: url('/fonts/open-sans/open-sans-v40-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* open-sans-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/open-sans/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* open-sans-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: url('/fonts/open-sans/open-sans-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* open-sans-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 500;
+  src: url('/fonts/open-sans/open-sans-v40-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* open-sans-500italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 500;
+  src: url('/fonts/open-sans/open-sans-v40-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* open-sans-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url('/fonts/open-sans/open-sans-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* open-sans-600italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 600;
+  src: url('/fonts/open-sans/open-sans-v40-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* open-sans-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/open-sans/open-sans-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* open-sans-700italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: url('/fonts/open-sans/open-sans-v40-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* open-sans-800 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 800;
+  src: url('/fonts/open-sans/open-sans-v40-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* open-sans-800italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 800;
+  src: url('/fonts/open-sans/open-sans-v40-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}

src/co/gaiwan/compass/css.clj

@@ -8,7 +8,8 @@
    [garden.compiler :as gc]
    [lambdaisland.ornament :as o]))
 
-(require 'co.gaiwan.compass.css.styles)
+(require 'co.gaiwan.compass.css.styles
+         )
 
 (o/set-tokens!
  {:components (with-meta components/girouette-components {:replace true})

src/co/gaiwan/compass/css/styles.clj

@@ -4,4 +4,13 @@
 (o/defrules resets
   [[#{:ul :ol} :list-none :m-0 :p-0]
    [:body :overflow-x-hidden :w-screen]
-   [#{:h1 :h2 :h3 :h4 :h5} {:max-inline-size "inherit"}]])
+   [#{:h1 :h2 :h3 :h4 :h5} {:max-inline-size "inherit"}]
+
+   ;; override open-props normalize, we like the buttons a bit more rounded
+   [#{:button :.btn} {:border-radius "0.4rem"}]
+
+   ;; reset dialog
+   [:dialog :p-0]
+
+   [:body {:font-family "Open Sans, sans-serif"}]
+   ])

src/co/gaiwan/compass/css/tokens.clj

@@ -17,12 +17,15 @@
 (o/defprop --hoc-pink-2 "#cd4e6a")
 (o/defprop --hoc-pink-3 --hoc-pink)
 (o/defprop --hoc-pink-4 "#c0415b")
+(o/defprop --hoc-green "#99db70")
 
 (o/defprop --surface-1)
 (o/defprop --surface-2)
 (o/defprop --surface-3)
 (o/defprop --surface-4)
 
+(o/defprop --icon-color)
+
 (o/defprop --talk-color)
 (o/defprop --workshop-color)
 (o/defprop --office-hours-color)

src/co/gaiwan/compass/db.clj

@@ -82,4 +82,8 @@
 
 (comment
   ;; reload schema and data
-  (user/reset))
+  (user/reset)
+
+  (transact [{:db/id 17592186045437,
+              :session/capacity 1}])
+  )

src/co/gaiwan/compass/db/schema.clj

@@ -17,6 +17,7 @@
    [:discord/refresh-token :string "Discord OAuth2 refresh-token"]
    [:discord/avatar-url :string "Discord Avatar URL"]
 
+   [:session/code :string "Corresponding Pretalx code, to prevent the import from creating duplicates" :identity]
    [:session/title :string "Title of the talk/workshop/activity"]
    [:session/subtitle :string "Subtitle of the session, for talks/workshops = speaker names"]
    [:session/description :string "Full description or abstract"]

src/co/gaiwan/compass/html/auth.clj

@@ -2,13 +2,30 @@
   (:require
    [co.gaiwan.compass.html.graphics :as graphics]
    [co.gaiwan.compass.http.oauth :as oauth]
+   [co.gaiwan.compass.css.tokens :as t]
    [lambdaisland.ornament :as o]))
 
 (o/defstyled popup :div
+  :flex-col :items-center
+  :gap-4
+  [:.top :flex :self-end :p-2]
+  [:p :m-4]
+  [:.discord-login :mb-4 :py-3 :px-4
+   {:background-color "#7289da"
+    :border-radius "0.5rem"
+    :color t/--gray-0
+    :text-align "center"}
+   [:&:hover {:text-decoration "none"}]]
+  [graphics/cross {:width "3rem" :height "2.25rem" :padding "0.4rem"}]
+  [graphics/discord {:height "2rem" :width "2rem" :--_logo-color t/--gray-0}]
   ([next-url]
    [:<>
-    [graphics/cross {:on-click "window.modal.close()"}]
+    [:div.top
+     [graphics/cross {:class "btn close-button" :on-click "window.modal.close()"}]]
     [:p "Please authenticate using Discord to make full use of the Compass app. This will also give you access to our Discord server where you can chat with speakers and attendees."]
-    [:a {:href (oauth/flow-init-url (if next-url
-                                      {:redirect-url next-url}
-                                      {}))} "Login with discord"]]))
+    [:a.btn.discord-login
+     {:href (oauth/flow-init-url (if next-url
+                                   {:redirect-url next-url}
+                                   {}))}
+     [graphics/discord]
+     "Login with discord"]]))