diff options
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r-- | app/assets/stylesheets/application.css.scss | 252 | ||||
-rw-r--r-- | app/assets/stylesheets/main.css.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/main/entries.scss (renamed from app/assets/stylesheets/entries.scss) | 3 | ||||
-rw-r--r-- | app/assets/stylesheets/main/layout.scss | 136 | ||||
-rw-r--r-- | app/assets/stylesheets/main/records.scss (renamed from app/assets/stylesheets/records.scss) | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/userdata.css.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/userdata/layout.scss | 93 |
7 files changed, 242 insertions, 252 deletions
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss deleted file mode 100644 index a1445d6..0000000 --- a/app/assets/stylesheets/application.css.scss +++ /dev/null | |||
@@ -1,252 +0,0 @@ | |||
1 | /* | ||
2 | * This is a manifest file that'll be compiled into application.css, which will include all the files | ||
3 | * listed below. | ||
4 | * | ||
5 | * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's | ||
6 | * vendor/assets/stylesheets directory can be referenced here using a relative path. | ||
7 | * | ||
8 | * You're free to add application-wide styles to this file and they'll appear at the bottom of the | ||
9 | * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS | ||
10 | * files in this directory. Styles in this file should be added after the last require_* statement. | ||
11 | * It is generally better to create a new file per style scope. | ||
12 | * | ||
13 | *= require normalize-rails | ||
14 | *= require_tree . | ||
15 | *= require_self | ||
16 | */ | ||
17 | |||
18 | @import url('https://fonts.googleapis.com/css?family=Inconsolata'); | ||
19 | @import url('https://fonts.googleapis.com/css?family=Slabo+27px'); | ||
20 | @import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); | ||
21 | |||
22 | body#main-body { | ||
23 | background-color: #bfefff; | ||
24 | height: 100%; | ||
25 | } | ||
26 | |||
27 | #container { | ||
28 | height: 100%; | ||
29 | margin: 7em auto 0; | ||
30 | width: 75%; /* 66% */ | ||
31 | box-sizing: border-box; | ||
32 | min-width: 890px; | ||
33 | display: -webkit-flex; | ||
34 | display: flex; | ||
35 | flex-direction: row-reverse; | ||
36 | } | ||
37 | |||
38 | @keyframes trottingPonies { | ||
39 | from { background-position-x: 0px; } | ||
40 | to { background-position-x: -1280px; } | ||
41 | } | ||
42 | |||
43 | #banner { | ||
44 | background-image: image-url("walk_cycle.png"); | ||
45 | background-repeat: repeat-x; | ||
46 | animation: trottingPonies 1s steps(16) infinite; | ||
47 | width: 100%; | ||
48 | padding: 1em; | ||
49 | box-sizing: border-box; | ||
50 | text-indent: -9999px; | ||
51 | height: 80px; | ||
52 | margin-bottom: -80px; | ||
53 | position: relative; | ||
54 | top: -70px; | ||
55 | |||
56 | a { | ||
57 | display: block; | ||
58 | width: 100%; | ||
59 | height: 55px; | ||
60 | } | ||
61 | } | ||
62 | |||
63 | #main { | ||
64 | background-color: white; | ||
65 | -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
66 | -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
67 | box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
68 | width: 75%; | ||
69 | min-width: 720px | ||
70 | } | ||
71 | |||
72 | #content { | ||
73 | box-sizing: border-box; | ||
74 | padding-top: 1em; | ||
75 | } | ||
76 | |||
77 | #flash { | ||
78 | width: 100%; | ||
79 | text-align: center; | ||
80 | padding: .25em; | ||
81 | font-weight: bold | ||
82 | } | ||
83 | |||
84 | .flash-notice { | ||
85 | background-color: #fffde8; | ||
86 | } | ||
87 | |||
88 | .flash-alert { | ||
89 | background-color: #ff6a6a; | ||
90 | } | ||
91 | |||
92 | body#userdata-body { | ||
93 | background-color: #eeeeee; | ||
94 | height: 100%; | ||
95 | } | ||
96 | |||
97 | #userdata-container { | ||
98 | margin: 4em auto 0; | ||
99 | width: 25%; | ||
100 | } | ||
101 | |||
102 | #userdata-form { | ||
103 | background-color: #fefefe; | ||
104 | -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
105 | -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
106 | box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
107 | border-radius: 2px 2px 2px 2px; | ||
108 | -moz-border-radius: 2px 2px 2px 2px; | ||
109 | -webkit-border-radius: 2px 2px 2px 2px; | ||
110 | padding: 1em; | ||
111 | } | ||
112 | |||
113 | #userdata-form .field { | ||
114 | margin-bottom: 1em; | ||
115 | } | ||
116 | |||
117 | #userdata-form .field label { | ||
118 | display: block; | ||
119 | margin-bottom: .25em; | ||
120 | } | ||
121 | |||
122 | #userdata-form input[type=text], #userdata-form input[type=password] { | ||
123 | font-size: 24px; | ||
124 | padding: 3px; | ||
125 | width: 100%; | ||
126 | box-sizing: border-box; | ||
127 | -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.7); | ||
128 | -moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.7); | ||
129 | box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.7); | ||
130 | border: 1px solid #ddd; | ||
131 | outline: 0; | ||
132 | border-radius: 0; | ||
133 | } | ||
134 | |||
135 | .remember-me-field { | ||
136 | float: left; | ||
137 | } | ||
138 | |||
139 | .submit-field { | ||
140 | text-align: right; | ||
141 | } | ||
142 | |||
143 | .userdata-link { | ||
144 | margin: 1em; | ||
145 | } | ||
146 | |||
147 | .userdata-link a { | ||
148 | text-decoration: none; | ||
149 | } | ||
150 | |||
151 | .userdata-link a:hover { | ||
152 | text-decoration: underline; | ||
153 | } | ||
154 | |||
155 | #userdata-form, .userdata-link a, .userdata-link a:visited { | ||
156 | color: #555d66; | ||
157 | } | ||
158 | |||
159 | #userdata-form label, .userdata-link a { | ||
160 | font-size: .75em; | ||
161 | } | ||
162 | |||
163 | #userdata-flash { | ||
164 | color: black; | ||
165 | background-color: white; | ||
166 | padding: .75em; | ||
167 | margin-bottom: 2em; | ||
168 | font-size: .8em; | ||
169 | -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
170 | -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
171 | box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
172 | } | ||
173 | |||
174 | .userdata-flash-alert { | ||
175 | border-left: 5px solid red; | ||
176 | } | ||
177 | |||
178 | .userdata-flash-notice { | ||
179 | border-left: 5px solid green; | ||
180 | } | ||
181 | |||
182 | .userdata-flash-tag { | ||
183 | font-weight: bold; | ||
184 | } | ||
185 | |||
186 | #sidebar { | ||
187 | box-sizing: border-box; | ||
188 | width: 25%; | ||
189 | font-size: .75em; | ||
190 | color: black; | ||
191 | border-left: 1px solid #eee; | ||
192 | margin-top: 1em; | ||
193 | margin-bottom: 2em; | ||
194 | } | ||
195 | |||
196 | #sidebar h2 { | ||
197 | font-size: 1em; | ||
198 | margin: 0; | ||
199 | } | ||
200 | |||
201 | .sidebar-module { | ||
202 | padding: 1em; | ||
203 | margin-top: 1em; | ||
204 | box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.75); | ||
205 | } | ||
206 | |||
207 | .sidebar-module:nth-child(2n+1) { | ||
208 | background-color: #feff8f; | ||
209 | } | ||
210 | |||
211 | .sidebar-module:nth-child(2n+2) { | ||
212 | background-color: #8fefab; | ||
213 | } | ||
214 | |||
215 | .sidebar-module p { | ||
216 | margin-bottom: 0; | ||
217 | } | ||
218 | |||
219 | .sidebar-module ul { | ||
220 | padding-left: 0; | ||
221 | margin-bottom: 0; | ||
222 | } | ||
223 | |||
224 | .sidebar-module li { | ||
225 | list-style-type: none; | ||
226 | } | ||
227 | |||
228 | .sidebar-module a { | ||
229 | text-decoration: none; | ||
230 | } | ||
231 | |||
232 | .sidebar-module a:hover { | ||
233 | text-decoration: underline; | ||
234 | } | ||
235 | |||
236 | .sidebar-module a:visited { | ||
237 | color: #352712; | ||
238 | } | ||
239 | |||
240 | .breadcrumb { | ||
241 | margin-left: 1em; | ||
242 | |||
243 | a, a:visited { | ||
244 | color: #555d66; | ||
245 | text-decoration: none; | ||
246 | font-size: .75em; | ||
247 | } | ||
248 | |||
249 | a:hover { | ||
250 | text-decoration: underline; | ||
251 | } | ||
252 | } | ||
diff --git a/app/assets/stylesheets/main.css.scss b/app/assets/stylesheets/main.css.scss new file mode 100644 index 0000000..ceb0808 --- /dev/null +++ b/app/assets/stylesheets/main.css.scss | |||
@@ -0,0 +1,4 @@ | |||
1 | /* | ||
2 | *= require normalize-rails | ||
3 | *= require_tree ./main | ||
4 | */ | ||
diff --git a/app/assets/stylesheets/entries.scss b/app/assets/stylesheets/main/entries.scss index 6833141..038273d 100644 --- a/app/assets/stylesheets/entries.scss +++ b/app/assets/stylesheets/main/entries.scss | |||
@@ -2,6 +2,9 @@ | |||
2 | // They will automatically be included in application.css. | 2 | // They will automatically be included in application.css. |
3 | // You can use Sass (SCSS) here: http://sass-lang.com/ | 3 | // You can use Sass (SCSS) here: http://sass-lang.com/ |
4 | 4 | ||
5 | @import url('https://fonts.googleapis.com/css?family=Slabo+27px'); | ||
6 | @import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); | ||
7 | |||
5 | #blog-post { | 8 | #blog-post { |
6 | font-size: 16px; | 9 | font-size: 16px; |
7 | line-height: 24px; | 10 | line-height: 24px; |
diff --git a/app/assets/stylesheets/main/layout.scss b/app/assets/stylesheets/main/layout.scss new file mode 100644 index 0000000..ebd4c87 --- /dev/null +++ b/app/assets/stylesheets/main/layout.scss | |||
@@ -0,0 +1,136 @@ | |||
1 | body#main-body { | ||
2 | background-color: #bfefff; | ||
3 | height: 100%; | ||
4 | } | ||
5 | |||
6 | #container { | ||
7 | height: 100%; | ||
8 | margin: 7em auto 0; | ||
9 | width: 75%; /* 66% */ | ||
10 | box-sizing: border-box; | ||
11 | min-width: 890px; | ||
12 | display: flex; | ||
13 | flex-direction: row-reverse; | ||
14 | } | ||
15 | |||
16 | @keyframes trottingPonies { | ||
17 | from { background-position-x: 0px; } | ||
18 | to { background-position-x: -1280px; } | ||
19 | } | ||
20 | |||
21 | #banner { | ||
22 | background-image: image-url("walk_cycle.png"); | ||
23 | background-repeat: repeat-x; | ||
24 | animation: trottingPonies 1s steps(16) infinite; | ||
25 | width: 100%; | ||
26 | padding: 1em; | ||
27 | box-sizing: border-box; | ||
28 | text-indent: -9999px; | ||
29 | height: 80px; | ||
30 | margin-bottom: -80px; | ||
31 | position: relative; | ||
32 | top: -70px; | ||
33 | |||
34 | a { | ||
35 | display: block; | ||
36 | width: 100%; | ||
37 | height: 55px; | ||
38 | } | ||
39 | } | ||
40 | |||
41 | #main { | ||
42 | background-color: white; | ||
43 | -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
44 | -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
45 | box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
46 | width: 75%; | ||
47 | min-width: 720px | ||
48 | } | ||
49 | |||
50 | #content { | ||
51 | box-sizing: border-box; | ||
52 | padding-top: 1em; | ||
53 | } | ||
54 | |||
55 | #flash { | ||
56 | width: 100%; | ||
57 | text-align: center; | ||
58 | padding: .25em; | ||
59 | font-weight: bold | ||
60 | } | ||
61 | |||
62 | .flash-notice { | ||
63 | background-color: #fffde8; | ||
64 | } | ||
65 | |||
66 | .flash-alert { | ||
67 | background-color: #ff6a6a; | ||
68 | } | ||
69 | |||
70 | #sidebar { | ||
71 | box-sizing: border-box; | ||
72 | width: 25%; | ||
73 | font-size: .75em; | ||
74 | color: black; | ||
75 | border-left: 1px solid #eee; | ||
76 | margin-top: 1em; | ||
77 | margin-bottom: 2em; | ||
78 | } | ||
79 | |||
80 | #sidebar h2 { | ||
81 | font-size: 1em; | ||
82 | margin: 0; | ||
83 | } | ||
84 | |||
85 | .sidebar-module { | ||
86 | padding: 1em; | ||
87 | margin-top: 1em; | ||
88 | box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.75); | ||
89 | } | ||
90 | |||
91 | .sidebar-module:nth-child(2n+1) { | ||
92 | background-color: #feff8f; | ||
93 | } | ||
94 | |||
95 | .sidebar-module:nth-child(2n+2) { | ||
96 | background-color: #8fefab; | ||
97 | } | ||
98 | |||
99 | .sidebar-module p { | ||
100 | margin-bottom: 0; | ||
101 | } | ||
102 | |||
103 | .sidebar-module ul { | ||
104 | padding-left: 0; | ||
105 | margin-bottom: 0; | ||
106 | } | ||
107 | |||
108 | .sidebar-module li { | ||
109 | list-style-type: none; | ||
110 | } | ||
111 | |||
112 | .sidebar-module a { | ||
113 | text-decoration: none; | ||
114 | } | ||
115 | |||
116 | .sidebar-module a:hover { | ||
117 | text-decoration: underline; | ||
118 | } | ||
119 | |||
120 | .sidebar-module a:visited { | ||
121 | color: #352712; | ||
122 | } | ||
123 | |||
124 | .breadcrumb { | ||
125 | margin-left: 1em; | ||
126 | |||
127 | a, a:visited { | ||
128 | color: #555d66; | ||
129 | text-decoration: none; | ||
130 | font-size: .75em; | ||
131 | } | ||
132 | |||
133 | a:hover { | ||
134 | text-decoration: underline; | ||
135 | } | ||
136 | } | ||
diff --git a/app/assets/stylesheets/records.scss b/app/assets/stylesheets/main/records.scss index 71e203a..dd4eac1 100644 --- a/app/assets/stylesheets/records.scss +++ b/app/assets/stylesheets/main/records.scss | |||
@@ -2,6 +2,8 @@ | |||
2 | // They will automatically be included in application.css. | 2 | // They will automatically be included in application.css. |
3 | // You can use Sass (SCSS) here: http://sass-lang.com/ | 3 | // You can use Sass (SCSS) here: http://sass-lang.com/ |
4 | 4 | ||
5 | @import url('https://fonts.googleapis.com/css?family=Inconsolata'); | ||
6 | |||
5 | #records { | 7 | #records { |
6 | padding: 0; | 8 | padding: 0; |
7 | margin: 0 1em; | 9 | margin: 0 1em; |
diff --git a/app/assets/stylesheets/userdata.css.scss b/app/assets/stylesheets/userdata.css.scss new file mode 100644 index 0000000..22e59d1 --- /dev/null +++ b/app/assets/stylesheets/userdata.css.scss | |||
@@ -0,0 +1,4 @@ | |||
1 | /* | ||
2 | *= require normalize-rails | ||
3 | *= require_tree ./userdata | ||
4 | */ | ||
diff --git a/app/assets/stylesheets/userdata/layout.scss b/app/assets/stylesheets/userdata/layout.scss new file mode 100644 index 0000000..9e4906e --- /dev/null +++ b/app/assets/stylesheets/userdata/layout.scss | |||
@@ -0,0 +1,93 @@ | |||
1 | body { | ||
2 | background-color: #eeeeee; | ||
3 | height: 100%; | ||
4 | } | ||
5 | |||
6 | #container { | ||
7 | margin: 4em auto 0; | ||
8 | width: 25%; | ||
9 | } | ||
10 | |||
11 | #principal { | ||
12 | background-color: #fefefe; | ||
13 | -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
14 | -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
15 | box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
16 | border-radius: 2px 2px 2px 2px; | ||
17 | -moz-border-radius: 2px 2px 2px 2px; | ||
18 | -webkit-border-radius: 2px 2px 2px 2px; | ||
19 | padding: 1em; | ||
20 | |||
21 | .field { | ||
22 | margin-bottom: 1em; | ||
23 | |||
24 | label { | ||
25 | display: block; | ||
26 | margin-bottom: .25em; | ||
27 | } | ||
28 | } | ||
29 | |||
30 | input[type=text], input[type=password] { | ||
31 | font-size: 24px; | ||
32 | padding: 3px; | ||
33 | width: 100%; | ||
34 | box-sizing: border-box; | ||
35 | -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.7); | ||
36 | -moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.7); | ||
37 | box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.7); | ||
38 | border: 1px solid #ddd; | ||
39 | outline: 0; | ||
40 | border-radius: 0; | ||
41 | } | ||
42 | } | ||
43 | |||
44 | .remember-me-field { | ||
45 | float: left; | ||
46 | } | ||
47 | |||
48 | .submit-field { | ||
49 | text-align: right; | ||
50 | } | ||
51 | |||
52 | .navigation { | ||
53 | margin: 1em; | ||
54 | |||
55 | a { | ||
56 | text-decoration: none; | ||
57 | |||
58 | &:hover { | ||
59 | text-decoration: underline; | ||
60 | } | ||
61 | } | ||
62 | } | ||
63 | |||
64 | #principal, .navigation a, .navigation a:visited { | ||
65 | color: #555d66; | ||
66 | } | ||
67 | |||
68 | #principal label, .navigation a { | ||
69 | font-size: .75em; | ||
70 | } | ||
71 | |||
72 | #flash { | ||
73 | color: black; | ||
74 | background-color: white; | ||
75 | padding: .75em; | ||
76 | margin-bottom: 2em; | ||
77 | font-size: .8em; | ||
78 | -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
79 | -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
80 | box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); | ||
81 | } | ||
82 | |||
83 | .flash-alert { | ||
84 | border-left: 5px solid red; | ||
85 | } | ||
86 | |||
87 | .flash-notice { | ||
88 | border-left: 5px solid green; | ||
89 | } | ||
90 | |||
91 | .flash-tag { | ||
92 | font-weight: bold; | ||
93 | } | ||