web / weird-web-workers · Commits

Commit 5d6b321539b111a916ff3b4a549567c8079a9e1c

Authored by Georg Hopp
1 parent 7823fa38

some work on the style

Inline Side-by-side
Showing 29 changed files with 205 additions and 30 deletions
No preview for this file type
1   -// This is a manifest file that'll be compiled into application.js, which will include all the files
2   -// listed below.
3   -//
4   -// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
5   -// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
6   -//
7   -// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8   -// compiled file.
9   -//
10   -// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
11   -// about supported directives.
12   -//
13 1 //= require jquery
14 2 //= require jquery_ujs
15 3 //= require turbolinks
16   -//= require_tree .
  4 +//= require parallax
... ...
  1 +#
  2 +# OK, this is not really a parallax... I just want to see my content move
  3 +# somewhat faster than the background... hey, ho, let's go
  4 +#
  5 +window.App ||= {}
  6 +
  7 +content_top = content_left = width_delta = height_delta = 0
  8 +
  9 +App.init = ->
  10 + content_left = parseFloat($('#content').css("left"))
  11 + content_top = parseFloat($('#content').css("top"))
  12 + width_delta = ($(document).width()-$(window).width())/2
  13 + height_delta = ($(document).height()-$(window).height())/2
  14 + ###
  15 + window.scrollTo(width_delta, height_delta)
  16 + ###
  17 +
  18 +App.scroll = ->
  19 + v_scroll = $(document).scrollTop()
  20 + h_scroll = $(document).scrollLeft()
  21 + ###
  22 + $("#content").css("left", content_left-((h_scroll-width_delta)/8))
  23 + $("#content").css("top", content_top-((v_scroll-height_delta)/8))
  24 + ###
  25 +
  26 +$(document).on "page:change", ->
  27 + App.init()
  28 +
  29 +$(window).on "scroll", ->
  30 + App.scroll()
  31 +
  32 +# vim: set ts=2 sw=2:
... ...
1   -// Place all the styles related to the welcome controller here.
2   -// They will automatically be included in application.css.
3   -// You can use Sass (SCSS) here: http://sass-lang.com/
  1 +@font-face {
  2 + font-family: 'Meath';
  3 + src: font-url("MeathFLF.ttf") format('truetype');
  4 +}
  5 +
  6 +* {
  7 + font-family: Verdana, sans-serif;
  8 + margin: 0;
  9 + padding: 0;
  10 +}
  11 +
  12 +h1,h2,h3,h4,h5,h6 {
  13 + font-weight: normal;
  14 +}
  15 +h1,h4 {
  16 + text-decoration: underline;
  17 +}
  18 +h1 {
  19 + font-size: x-large;
  20 +}
  21 +a {
  22 + text-decoration: none;
  23 + color: rgb(110, 210, 12);
  24 +}
  25 +a:visited {
  26 + color: rgb(60, 130, 12);
  27 +}
  28 +
  29 +#content {
  30 + top: 0px;
  31 + left: 0px;
  32 + width: 100%;
  33 +}
  34 +
  35 +.section {
  36 + position: relative;
  37 + height: 1000px;
  38 + left: 50%;
  39 + transform: translate(-50%, 0);
  40 + overflow: hidden;
  41 +}
  42 +.background {
  43 + position: absolute;
  44 + z-index: -1;
  45 +}
  46 +.content {
  47 + position: absolute;
  48 + width: 80%;
  49 + left: 50%;
  50 + transform: translate(-50%, 0);
  51 + top: 200px;
  52 + height: 400px;
  53 + padding: 30px;
  54 + z-index: 1;
  55 +}
  56 +.text {
  57 + background: rgba(255, 255, 255, 0.6);
  58 + border-style: solid;
  59 + border-color: rgba(100, 190, 50, 0.6);
  60 + border-radius: 10px;
  61 + border-width: 3px;
  62 + box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.6);
  63 +}
  64 +
  65 +/*
  66 +#title {
  67 + position: fixed;
  68 + top: 0px;
  69 + left: 50%;
  70 + transform: translate(-50%, 0);
  71 + z-index: 10;
  72 +}
  73 +#title h1 {
  74 + font-family: Meath;
  75 + font-weight: bolder;
  76 + font-size: 60px;
  77 +}
  78 +.text {
  79 + background: white;
  80 + border-style: solid;
  81 + border-color: rgb(100, 190, 12);
  82 + border-radius: 30px;
  83 + border-width: 3px;
  84 + padding: 10px;
  85 +}
  86 +#content {
  87 + top: 0px;
  88 + left: 0px;
  89 + width: 100%;
  90 +}
  91 +.section {
  92 + position: relative;
  93 + height: 1200px;
  94 +}
  95 +.background {
  96 + position: absolute;
  97 + z-index: -1;
  98 + overflow: hidden;
  99 +}
  100 +.background img {
  101 + position: absolute;
  102 + top: 0px;
  103 + left: 50%;
  104 + transform: translate(-50%, 0);
  105 +}
  106 +#back {
  107 + position: fixed;
  108 + border-radius: 15px;
  109 + border-width: 2px;
  110 + z-index: 1;
  111 +}
  112 +p,h1,h2,h3,h4,h5,h6 {
  113 + opacity: 1;
  114 +}
  115 +h1,h2,h3,h4,h5,h6 {
  116 + font-weight: normal;
  117 +}
  118 +h1,h4 {
  119 + text-decoration: underline;
  120 +}
  121 +h1 {
  122 + font-size: x-large;
  123 +}
  124 +a {
  125 + text-decoration: none;
  126 + color: rgb(110, 210, 12);
  127 +}
  128 +a:visited {
  129 + color: rgb(60, 130, 12);
  130 +}
  131 +*/
  132 +/* vim: set ts=2 sw=2: */
... ...
1 1 <!DOCTYPE html>
2 2 <html>
3   -<head>
4   - <title>WeirdWebWorkers</title>
5   - <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
6   - <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
7   - <%= csrf_meta_tags %>
8   -</head>
9   -<body>
10   -
11   -<%= yield %>
12   -
13   -</body>
  3 + <head>
  4 + <title>Weird Web Workers</title>
  5 + <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
  6 + <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  7 + <%= csrf_meta_tags %>
  8 + </head>
  9 + <body>
  10 + <!--<div id="title">
  11 + <h1>Weird Web Workers</h1>
  12 + </div>-->
  13 + <div id="content">
  14 + <%= yield %>
  15 + </div>
  16 + </body>
14 17 </html>
  18 +<!-- vim: set ts=2 sw=2: -->
... ...
1   -<h1>Welcome#index</h1>
2   -<p>Find me in app/views/welcome/index.html.erb</p>
  1 +<div id="section1" class="section">
  2 + <div class="background">
  3 + <%= image_tag "resized/blown.jpg" %>
  4 + </div>
  5 + <div class="content text">
  6 + <h1>About</h1>
  7 + <h3>Welcome to the famous <i>Weird Web Workers</i>.</h3>
  8 + <% @projects.each do |project| -%>
  9 + <p><%= project.name %></p>
  10 + <% end -%>
  11 + </div>
  12 +</div>
  13 +<div id="section2" class="section">
  14 + <div class="background">
  15 + <%= image_tag "resized/beach3.jpg" %>
  16 + </div>
  17 + <div class="content text">
  18 + <h1>Other</h1>
  19 + <p>
  20 + Some other stuff here...
  21 + </p>
  22 + </div>
  23 +</div>
  24 +<!-- vim: set ts=2 sw=2: -->
... ...
... ... @@ -5,7 +5,7 @@ Rails.application.routes.draw do
5 5 # See how all your routes lay out with "rake routes".
6 6
7 7 # You can have the root of your site routed with "root"
8   - # root 'welcome#index'
  8 + root 'welcome#index'
9 9
10 10 # Example of regular route:
11 11 # get 'products/:id' => 'catalog#view'
... ...
Please register or login to post a comment