Commit 04d8627c1163312e1a15c07b1b92b5dcfa997326

Authored by Georg Hopp
1 parent 5a73b214

Again more style.

@@ -11,9 +11,10 @@ App.init = -> @@ -11,9 +11,10 @@ App.init = ->
11 App.scroll = -> 11 App.scroll = ->
12 v_scroll = $(document).scrollTop() 12 v_scroll = $(document).scrollTop()
13 section = Math.floor(v_scroll / $(window).innerHeight()) 13 section = Math.floor(v_scroll / $(window).innerHeight())
  14 + bg_pos = (v_scroll-(section*$(window).innerHeight()))/2
14 $($(".section")[section]).css( 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 $(document).on "page:change", -> 19 $(document).on "page:change", ->
19 App.init() 20 App.init()
@@ -5,6 +5,7 @@ @@ -5,6 +5,7 @@
5 5
6 * { 6 * {
7 font-family: Verdana, sans-serif; 7 font-family: Verdana, sans-serif;
  8 + color: rgb(41, 49, 51);
8 margin: 0; 9 margin: 0;
9 padding: 0; 10 padding: 0;
10 } 11 }
@@ -86,21 +87,60 @@ a:visited { @@ -86,21 +87,60 @@ a:visited {
86 width: 100%; 87 width: 100%;
87 height: 100%; 88 height: 100%;
88 } 89 }
89 -  
90 #section1 { 90 #section1 {
91 background: image_url("resized/blown.jpg") fixed; 91 background: image_url("resized/blown.jpg") fixed;
92 background-position: center top; 92 background-position: center top;
93 } 93 }
94 - 94 +#section1,#section3 .content {
  95 + color: rgb(214,206,204);
  96 +}
95 #section2,#section4 { 97 #section2,#section4 {
96 background-color: rgb(255,255,255); 98 background-color: rgb(255,255,255);
97 } 99 }
98 -  
99 #section3 { 100 #section3 {
100 background: image_url("resized/beach3.jpg") fixed; 101 background: image_url("resized/beach3.jpg") fixed;
101 background-position: center top; 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 .section { 144 .section {
105 position: relative; 145 position: relative;
106 height: 100%; 146 height: 100%;
@@ -110,9 +150,11 @@ a:visited { @@ -110,9 +150,11 @@ a:visited {
110 150
111 .content { 151 .content {
112 position: absolute; 152 position: absolute;
  153 + width: 90%;
  154 + height: 90%;
113 top: 50%; 155 top: 50%;
114 - height: 400px;  
115 - padding: 30px; 156 + left: 50%;
  157 + transform: translate(-50%, -50%);
116 z-index: 1; 158 z-index: 1;
117 } 159 }
118 .text { 160 .text {
@@ -24,6 +24,10 @@ @@ -24,6 +24,10 @@
24 24
25 <div id="content"> 25 <div id="content">
26 <%= yield %> 26 <%= yield %>
  27 +
  28 + <footer id="footer">
  29 + Copyright &copy; 2016 Weird Web Workers and Georg Hopp | All rights reserved
  30 + </footer>
27 </div> 31 </div>
28 </body> 32 </body>
29 </html> 33 </html>
1 <div id="section1" class="section"> 1 <div id="section1" class="section">
2 <div class="content text"> 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 </div> 14 </div>
8 </div> 15 </div>
9 <div id="section2" class="section"> 16 <div id="section2" class="section">
Please register or login to post a comment