bootstrap-generators 2.0.4 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (104) hide show
  1. data/README.md +211 -63
  2. data/lib/bootstrap/generators/version.rb +1 -1
  3. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.css.scss +102 -28
  4. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.less +104 -31
  5. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  6. data/vendor/assets/javascripts/bootstrap-affix.js +104 -0
  7. data/vendor/assets/javascripts/bootstrap-alert.js +1 -1
  8. data/vendor/assets/javascripts/bootstrap-button.js +2 -2
  9. data/vendor/assets/javascripts/bootstrap-carousel.js +12 -5
  10. data/vendor/assets/javascripts/bootstrap-collapse.js +4 -3
  11. data/vendor/assets/javascripts/bootstrap-dropdown.js +66 -16
  12. data/vendor/assets/javascripts/bootstrap-modal.js +95 -74
  13. data/vendor/assets/javascripts/bootstrap-popover.js +9 -4
  14. data/vendor/assets/javascripts/bootstrap-scrollspy.js +9 -9
  15. data/vendor/assets/javascripts/bootstrap-tab.js +2 -2
  16. data/vendor/assets/javascripts/bootstrap-tooltip.js +15 -15
  17. data/vendor/assets/javascripts/bootstrap-transition.js +2 -3
  18. data/vendor/assets/javascripts/bootstrap-typeahead.js +51 -36
  19. data/vendor/assets/javascripts/bootstrap.js +1 -1
  20. data/vendor/assets/stylesheets/bootstrap-responsive.css +1058 -0
  21. data/vendor/assets/stylesheets/bootstrap-responsive.min.css +9 -0
  22. data/vendor/assets/stylesheets/bootstrap.css +5774 -0
  23. data/vendor/assets/stylesheets/bootstrap.min.css +9 -0
  24. data/vendor/twitter/bootstrap/less/accordion.less +3 -2
  25. data/vendor/twitter/bootstrap/less/alerts.less +16 -9
  26. data/vendor/twitter/bootstrap/less/bootstrap.less +1 -1
  27. data/vendor/twitter/bootstrap/less/breadcrumbs.less +10 -10
  28. data/vendor/twitter/bootstrap/less/button-groups.less +79 -25
  29. data/vendor/twitter/bootstrap/less/buttons.less +107 -67
  30. data/vendor/twitter/bootstrap/less/carousel.less +13 -3
  31. data/vendor/twitter/bootstrap/less/close.less +4 -2
  32. data/vendor/twitter/bootstrap/less/code.less +6 -5
  33. data/vendor/twitter/bootstrap/less/component-animations.less +4 -2
  34. data/vendor/twitter/bootstrap/less/dropdowns.less +82 -15
  35. data/vendor/twitter/bootstrap/less/forms.less +124 -57
  36. data/vendor/twitter/bootstrap/less/grid.less +17 -1
  37. data/vendor/twitter/bootstrap/less/hero-unit.less +4 -2
  38. data/vendor/twitter/bootstrap/less/labels-badges.less +19 -2
  39. data/vendor/twitter/bootstrap/less/layouts.less +1 -2
  40. data/vendor/twitter/bootstrap/less/mixins.less +112 -77
  41. data/vendor/twitter/bootstrap/less/modals.less +12 -4
  42. data/vendor/twitter/bootstrap/less/navbar.less +245 -128
  43. data/vendor/twitter/bootstrap/less/navs.less +38 -17
  44. data/vendor/twitter/bootstrap/less/pager.less +11 -7
  45. data/vendor/twitter/bootstrap/less/pagination.less +23 -15
  46. data/vendor/twitter/bootstrap/less/popovers.less +101 -33
  47. data/vendor/twitter/bootstrap/less/progress-bars.less +18 -13
  48. data/vendor/twitter/bootstrap/less/reset.less +10 -4
  49. data/vendor/twitter/bootstrap/less/responsive-1200px-min.less +9 -7
  50. data/vendor/twitter/bootstrap/less/responsive-767px-max.less +95 -70
  51. data/vendor/twitter/bootstrap/less/responsive-768px-979px.less +7 -5
  52. data/vendor/twitter/bootstrap/less/responsive-navbar.less +30 -6
  53. data/vendor/twitter/bootstrap/less/responsive-utilities.less +17 -15
  54. data/vendor/twitter/bootstrap/less/responsive.less +5 -5
  55. data/vendor/twitter/bootstrap/less/scaffolding.less +27 -4
  56. data/vendor/twitter/bootstrap/less/sprites.less +21 -19
  57. data/vendor/twitter/bootstrap/less/tables.less +81 -12
  58. data/vendor/twitter/bootstrap/less/thumbnails.less +9 -4
  59. data/vendor/twitter/bootstrap/less/tooltip.less +47 -12
  60. data/vendor/twitter/bootstrap/less/type.less +75 -86
  61. data/vendor/twitter/bootstrap/less/utilities.less +9 -2
  62. data/vendor/twitter/bootstrap/less/variables.less +104 -31
  63. data/vendor/twitter/bootstrap/less/wells.less +7 -5
  64. data/vendor/twitter/bootstrap/sass/_accordion.scss +3 -2
  65. data/vendor/twitter/bootstrap/sass/_alerts.scss +15 -8
  66. data/vendor/twitter/bootstrap/sass/_breadcrumbs.scss +10 -10
  67. data/vendor/twitter/bootstrap/sass/_button-groups.scss +77 -23
  68. data/vendor/twitter/bootstrap/sass/_buttons.scss +106 -66
  69. data/vendor/twitter/bootstrap/sass/_carousel.scss +13 -3
  70. data/vendor/twitter/bootstrap/sass/_close.scss +5 -3
  71. data/vendor/twitter/bootstrap/sass/_code.scss +7 -6
  72. data/vendor/twitter/bootstrap/sass/_component-animations.scss +5 -3
  73. data/vendor/twitter/bootstrap/sass/_dropdowns.scss +85 -18
  74. data/vendor/twitter/bootstrap/sass/_forms.scss +121 -53
  75. data/vendor/twitter/bootstrap/sass/_grid.scss +17 -1
  76. data/vendor/twitter/bootstrap/sass/_hero-unit.scss +4 -2
  77. data/vendor/twitter/bootstrap/sass/_labels-badges.scss +29 -12
  78. data/vendor/twitter/bootstrap/sass/_layouts.scss +2 -3
  79. data/vendor/twitter/bootstrap/sass/_mixins.scss +163 -127
  80. data/vendor/twitter/bootstrap/sass/_modals.scss +12 -4
  81. data/vendor/twitter/bootstrap/sass/_navbar.scss +243 -127
  82. data/vendor/twitter/bootstrap/sass/_navs.scss +36 -15
  83. data/vendor/twitter/bootstrap/sass/_pager.scss +12 -8
  84. data/vendor/twitter/bootstrap/sass/_pagination.scss +23 -15
  85. data/vendor/twitter/bootstrap/sass/_popovers.scss +101 -33
  86. data/vendor/twitter/bootstrap/sass/_progress-bars.scss +18 -13
  87. data/vendor/twitter/bootstrap/sass/_reset.scss +8 -3
  88. data/vendor/twitter/bootstrap/sass/_responsive-1200px-min.scss +9 -7
  89. data/vendor/twitter/bootstrap/sass/_responsive-767px-max.scss +95 -70
  90. data/vendor/twitter/bootstrap/sass/_responsive-768px-979px.scss +8 -6
  91. data/vendor/twitter/bootstrap/sass/_responsive-navbar.scss +29 -5
  92. data/vendor/twitter/bootstrap/sass/_responsive-utilities.scss +32 -15
  93. data/vendor/twitter/bootstrap/sass/_scaffolding.scss +29 -4
  94. data/vendor/twitter/bootstrap/sass/_sprites.scss +21 -19
  95. data/vendor/twitter/bootstrap/sass/_tables.scss +79 -11
  96. data/vendor/twitter/bootstrap/sass/_thumbnails.scss +9 -4
  97. data/vendor/twitter/bootstrap/sass/_tooltip.scss +47 -12
  98. data/vendor/twitter/bootstrap/sass/_type.scss +74 -85
  99. data/vendor/twitter/bootstrap/sass/_utilities.scss +24 -2
  100. data/vendor/twitter/bootstrap/sass/_variables.scss +102 -28
  101. data/vendor/twitter/bootstrap/sass/_wells.scss +7 -5
  102. data/vendor/twitter/bootstrap/sass/bootstrap.scss +1 -1
  103. data/vendor/twitter/bootstrap/sass/responsive.scss +5 -5
  104. metadata +15 -10
@@ -1,6 +1,7 @@
1
+ //
1
2
  // Reset
2
- // Adapted from Normalize.css http://github.com/necolas/normalize.css
3
- // ------------------------------------------------------------------------
3
+ // Adapted from http://github.com/necolas/normalize.css
4
+ // --------------------------------------------------
4
5
 
5
6
  // Display in IE6-9 and FF3
6
7
  // -------------------------
@@ -75,7 +76,11 @@ sub {
75
76
  // -------------------------
76
77
 
77
78
  img {
78
- max-width: 100%; // Make images inherently responsive
79
+ /* Responsive images (ensure images don't scale beyond their parents) */
80
+ max-width: 100%; /* Part 1: Set a maxium relative to the parent */
81
+ width: auto\9; /* IE7-8 need help adjusting responsive images */
82
+ height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
83
+
79
84
  vertical-align: middle;
80
85
  border: 0;
81
86
  -ms-interpolation-mode: bicubic;
@@ -1,23 +1,25 @@
1
- // LARGE DESKTOP & UP
2
- // ------------------
1
+ //
2
+ // Responsive: Large desktop and up
3
+ // --------------------------------------------------
4
+
3
5
 
4
6
  @media (min-width: 1200px) {
5
7
 
6
8
  // Fixed grid
7
- @include grid-core(70px, 30px);
9
+ @include grid-core($gridColumnWidth1200, $gridGutterWidth1200);
8
10
 
9
11
  // Fluid grid
10
- @include grid-fluid(5.982905983%, 2.564102564%);
12
+ @include grid-fluid($fluidGridColumnWidth1200, $fluidGridGutterWidth1200);
11
13
 
12
14
  // Input grid
13
- @include grid-input(70px, 30px);
15
+ @include grid-input($gridColumnWidth1200, $gridGutterWidth1200);
14
16
 
15
17
  // Thumbnails
16
18
  .thumbnails {
17
- margin-left: -30px;
19
+ margin-left: -$gridGutterWidth1200;
18
20
  }
19
21
  .thumbnails > li {
20
- margin-left: 30px;
22
+ margin-left: $gridGutterWidth1200;
21
23
  }
22
24
  .row-fluid .thumbnails {
23
25
  margin-left: 0;
@@ -1,73 +1,8 @@
1
- // UP TO LANDSCAPE PHONE
2
- // ---------------------
3
-
4
- @media (max-width: 480px) {
5
-
6
- // Smooth out the collapsing/expanding nav
7
- .nav-collapse {
8
- -webkit-transform: translate3d(0, 0, 0); // activate the GPU
9
- }
10
-
11
- // Block level the page header small tag for readability
12
- .page-header h1 small {
13
- display: block;
14
- line-height: $baseLineHeight;
15
- }
16
-
17
- // Update checkboxes for iOS
18
- input[type="checkbox"],
19
- input[type="radio"] {
20
- border: 1px solid #ccc;
21
- }
22
-
23
- // Remove the horizontal form styles
24
- .form-horizontal .control-group > label {
25
- float: none;
26
- width: auto;
27
- padding-top: 0;
28
- text-align: left;
29
- }
30
- // Move over all input controls and content
31
- .form-horizontal .controls {
32
- margin-left: 0;
33
- }
34
- // Move the options list down to align with labels
35
- .form-horizontal .control-list {
36
- padding-top: 0; // has to be padding because margin collaspes
37
- }
38
- // Move over buttons in .form-actions to align with .controls
39
- .form-horizontal .form-actions {
40
- padding-left: 10px;
41
- padding-right: 10px;
42
- }
43
-
44
- // Modals
45
- .modal {
46
- position: absolute;
47
- top: 10px;
48
- left: 10px;
49
- right: 10px;
50
- width: auto;
51
- margin: 0;
52
- &.fade.in { top: auto; }
53
- }
54
- .modal-header .close {
55
- padding: 10px;
56
- margin: -10px;
57
- }
58
-
59
- // Carousel
60
- .carousel-caption {
61
- position: static;
62
- }
63
-
64
- }
65
-
66
-
67
-
68
- // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
1
+ //
2
+ // Responsive: Landscape phone to desktop/tablet
69
3
  // --------------------------------------------------
70
4
 
5
+
71
6
  @media (max-width: 767px) {
72
7
 
73
8
  // Padding to set content in a bit
@@ -77,7 +12,8 @@
77
12
  }
78
13
  // Negative indent the now static "fixed" navbar
79
14
  .navbar-fixed-top,
80
- .navbar-fixed-bottom {
15
+ .navbar-fixed-bottom,
16
+ .navbar-static-top {
81
17
  margin-left: -20px;
82
18
  margin-right: -20px;
83
19
  }
@@ -116,13 +52,23 @@
116
52
  .thumbnails {
117
53
  margin-left: 0;
118
54
  }
55
+ .thumbnails > li {
56
+ float: none;
57
+ margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present
58
+ }
119
59
  // Make all grid-sized elements block level again
120
60
  [class*="span"],
121
61
  .row-fluid [class*="span"] {
122
62
  float: none;
123
63
  display: block;
124
- width: auto;
64
+ width: 100%;
125
65
  margin-left: 0;
66
+ @include box-sizing(border-box);
67
+ }
68
+ .span12,
69
+ .row-fluid .span12 {
70
+ width: 100%;
71
+ @include box-sizing(border-box);
126
72
  }
127
73
 
128
74
  // FORM FIELDS
@@ -145,5 +91,84 @@
145
91
  display: inline-block; // redeclare so they don't wrap to new lines
146
92
  width: auto;
147
93
  }
94
+ .controls-row [class*="span"] + [class*="span"] {
95
+ margin-left: 0;
96
+ }
97
+
98
+ // Modals
99
+ .modal {
100
+ position: fixed;
101
+ top: 20px;
102
+ left: 20px;
103
+ right: 20px;
104
+ width: auto;
105
+ margin: 0;
106
+ &.fade.in { top: auto; }
107
+ }
108
+
109
+ }
110
+
111
+
112
+
113
+ // UP TO LANDSCAPE PHONE
114
+ // ---------------------
115
+
116
+ @media (max-width: 480px) {
117
+
118
+ // Smooth out the collapsing/expanding nav
119
+ .nav-collapse {
120
+ -webkit-transform: translate3d(0, 0, 0); // activate the GPU
121
+ }
122
+
123
+ // Block level the page header small tag for readability
124
+ .page-header h1 small {
125
+ display: block;
126
+ line-height: $baseLineHeight;
127
+ }
128
+
129
+ // Update checkboxes for iOS
130
+ input[type="checkbox"],
131
+ input[type="radio"] {
132
+ border: 1px solid #ccc;
133
+ }
134
+
135
+ // Remove the horizontal form styles
136
+ .form-horizontal {
137
+ .control-label {
138
+ float: none;
139
+ width: auto;
140
+ padding-top: 0;
141
+ text-align: left;
142
+ }
143
+ // Move over all input controls and content
144
+ .controls {
145
+ margin-left: 0;
146
+ }
147
+ // Move the options list down to align with labels
148
+ .control-list {
149
+ padding-top: 0; // has to be padding because margin collaspes
150
+ }
151
+ // Move over buttons in .form-actions to align with .controls
152
+ .form-actions {
153
+ padding-left: 10px;
154
+ padding-right: 10px;
155
+ }
156
+ }
157
+
158
+ // Modals
159
+ .modal {
160
+ top: 10px;
161
+ left: 10px;
162
+ right: 10px;
163
+ }
164
+ .modal-header .close {
165
+ padding: 10px;
166
+ margin: -10px;
167
+ }
168
+
169
+ // Carousel
170
+ .carousel-caption {
171
+ position: static;
172
+ }
148
173
 
149
174
  }
@@ -1,17 +1,19 @@
1
- // PORTRAIT TABLET TO DEFAULT DESKTOP
2
- // ----------------------------------
1
+ //
2
+ // Responsive: Tablet to desktop
3
+ // --------------------------------------------------
4
+
3
5
 
4
6
  @media (min-width: 768px) and (max-width: 979px) {
5
7
 
6
8
  // Fixed grid
7
- @include grid-core(42px, 20px);
9
+ @include grid-core($gridColumnWidth768, $gridGutterWidth768);
8
10
 
9
11
  // Fluid grid
10
- @include grid-fluid(5.801104972%, 2.762430939%);
12
+ @include grid-fluid($fluidGridColumnWidth768, $fluidGridGutterWidth768);
11
13
 
12
14
  // Input grid
13
- @include grid-input(42px, 20px);
15
+ @include grid-input($gridColumnWidth768, $gridGutterWidth768);
14
16
 
15
- // No need to reset .thumbnails here since it's the same @gridGutterWidth
17
+ // No need to reset .thumbnails here since it's the same $gridGutterWidth
16
18
 
17
19
  }
@@ -1,6 +1,11 @@
1
+ //
2
+ // Responsive: Navbar
3
+ // --------------------------------------------------
4
+
5
+
1
6
  // TABLETS AND BELOW
2
7
  // -----------------
3
- @media (max-width: 979px) {
8
+ @media (max-width: $navbarCollapseWidth) {
4
9
 
5
10
  // UNFIX THE TOPBAR
6
11
  // ----------------
@@ -8,7 +13,7 @@
8
13
  body {
9
14
  padding-top: 0;
10
15
  }
11
- // Unfix the navbar
16
+ // Unfix the navbars
12
17
  .navbar-fixed-top,
13
18
  .navbar-fixed-bottom {
14
19
  position: static;
@@ -61,7 +66,7 @@
61
66
  // Nav and dropdown links in navbar
62
67
  .nav-collapse .nav > li > a,
63
68
  .nav-collapse .dropdown-menu a {
64
- padding: 6px 15px;
69
+ padding: 9px 15px;
65
70
  font-weight: bold;
66
71
  color: $navbarLinkColor;
67
72
  @include border-radius(3px);
@@ -79,6 +84,10 @@
79
84
  .nav-collapse .dropdown-menu a:hover {
80
85
  background-color: $navbarBackground;
81
86
  }
87
+ .navbar-inverse .nav-collapse .nav > li > a:hover,
88
+ .navbar-inverse .nav-collapse .dropdown-menu a:hover {
89
+ background-color: $navbarInverseBackground;
90
+ }
82
91
  // Buttons in the navbar
83
92
  .nav-collapse.in .btn-group {
84
93
  margin-top: 5px;
@@ -106,6 +115,12 @@
106
115
  .nav-collapse .dropdown-menu .divider {
107
116
  display: none;
108
117
  }
118
+ .nav-collapse .nav > li > .dropdown-menu {
119
+ &:before,
120
+ &:after {
121
+ display: none;
122
+ }
123
+ }
109
124
  // Forms in navbar
110
125
  .nav-collapse .navbar-form,
111
126
  .nav-collapse .navbar-search {
@@ -116,6 +131,11 @@
116
131
  border-bottom: 1px solid $navbarBackground;
117
132
  @include box-shadow(#{inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)});
118
133
  }
134
+ .navbar-inverse .nav-collapse .navbar-form,
135
+ .navbar-inverse .nav-collapse .navbar-search {
136
+ border-top-color: $navbarInverseBackground;
137
+ border-bottom-color: $navbarInverseBackground;
138
+ }
119
139
  // Pull right (secondary) nav content
120
140
  .navbar .nav-collapse .nav.pull-right {
121
141
  float: none;
@@ -138,16 +158,20 @@
138
158
  padding-left: 10px;
139
159
  padding-right: 10px;
140
160
  }
161
+
162
+
141
163
  }
142
164
 
143
165
 
144
166
  // DEFAULT DESKTOP
145
167
  // ---------------
146
168
 
147
- // Required to make the collapsing navbar work on regular desktops
148
169
  @media (min-width: 980px) {
170
+
171
+ // Required to make the collapsing navbar work on regular desktops
149
172
  .nav-collapse.collapse {
150
173
  height: auto !important;
151
174
  overflow: visible !important;
152
175
  }
153
- }
176
+
177
+ }
@@ -1,5 +1,22 @@
1
- // RESPONSIVE CLASSES
2
- // ------------------
1
+ //
2
+ // Responsive: Utility classes
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Clearing floats
7
+ .clearfix {
8
+ @include clearfix();
9
+ }
10
+
11
+ // Accessible yet invisible text
12
+ .hide-text {
13
+ @include hide-text();
14
+ }
15
+
16
+ // Uses box-sizing mixin, so must be defined here
17
+ .input-block-level {
18
+ @include input-block-level();
19
+ }
3
20
 
4
21
  // Hide from screenreaders and browsers
5
22
  // Credit: HTML5 Boilerplate
@@ -13,29 +30,29 @@
13
30
  // For desktops
14
31
  .visible-phone { display: none !important; }
15
32
  .visible-tablet { display: none !important; }
16
- .visible-desktop { } // Don't set initially
17
33
  .hidden-phone { }
18
34
  .hidden-tablet { }
19
35
  .hidden-desktop { display: none !important; }
20
-
21
- // Phones only
22
- @media (max-width: 767px) {
23
- // Show
24
- .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
25
- // Hide
26
- .hidden-phone { display: none !important; }
27
- // Hide everything else
28
- .hidden-desktop { display: inherit !important; }
29
- .visible-desktop { display: none !important; }
30
- }
36
+ .visible-desktop { display: inherit !important; }
31
37
 
32
38
  // Tablets & small desktops only
33
39
  @media (min-width: 768px) and (max-width: 979px) {
40
+ // Hide everything else
41
+ .hidden-desktop { display: inherit !important; }
42
+ .visible-desktop { display: none !important ; }
34
43
  // Show
35
44
  .visible-tablet { display: inherit !important; }
36
45
  // Hide
37
46
  .hidden-tablet { display: none !important; }
47
+ }
48
+
49
+ // Phones only
50
+ @media (max-width: 767px) {
38
51
  // Hide everything else
39
52
  .hidden-desktop { display: inherit !important; }
40
- .visible-desktop { display: none !important ; }
53
+ .visible-desktop { display: none !important; }
54
+ // Show
55
+ .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
56
+ // Hide
57
+ .hidden-phone { display: none !important; }
41
58
  }
@@ -1,10 +1,10 @@
1
+ //
1
2
  // Scaffolding
2
- // Basic and global styles for generating a grid system, structural layout, and page templates
3
- // -------------------------------------------------------------------------------------------
3
+ // --------------------------------------------------
4
4
 
5
5
 
6
6
  // Body reset
7
- // ----------
7
+ // -------------------------
8
8
 
9
9
  body {
10
10
  margin: 0;
@@ -17,7 +17,7 @@ body {
17
17
 
18
18
 
19
19
  // Links
20
- // -----
20
+ // -------------------------
21
21
 
22
22
  a {
23
23
  color: $linkColor;
@@ -27,3 +27,28 @@ a:hover {
27
27
  color: $linkColorHover;
28
28
  text-decoration: underline;
29
29
  }
30
+
31
+
32
+ // Images
33
+ // -------------------------
34
+
35
+ // Rounded corners
36
+ .img-rounded {
37
+ @include border-radius(6px);
38
+ }
39
+
40
+ // Add polaroid-esque trim
41
+ .img-polaroid {
42
+ padding: 4px;
43
+ background-color: #fff;
44
+ border: 1px solid #ccc;
45
+ border: 1px solid rgba(0,0,0,.2);
46
+ -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);
47
+ -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1);
48
+ box-shadow: 0 1px 3px rgba(0,0,0,.1);
49
+ }
50
+
51
+ // Perfect circle
52
+ .img-circle {
53
+ @include border-radius(500px); // crank the border-radius so it works with most reasonably sized images
54
+ }