Compass Example
This commit is contained in:
parent
7c465cc05d
commit
975f06daa1
19
examples/compass/compass.html
Normal file
19
examples/compass/compass.html
Normal file
@ -0,0 +1,19 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Compass Example</title>
|
||||
<link rel="stylesheet" href="stylesheets/compass.css" type="text/css" media="screen, projection">
|
||||
</head>
|
||||
<body>
|
||||
<div class="compass">
|
||||
<div class="n"><p>North</p></div>
|
||||
<div class="n e"><p>North<br/>East</p></div>
|
||||
<div class="e"><p>East</p></div>
|
||||
<div class="s e"><p>South<br/>East</p></div>
|
||||
<div class="s"><p>South</p></div>
|
||||
<div class="s w"><p>South<br/>West</p></div>
|
||||
<div class="w"><p>West</p></div>
|
||||
<div class="n w"><p>North<br/>West</p></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
47
examples/compass/stylesheets/compass.sass
Normal file
47
examples/compass/stylesheets/compass.sass
Normal file
@ -0,0 +1,47 @@
|
||||
=compass(!s)
|
||||
:position relative
|
||||
:width= 4 * !s
|
||||
:height= 4 * !s
|
||||
:font-size 24px
|
||||
:font-family "Academy Engraved LET", "Papyrus"
|
||||
.n, .s, .e, .w
|
||||
:position absolute
|
||||
:width= !s
|
||||
:height= !s
|
||||
:text-align center
|
||||
:vertical-align middle
|
||||
.w
|
||||
:left 0px
|
||||
.n.w, .s.w
|
||||
:left= 0.5 * !s
|
||||
.n, .s
|
||||
:left= 1.5 * !s
|
||||
.n.e, .s.e
|
||||
:left= 2.5 * !s
|
||||
.e
|
||||
:left= 3 * !s
|
||||
.n
|
||||
:top 0px
|
||||
.n.w, .n.e
|
||||
:top= 0.5 * !s
|
||||
.w, .e
|
||||
:top= 1.5 * !s
|
||||
.s.w, .s.e
|
||||
:top= 2.5 * !s
|
||||
.s
|
||||
:top= 3 * !s
|
||||
|
||||
.compass
|
||||
:margin 1em auto
|
||||
+compass(4em)
|
||||
.n, .s, .e, .w
|
||||
p
|
||||
:margin
|
||||
:top 1.5em
|
||||
:bottom 1.5em
|
||||
.n.w, .s.w, .n.e, .s.e
|
||||
p
|
||||
:margin
|
||||
:top 1em
|
||||
:bottom 1em
|
||||
|
Loading…
Reference in New Issue
Block a user