Sat/master

.gitignore

@@ -25,6 +25,7 @@ build/
 /vendor/bundle
 /lib/bundler/man/
 
+
 # for a library or gem, you might want to ignore these files since the code is
 # intended to run in multiple environments; otherwise, check them in:
 # Gemfile.lock
@@ -33,3 +34,31 @@ build/
 
 # unless supporting rvm < 1.11.0 or doing something fancy, ignore this:
 .rvmrc
+
+
+# copied from .gitignore file on Github
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk

README.md

@@ -18,8 +18,8 @@ The requirements for this wave are:
     - Feel free to use some of the static HTML pages made for the previous exercise
   - At least **one** of the static pages must include at least **two** images
 
-<!--
-## Wave 2: Use CSS to apply style and struture to our website
+
+## Wave 2: Use CSS to apply style and structure to our website
 
 The requirements for this wave are:
 - Add `class` and/or `id` attributes to your html tags where appropriate
@@ -32,6 +32,7 @@ The requirements for this wave are:
   - Style your headings (`<h1>`, `<h2>`, etc.) so they are visually distinct.
   - don't use `<br>` tags to separate content; apply `margin` and `padding` where appropriate to space out content.
 
+<!--
 ## Wave 3: DRY up your markup by utilizing layouts and ERB
 
 The requirements for this wave are:

my-site.rb

@@ -1,14 +1,40 @@
 require "sinatra"
+require "./seattle.rb"
 
 class MySite < Sinatra::Base
 
+
+  get "/" do
+    # @navigation = {"Home" => "http://localhost:9292/index", "Projects" => "http://localhost:9292/projects", "Blog" => "http://localhost:9292/blog"}
+    #   @navigation.each do |page, link|
+    #     page, link
+    #   end
+    #   return @navigation
+    # end
+    @title = 'My Homepage'
+    erb :index
+  end
+
+
   get "/index" do
+    @title = 'Sarah Trowbridge'
+    @h1 = "Sarah Trowbridge"
     erb :index
   end
+
   get "/projects" do
+    @title = "Sarah's projects"
+    @h1 = "Projects"
     erb :projects
   end
+
   get "/blog" do
+    @title = "Blog"
+    @h1 = "Blog"
+    @activities1 = Activities::Seattle.all[rand(1..52)].options
+    @activities2 = Activities::Seattle.all[rand(1..52)].options
+    @activities3 = Activities::Seattle.all[rand(1..52)].options
     erb :blog
   end
+
 end

public/css/style.css

@@ -0,0 +1,114 @@
+.SM_Links {
+  margin-top: 10px;
+  width: auto;
+  display: inline-block;
+}
+
+.SM_Links img {
+  width: 2%;
+  height: auto;
+  float: right;
+  padding: 2px;
+}
+
+nav a {
+  font-size: 15px;
+  text-decoration: none;
+  margin: 10px 20px 100px 0;
+  padding: 5px;
+}
+nav a:link {color: rgb(35, 134, 129)}
+
+nav {
+  border-style: solid;
+  border-top-color: gray;
+  border-right-color: white;
+  border-bottom-color: gray;
+  border-left-color: white;
+  border-width: thin;
+  text-align: center;
+  padding: 5px;
+}
+
+h1 {
+  font-family: 'Raleway', sans-serif;
+  color: red;
+  font-size: 30px;
+  text-align: center;
+}
+
+#header-img {
+  margin-top:20px;
+  border-style: solid;
+  border-bottom-color: rgb(35, 134, 129);
+  border-top-color: white;
+  border-right-color: white;
+  border-left-color: white;
+  -webkit-filter: grayscale(100%);
+}
+#header-img:hover {-webkit-filter: grayscale(0)}
+
+h2 {
+  color: red;
+  font-size: 20px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+  color: #505151;
+  margin: auto;
+  max-width: 960px;
+}
+
+
+footer .copyright {
+	float: right;
+  margin-right: 10px;
+}
+	.clear {
+		clear: both;
+	}
+
+footer {
+  padding: 5px 5px 5px 5px;
+  background-color: rgb(213, 213, 213);
+  border-color: rgb(213, 213, 213);
+  border-radius: 5px;
+}
+
+footer .links {
+  word-spacing: 5px;
+}
+
+#intro {
+  border-style: solid;
+  border-width: 1px;
+  max-width: 960px;
+  padding: 2px;
+  font-size: 14px;
+  margin: 8px;
+  border-radius: 5px;
+  background-color: #505151;
+  color: white;
+}
+
+p {
+  margin-right: 8%;
+}
+
+a:link {color: red; text-decoration: none;}
+a:visited {color: purple;}
+a:hover {font-weight: bold;}
+a:active {color: yellow;}
+
+#cat {
+  margin: 0;
+  max-width: 200px;
+  max-height: 200px;
+}
+
+.projects {
+  -webkit-filter: grayscale(100%);
+
+}
+.projects:hover {-webkit-filter: grayscale(0)}

seattle.rb

@@ -0,0 +1,22 @@
+require 'csv'
+
+module Activities
+
+  class Seattle
+
+    attr_reader :options
+
+    def initialize(options)
+      @options = options
+    end
+
+    def self.all
+      activities = []
+      CSV.foreach('./support/seattle_activities.csv') do |row|
+        things = Seattle.new row[0].to_s
+        activities.push(things)
+      end
+      return activities
+    end
+  end
+end

support/seattle_activities.csv

@@ -0,0 +1 @@
+The Tasting Room SeattleWest Seattle Wine CellarsEsquin Wine MerchantsDeLaurenti Specialty Food & WineChampion Wine CellarsMcCarthy & Schiering WineEuropean Vine SelectionsVino VeritePyramid BreweriesWilliams-SonomaBlu Water BistroCommunity YogaLululemon Run ClubThe Grinning YogiREI ClassesHothouse SpaCountry Dance LessonsTiger Lily YogaUrban Yoga SpaYoga to the PeopleRed Square YogaOlympic Sculpture ParkVolunteer Park ConservatoryWashington Park ArboretumBoat Rides at Center for Wooden BoatsMuseum PassesSeattle Free Art FridaysThe Paramount TheatreAvalon Glassworks"PCC Walk, Talk, and Taste Class"Frye Art MuseumKlondike Gold Rush National Historical ParkFree Museum DaysCentral CinemaSundance CinemasMovies at Seattle Public LibraryThe Royal RoomBellevue Demonstration GardenSeward Park AudobonBarolo RistortanteBlueacre SeafoodChan SeattleMistral KitchenListAlki Beach Fire PitsSeattle Chinese GardenMonthly Neighborhood Art WalksSancaWaterfall GardenTheo Chocolate TourFremont TrollUmi Sake HouseJaponessaMagnuson ParkMarymoor Park

views/blog.erb

@@ -1,19 +1,24 @@
-<!DOCTYPE html>
-  <head>
-    <title>Blog</title>
-    <meta charset = "utf-8">
-  </head>
+<article>
+  <header>
+    <h2> Things to do in Seattle! </h2>
+  </header>
 
-  <body>
+  <p><time datetime="2015-10-29">Posted Thursday, October 29th</time>.</p>
+  <p>
+    My fellow Adie, Kelly, made a great spreadsheet of things to do in Seattle on the cheap.
+    This entry pulls a couple of things to do from the list of over 50 items she provided to our cohort.
+    Check out some of the items below, or refresh the page for some new ideas!
+  </p>
+    <h4>Activities for you:</h4>
+    <ul>
+      <li><%= @activities1 %></li>
+      <li><%= @activities2 %></li>
+      <li><%= @activities3 %></li>
 
-  <h1> Random Musings </h1>
+    <p>Refresh the page for more fun!</p>
 
-  <nav>
-      <a href="/index">Home</a>
-      <a href="/projects">Projects</a>
-  </nav>
+</article>
 
-  <br>
 
   <article>
     <header>
@@ -37,7 +42,6 @@
 
   </article>
 
-  <br>
 
     <table border="1", style="font-family: helvetica; border-collapse: collapse; text-align: center">
       <thead>
@@ -108,14 +112,4 @@
       <p> IT'S FRIDAY!!!! Party time, excellent. </p>
       <p> Or maybe just some of this:</p>
       <iframe src="//giphy.com/embed/PkRjXKSNU5ioM?html5=true" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="http://giphy.com/gifs/PkRjXKSNU5ioM">via GIPHY</a></p>
-
-
-  </body>
-
-  <footer>
-    <p>
-      Follow me on:
-      <a href="http://twitter.com/SarahinSEA">Twitter</a>
-      <a href="www.linkedin.com/in/SarahATrowbridge">LinkedIn</a>
-    </p>
-  </footer>
+      <p> However, never forget: Party time can always be:<p> <%= Time.now %>

views/index.erb

@@ -1,59 +1,25 @@
-<!DOCTYPE html>
-<html>
-    <head>
-    <title>Home Page.</title>
-    <meta charset = "utf-8">
-    </head>
 
-    <body>
-
-    <h1> Sarah's first Sinatra site! </h1>
-
-    <nav>
-        <a href="/projects">Projects</a>
-        <a href="/blog">Blog</a>
-    </nav>
-
-    <br>
-
-    <img src ="seattle_pano.png"></a>
-
-    <br>
-
-    <section>
-      <p>
-        I am a digital strategist living in Seattle, WA. I am currently enrolled in <a href="www.adadevelopersacademy.org">Ada Developer's Academy</a>
-        where I will be studying web development through September 2016. This is my first Sinatra site!
-    </section>
-
-    <article>
-      <header>
-        <h2>Welcome!</h2>
-      </header>
-      <p>
-        Thanks for dropping by. As you can see, this here website is still a work in progress. Fortunately, Ada gives me new tools every day to
-        build me a badass website and walk away with a rockin' toolbelt. Huzzah!
-      </p>
-
-      <figure>
-      <img src="http://petnet-wp.s3.amazonaws.com/wp-content/uploads/2014/04/140502-Happy-Cat.jpg" alt="Happy cat">
-      <figcaption>This is how happy I am you visited my site!</figcaption>
-    </figure>
-
-    </article>
-
-    <h3><a href="file:///Users/Sarah/Ada/class-exs/HTML%20templates/blog.html/">Click here to check out my blog</a></h3>
-
-    </body>
-
-    <footer>
-      <p>
-        Follow me on:
-        <a href="http://twitter.com/SarahinSEA">Twitter</a>
-        <a href="www.linkedin.com/in/SarahATrowbridge">LinkedIn</a>
-      </p>
-    </footer>
-
-  </body>
-
-</html>
+      <img id="header-img" src ="seattle_pano.jpeg"></a>
+
+      <article>
+        <header>
+          <h2>Welcome!</h2>
+        </header>
+        <p>
+          Thanks for dropping by. I am a digital strategist living in Seattle, WA. I am currently enrolled in <a href="www.adadevelopersacademy.org">Ada Developer's Academy</a>
+          where I will be studying web development through September 2016. This is my first Sinatra site! Here, I will document current <a href="/projects">projects</a> as well
+          as well as <a href="/blog">random musings</a>.
+        </p>
+        <p>
+          As you can see,  this here website is still a work in progress. Fortunately, Ada gives me new tools every day to
+          build me a badass website and walk away with a rockin' toolbelt. Huzzah!
+        </p>
+        <p>
+          One of my goals is to closely emulate another WordPress site I created last year. You can compare this site to
+          my previous site by visiting <a href="www.sarahtrowbridge.com">sarahtrowbridge.com</>
+
+        <!-- <figure>
+        <img id= "cat" src="http://petnet-wp.s3.amazonaws.com/wp-content/uploads/2014/04/140502-Happy-Cat.jpg" alt="Happy cat">
+        <figcaption>This is how happy I am you visited my site!</figcaption>
+        </figure> -->
+      </article>