This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

Switched from <style scoped> to <style type="text/less">

  • Loading branch information...
dmfrancisco committed Aug 5, 2011
1 parent 45647f9 commit 2b0dbb93f14498e5d1f4ec33bbc6efda9d296691
View
@@ -18,9 +18,6 @@
<!-- These are the styles you'll add to make the slides look great -->
<link rel="stylesheet/less" href="<%= @root %>/styles/styles.less" />
- <!-- Compile your LESS stylesheets -->
- <script src="lib/less-1.1.3.min.js"></script>
-
<title>slideshow.html</title>
</head>
@@ -61,6 +58,7 @@ <h1 class="hide">An example slideshow</h1>
<script src="lib/jquery-1.5.2.min.js"></script>
<script src="lib/jquery.jswipe-0.1.2.min.js"></script>
+ <script src="lib/less-1.1.3.min.js"></script>
<script src="lib/html-slides.js"></script>
<% if @live %><script src="lib/live.min.js"></script><% end %>
@@ -5,12 +5,14 @@
<h1>slideshow.html</h1>
<h2><span class="serif">yet another</span> HTML5 Presentation Assembler</h2>
</hgroup>
+</section>
- <style scoped>
- #slide1 .stripes {
+<style type="text/less">
+ #slide1 {
+ .stripes {
height: 270px;
}
- #slide1 h1 {
+ h1 {
font-size: 105px;
color: #111;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(255, 255, 255, 0.3);
@@ -26,17 +28,17 @@
background-position: 0px 33px;
background-repeat: no-repeat;
}
- #slide1 h2 {
+ h2 {
font-size: 32px;
color: #464655;
text-shadow: 0 1px 1px #fff;
line-height: 25px;
margin-top: 10px;
}
- #slide1 h2 .serif {
+ h2 .serif {
font-size: 40px;
padding-right: 5px;
font-style: italic;
}
- </style>
-</section>
+ }
+</style>
@@ -29,18 +29,20 @@
<mark>slideshow.html</mark> is just a compiled file with all these data
</p>
</div>
+</section>
- <style scoped>
- #slide2 .serif {
+<style type="text/less">
+ #slide2 {
+ .serif {
font-size: 36px;
font-style: italic;
}
- #slide2 .note {
+ .note {
padding-left: 5px;
font-size: 26px;
}
- #slide2 img {
+ img {
display: inline;
}
- </style>
-</section>
+ }
+</style>
@@ -19,13 +19,15 @@
It even automatically refreshes the tab in your browser
</p>
</div>
+</section>
- <style scoped>
- #slide3 p {
+<style type="text/less">
+ #slide3 {
+ p {
font-size: 40px;
}
- #slide3 .note {
+ .note {
text-align: center;
}
- </style>
-</section>
+ }
+</style>
@@ -22,16 +22,18 @@
</div>
</div>
+</section>
- <style scoped>
- #slide4 .na { color: #929292 } /* Name.Attribute */
- #slide4 .nt { color: #929292 } /* Name.Tag */
- #slide4 .nf { color: #4c4a45 } /* Name.Function */
- #slide4 .s { color: #6BA81E } /* Literal.String */
- #slide4 .k { color: #4c4a45 } /* Keyword */
- #slide4 .m { color: #6BA81E } /* Literal.Number */
+<style type="text/less">
+ #slide4 {
+ .na { color: #929292 } /* Name.Attribute */
+ .nt { color: #929292 } /* Name.Tag */
+ .nf { color: #4c4a45 } /* Name.Function */
+ .s { color: #6BA81E } /* Literal.String */
+ .k { color: #4c4a45 } /* Keyword */
+ .m { color: #6BA81E } /* Literal.Number */
- #slide4 pre {
+ pre {
background-color: #eee;
margin: 30px auto;
padding: 15px;
@@ -40,5 +42,5 @@
text-shadow: none;
color: #222;
}
- </style>
-</section>
+ }
+</style>
@@ -23,13 +23,15 @@
<p class="action note">(but you don't need to bother with that)</p>
</div>
+</section>
- <style scoped>
- #slide5 .note {
+<style type="text/less">
+ #slide5 {
+ .note {
text-align: center;
}
- #slide5 .gap {
+ .gap {
height: 30px;
}
- </style>
-</section>
+ }
+</style>
@@ -10,14 +10,16 @@
<span class="serif">&amp;</span> go <mark>fullscreen</mark>
</span></p>
</div>
+</section>
- <style scoped>
- #slide6 p {
+<style type="text/less">
+ #slide6 {
+ p {
font-size: 50px;
}
- #slide6 .serif {
+ .serif {
font-family: 'Crimson Text', 'Baskerville', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-style: italic;
}
- </style>
-</section>
+ }
+</style>
@@ -2,11 +2,13 @@
<div class="stripes"></div>
<h1>thank you for watching</h1>
+</section>
- <style scoped>
- #slide7 h1 {
+<style type="text/less">
+ #slide7 {
+ h1 {
padding-top: 600px;
border: none;
}
- </style>
-</section>
+ }
+</style>
@@ -31,45 +31,42 @@
<span class="serif"><em>by</em></span> Martin Aumont (and others)
</p>
</div>
+</section>
+
+<style type="text/less">
+ /* Set of useful mixins (lesselements.com/) */
+ @import "<%= @root %>/styles/elements";
- <style scoped>
- #slide8 h1 {
+ #slide8 {
+ h1 {
font-size: 40px;
}
- #slide8.cover {
+ &.cover {
text-align: left;
vertical-align: middle;
}
- #slide8 .serif {
+ .serif {
padding-right: 10px;
}
- #slide8 .link {
+ .link {
padding-right: 10px;
padding-left: 10px;
margin-left: 10px;
font: 20px Monaco, Consolas, "Lucida Console", monospace;
background: #F9C006;
text-shadow: none;
-
- box-shadow: 1px 1px 1px #888;
- -webkit-box-shadow: 1px 1px 1px #888;
- -moz-box-shadow: 1px 1px 1px #888;
-
- -webkit-border-radius: 20px;
- -moz-border-radius: 20px;
- border-radius: 20px;
+ .box-shadow(1px 1px 1px #888);
+ .rounded(20px);
}
- #slide8 .link a,
- #slide8 .link a:visited,
- #slide8 .link a:hover {
+ .link a, .link a:visited, .link a:hover {
color: #444;
text-decoration: none;
}
- #slide8 .note {
+ .note {
color: #5d5d5d;
}
- #slide8 img {
+ img {
display: inline;
}
- </style>
-</section>
+ }
+</style>
@@ -2,16 +2,16 @@
<div class="stripes"></div>
<h1><a href="http://slideshow.dmfranc.com/">slideshow.dmfranc.com</a></h1>
+</section>
- <style scoped>
- #slide9 h1 {
+<style type="text/less">
+ #slide9 {
+ h1 {
padding-top: 600px;
border: none;
}
- #slide9 a,
- #slide9 a:visited,
- #slide9 a:hover {
+ a, a:visited, a:hover {
color: #000;
}
- </style>
-</section>
+ }
+</style>

0 comments on commit 2b0dbb9

Please sign in to comment.