Jmn/master

Procfile

@@ -0,0 +1 @@
+web: bundle exec rackup -p $PORT

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,13 +32,13 @@ 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:
+- Include a copyright/copyleft statement in your website footer. Utilize Ruby/ERB to ensure the year of the notice will always be current.
+- Utilize at least _two additional_ examples where you use ERB to interpret some Ruby code within your templates
 - Extract the common elements of your html pages into a _layout_.
-- Change your Sinatra app to serve ERB _views_ instead of static html.
+- Change your Sinatra app to serve ERB _views_ instead of static html (if you weren't already -- most folks were already doing this).
 - Extract your repeating `<header>` and `<footer>` code into a _partial_.
-- Use ERB to include your _partial_ in your _layout_.
-- Add and style a new page to your website using a Sinatra route and ERB view (content your choice).
-- Include a copyright/copyleft statement in your website footer. Utilize Ruby/ERB to ensure the year of the notice will always be current.
--->
+- Use ERB to include your `<header>` and `<footer>` _partial_ in your _layout_.

my-site.rb

@@ -1,24 +1,52 @@
 require "sinatra"
+require "time"
 
 class MySite < Sinatra::Base
 
   get "/" do
+    @page = "Home"
+    @sports = ["baseball", "basketball/men", "basketball/women", "crosscountry", "football", "golf/men", "golf/women", "gymnastics", "lacrosse", "soccer", "softball", "swimmingdiving/men", "swimmingdiving/women", "tennis/men", "tennis/women", "trackfield", "volleyball"]
     erb :index
   end
 
   get "/index" do
+    @page = "Home"
+    @sports = ["baseball", "basketball/men", "basketball/women", "crosscountry", "football", "golf/men", "golf/women", "gymnastics", "lacrosse", "soccer", "softball", "swimmingdiving/men", "swimmingdiving/women", "tennis/men", "tennis/women", "trackfield", "volleyball"]
     erb :index
   end
 
   get "/about" do
+    @page = "About"
+    @sports = ["baseball", "basketball/men", "basketball/women", "crosscountry", "football", "golf/men", "golf/women", "gymnastics", "lacrosse", "soccer", "softball", "swimmingdiving/men", "swimmingdiving/women", "tennis/men", "tennis/women", "trackfield", "volleyball"]
+    @stats = {
+      Name: "Jenna Nichols",
+      City: "Seattle, WA",
+      Age: "26",
+      Occupation: "Coder-in-training!"
+    }
+
+    @faves = ["French, especially Québec French", "Sociolinguistics", "Elephants", "College football (Go Gators!!)", "Arrested Development", "Board Games", "Karaoke", "My cats Bella and Luna"]
+
     erb :about
   end
 
   get "/projects" do
+    @page = "Projects"
+    @sports = ["baseball", "basketball/men", "basketball/women", "crosscountry", "football", "golf/men", "golf/women", "gymnastics", "lacrosse", "soccer", "softball", "swimmingdiving/men", "swimmingdiving/women", "tennis/men", "tennis/women", "trackfield", "volleyball"]
     erb :projects
   end
 
   get "/blog" do
+    @page = "Blog"
+    @sports = ["baseball", "basketball/men", "basketball/women", "crosscountry", "football", "golf/men", "golf/women", "gymnastics", "lacrosse", "soccer", "softball", "swimmingdiving/men", "swimmingdiving/women", "tennis/men", "tennis/women", "trackfield", "volleyball"]
     erb :blog
   end
+
+  # get "/test" do
+  #   erb :test, {layout: false}
+  # end
+  #
+  # post "/blog" do
+  #   @times = params[:message]
+  # end
 end

public/css/main.css

@@ -0,0 +1,179 @@
+/*
+ * This is a CSS file.
+ * Inside of CSS files comments are started with /* and ended with:
+ */
+
+/*
+ * Starting with Wave 2 of this project we will be using CSS to style our
+ * web pages. You should place all of your styles in this file and then
+ * reference it from each of your HTML files.
+ */
+
+/*
+ * This file is located at "public/main.css" in your project directory.
+ * Because it is in the "public" directory, Sinatra knows to make the file
+ * accessible to your HTML files when you use the src="path/to/file"
+ * attribute on the appropriate tags.
+ *
+ * For example, to include an image into your site, place the file in the
+ * public directory and use <img src="/name_of_image.png"> in your HTML
+ * file. The "public" part of the path should *not* be included.
+ */
+
+html {
+  width: 960px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+body {
+  background-color: #C1CBE2;
+  margin-top: 0px;
+  padding-bottom: 60px;
+ }
+
+ #main {
+  margin-top: -20px;
+  padding-top: -10px;
+ }
+
+header {
+  margin: 0 auto;
+  border-radius: 25px;
+  width: 100%;
+  height: 100px;
+  background-color: #0F337A;
+}
+
+#logo {
+  display: inline-block;
+  margin: 10px 15px 0px 0px;
+  padding: 0px;
+  float: right;
+
+}
+
+h1 {
+  display: inline-block;
+  margin-top: 10px;
+  padding-top: 5px;
+  margin-left: 10px;
+  color: #ED4A2E;
+  font-family: 'Bangers', cursive;
+  font-size: 40px;
+  letter-spacing: 2px;
+}
+
+h2 {
+  display: block;
+  padding-top: 5px;
+  margin-left: 10px;
+  color: white;
+  font-family: 'Lato', sans-serif;
+  margin-top: -30px;
+}
+
+h3 {
+  padding-left: 10px;
+  color: black;
+  font-family: 'Lato', sans-serif;
+}
+
+h4 {
+  padding-left: 10px;
+  color: black;
+  font-family: 'Lato', sans-serif;
+}
+
+h5 {
+  padding-left: 10px;
+  color: black;
+  font-family: 'Lato', sans-serif;
+}
+
+#translation {
+  margin-top: -15px;
+}
+
+img {
+  padding-left: 10px;
+  padding-top: 50px;
+  display: block;
+}
+
+#stroop {
+  margin-top: 0px;
+  margin-left: 0px;
+  padding-top: 0px;
+  padding-left: 10px;
+}
+
+.main-images {
+  display: inline-block;
+  margin-top: -50px;
+}
+
+p {
+  padding-left: 10px;
+  color: black;
+  font-family: 'Lato', sans-serif;
+}
+
+a {
+  color: #0F337A;
+  font-family: 'Lato', sans-serif;
+}
+
+a:active {
+  color: #ED4A2E;
+}
+
+nav {
+  padding-top: 5px;
+  padding-left: 10px;
+  color: #ED4A2E;
+  font-family: 'Lato', sans-serif;
+}
+
+ul {
+  margin-top: -10px;
+  font-family: 'Lato', sans-serif;
+}
+
+
+footer {
+  position: relative;
+  border-radius: 25px;
+  margin: 0 auto;
+  bottom: 0;
+  width: 100%;
+  height: 60px;
+  background-color: #0F337A;
+}
+
+table {
+  font-family: 'Lato', sans-serif;
+}
+
+#table-section {
+  padding-top: 15px;
+}
+
+.footer-link {
+  color: white;
+}
+
+#copyright {
+  display: inline;
+  float: right;
+  color: white;
+  font-family: 'Lato', sans-serif;
+  padding-top: -20px;
+  margin-top: -25px;
+  margin-right: 15px;
+  padding-left: 10px;
+}
+
+.other-line {
+  margin-top: -16px;
+}

views/about.erb

@@ -1,41 +1,18 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Jenna Nichols: About</title>
-  <link href="data:image/x-icon;base64,AAABAAEAEBAAAAEACABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAAAAAAAAAAAAAAAEAAAAAAAD6+vYA19KqAIl6BwDRy50AqqNyAL20cwDKxJAA8O7fAGZbBQBiVwAAgHEAALezhwB4biIAgnQAAIR0AACPgRUA+fnyAMC4eQCGdwAAh3cAAPP08ABmWwYA/v79AIp8CwBkaD0AdGkQAN3ZuQChlTgA+/z7ADk+CACUlnkAhXw2AIZ7IADm4soAhnkNAM7ImACLfQoAnJVbAIR1AADMyKEA6ebQAMjBjADr6NMAwrp/APj38wCkmUAApZlAALivbQCQghYA0cyfAH10LgBCRxIAlIchAP///gDv7uQAgHICAIaFUQD29/QAk5d5ANjTrQB+dSwA5uPKAIx+EgD5+fcAz8qmAG1xSQD///8Ag3MAAMvNvwDr6NUA7OjVAFZbLQD5+PIAhXYAAM3HlgDPyZkA5+XOAMjJuwDKxI8Ag3owAPPx5gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQkIHSEJCQkJCQkJCQkI1QkJCRiRCQkI8Fk8lQkJCBTFCQkIvIUIyLEJCCx9CQj0tQkJCAT42CUJCQgQVABpDLkJCQkUmIBlCQkIMCClJJhBCQkJLEhJJDhIPNwpJEgJCQkJCFxISEhISEhISEhIwQkJCUCYSEhISEhISEhISNEJCQhsSEhJJSUkSEhISEydCQismEg0RKkw7A0pOTjhHQkAmEkMoQkJCQkJCQkIcHTlCBiIjQkJCQkJCQkJCQhhEQkIUQkJCQkJCQkJCQkJBTUJCQkJCQkJCQkJCQkJCMz9CQkJCQkJCQkJCQkJCHjpCQkJCQkJCQkJCQkJCQkJCQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=" rel="icon" type="image/x-icon" />
-</head>
 
-<body>
-  <header>
-    <h1>Jenna Nichols</h1>
-    <h2>About</h2>
-  </header>
-
-  <section>
+  <section id="table-section">
     <table border="1" style="border-collapse: collapse; text-align: center">
       <thead>
         <tr>
           <th colspan="2">Stats at a Glance</th>
         </tr>
       </thead>
       <tbody>
+      <% @stats.each do |key, value| %>
         <tr>
-          <td><strong>Name:</strong></td>
-          <td>Jenna Nichols</td>
-        </tr>
-        <tr>
-          <td><strong>City:</strong></td>
-          <td>Seattle, WA</td>
-        </tr>
-        <tr>
-          <td><strong>Age:</strong></td>
-          <td>26</td>
+          <td><strong><%= key %>:</strong></td>
+          <td><%= value %></td>
         </tr>
-        <tr>
-          <td><strong>Occupation:</strong></td>
-          <td>Coder-in-training!</td>
-        </tr>
-
+      <% end %>
       </tbody>
     </table>
   </section>
@@ -50,39 +27,15 @@
       This is my family! My husband is Eric, and our cats are Bella and Luna. Bella's the one sleeping on top of her face :3
     </p>
 
-    <img src="jennaeric.jpg" height="25%" width="25%"/>
-    <img src= "lunabella.jpg" height="25%" width="25%"/>
+    <img class="main-images" src="jennaeric.jpg" height="30%" width="30%"/>
+    <img class="main-images" src= "lunabella.jpg" height="25%" width="25%"/>
 
     <p>
       Here are a few of my favorite things:
       <ul>
-        <li>French, especially Qu&eacute;bec French</li>
-        <li>Sociolinguistics</li>
-        <li>Elephants</li>
-        <li>College football (Go Gators!!)</li>
-        <li>Arrested Development</li>
-        <li>Board Games</li>
-        <li>Karaoke</li>
-        <li>My cats Bella and Luna</li>
+        <% @faves.each do |fave| %>
+          <li><%= fave %></li>
+        <% end %>
       </ul>
     </p>
   </section>
-
-  <footer>
-    <nav>
-      Site links:
-      <a href="index">Home</a> |
-      <a href="about">About</a> |
-      <a href="projects">Projects</a> |
-      <a href="blog">Blog</a>
-    </nav>
-    <nav>
-      Find me on:
-      <a href="http://www.twitter.com/jennaplusplus">Twitter</a> |
-      <a href="http://www.facebook.com/jennanichols">Facebook</a> |
-      <a href="http://www.github.com/jennaplusplus">GitHub</a>
-    </nav>
-  </footer>
-
-</body>
-</html>