Commit 04d8627c1163312e1a15c07b1b92b5dcfa997326

Authored by Georg Hopp
1 parent 5a73b214

Again more style.

... ... @@ -11,9 +11,10 @@ App.init = ->
11 11 App.scroll = ->
12 12 v_scroll = $(document).scrollTop()
13 13 section = Math.floor(v_scroll / $(window).innerHeight())
  14 + bg_pos = (v_scroll-(section*$(window).innerHeight()))/2
14 15 $($(".section")[section]).css(
15   - "background-position", "center -" +
16   - (v_scroll-(section*$(window).innerHeight()))/2 + "px")
  16 + "background-position",
  17 + "center -" + bg_pos + "px")
17 18
18 19 $(document).on "page:change", ->
19 20 App.init()
... ...
... ... @@ -5,6 +5,7 @@
5 5
6 6 * {
7 7 font-family: Verdana, sans-serif;
  8 + color: rgb(41, 49, 51);
8 9 margin: 0;
9 10 padding: 0;
10 11 }
... ... @@ -86,21 +87,60 @@ a:visited {
86 87 width: 100%;
87 88 height: 100%;
88 89 }
89   -
90 90 #section1 {
91 91 background: image_url("resized/blown.jpg") fixed;
92 92 background-position: center top;
93 93 }
94   -
  94 +#section1,#section3 .content {
  95 + color: rgb(214,206,204);
  96 +}
95 97 #section2,#section4 {
96 98 background-color: rgb(255,255,255);
97 99 }
98   -
99 100 #section3 {
100 101 background: image_url("resized/beach3.jpg") fixed;
101 102 background-position: center top;
102 103 }
103 104
  105 +#footer {
  106 + background: rgb(22, 27, 28);
  107 +
  108 + position: relative;
  109 + width: 100%;
  110 + height: 40px;
  111 +
  112 + color: rgb(255,255,255);
  113 +}
  114 +
  115 +#about {
  116 + display: block;
  117 + list-style: none;
  118 + text-align: justify;
  119 + width: 100%;
  120 + height: 30%;
  121 + top: 50%;
  122 + transform: translate(0, -50%);
  123 + position: absolute;
  124 +}
  125 +#about:after {
  126 + display: inline-block;
  127 + width: 100%;
  128 + height: 0;
  129 + content: '';
  130 +}
  131 +#about .box {
  132 + display: inline-block;
  133 + width: 30%;
  134 + height: 100%;
  135 + overflow: hidden;
  136 + border-style: solid;
  137 + border-color: rgba(100,190,12,0.7);
  138 + border-radius: 10px;
  139 + border-width: 3px;
  140 + background-color: rgba(255,255,255,0.7);
  141 + box-shadow: 10px 10px 10px rgba(0,0,0,0.7);
  142 +}
  143 +
104 144 .section {
105 145 position: relative;
106 146 height: 100%;
... ... @@ -110,9 +150,11 @@ a:visited {
110 150
111 151 .content {
112 152 position: absolute;
  153 + width: 90%;
  154 + height: 90%;
113 155 top: 50%;
114   - height: 400px;
115   - padding: 30px;
  156 + left: 50%;
  157 + transform: translate(-50%, -50%);
116 158 z-index: 1;
117 159 }
118 160 .text {
... ...
... ... @@ -24,6 +24,10 @@
24 24
25 25 <div id="content">
26 26 <%= yield %>
  27 +
  28 + <footer id="footer">
  29 + Copyright &copy; 2016 Weird Web Workers and Georg Hopp | All rights reserved
  30 + </footer>
27 31 </div>
28 32 </body>
29 33 </html>
... ...
1 1 <div id="section1" class="section">
2 2 <div class="content text">
3   - <h1>About</h1>
4   - <p>
5   - Some other stuff here...
6   - </p>
  3 + <div id="about">
  4 + <div class="box">
  5 + <h1>Free as in "Free speach"</h1>
  6 + </div>
  7 + <div class="box">
  8 + <h1>Custom Code</h1>
  9 + </div>
  10 + <div class="box">
  11 + <h1>Linux Consulting</h1>
  12 + </div>
  13 + </div>
7 14 </div>
8 15 </div>
9 16 <div id="section2" class="section">
... ...
Please register or login to post a comment