blob: 408c1cf015768179649b5d397064304fe1550d63 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
;; -*- eval: (rainbow-mode) -*-
(ns bbbg.styles
(:require
[garden.color :as color]
[garden.compiler :refer [compile-css]]
[garden.def :refer [defstyles]]
[garden.selectors :refer [& active attr= descendant hover]]
[garden.stylesheet :refer [at-media]]
[garden.units :refer [px]]))
(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 "#87E24B")
(def contextual-colors
{:success green
:info blue
:warning yellow
:error red})
;;;
(def content-width (px 1600))
(defn not-mobile [& rules]
(at-media
{:screen true
:min-width content-width}
[:&
rules]))
;;;
(defstyles global-nav
[:.global-nav
{:background-color silver}
[:>ul
{:display :flex
:flex-direction :row
:list-style :none}
(not-mobile
{:width content-width
:margin "0 auto"})]
[: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 flash
[:.flash-messages
{:width "800px"
:margin "1rem auto"}]
[:.flash-message
{:padding "1rem 1.5rem"
:border "1px solid"
:margin-bottom "1rem"}]
(for [[context color] contextual-colors]
[(& (keyword (str ".flash-" (name context))))
{:border-color color
:background-color (color/lighten color 30)
:border-radius "5px"}]))
(defstyles home-page
[:.home-page
{:display :flex
:flex 1
:justify-content :center
:align-items :center}
[:.signup-form-link
{:display :block
:padding "5rem"
:border [["1px" :solid blue]]
:border-radius "5px"
:color black
:font-size "2rem"
:background-color (color/lighten blue 50)}
[(& hover) (& active)
{:text-decoration :none}]
[(& active)
{:background-color (color/lighten blue 30)}]]])
(defstyles styles
global-nav
link-form
flash
home-page
[:body
{:color black}]
[:.content
{:display :flex
:flex-direction :column
:height "100%"
:width "100%"}]
[:a {:color blue
:text-decoration :none}
link-conditional-styles])
(def stylesheet
(compile-css styles))
|
