Adding and Styling Sessions page

This was based on the work we did in class on 12.8 with a student project.
profstein · Dec 10, 2014 · 2823039 · 2823039
1 parent 85808ce
commit 2823039
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 2 deletions.
diff --git a/sass/layout/_layout.scss b/sass/layout/_layout.scss
@@ -14,7 +14,7 @@
 
 //this examply only has two pages but you would have these too
 // @import "speakers";
-// @import "sessions";
+@import "sessions";
 @import "schedule";
 // @import "video";
 // @import "createdby";

diff --git a/sass/layout/_sessions.scss b/sass/layout/_sessions.scss
@@ -0,0 +1,149 @@
+ /*---------------------- session page --------------------------*/
+
+
+#session{
+
+
+	// 	==========================================
+	//	MIDTERM CSS
+	//	==========================================
+
+		//paste midterm here
+                                        .workshop_creative_writing,.workshop_fine_arts,.workshop_performing_arts,.workshop_media_arts{
+          width: 100%;
+          float: left;
+          margin-bottom: 4%;
+          }
+         .workshop_creative_writing h3,.workshop_fine_arts h3,.workshop_performing_arts h3,.workshop_media_arts h3{
+          width: 100%;
+          float: left;
+          text-align: center;
+          color: orangered;
+          margin-top: 2%;
+          background: orangered;
+          color: #fff;
+         }
+
+          .workshop_creative_writing h4,.workshop_fine_arts h4,.workshop_performing_arts h4,.workshop_media_arts h4{
+          width: 100%;
+          float: left;
+        margin: 2% 0;
+         }
+
+        .track1 {
+          width: 100%;
+          float: left;
+          background-color: #d4b278;
+          padding-bottom: 2%;
+          padding-left: 3%;
+          padding-right: 3%;
+        }
+
+        .track2{
+           width: 100%;
+          float: left;
+          background-color: #d5ae69;
+         padding-bottom: 2%;
+          padding-left: 3%;
+          padding-right: 3%;
+        }
+
+
+        .track3{
+           width: 100%;
+          float: left;
+          background-color:#d4a85c;
+          padding-bottom: 2%;
+           padding-left: 3%;
+          padding-right: 3%;
+        }
+
+        .track4{
+           width: 100%;
+          float: left;
+          background-color: #d19d42;
+          padding-bottom: 2%;
+           padding-left: 3%;
+          padding-right: 3%;
+        }
+
+        .presenter{
+          text-decoration: underline;
+          font-size: 85%;
+          font-style: italic;
+          font-weight: bold;
+        }
+
+
+	// 	==========================================
+	//	SMALL LAYOUT
+	//	==========================================
+	@include respond-to(small){
+
+
+
+	}
+	//end small
+
+
+
+	// 	==========================================
+	//	MEDIUM LAYOUT
+	//	==========================================
+	@include respond-to(medium){
+
+		.track1, .track2, .track3, .track4{
+            @include cols(1,2);
+            background-color: transparent;
+
+            h4{
+               color:skyblue; 
+            }
+        }
+        .track3{
+            clear:both;
+        }
+
+        .track1, .track4{
+//            background-color: #fff;
+        }
+
+	}
+	//end small
+
+
+
+
+	// 	==========================================
+	//	LARGE LAYOUT
+	//	==========================================
+	@include respond-to(large){
+
+		.workshop_creative_writing, .workshop_fine_arts, .workshop_performing_arts, .workshop_media_arts{
+            @include cols(1,2);
+        }
+
+        .track1, .track2, .track3, .track4{
+            @include no-cols;
+        }
+
+	}
+	//end Large
+
+
+    // 	==========================================
+	//	x-LARGE LAYOUT
+	//	==========================================
+	@include respond-to(x-large){
+
+        .track1, .track2, .track3, .track4{
+            @include cols(1,2);
+        }
+
+	}
+	//end Large
+
+
+
+}
+//end session
diff --git a/sessions.html b/sessions.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="css/style.css">
 </head>
 
-<body id="sessions">
+<body id="session">
     <a id="top"></a>
     <div id="menuButton">
         <div class="menu">