about summary refs log tree commit diff stats
diff options
context:
space:
mode:
authorKelly Rauchenberger <fefferburbia@gmail.com>2017-06-30 18:23:20 -0400
committerKelly Rauchenberger <fefferburbia@gmail.com>2017-06-30 18:23:20 -0400
commit1fb650f48213117fb3ad3eedc6c041d7269adf05 (patch)
treebc9f561ce8446bc98cec42d104e522b63b8617f7
parent4fe8ef40ee70bee9d4ad897b51f602231e81bfc3 (diff)
downloadthoughts-1fb650f48213117fb3ad3eedc6c041d7269adf05.tar.gz
thoughts-1fb650f48213117fb3ad3eedc6c041d7269adf05.tar.bz2
thoughts-1fb650f48213117fb3ad3eedc6c041d7269adf05.zip
Split up stylesheets for each layout
-rw-r--r--app/assets/stylesheets/application.css.scss252
-rw-r--r--app/assets/stylesheets/main.css.scss4
-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.scss136
-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.scss4
-rw-r--r--app/assets/stylesheets/userdata/layout.scss93
-rw-r--r--app/views/layouts/application.html.haml2
-rw-r--r--app/views/layouts/userdata.html.haml14
-rw-r--r--app/views/users/sessions/new.html.haml6
-rw-r--r--config/initializers/assets.rb1
11 files changed, 254 insertions, 263 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
22body#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
92body#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 @@
1body#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 @@
1body {
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}
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index ed3b9a2..2a9e2eb 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml
@@ -3,7 +3,7 @@
3 %head 3 %head
4 %title Thoughts 4 %title Thoughts
5 = csrf_meta_tags 5 = csrf_meta_tags
6 = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' 6 = stylesheet_link_tag 'main', media: 'all', 'data-turbolinks-track': 'reload'
7 = javascript_include_tag 'application', 'data-turbolinks-track': 'reload' 7 = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
8 %body#main-body 8 %body#main-body
9 - if flash[:alert] 9 - if flash[:alert]
diff --git a/app/views/layouts/userdata.html.haml b/app/views/layouts/userdata.html.haml index f6e3b57..29e47b2 100644 --- a/app/views/layouts/userdata.html.haml +++ b/app/views/layouts/userdata.html.haml
@@ -3,16 +3,16 @@
3 %head 3 %head
4 %title Thoughts 4 %title Thoughts
5 = csrf_meta_tags 5 = csrf_meta_tags
6 = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' 6 = stylesheet_link_tag 'userdata', media: 'all', 'data-turbolinks-track': 'reload'
7 = javascript_include_tag 'application', 'data-turbolinks-track': 'reload' 7 = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
8 %body#userdata-body 8 %body
9 #userdata-container 9 #container
10 - if flash[:alert] 10 - if flash[:alert]
11 #userdata-flash.userdata-flash-alert 11 #flash.flash-alert
12 %span.userdata-flash-tag ERROR: 12 %span.flash-tag ERROR:
13 = flash.alert 13 = flash.alert
14 - if flash[:notice] 14 - if flash[:notice]
15 #userdata-flash.userdata-flash-notice 15 #flash.flash-notice
16 %span.userdata-flash-tag NOTICE: 16 %span.flash-tag NOTICE:
17 = flash.notice 17 = flash.notice
18 = yield 18 = yield
diff --git a/app/views/users/sessions/new.html.haml b/app/views/users/sessions/new.html.haml index fbdf8be..f7c8de9 100644 --- a/app/views/users/sessions/new.html.haml +++ b/app/views/users/sessions/new.html.haml
@@ -1,4 +1,4 @@
1#userdata-form 1#principal
2 = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| 2 = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
3 .field 3 .field
4 = f.label :login 4 = f.label :login
@@ -11,5 +11,5 @@
11 = f.label :remember_me 11 = f.label :remember_me
12 .submit-field 12 .submit-field
13 = f.submit "Log in" 13 = f.submit "Log in"
14.userdata-link= link_to "Forgot your password?", new_password_path(resource_name) 14.navigation= link_to "Forgot your password?", new_password_path(resource_name)
15.userdata-link= link_to "← Back to thoughts", root_url 15.navigation= link_to "← Back to thoughts", root_url
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index 4b828e8..361538d 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb
@@ -12,3 +12,4 @@ Rails.application.config.assets.paths << Rails.root.join('node_modules')
12# application.js, application.css, and all non-JS/CSS in the app/assets 12# application.js, application.css, and all non-JS/CSS in the app/assets
13# folder are already added. 13# folder are already added.
14# Rails.application.config.assets.precompile += %w( admin.js admin.css ) 14# Rails.application.config.assets.precompile += %w( admin.js admin.css )
15Rails.application.config.assets.precompile += %w( main userdata )