magic_stylez 0.0.0.36 → 0.0.0.37
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.
- checksums.yaml +4 -4
- data/lib/magic_stylez/version.rb +1 -1
- data/test/dummy/README.md +19 -0
- data/test/dummy/app/assets/javascripts/app.js.coffee +4 -0
- data/test/dummy/app/assets/javascripts/blank.js.coffee +20 -0
- data/test/dummy/app/assets/javascripts/views/layout/fullpage_table.jst.eco +2 -2
- data/test/dummy/app/assets/javascripts/views/templates/aside-nav.jst.eco +5 -0
- data/test/dummy/app/assets/javascripts/views/templates/fixed_header.jst.eco +1 -1
- data/test/dummy/app/assets/javascripts/views/templates/responsive_slidebar.jst.eco +1 -1
- data/test/dummy/app/assets/stylesheets/application.css.scss +14 -3
- data/test/dummy/app/assets/stylesheets/corporate/_fonts.scss +4 -0
- data/test/dummy/app/assets/stylesheets/corporate/_typo.scss +2 -0
- data/test/dummy/app/assets/stylesheets/corporate/_variables.scss +94 -0
- data/test/dummy/app/controllers/front_controller.rb +1 -1
- data/test/dummy/app/views/front/templates.html.erb +1 -1
- data/test/dummy/app/views/layouts/application.html.erb +1 -1
- data/test/dummy/app/views/layouts/blank.html.erb +1 -3
- data/test/dummy/app/views/templates/aside-nav.html.erb +137 -0
- data/test/dummy/app/views/templates/fixed-header.html.erb +45 -43
- data/test/dummy/app/views/templates/responsive-slidebar.html.erb +48 -46
- data/test/dummy/public/favicon.ico +0 -0
- data/test/dummy/public/favicon.png +0 -0
- data/test/dummy/public/html/aside-nav.html +241 -0
- data/test/dummy/public/html/fixed-header.html +46 -45
- data/test/dummy/public/html/index.html +5 -4
- data/test/dummy/public/html/responsive-slidebar.html +49 -48
- data/vendor/assets/stylesheets/corporate/_fonts.scss +4 -0
- data/vendor/assets/stylesheets/corporate/_variables.scss +45 -0
- data/vendor/assets/stylesheets/magic/content/_aside_nav.scss +139 -0
- data/vendor/assets/stylesheets/magic/content/_navbar.scss +50 -43
- data/vendor/assets/stylesheets/magic/content/_notice.scss +79 -0
- data/vendor/assets/stylesheets/magic/lib/_cross_browser.scss +10 -0
- data/vendor/assets/stylesheets/magic-min.scss +2 -0
- data/vendor/assets/stylesheets/magic-stylez.scss +2 -0
- metadata +16 -6
- data/test/dummy/README.rdoc +0 -28
- data/test/dummy/app/assets/javascripts/blank.js +0 -14
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b8f9284ecc90df3548387988c83d49d0fc75e40d
|
|
4
|
+
data.tar.gz: be61780840cbd81c2aa1d31078bae4f5121e2841
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 3251bb7e692fd1cb8eb62e3e344dd9cf6a110b83022d804eaa80a98b74febda9d79beb0b9330a71a34fbeff933cd313e50631dcda7b188ffbade32fab624613c
|
|
7
|
+
data.tar.gz: 0ee4d9aca8d539fde8b1b9fbb42f63fcac009f3e28d44b792741387ef80e026041b4ba0bb6aef51ed8ceabb47463a55afe797dbcaf035a9bf35fe9ba33097d0d
|
data/lib/magic_stylez/version.rb
CHANGED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
## Magic-Styles dummy app
|
|
2
|
+
|
|
3
|
+
### Used to compile styles
|
|
4
|
+
|
|
5
|
+
This app is used to compile the assets via sprockets for GH-Pages.
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Usage:
|
|
9
|
+
|
|
10
|
+
bundle exec rake assets:precompile RAILS_ENV=production
|
|
11
|
+
|
|
12
|
+
rails s -p production
|
|
13
|
+
|
|
14
|
+
copy page-html ... because there is no page-caching in rails4 :(
|
|
15
|
+
|
|
16
|
+
- /
|
|
17
|
+
- /fixed-header
|
|
18
|
+
- /responsive-slidebar
|
|
19
|
+
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
# This is a manifest file that'll be compiled into application.js, which will include all the files
|
|
2
|
+
# listed below.
|
|
3
|
+
#
|
|
4
|
+
# Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
|
|
5
|
+
# or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
|
|
6
|
+
#
|
|
7
|
+
# It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
|
|
8
|
+
# compiled file.
|
|
9
|
+
#
|
|
10
|
+
# Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
|
|
11
|
+
# about supported directives.
|
|
12
|
+
#
|
|
13
|
+
#= require jquery
|
|
14
|
+
#= require magic-min
|
|
15
|
+
|
|
16
|
+
$ ->
|
|
17
|
+
|
|
18
|
+
$("body").on "click", ".hide_da_notice", ->
|
|
19
|
+
$("body").toggleClass("with_important_notice")
|
|
20
|
+
false
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
<div class="row">
|
|
19
19
|
<div class="col-sm-4 col-sm-offset-4">
|
|
20
20
|
<!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
|
|
21
|
-
<button class="btn btn-success btn-block help_arrow" data-
|
|
21
|
+
<button class="btn btn-success btn-block help_arrow" data-text="Go click me!">
|
|
22
22
|
Click Me
|
|
23
23
|
</button>
|
|
24
24
|
</div>
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
<div class="row">
|
|
64
64
|
<div class="col-sm-4 col-sm-offset-4">
|
|
65
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" data-
|
|
66
|
+
<button class="btn btn-success btn-block help_arrow" data-text="Go click me!">
|
|
67
67
|
Click Me
|
|
68
68
|
</button>
|
|
69
69
|
</div>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<iframe src="<%= "#{rootPath()}fixed-header" %>" name="SELFHTML_in_a_box" id="mainFrame">
|
|
2
2
|
<p>Sorry, your Browser doesn't like Frames.
|
|
3
3
|
But we would need an iframe to show the template stuff
|
|
4
|
-
<a href="
|
|
4
|
+
<a href="/fixed-header">Fixed Header</a></p>
|
|
5
5
|
</iframe>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<iframe src="<%= "#{rootPath()}responsive-slidebar" %>" name="SELFHTML_in_a_box" id="mainFrame">
|
|
2
2
|
<p>Sorry, your Browser doesn't like Frames.
|
|
3
3
|
But we would need an iframe to show the template stuff
|
|
4
|
-
<a href="
|
|
4
|
+
<a href="/responsive-slidebar">Responsive Slidebar</a></p>
|
|
5
5
|
</iframe>
|
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
html, body {
|
|
4
4
|
width: 100%; height: 100%; position: relative;
|
|
5
|
-
margin: 0; padding: 0;
|
|
6
5
|
background: #f3f2f2;
|
|
7
6
|
}
|
|
8
7
|
body {
|
|
9
8
|
position: relative;
|
|
10
|
-
padding: 0 0 0 220px;
|
|
11
9
|
&.blank {
|
|
12
|
-
margin: 0; padding: 0;
|
|
13
10
|
background: #fff;
|
|
14
11
|
}
|
|
12
|
+
&.main_template {
|
|
13
|
+
padding: 0 0 0 220px;
|
|
14
|
+
}
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
#app_content {
|
|
@@ -91,6 +91,17 @@ body {
|
|
|
91
91
|
// padding: 10px 0;
|
|
92
92
|
// }
|
|
93
93
|
// .banner-footer { background: rgba(0,0,0,.23); }
|
|
94
|
+
|
|
95
|
+
// http://lorempixel.com/g/1200/500/nature/
|
|
96
|
+
|
|
97
|
+
&.lorempixel {
|
|
98
|
+
background-color: rgba(255,255,255,.50);
|
|
99
|
+
background-position: center center;
|
|
100
|
+
background-repeat: no-repeat;
|
|
101
|
+
background-size: cover;
|
|
102
|
+
background-image: image-url('http://lorempixel.com/g/1200/500/nature/');
|
|
103
|
+
}
|
|
104
|
+
|
|
94
105
|
}
|
|
95
106
|
|
|
96
107
|
|
|
@@ -95,6 +95,7 @@ $magicHandwritten: 'Gloria Hallelujah', cursive;
|
|
|
95
95
|
$smallReadFont: $magicCondensedSans;
|
|
96
96
|
$readFont: $magicSans;
|
|
97
97
|
$bigFont: $magicSans;
|
|
98
|
+
$alternateBigFont: $magicSans;
|
|
98
99
|
$dekoFont: $magicHandwritten;
|
|
99
100
|
|
|
100
101
|
|
|
@@ -102,11 +103,13 @@ $dekoFont: $magicHandwritten;
|
|
|
102
103
|
@mixin smallReadFont { font-family: $smallReadFont; }
|
|
103
104
|
@mixin readFont { font-family: $readFont; }
|
|
104
105
|
@mixin bigFont { font-family: $bigFont; }
|
|
106
|
+
@mixin alternateBigFont { font-family: $alternateBigFont; }
|
|
105
107
|
@mixin dekoFont { font-family: $dekoFont; }
|
|
106
108
|
|
|
107
109
|
.smallReadFont { @include smallReadFont; }
|
|
108
110
|
.readFont { @include readFont; }
|
|
109
111
|
.bigFont { @include bigFont; }
|
|
112
|
+
.alternateBigFont { @include alternateBigFont; }
|
|
110
113
|
.dekoFont { @include dekoFont; }
|
|
111
114
|
|
|
112
115
|
|
|
@@ -117,6 +120,7 @@ $dekoFont: $magicHandwritten;
|
|
|
117
120
|
|
|
118
121
|
|
|
119
122
|
|
|
123
|
+
|
|
120
124
|
// C S S - F O N T S
|
|
121
125
|
|
|
122
126
|
@mixin eingabeText { font-family: $lucida-grande; }
|
|
@@ -47,6 +47,55 @@ $border-radius-large: 6px !default;
|
|
|
47
47
|
$border-radius-small: 3px !default;
|
|
48
48
|
|
|
49
49
|
|
|
50
|
+
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
51
|
+
// Sections
|
|
52
|
+
//
|
|
53
|
+
|
|
54
|
+
// Padding
|
|
55
|
+
$section-padding: 50px !default;
|
|
56
|
+
$section-head-padding: 10px !default;
|
|
57
|
+
$section-compact-padding: 10px !default;
|
|
58
|
+
$section-flatted-padding: 30px !default;
|
|
59
|
+
$section-fat-padding: 80px !default;
|
|
60
|
+
$section-fatter-padding: 120px !default;
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
// Colors
|
|
65
|
+
$section-background: $main-bg !default;
|
|
66
|
+
$section-input-bg: $white !default;
|
|
67
|
+
|
|
68
|
+
$section-head-background: #fff !default;
|
|
69
|
+
$section-head-input-bg: $main-bg !default;
|
|
70
|
+
$section-head-color: $brand-color !default;
|
|
71
|
+
$section-head-small-color: $gray-light !default;
|
|
72
|
+
|
|
73
|
+
$section-dark-background: $dark-bg !default;
|
|
74
|
+
$section-dark-input-bg: $white !default;
|
|
75
|
+
|
|
76
|
+
$section-bright-background: $bright-bg !default;
|
|
77
|
+
$section-bright-input-bg: $main-bg !default;
|
|
78
|
+
|
|
79
|
+
$section-brand-background: $brand-bg !default;
|
|
80
|
+
$section-brand-input-bg: $white !default;
|
|
81
|
+
|
|
82
|
+
$section-soft-background: $soft-bg !default;
|
|
83
|
+
$section-soft-input-bg: $white !default;
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
$section-head-line-height: 30px !default;
|
|
87
|
+
$section-head-font-size: 20px !default;
|
|
88
|
+
|
|
89
|
+
// Reset margin of first and last childs, so section controls spacing
|
|
90
|
+
$section-reset-child-spacing: true !default;
|
|
91
|
+
$section-reset-row-child-spacing: true !default;
|
|
92
|
+
$section-reset-table-child-spacing: true !default;
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
50
99
|
//** Width of the `border` for generating carets that indicator dropdowns.
|
|
51
100
|
$caret-width-base: 4px !default;
|
|
52
101
|
//** Carets increase slightly in size for larger components.
|
|
@@ -90,6 +139,8 @@ $zindex-dropdown: 1000 !default;
|
|
|
90
139
|
$zindex-popover: 1060 !default;
|
|
91
140
|
$zindex-tooltip: 1070 !default;
|
|
92
141
|
$zindex-navbar-fixed: 1030 !default;
|
|
142
|
+
$zindex-aside-nav: 1030 !default;
|
|
143
|
+
$zindex-important-notice: 1020 !default;
|
|
93
144
|
$zindex-modal-background: 1040 !default;
|
|
94
145
|
$zindex-modal: 1050 !default;
|
|
95
146
|
|
|
@@ -168,12 +219,55 @@ $container-large-desktop: ((1140px + $grid-gutter-width)) !default;
|
|
|
168
219
|
$container-lg: $container-large-desktop !default;
|
|
169
220
|
|
|
170
221
|
|
|
222
|
+
|
|
223
|
+
|
|
224
|
+
//== Important Notice
|
|
225
|
+
//
|
|
226
|
+
//##
|
|
227
|
+
$important-notice-height: 30px !default;
|
|
228
|
+
|
|
229
|
+
$important-notice-top: 0px !default;
|
|
230
|
+
$important-notice-bottom: auto !default;
|
|
231
|
+
|
|
232
|
+
$important-notice-font-size: 16px !default;
|
|
233
|
+
$important-notice-font-weight: 300 !default;
|
|
234
|
+
$important-notice-link-weight: 600 !default;
|
|
235
|
+
|
|
236
|
+
$important-notice-bg: #e5e5e5 !default;
|
|
237
|
+
$important-notice-color: #333 !default;
|
|
238
|
+
$important-notice-link-color: $important-notice-color !default;
|
|
239
|
+
|
|
240
|
+
$important-notice-warning-bg: #e3d396 !default;
|
|
241
|
+
$important-notice-warning-color: #cc3300 !default;
|
|
242
|
+
$important-notice-warning-link-color: $important-notice-warning-color !default;
|
|
243
|
+
|
|
244
|
+
$important-notice-alert-bg: #db321a !default;
|
|
245
|
+
$important-notice-alert-color: #fff !default;
|
|
246
|
+
$important-notice-alert-link-color: $important-notice-alert-color !default;
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
//== Aside-Navigation
|
|
250
|
+
//
|
|
251
|
+
//##
|
|
252
|
+
$aside-nav-width: 50px !default;
|
|
253
|
+
$aside-nav-btn-height: 50px !default;
|
|
254
|
+
$aside-nav-avatar-height: 60px !default;
|
|
255
|
+
|
|
256
|
+
$aside-nav-background: #e1e1e1 !default;
|
|
257
|
+
$aside-nav-border-color: #cccccc !default;
|
|
258
|
+
|
|
259
|
+
|
|
171
260
|
//== Navbar
|
|
172
261
|
//
|
|
173
262
|
//##
|
|
174
263
|
|
|
175
264
|
// Basics of a navbar
|
|
265
|
+
$navbar-height-xs: 30px !default;
|
|
266
|
+
$navbar-height-sm: 40px !default;
|
|
176
267
|
$navbar-height: 50px !default;
|
|
268
|
+
$navbar-height-lg: 60px !default;
|
|
269
|
+
$navbar-height-xl: 80px !default;
|
|
270
|
+
|
|
177
271
|
$navbar-margin-bottom: $line-height-computed !default;
|
|
178
272
|
$navbar-border-radius: $border-radius-base !default;
|
|
179
273
|
$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
<body class="with_aside_nav with_important_notice fixed-nav-lg">
|
|
2
|
+
|
|
3
|
+
<div class="important_notice development">
|
|
4
|
+
<div class="row">
|
|
5
|
+
<div class="col-xs-2" style="font-size: 24px;">
|
|
6
|
+
<i class="magicons-info-round"></i>
|
|
7
|
+
</div>
|
|
8
|
+
<div class="col-xs-8">
|
|
9
|
+
Diese Seite ist nur eine Demo, bitte nutzen Sie: <a href="http://berlinmagic.github.io/magic_stylez/">magic_stylez</a>
|
|
10
|
+
</div>
|
|
11
|
+
<div class="col-xs-2" style="font-size: 24px;">
|
|
12
|
+
<i class="magicons-info-round"></i>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-lg navbar-slidebar" role="navigation">
|
|
18
|
+
<div class="corset">
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
<div class="navbar-header">
|
|
23
|
+
<button type="button" class="navbar-toggle slidebar-toggle" data-target="#front-main-nav-colapse">
|
|
24
|
+
<span class="sr-only">Toggle navigation</span>
|
|
25
|
+
<span class="icon-bar"></span>
|
|
26
|
+
<span class="icon-bar"></span>
|
|
27
|
+
<span class="icon-bar"></span>
|
|
28
|
+
</button>
|
|
29
|
+
<%= link_to "Magic-Stylez", "#", class: "navbar-brand" %>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="collapse navbar-collapse" id="front-main-nav-colapse">
|
|
32
|
+
<ul class="nav navbar-nav navbar-left">
|
|
33
|
+
<li><%= link_to "Link", "#" %></li>
|
|
34
|
+
<li><%= link_to "Link", "#" %></li>
|
|
35
|
+
|
|
36
|
+
</ul>
|
|
37
|
+
<ul class="nav navbar-nav navbar-right">
|
|
38
|
+
<li class="dropdown">
|
|
39
|
+
<%= link_to "#", class: "dropdown-toggle", data: {toggle: "dropdown"} do %>
|
|
40
|
+
Dropdown <b class="caret"></b>
|
|
41
|
+
<% end %>
|
|
42
|
+
<ul class="dropdown-menu">
|
|
43
|
+
<li><%= link_to "Link 1", "#" %></li>
|
|
44
|
+
<li><%= link_to "Link 2", "#" %></li>
|
|
45
|
+
<li><%= link_to "Link 3", "#" %></li>
|
|
46
|
+
</ul>
|
|
47
|
+
</li>
|
|
48
|
+
<li><%= link_to "Button", "#", class: "btn btn-success" %></li>
|
|
49
|
+
</ul>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div id="nav-aside" class="fixed-left">
|
|
56
|
+
<div class="inner-aside">
|
|
57
|
+
|
|
58
|
+
<div class="aside-btn user-pic">
|
|
59
|
+
<img alt="User Picture" src="http://lorempixel.com/g/50/60/people/" />
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<a class="aside-btn" href="#" title="Dashboard">
|
|
63
|
+
<i class='glyphicon glyphicon-home'></i>
|
|
64
|
+
</a>
|
|
65
|
+
<a class="aside-btn active" href="#" title="Settings">
|
|
66
|
+
<i class='glyphicon glyphicon-cog'></i>
|
|
67
|
+
</a>
|
|
68
|
+
<a class="aside-btn" href="#" title="Inbox">
|
|
69
|
+
<i class='glyphicon glyphicon-inbox'></i>
|
|
70
|
+
</a>
|
|
71
|
+
<a class="aside-btn" href="#" title="Pictures">
|
|
72
|
+
<i class='glyphicon glyphicon-picture'></i>
|
|
73
|
+
</a>
|
|
74
|
+
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
<div class="fullpage-table" id="banner-one">
|
|
82
|
+
<div class="table-row">
|
|
83
|
+
<div class="banner-box responsive-hero with-footer with-header fill lorempixel" style="background-image: url('http://lorempixel.com/g/1200/500/nature/')">
|
|
84
|
+
<div class="banner-header">
|
|
85
|
+
<div class="corset">
|
|
86
|
+
<h1 class="loud">Responsive Aside-Nav</h1>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<div class="banner-content">
|
|
91
|
+
<div class="corset">
|
|
92
|
+
<p class="loud">This is a fullpage-table, it allways uses fullpage-height<br/>(if content fits in).</p>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="banner-footer" id="sign_up_banner">
|
|
97
|
+
<div class="corset">
|
|
98
|
+
<div class="row">
|
|
99
|
+
<div class="col-sm-4 col-sm-offset-4">
|
|
100
|
+
<!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
|
|
101
|
+
<button class="btn btn-success btn-block help_arrow hide_da_notice" data-text="Turn off notice!">
|
|
102
|
+
Click Me
|
|
103
|
+
</button>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<div class="main_content">
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
<div class="section dark">
|
|
121
|
+
<div class="corset">
|
|
122
|
+
<h1>Responsive Slidebar</h1>
|
|
123
|
+
<br/>
|
|
124
|
+
<p class="loud">
|
|
125
|
+
Turns the usual twbs <em>navbar-collapse</em> into a nice slidebar. .. try it out:<br/>
|
|
126
|
+
make your screen smaller than 768px and press the header-toggle
|
|
127
|
+
</p>
|
|
128
|
+
<br/>
|
|
129
|
+
<h4>dependency:</h4>
|
|
130
|
+
<code>@import "magic/content/navbar";</code>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<%= render "templates/lorem" %>
|
|
135
|
+
|
|
136
|
+
</div>
|
|
137
|
+
</body>
|