Initial

yldio · Sep 16, 2019 · ce1ad6a · ce1ad6a
1 parent 2ce90eb
commit ce1ad6a
Show file tree

Hide file tree

Showing 18 changed files with 129 additions and 60 deletions.
diff --git a/components/Banner.js b/components/Banner.js
@@ -2,13 +2,14 @@ const Banner = (props) => (
     <section id="banner" className="major">
         <div className="inner">
             <header className="major">
-                <h1>Hi, my name is Forty</h1>
+                <h1>Welcome to YLD Coding Challenges</h1>
             </header>
             <div className="content">
-                <p>A responsive site template designed by HTML5 UP<br />
-                and released under the Creative Commons.</p>
+                <p>
+                  A <strong>monthly</strong> coding challenge for all <code>code</code> friendly members of YLDers.
+                </p>
                 <ul className="actions">
-                    <li><a href="#one" className="button next scrolly">Get Started</a></li>
+                    <li><a href="#one" className="button next scrolly">Get Coding</a></li>
                 </ul>
             </div>
         </div>

diff --git a/components/Footer.js b/components/Footer.js
@@ -1,15 +1,8 @@
 const Footer = (props) => (
     <footer id="footer">
         <div className="inner">
-            <ul className="icons">
-                <li><a href="#" className="icon alt fa-twitter"><span className="label">Twitter</span></a></li>
-                <li><a href="#" className="icon alt fa-facebook"><span className="label">Facebook</span></a></li>
-                <li><a href="#" className="icon alt fa-instagram"><span className="label">Instagram</span></a></li>
-                <li><a href="#" className="icon alt fa-github"><span className="label">GitHub</span></a></li>
-                <li><a href="#" className="icon alt fa-linkedin"><span className="label">LinkedIn</span></a></li>
-            </ul>
             <ul className="copyright">
-                <li>&copy; Untitled</li><li>Design: <a href="https://html5up.net">HTML5 UP</a></li>
+                <li>&copy; YLD</li><li></li>
             </ul>
         </div>
     </footer>

diff --git a/components/Header.js b/components/Header.js
@@ -4,11 +4,10 @@ import Link from 'next/link'
 const Header = (props) => (
     <header id="header" className="alt">
         <Link href="/">
-            <a className="logo"><strong>Forty</strong> <span>by HTML5 UP</span></a>
+            <a className="logo">
+                <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NiIgaGVpZ2h0PSI0OCI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTUuMjM5IDE0LjIwN2E1LjkyIDUuOTIgMCAxIDAgMC0xMS44MzggNS45MiA1LjkyIDAgMCAwIDAgMTEuODM4em00Mi4yMDYgOS42NjlhNS45MjUgNS45MjUgMCAwIDAtNS45MTktNS45MiA1LjkyNiA1LjkyNiAwIDAgMC01LjkyIDUuOTIgNS45MjYgNS45MjYgMCAwIDAgNS45MiA1LjkxOSA1LjkyNiA1LjkyNiAwIDAgMCA1LjkyLTUuOTJ6TTY1LjM5MyAwdjM3LjM5Mkg1Ny41di0xLjA4M2ExMy43IDEzLjcgMCAwIDEtNS45NzQgMS4zNzhjLTcuNjE2IDAtMTMuODEyLTYuMTk2LTEzLjgxMi0xMy44MTEgMC03LjYxNyA2LjE5Ni0xMy44MTMgMTMuODEyLTEzLjgxM2ExMy43IDEzLjcgMCAwIDEgNS45NzQgMS4zNzlWMGg3Ljg5M3pNMzcuNzE0IDB2MzcuMzkyaC03Ljg5M1YxNS4xODZMMTUuMjQgNDhINi42MDNsNC4zNTctOS44MDVMMCAxNC4yMDdoOC42NzhsNi41NjEgMTQuMzYgNi4zODEtMTQuMzZoOC4yMDFWMGg3Ljg5M3oiLz48L3N2Zz4=" alt="yld logo" class="" />
+            </a>
         </Link>
-        <nav>
-            <a className="menu-link" onClick={props.onToggleMenu} href="javascript:;">Menu</a>
-        </nav>
     </header>
 )
 

diff --git a/components/Layout.js b/components/Layout.js
@@ -3,7 +3,6 @@ import stylesheet from 'styles/main.scss'
 
 import Header from './Header'
 import Menu from './Menu'
-import Contact from './Contact'
 import Footer from './Footer'
 
 class Layout extends React.Component {
@@ -38,18 +37,17 @@ class Layout extends React.Component {
         return (
             <div className={`body ${this.state.loading} ${this.state.isMenuVisible ? 'is-menu-visible' : ''}`}>
                 <Head>
-                    <title>Next.js Starter</title>
-                    <meta name="description" content="Next.js Starter - Forty" />
+                    <title>YLD Coding Challenge</title>
+                    <meta name="description" content="The Internal YLD coding challenges for fun!" />
                     <link href="/static/css/skel.css" rel="stylesheet" />
                     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
-                    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,600,600i" rel="stylesheet" />
+                    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,600,600i" rel="stylesheet" />
                 </Head>
                 <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
 
                 <div id="wrapper">
                     <Header onToggleMenu={this.handleToggleMenu} />
                     {this.props.children}
-                    <Contact />
                     <Footer />
                 </div>
                 <Menu onToggleMenu={this.handleToggleMenu} />

diff --git a/package.json b/package.json
@@ -17,11 +17,11 @@
     "babel-plugin-module-resolver": "^3.1.1",
     "babel-plugin-wrap-in-js": "^1.1.1",
     "glob": "^7.1.3",
+    "next": "^9.0.5",
+    "node-sass": "^4.9.3",
     "postcss-easy-import": "^3.0.0",
     "postcss-loader": "^3.0.0",
     "raw-loader": "^0.5.1",
-    "next": "^7.0.0",
-    "node-sass": "^4.9.3",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
     "sass-loader": "^7.1.0"

diff --git a/pages/generic.js b/pages/generic.js
@@ -1,7 +1,7 @@
 import Head from "next/head"
 
 import Layout from '../components/Layout'
-
+// An example would be the following: <code>Bar lyq!</code> which is deciphered as "One yld!".
 export default () => (
     <Layout>
         <Head>

diff --git a/pages/index.js b/pages/index.js
@@ -9,6 +9,27 @@ export default () => (
             <Banner />
 
             <div id="main">
+                <section id="two">
+                    <div className="inner">
+                        <header className="major">
+                            <h2>CC#1 ROT 13: </h2>
+                        </header>
+                          <p>You are tasked in writing a function that diciphers various strings into readable text.
+                            <br/>
+                              There are three categories to this challenge:
+                              <br/>
+                              <br/>
+                              <ol><li>Smallest working solution in bytes</li>
+                                <li>Most performant solution</li>
+                                  <li>Most esoteric solution (complex, using monads, built 100% in css) for example</li>
+                                </ol>
+                          </p>
+                        <ul className="actions alt">
+                            <li><Link href="/one-rot13"><a className="button next special">Get Started</a></Link></li>
+                        </ul>
+                    </div>
+                </section>
+{ /*{
                 <section id="one" className="tiles">
                     <article style={{backgroundImage: `url('/static/images/pic01.jpg')`}}>
                         <header className="major">
@@ -53,17 +74,7 @@ export default () => (
                         <Link href="/landing"><a className="link primary"></a></Link>
                     </article>
                 </section>
-                <section id="two">
-                    <div className="inner">
-                        <header className="major">
-                            <h2>Massa libero</h2>
-                        </header>
-                        <p>Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus amet pharetra et feugiat tempus.</p>
-                        <ul className="actions">
-                            <li><Link href="/landing"><a className="button next">Get Started</a></Link></li>
-                        </ul>
-                    </div>
-                </section>
+                */}
             </div>
 
         </div>

diff --git a/pages/one-rot13.js b/pages/one-rot13.js
@@ -0,0 +1,54 @@
+import Head from "next/head"
+
+import Layout from '../components/Layout'
+export default () => (
+    <Layout>
+        <Head>
+            <title>CC#1 Rot 13</title>
+            <meta name="description" content="The first of many YLD coding challenges" />
+        </Head>
+
+        <div id="main" className="alt">
+            <section id="one">
+                <div className="inner">
+                    <header className="major">
+                      <h1>CC#1 Rot 13:</h1>
+                    </header>
+                    <span className="image main"><img src="/static/images/watch.jpg" alt="" /></span>
+                      <p>Welcome to the first YLD Coding Challenge!</p>
+                      <p>You are tasked in writing a function that returns the deciphered string input into readable text.<br/>
+                        The function can be named what ever you want it to be named:
+                        <br/>
+                      </p>
+                    <h4>Examples</h4>
+                    <p>
+                      An example application that works could take the string <code>Bar lyq!</code> as an argument which is then deciphered and returned as "One yld!".
+                      <pre><code>
+{`<?php
+  function rot13($string) {
+      return str_rot13($string);
+  }
+?>`}
+                      </code></pre>
+                    </p>
+                    <h4>Categories</h4>
+                    <p><ol>
+                      <li>Smallest working solution in bytes</li>
+                      <li>Most performant solution</li>
+                      <li>Most esoteric solution (complex, using monads, built 100% in css) for example</li>
+                    </ol></p>
+                    <h4>Rules</h4>
+                    <p>Your solution can be in any language, just make sure you provide instructions on how to run!<br/>
+                      You <strong>can</strong> work in a group, or on your own!
+                        <br/>
+                      External modules / libraries will count towards the smallest solution size.
+                    </p>
+                    <h4>How to submit</h4>
+                    <p>Slack your solution to (@tomgco) privately with instructions on how to run, the winner will be announce at the next YLD MCM on the Friday, 11th October.</p>
+                    <h4>Questions</h4>
+                    <p>Please raise them on #group-engineering in slack or to @tomgco directly.</p>
+                </div>
+            </section>
+        </div>
+    </Layout>
+)
diff --git a/static/images/watch.jpg b/static/images/watch.jpg
diff --git a/styles/base/_page.scss b/styles/base/_page.scss
@@ -35,4 +35,4 @@
 				}
 			}
 
-	}
+	}
diff --git a/styles/base/_typography.scss b/styles/base/_typography.scss
@@ -7,7 +7,7 @@
 /* Type */
 
 	body, input, select, textarea {
-		color: _palette(fg);
+		color: _palette(fg-text);
 		font-family: _font(family);
 		font-size: 17pt;
 		font-weight: _font(weight);
@@ -47,7 +47,7 @@
 	}
 
 	strong, b {
-		color: _palette(fg-bold);
+		color: _palette(fg-text);
 		font-weight: _font(weight-bold);
 	}
 
@@ -60,7 +60,7 @@
 	}
 
 	h1, h2, h3, h4, h5, h6 {
-		color: _palette(fg-bold);
+		color: _palette(fg-text);
 		font-weight: _font(weight-bold);
 		line-height: 1.65;
 		margin: 0 0 (_size(element-margin) * 0.5) 0;
@@ -170,4 +170,4 @@
 
 	.align-right {
 		text-align: right;
-	}
+	}
diff --git a/styles/components/_button.scss b/styles/components/_button.scss
@@ -110,7 +110,6 @@
 
 		&.special {
 			background-color: _palette(fg-bold);
-			box-shadow: none;
 			color: _palette(bg);
 
 			&:hover, &:active {
@@ -129,4 +128,4 @@
 			cursor: default;
 			opacity: 0.25;
 		}
-	}
+	}
diff --git a/styles/components/_tiles.scss b/styles/components/_tiles.scss
@@ -28,6 +28,7 @@
 			background-position: center;
 			background-repeat: no-repeat;
 			background-size: cover;
+      color: _palette(fg);
 			cursor: default;
 			height: 40vh;
 			max-height: 40em;
@@ -43,10 +44,12 @@
 			header {
 				position: relative;
 				z-index: 3;
+        color: _palette(fg) !important;
 			}
 
 			h3 {
 				font-size: 1.75em;
+        color: _palette(fg) !important;
 
 				a {
 					&:hover {
@@ -79,7 +82,7 @@
 			}
 
 			&:after {
-				background-color: transparentize(_palette(bg), 0.75);
+				background-color: transparentize(_palette(fg), 0.75);
 				content: '';
 				display: block;
 				height: 100%;
@@ -180,4 +183,4 @@
 				width: 100% !important;
 			}
 		}
-	}
+	}
diff --git a/styles/layout/_banner.scss b/styles/layout/_banner.scss
@@ -23,6 +23,14 @@
 		min-height: 22em;
 		position: relative;
 		top: -3.25em;
+    color: _palette(fg);
+
+    h1, h2, h3, h4, h5, h6 {
+      color: _palette(fg-bold);
+    }
+    strong, b {
+      color: _palette(fg-bold);
+    }
 
 		&:after {
 			@include vendor('transition', 'opacity #{_duration(banner)} ease');
@@ -174,4 +182,4 @@
 				@include padding(6em, 0, (2em, 0, 0, 0));
 			}
 		}
-	}
+	}
diff --git a/styles/layout/_header.scss b/styles/layout/_header.scss
@@ -17,7 +17,7 @@
 		box-shadow: 0 0 0.25em 0 rgba(0,0,0,0.15);
 		cursor: default;
 		font-weight: _font(weight-bold);
-		height: 3.25em;
+		height: 5.25em;
 		left: 0;
 		letter-spacing: _font(letter-spacing-alt);
 		line-height: 3.25em;
@@ -34,7 +34,8 @@
 			font-size: 0.8em;
 			height: inherit;
 			line-height: inherit;
-			padding: 0 1.5em;
+			padding: 1.5em;
+      margin-top: 0em;
 
 			strong {
 				@include vendor('transition', (
@@ -133,7 +134,7 @@
 			@include vendor('transition', 'opacity #{_duration(banner)} ease');
 			@include vendor('transition-delay', '0.75s');
 			@include vendor('animation', 'none');
-			background-color: transparent;
+      background-color: _palette(bg-alt);
 			box-shadow: none;
 			position: absolute;
 
@@ -180,7 +181,7 @@
 		}
 
 		@include breakpoint(small) {
-			height: 2.75em;
+			height: 3.75em;
 			line-height: 2.75em;
 
 			.logo {
@@ -245,4 +246,4 @@
 				}
 			}
 		}
-	}
+	}
diff --git a/styles/layout/_main.scss b/styles/layout/_main.scss
@@ -7,7 +7,7 @@
 /* Main */
 
 	#main {
-		background-color: _palette(bg-alt);
+		background-color: _palette(fg);
 
 		> * {
 			border-top: solid 1px _palette(border);
@@ -20,7 +20,7 @@
 		}
 
 		&.alt {
-			background-color: transparent;
+			background-color: _palette(fg);
 			border-bottom: solid 1px _palette(border);
 		}
-	}
+	}
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,4 +35,4 @@ @@
     				}
     			}
-    	}
+    	}