nyvca-pattern-library/base.html at master · slowbot/nyvca-pattern-library · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Flatland</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" type="text/css" href="//cloud.typography.com/7282032/738322/css/fonts.css" />

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

  <!-- CSS -->
  <link rel="stylesheet" href="assets/css/application.css">
  <!--link rel="stylesheet" href="http://basehold.it/24"-->

</head>

<body id="page" class="js">

  <header class="control row full">
    <!--a href="#footer-nav" class="footer-nav-link">Menu</a-->
    <a href="#menu" class="menu-link sans">Menu</a>

    <nav id="menu" class="right" role="navigation">
      <ul>
        <li><a href="">Square</a></li>
        <li><a href="">Circle</a></li>
        <li><a href="">Rectangle</a></li>
        <li><a href="">Triangle</a></li>
      </ul>
    </nav>

  </header>

  <section class="row full center tinted">
    <figure class="squeeze-figure">
      <img src="http://demo.pattern-lab.info/images/fpo_16x9.png" />
    </figure>
  </section>

  <section class="row">
    <h1 class="giga">Flatland</h1>

    <article class="column size3of5">

    <h2>Of the Nature</h2>

    <h3>I call our world Flatland, not because we call it so, but to make its nature clearer to you, my happy readers, who are privileged to live in Space.</h3>

    <p class="lead">Imagine a vast sheet of paper on which straight Lines, Triangles, Squares, Pentagons, Hexagons, and other figures, instead of remaining fixed in their places, move freely about, on or in the surface, but without the power of rising above or sinking below it, very much like shadows - only hard and with luminous edges - and you will then have a pretty correct notion of my country and countrymen. Alas, a few years ago, I should have said "my universe": but now my mind has been opened to higher views of things.</p>

    <p>In such a country, you will perceive at once that it is impossible that there should be anything of what you call a "solid" kind; but I dare say you will suppose that we could at least distinguish by sight the Triangles, Squares, and other figures, moving about as I have described them. On the contrary, we could see nothing of the kind, not at least so as to distinguish one figure from another. Nothing was visible, nor could be visible, to us, except Straight Lines; and the necessity of this I will speedily demonstrate.</p>

    <h3>Concerning the Inhabitants</h3>

    <h4>The greatest length or breadth of a full grown inhabitant of Flatland may be estimated at about eleven of your inches. Twelve inches may be regarded as a maximum.</h4>

    </article>

    <article class="column size2of5">
    <h5>Of the Climate and Houses</h5>

    <h4>As with you, so also with us, there are four points of the compass North, South, East, and West</h4>

    <p class="lead">There being no sun nor other heavenly bodies, it is impossible for us to determine the North in the usual way; but we have a method of our own. By a Law of Nature with us, there is a constant attraction to the South; and, although in temperate climates this is very slight - so that even a Woman in reasonable health can journey several furlongs northward without much difficulty - yet the hampering effect of the southward attraction is quite sufficient to serve as a compass in most parts of our earth. Moreover, the rain (which falls at stated intervals) coming always from the North, is an additional assistance; and in the towns we have the guidance of the houses, which of course have their side-walls running for The most part North and South, so that the roofs may keep off the rain from the North. In the country, where there are no houses, the trunks of the trees serve as some sort of guide. Altogether, we have not so much difficulty as might be expected in determining our bearings.</p>

    </article>

  </section>

  <section class="row collapse">
    <figure class="squeeze-figure">
      <img src="http://demo.pattern-lab.info/images/fpo_16x9.png" />
    </figure>
  </section>

  <section class="row">
  <article>
    <header>
      <h1 class="">Of the Climate and Houses</h1>
    </header>
    <div class="column size2of5">

    <h4 class="">As with you, so also with us, there are four points of the compass North, South, East, and West. There being no sun nor other heavenly bodies, it is impossible for us to determine the North in the usual way; but we have a method of our own. </h4>
    </div>

    <div class="column size3of5">
    <p class="lead">By a Law of Nature with us, there is a constant attraction to the South; and, although in temperate climates this is very slight - so that even a Woman in reasonable health can journey several furlongs northward without much difficulty - yet the hampering effect of the southward attraction is quite sufficient to serve as a compass in most parts of our earth. Moreover, the rain (which falls at stated intervals) coming always from the North, is an additional assistance; and in the towns we have the guidance of the houses, which of course have their side-walls running for The most part North and South, so that the roofs may keep off the rain from the North.</p>

    </article>
  </section>

  <footer class="row tinted full">
    <section class="column size1of2">
    </section>
    <section class="column size1of2 right">
      <div class="panel">
        <p class="sans">© 2014 Elixir Design. all right reserved</p>
      </div>
    </section>
  </footer>

  <script src="http://code.jquery.com/jquery.js"></script>
  <script>
      $(document).ready(function() {
        $('body').addClass('js');
        var $menu = $('#menu'),
        $menulink = $('.menu-link');

        $menulink.click(function() {
        $menulink.toggleClass('active');
        $menu.toggleClass('active');
        return false;
        });});
  </script>
</body>
</html>