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'