Merge branch 'wwsp2015-mini'

Conflicts: index.html
csulbacm · Jan 31, 2015 · 1206202 · 1206202
2 parents e38fb83 + bbeca87
commit 1206202
Show file tree

Hide file tree

Showing 18 changed files with 825 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.sass-cache/
+config.codekit
diff --git a/config.rb b/config.rb
@@ -0,0 +1,25 @@
+require 'compass/import-once/activate'
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
diff --git a/images/Octocat.png b/images/Octocat.png
diff --git a/images/chemistry_cat.jpg b/images/chemistry_cat.jpg
diff --git a/images/meeting_bg.jpg b/images/meeting_bg.jpg
diff --git a/images/purfect.jpg b/images/purfect.jpg
diff --git a/index.html b/index.html
@@ -1,9 +1,69 @@
+<!doctype html>
 <html>
 	<head>
-		<meta http-equiv="refresh" content="0;URL='http://github.com/csulbacm'">
-		<title>
-			acm@thebeach
-		</title>
+		<title>Welcome to the ACM</title>
+		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600,400' rel='stylesheet' type='text/css'>
+		<link rel="stylesheet" href="stylesheets/style.css">
+		<script src="skrollr.min.js"></script>
 	</head>
-	<body></body>
+	<body>
+		<article id="console">
+			<div class="console-black">
+				<div class="hero-content" id="terminal-content">		
+					<div class="terminal" data-0="opacity:1;" data-450="opacity:.001;">
+						<span class="terminal-line"></span>
+						<span class="terminal-line">$ cat &gt; hello</span>
+						<span class="terminal-line"> print "Hello World!" </span>
+						<span class="terminal-line"> ask("What is your name?") </span>
+						<span class="terminal-line"></span>
+						<span class="terminal-line">$ ./hello </span>
+
+						<span class="terminal-line"> Hello World! </span>
+						<span class="terminal-line"> What is your name? ACM<span class="blink">|</span></span>
+					</div>										
+				</div>
+			</div>
+		</article>
+		<article class="infoBlock blue">
+
+			<div class="hero-content">
+				<div style="text-align:center; height:150px; margin:175px 0;">
+				<h2>Next General Body Meeting</h2>
+				<p>Next General Body Meeting: <br> Wednesday, Feb 4, 2015 <br> @ 2pm in ECS 304</p>
+				<span>Can't make the meeting? No biggie. Feel free to stop <br>by our office (EN3 110) at anytime</span>
+				</div>
+			</div>
+		</article>
+
+		<article class="infoBlock purple" style="margin-top:0;">
+			<div class="hero-content">
+				<div class="facebook social-call">
+					<h2>Like us on Facebook</h2>
+					<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fcsulbacm&amp;width=460&amp;height=400&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=true&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:460px; height:400px; margin:0 auto; background:white;"></iframe>
+				</div>
+				<div class=" social-call">
+					<h2>Follow us on Github</h2>
+					<div class="github-card" data-github="csulbacm" data-width="400" data-height="150" data-theme="default"></div>
+<script src="http://lab.lepture.com/github-cards/widget.js"></script>
+					<h2>Meet us in person</h2>
+					<p>Feel free to stop <br>by our office (EN3 110) at anytime</p>
+
+				</div>
+			</div>
+		</article>
+
+		<footer>&copy; 2015 CSULB ACM</footer>
+		<script>
+			(function onLoad (argument) {
+				var $console = document.getElementById('console');
+				var $hero = document.getElementById('terminal-content');
+				var windowHeight = window.innerHeight;
+				var contentHeight = $hero.offsetHeight;
+				console.log(windowHeight , contentHeight);
+				$console.style.height = windowHeight + 'px';
+				$hero.style.marginTop = (windowHeight - contentHeight)/2 + 'px';
+				var s = skrollr.init();
+			}());
+		</script>
+	</body>
 </html>
diff --git a/sass/ie.scss b/sass/ie.scss
@@ -0,0 +1,5 @@
+/* Welcome to Compass. Use this file to write IE specific override styles.
+ * Import this file using the following HTML or equivalent:
+ * <!--[if IE]>
+ *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ * <![endif]--> */
diff --git a/sass/print.scss b/sass/print.scss
@@ -0,0 +1,3 @@
+/* Welcome to Compass. Use this file to define print styles.
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
diff --git a/sass/screen.scss b/sass/screen.scss
@@ -0,0 +1,6 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+
+@import "compass/reset";
diff --git a/sass/style.scss b/sass/style.scss
@@ -0,0 +1,266 @@
+@import "compass";
+
+html, body {
+	margin:0;
+	padding:0;
+	width:100%;
+	height:100%;
+}
+
+body {
+	font-family: 'Open Sans', sans-serif;
+	background: #333;
+}
+.hero-content  {
+	width: 960px;
+	margin: 0 auto;
+	position: relative;
+
+
+	div{
+		//display: inline-block;
+	}
+
+}
+
+.blue{
+		//background-color: rgb(56,97,173);	
+		//background-color: rgb(72,137,210);		
+		// @include background-image(linear-gradient(#1D62F0, #1AD6FD));
+		background:url('../images/meeting_bg.jpg') center center fixed no-repeat;
+		background-size:100%;
+		text-shadow:rgba(0,0,0,.4) 0px 0px 3px;
+
+}
+
+.purple{
+	@include background-image(linear-gradient( #C644FC, #5856D6));
+}
+
+@mixin ImagePanel{
+	height: 100%;
+	background-size: 100%;
+	margin-top: 50px;
+	z-index: 0;
+}
+
+#leftImagePanel{
+	background: url('../images/purfect.jpg') no-repeat;
+	width: 40%;
+	float:left;
+}
+
+#rightImagePanel{
+	width: 40%;
+	float:right;
+	@include ImagePanel;
+
+	img {
+		width:80%;
+		margin:10%;
+	}	
+}
+
+@mixin textPanel{
+	width: 59%;
+	float: right;
+	//border: 1px solid black;
+	text-align: center;
+}
+
+#rightTextPanel{
+	@include textPanel;
+	float: right;
+	margin-top: 20%;
+	span{
+		font-size: .7em;
+		line-height: 50%
+	}
+}
+
+#leftTextPanel{
+	float:left;
+	width: 50%;
+	height: 100%;
+}
+
+#console {
+
+	.console-black {
+		background: rgba(0,0,0,.7);
+		width: 100%;
+		height: 100%;
+		padding-top:1px;
+	}
+
+	//background: url('../static1.gif') fixed;
+	//background: #4a4a4a;
+	color: #fff;
+
+	.terminal {
+		font-size: 48px;
+
+		z-index: 0;
+
+		span.terminal-line {
+			font-family: monospace;
+
+			display: block;
+			height: 36px;
+			margin:15px 0;
+		}
+	}
+
+	position:realtive;
+	.name-card {
+		$radius-size: 5px;
+		background: #fff;
+		border-radius: $radius-size;
+		width: 500px;
+		height: 300px;
+		border:6px #fff solid;
+		margin:0 auto;
+		position: absolute;
+		left:215px;
+		bottom:-50px;
+		color: #fff;
+		z-index: 100;
+
+		.top {
+			border-top-right-radius: $radius-size;
+			border-top-left-radius: $radius-size;
+			background: #af0000;
+			text-align: center;
+			font-family: "Helvetica", "Arial", sans-serif;
+			font-weight: 200;
+			font-size:45px;
+			padding: 15px 20px;
+		}
+
+		.name {
+
+			height: 185px;
+			border-bottom: 5px #555 solid;
+			display: block;
+			width: 480px;
+			margin: 20px 10px;
+			content: '.';
+			color: #333;
+			font-size: 170px;
+			text-align: center;
+		}
+	}
+}
+
+article {
+	//padding:1px 0 0 0;
+	width: 100%;
+	height: 500px;
+	background: #ddd;
+	//border-bottom: #333 2px solid;
+}
+
+footer {
+	text-align: center;
+	color: #ffcb02;
+	background: #222;
+	padding:20px 0;
+}
+
+/* Effects */
+/* Blinking */
+.blink {
+	color:#08ef0c;
+    -webkit-animation-name: blinker;
+    -webkit-animation-duration: 1s;
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-iteration-count: infinite;
+
+    -moz-animation-name: blinker;
+    -moz-animation-duration: 1s;
+    -moz-animation-timing-function: linear;
+    -moz-animation-iteration-count: infinite;
+
+    animation-name: blinker;
+    animation-duration: 1s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+
+@-moz-keyframes blinker {  
+    0% { opacity: 1.0; }
+    50% { opacity: 0.0; }
+    100% { opacity: 1.0; }
+}
+
+@-webkit-keyframes blinker {  
+    0% { opacity: 1.0; }
+    50% { opacity: 0.0 }
+    100% { opacity: 1.0; }
+}
+
+@keyframes blinker {  
+    0% { opacity: 1.0; }
+    50% { opacity: 0.0; }
+    100% { opacity: 1.0; }
+}
+
+
+.infoBlock{
+	height: 600px;
+	z-index: 2;
+	display: inline-block;
+	margin-bottom: -4px;
+	font-size: 1.7em;
+	color: #F7F7F7;
+	line-height: 130%;
+}
+
+.officers div{
+		width: 19.3%;
+		height: 100%;
+		position: relative;
+		border: 1px solid black;
+		display: inline-block;
+}
+
+h2 {
+	text-transform:uppercase;
+	 font-style:bold;
+}
+
+.social-call {
+	float: left;
+	width: 44%;
+	margin: 20px 3%;
+	height: 460px;
+	padding-top:1px;
+}
+
+a.button{
+	width:300px;
+	background: #3e9cbf; 
+	padding: 8px 14px 10px; 
+	border:1px solid #3e9cbf;
+	/*style the text*/
+	font-size:1.5em;
+	text-decoration: none;
+	text-transform: uppercase;
+	font-style: bold;
+
+	text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); 
+	color: #fff;
+	-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
+	-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
+	box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
+
+	-moz-border-radius: 10px;
+	-webkit-border-radius: 10px;
+	border-radius: 10px;
+
+	&:hover, &:focus{
+		color:#dfe7ea;
+		/*reduce the size of the shadow to give a pushed effect*/
+
+	}
+}