magic_stylez 0.1.0 → 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/magic_stylez/version.rb +1 -1
- data/test/dummy/app/assets/javascripts/app.js.coffee +0 -49
- data/test/dummy/app/assets/javascripts/assets.js.coffee.erb +2 -0
- data/test/dummy/app/assets/javascripts/views/app/changelog.jst.eco +13 -0
- data/test/dummy/app/assets/javascripts/views/app/start.jst.eco +1 -1
- data/test/dummy/app/assets/javascripts/views/helper/dots.jst.eco +21 -4
- data/test/dummy/app/assets/javascripts/views/layout/fullpage_table.jst.eco +86 -64
- data/test/dummy/app/assets/javascripts/views/layout/section.jst.eco +1 -10
- data/test/dummy/public/html/aside-nav.html +2 -2
- data/test/dummy/public/html/fixed-header.html +2 -2
- data/test/dummy/public/html/fixed-subnav.html +2 -2
- data/test/dummy/public/html/index.html +4 -4
- data/test/dummy/public/html/slidebar-header.html +2 -2
- data/test/dummy/public/html/slidebar-subnav.html +2 -2
- data/vendor/assets/stylesheets/magic/content/_banner.scss +7 -0
- data/vendor/assets/stylesheets/magic/helper/_dots.scss +64 -0
- data/vendor/assets/stylesheets/magic/layout/_fullpage_table.scss +12 -3
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8c8352a8c7ce0fce873b07451e5562fb4bdac3f1
|
|
4
|
+
data.tar.gz: b682e4ff26ddc5c18b7633b65b34510b34820b1e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 5debcd2d9060e46f876e417a87712ac6975e236eb9456c8d6080ecef8f462a5dafad7516e5b02573402682b4c5e7b66148d22ee9fd03c7fc33c4b5f04403f146
|
|
7
|
+
data.tar.gz: 824d4ed0dab9f4b1157c2ba09bfa8af4090259b97a1640f4da82fcbf1c1405c39231edaeeb190ee069a07494f481c741fc9bd318386dae5563cfc4b8bc90be44
|
data/lib/magic_stylez/version.rb
CHANGED
|
@@ -10,54 +10,6 @@ loadCircles = ->
|
|
|
10
10
|
else if $('.circle-diagram').length > 0
|
|
11
11
|
window.circleDiagram = new CircleDiagram( circle: $('.circle-diagram') )
|
|
12
12
|
|
|
13
|
-
build_paralax = (el) ->
|
|
14
|
-
console.log "build_paralax", el
|
|
15
|
-
## Create the background image holder ##
|
|
16
|
-
el.prepend("<div class='px_bg_holder'></div>")
|
|
17
|
-
el.find(".px_bg_holder").css(
|
|
18
|
-
"background-image" : el.css("background-image")
|
|
19
|
-
"background-position" : "center center"
|
|
20
|
-
"background-repeat" : "no-repeat"
|
|
21
|
-
"background-size" : "cover"
|
|
22
|
-
"position" : "absolute"
|
|
23
|
-
"height" : $(window).height()
|
|
24
|
-
"width" : $(window).width()
|
|
25
|
-
)
|
|
26
|
-
## We will remove the background at all ##
|
|
27
|
-
el.css("background","none")
|
|
28
|
-
el.css("overflow","hidden")
|
|
29
|
-
|
|
30
|
-
$("body").scroll ->
|
|
31
|
-
console.log "Scrolling"
|
|
32
|
-
# bg_pos = $("#app_content").offset().top + el.offset().top;
|
|
33
|
-
console.log if el.hasClass("responsive-hero") then el.closest(".fullpage-table").position().top else el.position().top
|
|
34
|
-
bg_pos = ($("#app_content").offset().top + if el.hasClass("responsive-hero") then el.closest(".fullpage-table").position().top else el.position().top)
|
|
35
|
-
console.log "bg_pos #{ bg_pos }"
|
|
36
|
-
if bg_pos < $(window).height()
|
|
37
|
-
bg_pos = bg_pos - (bg_pos / 10)
|
|
38
|
-
|
|
39
|
-
el.find(".px_bg_holder").css(
|
|
40
|
-
"top" : "#{ bg_pos * -1 }px"
|
|
41
|
-
)
|
|
42
|
-
$(window).resize ->
|
|
43
|
-
$(".px_bg_holder").css(
|
|
44
|
-
"height" : $(window).height()
|
|
45
|
-
"width" : $(window).width()
|
|
46
|
-
)
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
load_paralax = ->
|
|
50
|
-
if $(".section.image.fixed").length > 0
|
|
51
|
-
$(".section.image.fixed").each ->
|
|
52
|
-
build_paralax( $(@) )
|
|
53
|
-
|
|
54
|
-
if $(".responsive-hero.fixed-bg").length > 0
|
|
55
|
-
$(".responsive-hero.fixed-bg").each ->
|
|
56
|
-
build_paralax( $(@) )
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
13
|
|
|
62
14
|
|
|
63
15
|
navigate = ->
|
|
@@ -79,7 +31,6 @@ navigate = ->
|
|
|
79
31
|
lnk.addClass("active")
|
|
80
32
|
$("body").removeClass("aside-on")
|
|
81
33
|
loadCircles()
|
|
82
|
-
load_paralax()
|
|
83
34
|
$("#current-view-name").text( lnk.text() )
|
|
84
35
|
currentPath = path
|
|
85
36
|
|
|
@@ -20,6 +20,19 @@
|
|
|
20
20
|
</div>
|
|
21
21
|
|
|
22
22
|
|
|
23
|
+
<div class="section sctn-sm">
|
|
24
|
+
<div class="corset tight">
|
|
25
|
+
<h4><small>Version</small> 0.1.1</h4>
|
|
26
|
+
<p>
|
|
27
|
+
+ fullpage-table => <code>header-cell</code>, <code>footer-cell</code> default without bg
|
|
28
|
+
</p>
|
|
29
|
+
<p>
|
|
30
|
+
+ add timeline for <a href="#helper/dots">dots</a>
|
|
31
|
+
</p>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
|
|
23
36
|
<div class="section sctn-sm">
|
|
24
37
|
<div class="corset tight">
|
|
25
38
|
<h4><small>Version</small> 0.1.0</h4>
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
<div class="corset full center_text">
|
|
26
26
|
<h4 class="no-press-top">Warning</h4>
|
|
27
27
|
<p class="gray-clr thin">This Gem is still work in process!</p>
|
|
28
|
-
<p class="gray-clr thin">
|
|
28
|
+
<p class="gray-clr thin">(But it is already used in some production apps).</p>
|
|
29
29
|
<p class="gray-clr thin">It is mostly driven by my own habits, so I don't know if its usefull for others.</p>
|
|
30
30
|
<hr/>
|
|
31
31
|
<h4>Info</h4>
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
|
|
66
66
|
<div class="row">
|
|
67
67
|
<% for x, i in ["xs", "sm", "", "lg", "xl", "xxl"]: %>
|
|
68
|
-
<div class="col-xs-
|
|
68
|
+
<div class="col-xs-6 col-sm-3 col-md-2">
|
|
69
69
|
<div class="number_dot dot-brand<%= if x != "" then " dot-#{x}" else "" %>"><%= i + 1 %></div>
|
|
70
70
|
<div class="clearfix"></div>
|
|
71
71
|
<p><%= if x != "" then ".dot-#{x}" else "" %></p>
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
|
|
80
80
|
<div class="row">
|
|
81
81
|
<% for x, i in ["default", "success", "info", "warning", "danger", "brand", "one", "two", "three", "facebook", "google", "twitter", "paypal"]: %>
|
|
82
|
-
<div class="col-sm-
|
|
82
|
+
<div class="col-md-2 col-sm-4 col-xs-6">
|
|
83
83
|
<div class="number_dot dot-lg dot-<%= x %>"><%= i + 1 %></div>
|
|
84
84
|
<div class="clearfix"></div>
|
|
85
85
|
<p>.dot-<%= x %></p>
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
<hr/>
|
|
90
90
|
<p class="loud">plus <code>.dot-blank</code></p>
|
|
91
91
|
<% for x, i in ["default", "success", "info", "warning", "danger", "brand", "one", "two", "three", "facebook", "google", "twitter", "paypal"]: %>
|
|
92
|
-
<div class="col-sm-
|
|
92
|
+
<div class="col-md-2 col-sm-4 col-xs-6">
|
|
93
93
|
<div class="number_dot dot-lg dot-<%= x %> dot-blank"><%= i + 1 %></div>
|
|
94
94
|
<div class="clearfix"></div>
|
|
95
95
|
<p>.dot-<%= x %></p>
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
<hr/>
|
|
100
100
|
<p class="loud">plus <code>.dot-blank-soft</code></p>
|
|
101
101
|
<% for x, i in ["default", "success", "info", "warning", "danger", "brand", "one", "two", "three", "facebook", "google", "twitter", "paypal"]: %>
|
|
102
|
-
<div class="col-sm-
|
|
102
|
+
<div class="col-md-2 col-sm-4 col-xs-6">
|
|
103
103
|
<div class="number_dot dot-lg dot-<%= x %> dot-blank-soft"><%= i + 1 %></div>
|
|
104
104
|
<div class="clearfix"></div>
|
|
105
105
|
<p>.dot-<%= x %></p>
|
|
@@ -112,4 +112,21 @@
|
|
|
112
112
|
</div>
|
|
113
113
|
</div>
|
|
114
114
|
|
|
115
|
+
<div class="section hard-top">
|
|
116
|
+
<div class="corset">
|
|
117
|
+
|
|
118
|
+
<h3>Time-Lines</h3>
|
|
119
|
+
|
|
120
|
+
<div class="numbered_time_line">
|
|
121
|
+
<% for x in [1..7]: %>
|
|
122
|
+
<div class="numbered_line">
|
|
123
|
+
<div class="number_dot"><%= x %></div>
|
|
124
|
+
<p>Fact Number #<%= x %></p>
|
|
125
|
+
</div>
|
|
126
|
+
<% end %>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
115
132
|
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<div class="table-row">
|
|
12
12
|
<div class="cell table-cell content-cell fill">
|
|
13
13
|
|
|
14
|
-
<div class="corset center_text">
|
|
14
|
+
<div class="corset responsive-hero center_text">
|
|
15
15
|
<h1 class="loud white-clr upcase">FullPage Table</h1>
|
|
16
16
|
<p class="loud white-clr">
|
|
17
17
|
FullPage-Tables always use full page size!
|
|
@@ -38,42 +38,7 @@
|
|
|
38
38
|
</div>
|
|
39
39
|
<div class="clearfix"></div>
|
|
40
40
|
|
|
41
|
-
|
|
42
|
-
<div class="table-row">
|
|
43
|
-
<div class="banner-box responsive-hero with-footer with-header fill berlin">
|
|
44
|
-
<div class="banner-header">
|
|
45
|
-
<div class="corset">
|
|
46
|
-
<h1 class="loud">Fullpage Table</h1>
|
|
47
|
-
</div>
|
|
48
|
-
</div>
|
|
49
|
-
|
|
50
|
-
<div class="banner-content">
|
|
51
|
-
<div class="corset">
|
|
52
|
-
<p class="loud">This is a fullpage-table, it allways uses fullpage-height<br/>(if content fits in).</p>
|
|
53
|
-
<div class="well">
|
|
54
|
-
surounding element (i.e. body) needs the following <em>css</em>:
|
|
55
|
-
<br/>
|
|
56
|
-
<code>width: 100%; height: 100%;</code>
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
60
|
-
|
|
61
|
-
<div class="banner-footer" id="sign_up_banner">
|
|
62
|
-
<div class="corset">
|
|
63
|
-
<div class="row">
|
|
64
|
-
<div class="col-sm-4 col-sm-offset-4">
|
|
65
|
-
<!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
|
|
66
|
-
<button class="btn btn-success btn-block help_arrow fakeClick" data-text="Go click me!">
|
|
67
|
-
Click Me
|
|
68
|
-
</button>
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
71
|
-
</div>
|
|
72
|
-
</div>
|
|
73
|
-
|
|
74
|
-
</div>
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
41
|
+
|
|
77
42
|
|
|
78
43
|
|
|
79
44
|
<div class="section shine-top">
|
|
@@ -81,45 +46,102 @@
|
|
|
81
46
|
<h2>Usage</h2>
|
|
82
47
|
<pre>
|
|
83
48
|
<code>
|
|
84
|
-
<div class="fullpage-table" id="
|
|
85
|
-
<div class="table-row"><br/> <div class="banner-box responsive-hero with-footer with-header fill wood"><br/> <div class="banner-header"><br/> <div class="corset"><br/> <h1 class="loud">Fullpage Table</h1><br/> </div><br/> </div><br/> <br/> <div class="banner-content"><br/> <div class="corset"><br/> <p class="loud">This is a fullpage-table, it allways uses fullpage-height (if content fits in).</p><br/> </div><br/> </div><br/> <br/> <div class="banner-footer" id="sign_up_banner"><br/> <div class="corset"><br/> <div class="row"><br/> <div class="col-sm-4 col-sm-offset-4"><br/> <a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a><br/> </div><br/> </div><br/> </div><br/> </div><br/> <br/> </div><br/> </div><br/></div>
|
|
49
|
+
<div class="fullpage-table" id="banner-one"><br/> <div class="table-row"><br/> <div class="header-cell bright"><br/> <div class="corset center_text"><br/> <h1 class="loud">Fullpage Table</h1><br/> </div><br/> </div><br/> </div><br/> <div class="table-row"><br/> <div class="content-cell fill"><br/> <div class="corset responsive-hero center_text"><br/> <br/> <p class="loud ">This is a fullpage-table, it allways uses fullpage-height<br/>(if content fits in).</p><br/> <div class="well"><br/> surounding element (i.e. body) needs the following <em>css</em>:<br/> <br/><br/> <code>width: 100%; height: 100%;</code><br/> </div><br/> <br/> </div><br/> </div><br/> </div><br/> <div class="table-row"><br/> <div class="footer-cell bright"><br/> <div class="corset center_text"><br/> <br/> <div class="row"><br/> <div class="col-sm-4 col-sm-offset-4"><br/> <!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>--><br/> <button class="btn btn-success btn-block help_arrow fakeClick" data-text="Go click me!"><br/> Click Me<br/> </button><br/> </div><br/> </div><br/> <br/> </div><br/> </div><br/> </div><br/></div><br/>
|
|
86
50
|
</code>
|
|
87
51
|
</pre>
|
|
88
52
|
</div>
|
|
89
53
|
</div>
|
|
90
54
|
|
|
91
|
-
<div class="fullpage-table" id="banner-
|
|
55
|
+
<div class="fullpage-table" id="banner-one">
|
|
56
|
+
|
|
92
57
|
<div class="table-row">
|
|
93
|
-
<div class="
|
|
94
|
-
<div class="
|
|
95
|
-
<
|
|
96
|
-
<h1 class="loud">Fullpage Table <small>with fixed Background</small></h1>
|
|
97
|
-
</div>
|
|
58
|
+
<div class="header-cell bright">
|
|
59
|
+
<div class="corset center_text">
|
|
60
|
+
<h1 class="loud">Fullpage Table</h1>
|
|
98
61
|
</div>
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="table-row">
|
|
65
|
+
<div class="content-cell fill">
|
|
66
|
+
<div class="corset responsive-hero center_text">
|
|
67
|
+
|
|
68
|
+
<p class="loud ">This is a fullpage-table, it allways uses fullpage-height<br/>(if content fits in).</p>
|
|
69
|
+
<div class="well">
|
|
70
|
+
surounding element (i.e. body) needs the following <em>css</em>:
|
|
103
71
|
<br/>
|
|
104
|
-
<
|
|
105
|
-
<strong>!!!</strong> fixed background doesn't work on chrome browser (Version 35.x - 39.x) <strong>!!!</strong>
|
|
106
|
-
</div>
|
|
72
|
+
<code>width: 100%; height: 100%;</code>
|
|
107
73
|
</div>
|
|
74
|
+
|
|
108
75
|
</div>
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="table-row">
|
|
79
|
+
<div class="footer-cell bright">
|
|
80
|
+
<div class="corset center_text">
|
|
81
|
+
|
|
82
|
+
<div class="row">
|
|
83
|
+
<div class="col-sm-4 col-sm-offset-4">
|
|
84
|
+
<!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
|
|
85
|
+
<button class="btn btn-success btn-block help_arrow fakeClick" data-text="Go click me!">
|
|
86
|
+
Click Me
|
|
87
|
+
</button>
|
|
119
88
|
</div>
|
|
120
89
|
</div>
|
|
90
|
+
|
|
121
91
|
</div>
|
|
122
|
-
|
|
123
92
|
</div>
|
|
124
93
|
</div>
|
|
125
|
-
</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
<div class="section">
|
|
98
|
+
<div class="corset">
|
|
99
|
+
<h2>Sizes:</h2>
|
|
100
|
+
|
|
101
|
+
<p>For <code>.header-cell</code>, <code>.content-cell</code> and <code>.footer-cell</code> within the <code>fullpage-table</code>.
|
|
102
|
+
<table class="table">
|
|
103
|
+
<thead>
|
|
104
|
+
<tr>
|
|
105
|
+
<th>Class</th>
|
|
106
|
+
<th>Padding-Top</th>
|
|
107
|
+
<th>Padding-Bottom</th>
|
|
108
|
+
</tr>
|
|
109
|
+
</thead>
|
|
110
|
+
<tbody>
|
|
111
|
+
<tr>
|
|
112
|
+
<th> </th>
|
|
113
|
+
<td>20px</td>
|
|
114
|
+
<td>20px</td>
|
|
115
|
+
</tr>
|
|
116
|
+
<tr>
|
|
117
|
+
<th>.xs<br/>.flat</th>
|
|
118
|
+
<td>0</td>
|
|
119
|
+
<td>0</td>
|
|
120
|
+
</tr>
|
|
121
|
+
<tr>
|
|
122
|
+
<th>.sm</th>
|
|
123
|
+
<td>10px</td>
|
|
124
|
+
<td>10px</td>
|
|
125
|
+
</tr>
|
|
126
|
+
<tr>
|
|
127
|
+
<th>.lg</th>
|
|
128
|
+
<td>30px</td>
|
|
129
|
+
<td>30px</td>
|
|
130
|
+
</tr>
|
|
131
|
+
<tr>
|
|
132
|
+
<th>.xl</th>
|
|
133
|
+
<td>40px</td>
|
|
134
|
+
<td>40px</td>
|
|
135
|
+
</tr>
|
|
136
|
+
<tr>
|
|
137
|
+
<th>.dark</th>
|
|
138
|
+
<td colspan="2">Dark Background (<code>$fullpageDarkBG</code>)</td>
|
|
139
|
+
</tr>
|
|
140
|
+
<tr>
|
|
141
|
+
<th>.bright</th>
|
|
142
|
+
<td colspan="2">Bright Background (<code>$fullpageBrightBG</code>)</td>
|
|
143
|
+
</tr>
|
|
144
|
+
</tbody>
|
|
145
|
+
</table>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
@@ -188,16 +188,7 @@
|
|
|
188
188
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
189
189
|
</div>
|
|
190
190
|
</div>
|
|
191
|
-
|
|
192
|
-
<div class="corset">
|
|
193
|
-
<h4>.image.fixed</h4>
|
|
194
|
-
<br/>
|
|
195
|
-
<p>with pictures makes more sensce ...</p>
|
|
196
|
-
<br/><br/><br/>
|
|
197
|
-
<br/><br/><br/>
|
|
198
|
-
<br/><br/><br/>
|
|
199
|
-
</div>
|
|
200
|
-
</div>
|
|
191
|
+
|
|
201
192
|
|
|
202
193
|
<div class="section black">
|
|
203
194
|
<div class="corset">
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
7
7
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
8
8
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
9
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
10
|
-
<script src="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
9
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
|
|
10
|
+
<script src="//berlinmagic.github.io/magic_stylez/assets/application-f6b944362b05ca8e034bddd1145b4433.js"></script>
|
|
11
11
|
<meta content="authenticity_token" name="csrf-param" />
|
|
12
|
-
<meta content="
|
|
12
|
+
<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" name="csrf-token" />
|
|
13
13
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
14
14
|
<link href="//berlinmagic.github.io/magic_stylez/assets/ico/favicon-f1706407301f788c54691b6995f60a8f.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
|
|
15
15
|
<link href="//berlinmagic.github.io/magic_stylez/assets/ico/favicon-f34b54df445838a4f6bdac98bd904570.png" rel="shortcut icon" type="image/png" />
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
<div class="corset">
|
|
125
125
|
<div class="row">
|
|
126
126
|
<div class="col-sm-9 col-xs-6">
|
|
127
|
-
<h1>magic-stylez <small>0.1.
|
|
127
|
+
<h1>magic-stylez <small>0.1.1</small></h1>
|
|
128
128
|
</div>
|
|
129
129
|
<div class="col-sm-3 col-xs-6">
|
|
130
130
|
<a href="https://github.com/berlinmagic/magic_stylez/tree/master" target="_blank" class="btn btn-sm btn-default btn-divided pull-right">
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<title>Magic-Stylez</title>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
6
|
-
<link href="//berlinmagic.github.io/magic_stylez/assets/application-
|
|
6
|
+
<link href="//berlinmagic.github.io/magic_stylez/assets/application-ce916b0eeded3756852d46737705e053.css" media="all" rel="stylesheet" />
|
|
7
7
|
<script src="//berlinmagic.github.io/magic_stylez/assets/blank-3d36ea4463c48b99876e23297fb09063.js"></script>
|
|
8
8
|
<meta content="authenticity_token" name="csrf-param" />
|
|
9
|
-
<meta content="
|
|
9
|
+
<meta content="YDkHSBFC2WjbL1fZsiGaCcCYNnseSw4ekWROMWLlGko=" name="csrf-token" />
|
|
10
10
|
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
|
|
11
11
|
<script type="text/javascript" charset="utf-8">
|
|
12
12
|
App = {};
|
|
@@ -75,6 +75,13 @@
|
|
|
75
75
|
background-size: cover;
|
|
76
76
|
background-image: image-url('magic/bgs/seucide.jpg');
|
|
77
77
|
}
|
|
78
|
+
#banner-one {
|
|
79
|
+
background-color: rgba(255,255,255,.50);
|
|
80
|
+
background-position: center center;
|
|
81
|
+
background-repeat: no-repeat;
|
|
82
|
+
background-size: cover;
|
|
83
|
+
background-image: image-url("magic/bgs/hdr_landsberger.jpg");
|
|
84
|
+
}
|
|
78
85
|
|
|
79
86
|
.pic-bottom {
|
|
80
87
|
display: block; display: inline-block; position: relative;
|
|
@@ -118,3 +118,67 @@
|
|
|
118
118
|
|
|
119
119
|
|
|
120
120
|
|
|
121
|
+
.numbered_time_line {
|
|
122
|
+
display: block; position: relative;
|
|
123
|
+
|
|
124
|
+
.numbered_line {
|
|
125
|
+
display: block; position: relative;
|
|
126
|
+
text-align: left;
|
|
127
|
+
padding: 6px 0 6px 50px;
|
|
128
|
+
margin: 0 0 40px;
|
|
129
|
+
|
|
130
|
+
.number_dot {
|
|
131
|
+
position: absolute;
|
|
132
|
+
left: 0; top: 0;
|
|
133
|
+
background: $brand-color;
|
|
134
|
+
border: none;
|
|
135
|
+
line-height: 40px;
|
|
136
|
+
font-weight: 300;
|
|
137
|
+
}
|
|
138
|
+
p {
|
|
139
|
+
margin: 0;
|
|
140
|
+
line-height: 28px;
|
|
141
|
+
color: #333 !important;
|
|
142
|
+
font-weight: 400;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
&:before {
|
|
147
|
+
display: block; position: absolute;
|
|
148
|
+
margin: 0; padding: 0;
|
|
149
|
+
content: "";
|
|
150
|
+
top: 0; left: 19px; bottom: 0; width: 2px;
|
|
151
|
+
background: $brand-color;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
159
|
+
@include responsiveStep-sm {
|
|
160
|
+
|
|
161
|
+
.numbered_time_line {
|
|
162
|
+
.numbered_line {
|
|
163
|
+
&:nth-child(even) {
|
|
164
|
+
text-align: right;
|
|
165
|
+
margin-right: 50%;
|
|
166
|
+
padding: 6px 30px 6px 0px;
|
|
167
|
+
.number_dot { left: auto; right: -20px; }
|
|
168
|
+
}
|
|
169
|
+
&:nth-child(odd) {
|
|
170
|
+
margin-left: 50%;
|
|
171
|
+
padding: 6px 0px 6px 30px;
|
|
172
|
+
.number_dot { left: -20px; }
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
&:before {
|
|
176
|
+
margin-left: -1px;
|
|
177
|
+
left: 50%;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
|
|
@@ -4,6 +4,11 @@ html, body, #body {
|
|
|
4
4
|
// overflow-y: auto;
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
+
|
|
8
|
+
$fullpageBrightBG: rgba(255,255,255,.42) !default;
|
|
9
|
+
$fullpageDarkBG: rgba(0,0,0,.23) !default;
|
|
10
|
+
|
|
11
|
+
|
|
7
12
|
.fullpage-table, div.table {
|
|
8
13
|
width: 100%;
|
|
9
14
|
display: block;
|
|
@@ -17,10 +22,14 @@ html, body, #body {
|
|
|
17
22
|
}
|
|
18
23
|
}
|
|
19
24
|
|
|
20
|
-
.header-cell, .footer-cell {
|
|
25
|
+
.header-cell, .footer-cell, .content-cell {
|
|
21
26
|
padding: 20px 0;
|
|
22
|
-
|
|
23
|
-
&.
|
|
27
|
+
&.xs, &.flat { padding: 0; }
|
|
28
|
+
&.sm { padding: 10px 0; }
|
|
29
|
+
&.lg { padding: 30px 0; }
|
|
30
|
+
&.xl { padding: 40px 0; }
|
|
31
|
+
&.bright { background: $fullpageBrightBG; }
|
|
32
|
+
&.dark { background: $fullpageDarkBG; }
|
|
24
33
|
}
|
|
25
34
|
|
|
26
35
|
}
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: magic_stylez
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Torsten Wetzel
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-04-
|
|
11
|
+
date: 2017-04-29 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|