Add custom CSS mechanism

Add a mechanism to include custom css for specific events.

Sources/HaCWebsiteLib/ViewModels/Hackathons/CountDownTimer.swift

@@ -3,6 +3,6 @@ import HaCTML
 // TODO: add the ability to highlight the item in the schedule best on the time!
 struct CountDownTimer : Nodeable {
   var node: Node {
-    return El.Div[Attr.className => "CountDownTimer"].containing("Time's up! PLACEHOLDER")
+    return El.Span[Attr.className => "CountDownTimer"].containing("Time's up! PLACEHOLDER")
   }
-}
+}

Sources/HaCWebsiteLib/ViewModels/Hackathons/CurrentTime.swift

@@ -6,7 +6,7 @@ struct CurrentTime : Nodeable {
 
   var node: Node {
     return Fragment(
-      El.Span[Attr.id => id].containing("Current Time"),
+      El.Span[Attr.id => id, Attr.className => "CurrentTime"].containing("Current Time"),
       // TODO: get this script to be loaded from CurrentTime.js
       //Script(file: "CurrentTime.js", escapes: ["className": CurrentTime.className]).node
       El.Script.containing(TextNode(

Sources/HaCWebsiteLib/ViewModels/Hackathons/GameGig2017/GameGig2017.swift

@@ -33,7 +33,7 @@ struct GameGig2017: Hackathon {
 
   func GameGigCard(title: String, content: Nodeable) -> Node {
     return El.Div[Attr.className => "GameGigCard"].containing(
-      El.Span[Attr.className => "CardTitle"].containing(title),
+      El.Span[Attr.className => "GameGigCard_Title"].containing(title),
       content
     )
   }
@@ -76,31 +76,30 @@ struct GameGig2017: Hackathon {
     )
   }
 
-  func Column(width: Int, content: Nodeable) -> Node {
-    return El.Div[Attr.className => "col s12 m\(width)"].containing(
+  func GameGigCardsContainer(content: Nodeable) -> Node {
+    return El.Div[Attr.className => "GameGigCardsContainer"].containing(
       content
     )
   }
 
-  func TopBanner() -> Node {
-    return El.Div[Attr.className => "TopBanner"].containing(
-      TextNode("Hackers at Cambridge Game Gig 80's"),
-      TextNode("Powered by Studio Gobo and Electric Square"),
-      CurrentTime()
+  func GameGigTopBanner() -> Node {
+    return El.Div[Attr.className => "GameGigTopBanner"].containing(
+      El.Div[Attr.className => "GameGigTopBanner_Left"].containing("Hackers at Cambridge Game Gig 80's"),
+      El.Div[Attr.className => "GameGigTopBanner_Center"].containing("Powered by Studio Gobo and Electric Square"),
+      El.Div[Attr.className => "GameGigTopBanner_Right"].containing(CurrentTime())
     )
   }
 
   var node: Node {
     return UI.Pages.base(
       title: "Hackers at Cambridge Game Gig 80's",
+      customStylesheets: ["gamegig2017"],
       content: Fragment(
-        TopBanner(),
+        GameGigTopBanner(),
         CountDownTimer().node,
-        Column(width: 4, content: Fragment(
+        GameGigCardsContainer(content: Fragment(
           GameGigCard(title: "Schedule", content: Schedule(schedule: schedule)),
-          GameGigCard(title: "Feed", content: TwitterFeed())
-        )),
-        Column(width: 8, content: Fragment(
+          GameGigCard(title: "Feed", content: TwitterFeed()),
           GameGigCard(title: "Get Involved", content: ListOfLinks(dict: socialMediaLinks)),
           GameGigCard(title: "Game Engines", content: ListOfLinks(dict: gameEngines)),
           GameGigCard(title: "Tutorials", content: ListOfLinks(dict: tutorials)),

Sources/HaCWebsiteLib/views/base.swift

@@ -8,7 +8,7 @@ private func stylesheet(forUrl urlString: String) -> Node {
 }
 
 extension UI.Pages {
-  static func base(title: String = defaultTitle, content: Node) -> Node {
+  static func base(title: String = defaultTitle, customStylesheets: [String] = [], content: Node) -> Node {
     let error: Node
     let errorData: Data? = try? Data(contentsOf: URL(fileURLWithPath: "swift_build.log"))
     if let outputData = errorData {
@@ -29,8 +29,9 @@ extension UI.Pages {
           El.Meta[Attr.name => "viewport", Attr.content => "width=device-width, initial-scale=1"],
           El.Link[Attr.rel => "icon", Attr.type => "favicon/png", Attr.href => "/static/images/favicon.png"],
           El.Title.containing(TextNode(title)),
-            stylesheet(forUrl: "/static/styles/main.css")
-          ),
+          stylesheet(forUrl: "/static/styles/main.css"),
+          Fragment(customStylesheets.map { stylesheet(forUrl: "/static/styles/\($0).css") })
+        ),
         El.Body.containing(error, content)
       )
     )

gulpfile.js

@@ -22,7 +22,7 @@ function copy () {
 
 // Process the Stylus files into CSS
 function buildStyles () {
-  return gulp.src('static/src/styles/main.styl')
+  return gulp.src(['static/src/styles/main.styl', 'static/src/styles/custom/*.styl'])
     .pipe(changed('static/dist/styles'))
     .pipe(stylus({
       'include css': true,

static/src/styles/custom/gamegig2017.styl

@@ -0,0 +1,38 @@
+.GameGigTopBanner {
+  background-color: #e65100;
+  color: #fff;
+  width: 100%;
+  height: 64px;
+}
+
+.GameGigTopBanner_Left {
+  float: left;
+}
+
+.GameGigTopBanner_Center {
+  text-align: center;
+}
+
+.GameGigTopBanner_Right {
+  float: right;
+}
+
+.GameGigCardsContainer {
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: relative;
+  cursor: pointer;
+
+  transition-property: opacity;
+  transition-duration: 0.2s;
+  //color: #fff;
+}
+
+.GameGigCard {
+
+}
+
+.GameGigCard_Title {
+
+}