Added noob levels

CrypTools · Feb 28, 2018 · 68e0b10 · 68e0b10
1 parent 82af1dc
commit 68e0b10
Show file tree

Hide file tree

Showing 8 changed files with 619 additions and 1 deletion.
diff --git a/_data/noob.yml b/_data/noob.yml
@@ -0,0 +1,9 @@
+# name:     the name of the cipher (no space)
+# fancy:    the fancy name
+# question: the question file
+# answer:   the answer
+
+- name:     caesar-encrypt
+  fancy:    Caesar Encrypt
+  question: caesar-encrypt.md
+  answer:   LIPPS
diff --git a/_layouts/noob.html b/_layouts/noob.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>{{page.title}}</title>
+        <meta name="description" content="{{page.description}}">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <link rel="shortcut icon" href="favicon.ico">
+        <link rel="apple-touch-icon" href="icon.png">
+
+        <!-- stylesheets -->
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&amp;subset=latin-ext">
+        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+        <link rel="stylesheet" href="https://unpkg.com/normalize.css">
+        <link rel="stylesheet" href="../css/noob.css">
+    </head>
+    <body>
+        <!--[if lte IE 9]
+            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/?locale=en">upgrade your browser</a> to improve your experience and security.</p>
+        <![endif]-->
+
+        {{content}}
+
+        <script async src="https://www.w3counter.com/tracker.js?id=116354"></script>
+        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-109503398-2"></script>
+        <script>
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+
+            gtag('config', 'UA-109503398-2');
+        </script>
+		<!-- Markown Rendering -->
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.6/showdown.min.js"></script>
+		<script src="https://unpkg.com/showdown-github/dist/showdown-github.min.js"></script>
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css">
+		<!--  Standard libraries -->
+		<script src="../js/noob.js"></script>
+    </body>
+</html>
diff --git a/_sass/styles-noob.scss b/_sass/styles-noob.scss
@@ -0,0 +1,90 @@
+/*====================================
+	Body
+=====================================*/
+body {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: top;
+	width: 100vw;
+	height: 100vh;
+	max-width: 100vw;
+	overflow: hidden;
+	font-family: 'Roboto Mono', monospace;
+
+	a {
+		color: inherit;
+	}
+}
+/*====================================
+	Header
+=====================================*/
+.header {
+	background-color: rgba(#000, .7);
+	display: -webkit-flex;
+	display: -ms-flex;
+	display: flex;
+	justify-content: space-between;
+	position: fixed;
+	transition: top 500ms ease-out, opacity 500ms ease-out;
+	top: 0;
+	left: 0;
+	right: 0;
+	box-shadow: 0 2px 4px -1px rgba(#000,.2), 0 4px 5px rgba(#000,.14), 0 1px 10px rgba(#000,.12);
+	width: 100vw;
+	.logo {
+		width: 96px;
+		height: 96px;
+		background-color: rgba(#000, .47);
+		background-image: url("https://cryptools.github.io/img/logo-white.svg");
+		background-repeat: no-repeat;
+		background-size: 50%;
+		background-position: center;
+	}
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style-type: none;
+		color: #fff;
+
+		li {
+			display: inline-block;
+			margin-right: 48px;
+
+			a {
+				text-decoration: none;
+				line-height: 96px;
+				&:hover {
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+}
+/*====================================
+	Questions / course
+=====================================*/
+.questions {
+	margin-top: 96px;
+	width: 50vw;
+	overflow: auto;
+	padding: 40px;
+	box-sizing: border-box;
+}
+
+/*===================================
+	Answer
+====================================*/
+.answer {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-top: 96px;
+	width: 50vw;
+	height: calc(100vh - 96px);
+	.out {
+		position: absolute;
+		top: calc(50vh + 120px);
+	}
+}