SEA-Design-Dev · tingtingr · Dec 2, 2014 · Dec 2, 2014 · Dec 4, 2014 · Dec 8, 2014
diff --git a/Felitto_Rohwer/.DS_Store b/Felitto_Rohwer/.DS_Store
diff --git a/Felitto_Rohwer/README.md b/Felitto_Rohwer/README.md
@@ -0,0 +1,14 @@
+##Build A JavaScript Thing
+######Enabled click function for the nav bar using JavaScript
+For example:
+
+`function nav_click(){
+ var bar = document.getElementById("season");
+ if(bar.style.display == "block"){
+ bar.style.display = "none";
+ } else {
+ bar.style.display = "block";
+ bar.innerHTML = "<p>It's winter</p> <ul><li>Squash</li><li>Apples</li><li>Pears</li></ul>";
+ }
+};
+`
diff --git a/Felitto_Rohwer/css/.DS_Store b/Felitto_Rohwer/css/.DS_Store
diff --git a/Felitto_Rohwer/css/.sass-cache/c2a2935d22a6ff42394caf90be2382d1781460fc/style.scssc b/Felitto_Rohwer/css/.sass-cache/c2a2935d22a6ff42394caf90be2382d1781460fc/style.scssc
diff --git a/Felitto_Rohwer/css/base.css b/Felitto_Rohwer/css/base.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
diff --git a/Felitto_Rohwer/css/style.css b/Felitto_Rohwer/css/style.css
diff --git a/Felitto_Rohwer/css/style.css.map b/Felitto_Rohwer/css/style.css.map
diff --git a/Felitto_Rohwer/css/style.scss b/Felitto_Rohwer/css/style.scss
@@ -0,0 +1,82 @@
+body {
+ font-family: 'Bubbler One', sans-serif;
+ background-color: #fff;
+ color: #545946;
+ font-size: 100%;
+ section{
+ display:flex;
+ flex-flow: row wrap;
+ justify-content:space-around;
+ }
+}
+@mixin bar{
+ padding: 10px;
+ font-size: 1.5em;
+ font-color: #545990;
+ display:inline-block;
+}
+#season{
+ order:1;
+ @include bar;
+}
+#cal {
+ order:2;
+ @include bar;
+}
+#vend{
+ order:3;
+ @include bar;
+}
+#dir{
+ order:4;
+ @include bar;
+}
+#googleMap {
+ height: 176px;
+ width: 220px; }
+.buildingBlock {
+ display: block;
+ margin: 0;
+ padding: 2% 15% 2% 15%; }
+.buildingBlock--color {
+ background-color: #d1d5c0; }
+.indexFigureHero img {
+ display: block;
+ margin: 0 auto;
+ max-width: 100%; }
+h1 {
+ text-align: center;
+ font-size: 3.8em;
+ margin: 3% auto 2% auto;
+ color: #a8ac8a; }
+h2, h3 {
+ text-align: center;
+ font-size: 1.6em;
+ margin: 0.5em auto 0.3em auto; }
+nav ul {
+ margin: 4% auto 1% auto;
+ text-align: center; }
+nav li {
+ list-style-type: none;
+ display: inline-block;
+ font-size: 2em;
+ margin: 0% 3%;
+ text-align: center; }
+nav li a, h3 a {
+ text-decoration: none;
+ color: #545946; }
+a:hover {
+ color: #93315a; }
+.preview {
+ display: inline-block;
+ position: relative;
+ margin: 3%;
+ width: 220px;
+ font-size: 1em;
+ text-align: center; }
+.preview__figure-image {
+ width: 220px;
+ margin: 0% auto 10% auto; }
+footer {
+ text-align: center; }
+/*# sourceMappingURL=style.css.map */
diff --git a/Felitto_Rohwer/img/.DS_Store b/Felitto_Rohwer/img/.DS_Store
diff --git a/Felitto_Rohwer/img/googlemap.png b/Felitto_Rohwer/img/googlemap.png
diff --git a/Felitto_Rohwer/img/indexAsideSeason.jpg b/Felitto_Rohwer/img/indexAsideSeason.jpg
diff --git a/Felitto_Rohwer/img/indexAsideVendors.jpg b/Felitto_Rohwer/img/indexAsideVendors.jpg
diff --git a/Felitto_Rohwer/img/indexFigureHero.jpg b/Felitto_Rohwer/img/indexFigureHero.jpg
diff --git a/Felitto_Rohwer/index.html b/Felitto_Rohwer/index.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html>
+ <head>
+ <title>
+ South Lake Union Farmer's Market
+ </title>
+
+ <link href='http://fonts.googleapis.com/css?family=Bubbler+One' rel='stylesheet' type='text/css'>
+ <link rel="stylesheet" type="text/css" href="css/base.css">
+ <link rel="stylesheet" type="text/css" href="css/style.css">
+ <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCvQnD2fhXMcBFMZr8PBXeTzjFd2tfKomk&sensor=false"></script>
+ <script type="text/javascript" src="js/GoogleMaps.js"></script>
+ <script type="text/javascript" src = "js/index.js"></script>
+ </head>
+ <body>
+ <header class="buildingBlock">
+ <nav>
+ <h2 hidden>Site Navigation</h2>
+ <ul>
+ <li id="test">....</li>
+ <li><a href="#" id="1">What's in Season?</a></li>
+ <li><a href="#" onclick="nav_click1()">Calendar</a></li>
+ <li><a href="#" onclick="nav_click2()">Vendors</a></li>
+ <li><a href="#" onclick="nav_click3()" >Directions</a></li>
+ </ul>
+ </nav>
+ <section>
+ <p id ="result">test test</p>
+ <p id="season"></p>
+ <p id="cal"></p>
+ <p id="vend"></p>
+ <p id="dir"></p>
+ </section>
+ <h1>South Lake Union Farmer's Market</h1>
+ <h2>Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit, sed do eiusmod tempor incididunt ut labore et
+ dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</h2>
+
+ </header>
+
+ <figure class="indexFigureHero">
+ <img src="img/indexFigureHero.jpg" />
+ <figure>
+
+ <aside class="buildingBlock buildingBlock--color">
+ <h2 hidden>Related Content</h2>
+ <section class="preview">
+ <figure>
+ <img src="img/indexAsideSeason.jpg" class="preview__figure-image" />
+ </figure>
+ <h3><a href="#">What's in Season?</a></h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
+ </section>
+
+ <section class="preview">
+ <figure id="googleMap">
+ </figure>
+ <h3><a href="#">Directions</a></h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
+ </section>
+
+ <section class="preview">
+ <figure>
+ <img src="img/indexAsideVendors.jpg" class="preview__figure-image" />
+ </figure>
+ <h3><a href="#">Vendors</a></h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
+ </section>
+
+ </aside>
+
+ <footer class="buildingBlock buildingBlock--color">
+ <p>CSS Core Architecture: A Project for CodeFellows B25<br />By Sheyna Watkins and Wendy Rohwer</p>
+ </footer>
+
+ </body>
+</html>
diff --git a/Felitto_Rohwer/js/.DS_Store b/Felitto_Rohwer/js/.DS_Store
diff --git a/Felitto_Rohwer/js/GoogleMaps.js b/Felitto_Rohwer/js/GoogleMaps.js
@@ -0,0 +1,29 @@
+
+var myCenter=new google.maps.LatLng(47.6235481,-122.336212);
+var marker;
+
+function initialize(){
+ var mapProp = {
+ center:myCenter,
+ zoom:18,
+ mapTypeId:google.maps.MapTypeId.TERRAIN
+ };
+ var map=new google.maps.Map(document.getElementById("googleMap")
+ ,mapProp);
+ var marker=new google.maps.Marker({
+ position:myCenter,
+ animation:google.maps.Animation.BOUNCE
+ });
+
+ marker.setMap(map);
+
+ var infowindow = new google.maps.InfoWindow({
+ content:"SLU Farmer's Market"
+ });
+
+ google.maps.event.addListener(marker, 'click', function(){
+ infowindow.open(map,marker);
+ });
+}
+
+google.maps.event.addDomListener(window, 'load', initialize);