some work on the style

10 years ago · 5d6b321539
29 changed files with 205 additions and 30 deletions
--- a/app/assets/fonts/MeathFLF.ttf
+++ b/app/assets/fonts/MeathFLF.ttf
--- a/app/assets/images/bayview.jpg
+++ b/app/assets/images/bayview.jpg
--- a/app/assets/images/beach1.jpg
+++ b/app/assets/images/beach1.jpg
--- a/app/assets/images/beach2.jpg
+++ b/app/assets/images/beach2.jpg
--- a/app/assets/images/beach3.jpg
+++ b/app/assets/images/beach3.jpg
--- a/app/assets/images/blown.jpg
+++ b/app/assets/images/blown.jpg
--- a/app/assets/images/devestation.jpg
+++ b/app/assets/images/devestation.jpg
--- a/app/assets/images/golden_water.jpg
+++ b/app/assets/images/golden_water.jpg
--- a/app/assets/images/horses.jpg
+++ b/app/assets/images/horses.jpg
--- a/app/assets/images/kylemore_lake.jpg
+++ b/app/assets/images/kylemore_lake.jpg
--- a/app/assets/images/resized/bayview.jpg
+++ b/app/assets/images/resized/bayview.jpg
--- a/app/assets/images/resized/beach1.jpg
+++ b/app/assets/images/resized/beach1.jpg
--- a/app/assets/images/resized/beach2.jpg
+++ b/app/assets/images/resized/beach2.jpg
--- a/app/assets/images/resized/beach3.jpg
+++ b/app/assets/images/resized/beach3.jpg
--- a/app/assets/images/resized/beach3_save.jpg
+++ b/app/assets/images/resized/beach3_save.jpg
--- a/app/assets/images/resized/blown.jpg
+++ b/app/assets/images/resized/blown.jpg
--- a/app/assets/images/resized/blown_save.jpg
+++ b/app/assets/images/resized/blown_save.jpg
--- a/app/assets/images/resized/devestation.jpg
+++ b/app/assets/images/resized/devestation.jpg
--- a/app/assets/images/resized/golden_water.jpg
+++ b/app/assets/images/resized/golden_water.jpg
--- a/app/assets/images/resized/horses.jpg
+++ b/app/assets/images/resized/horses.jpg
--- a/app/assets/images/resized/kylemore_lake.jpg
+++ b/app/assets/images/resized/kylemore_lake.jpg
--- a/app/assets/images/resized/robin.jpg
+++ b/app/assets/images/resized/robin.jpg
--- a/app/assets/images/robin.jpg
+++ b/app/assets/images/robin.jpg
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@ -1,16 +1,4 @@
 // This is a manifest file that'll be compiled into application.js, which will include all the files
 // listed below.
 //
 // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
 // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
 //
 // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
 // compiled file.
 //
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
 //= require_tree .
 //= require parallax
--- a/app/assets/javascripts/parallax.coffee
+++ b/app/assets/javascripts/parallax.coffee
@ -0,0 +1,32 @@
 #
 # OK, this is not really a parallax... I just want to see my content move
 # somewhat faster than the background... hey, ho, let's go
 #
 window.App ||= {}
 content_top = content_left = width_delta = height_delta = 0
 App.init = ->
 	content_left = parseFloat($('#content').css("left"))
 	content_top = parseFloat($('#content').css("top"))
 	width_delta = ($(document).width()-$(window).width())/2
 	height_delta = ($(document).height()-$(window).height())/2
 	###
 	window.scrollTo(width_delta, height_delta)
 	###
 App.scroll = ->
 	v_scroll = $(document).scrollTop()
 	h_scroll = $(document).scrollLeft()
 	###
 	$("#content").css("left", content_left-((h_scroll-width_delta)/8))
 	$("#content").css("top", content_top-((v_scroll-height_delta)/8))
 	###
 $(document).on "page:change", ->
 	App.init()
 $(window).on "scroll", ->
 	App.scroll()
 # vim: set ts=2 sw=2:
--- a/app/assets/stylesheets/welcome.scss
+++ b/app/assets/stylesheets/welcome.scss
@ -1,3 +1,132 @@
 // Place all the styles related to the welcome controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
@font-face {
 	font-family: 'Meath';
 	src: font-url("MeathFLF.ttf") format('truetype');
 }
 * {
 	font-family: Verdana, sans-serif;
 	margin: 0;
 	padding: 0;
 }
 h1,h2,h3,h4,h5,h6 {
 	font-weight: normal;
 }
 h1,h4 {
 	text-decoration: underline;
 }
 h1 {
 	font-size: x-large;
 }
 a {
 	text-decoration: none;
 	color: rgb(110, 210, 12);
 }
 a:visited {
 	color: rgb(60, 130, 12);
 }
 #content {
 	top: 0px;
 	left: 0px;
 	width: 100%;
 }
 .section {
 	position: relative;
 	height: 1000px;
 	left: 50%;
 	transform: translate(-50%, 0);
 	overflow: hidden;
 }
 .background {
 	position: absolute;
 	z-index: -1;
 }
 .content {
 	position: absolute;
 	width: 80%;
 	left: 50%;
 	transform: translate(-50%, 0);
 	top: 200px;
 	height: 400px;
 	padding: 30px;
 	z-index: 1;
 }
 .text {
 	background: rgba(255, 255, 255, 0.6);
 	border-style: solid;
 	border-color: rgba(100, 190, 50, 0.6);
 	border-radius: 10px;
 	border-width: 3px;
 	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.6);
 }
 /*
 #title {
 	position: fixed;
 	top: 0px;
 	left: 50%;
 	transform: translate(-50%, 0);
 	z-index: 10;
 }
 #title h1 {
 	font-family: Meath;
 	font-weight: bolder;
 	font-size: 60px;
 }
 .text {
 	background: white;
 	border-style: solid;
 	border-color: rgb(100, 190, 12);
 	border-radius: 30px;
 	border-width: 3px;
 	padding: 10px;
 }
 #content {
 	top: 0px;
 	left: 0px;
 	width: 100%;
 }
 .section {
 	position: relative;
 	height: 1200px;
 }
 .background {
 	position: absolute;
 	z-index: -1;
 	overflow: hidden;
 }
 .background img {
 	position: absolute;
 	top: 0px;
 	left: 50%;
 	transform: translate(-50%, 0);
 }
 #back {
 	position: fixed;
 	border-radius: 15px;
 	border-width: 2px;
 	z-index: 1;
 }
 p,h1,h2,h3,h4,h5,h6 {
 	opacity: 1;
 }
 h1,h2,h3,h4,h5,h6 {
 	font-weight: normal;
 }
 h1,h4 {
 	text-decoration: underline;
 }
 h1 {
 	font-size: x-large;
 }
 a {
 	text-decoration: none;
 	color: rgb(110, 210, 12);
 }
 a:visited {
 	color: rgb(60, 130, 12);
 }
 */
 /* vim: set ts=2 sw=2: */
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -1,14 +1,18 @@
 <!DOCTYPE html>
 <html>
 <head>
  <title>WeirdWebWorkers</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
 </head>
 <body>
 <%= yield %>
 </body>
 	<head>
 		<title>Weird Web Workers</title>
 		<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
 		<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
 		<%= csrf_meta_tags %>
 	</head>
 	<body>
 		<!--<div id="title">
 			<h1>Weird Web Workers</h1>
 		</div>-->
 		<div id="content">
 			<%= yield %>
 		</div>
 	</body>
 </html>
 <!-- vim: set ts=2 sw=2: -->
--- a/app/views/welcome/index.html.erb
+++ b/app/views/welcome/index.html.erb
@ -1,2 +1,24 @@
 <h1>Welcome#index</h1>
 <p>Find me in app/views/welcome/index.html.erb</p>
 <div id="section1" class="section">
 	<div class="background">
 		<%= image_tag "resized/blown.jpg" %>
 	</div>
 	<div class="content text">
 		<h1>About</h1>
 		<h3>Welcome to the famous <i>Weird Web Workers</i>.</h3>
 		<% @projects.each do |project| -%>
 		<p><%= project.name %></p>
 		<% end -%>
 	</div>
 </div>
 <div id="section2" class="section">
 	<div class="background">
 		<%= image_tag "resized/beach3.jpg" %>
 	</div>
 	<div class="content text">
 		<h1>Other</h1>
 		<p>
 		Some other stuff here...
 		</p>
 	</div>
 </div>
 <!-- vim: set ts=2 sw=2: -->
--- a/config/routes.rb
+++ b/config/routes.rb
@ -5,7 +5,7 @@ Rails.application.routes.draw do
  # See how all your routes lay out with "rake routes".
  # You can have the root of your site routed with "root"
  # root 'welcome#index'
  root 'welcome#index'
  # Example of regular route:
  #   get 'products/:id' => 'catalog#view'