Adapting the design

CrypTools · Mar 28, 2020 · 676aa0c · 676aa0c
1 parent 668e475
commit 676aa0c
Show file tree

Hide file tree

Showing 7 changed files with 291 additions and 105 deletions.
diff --git a/_includes/nav-challenges.html b/_includes/nav-challenges.html
@@ -0,0 +1,13 @@
+<nav>
+    <div class="logo"></div>
+    <div class="menu-container">
+        <a href="/#about" glot-model="about" >About</a>
+        <a href="./blog" >Blog</a>
+        <a href="/#products" glot-model="projects">Projects</a>
+        <a href="https://github.com/cryptools">GitHub</a>
+    </div>
+    <div class="right">
+        <a href="/#levels">Levels</a>
+        <a href="#" id="run" >Check</a>
+    </div>
+</nav>
diff --git a/_layouts/challenges.html b/_layouts/challenges.html
@@ -23,6 +23,7 @@
             <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]-->
 
+        {% include nav-challenges.html %}
         {{content}}
 
         <script async src="https://www.w3counter.com/tracker.js?id=116354"></script>
@@ -34,6 +35,9 @@
 
             gtag('config', 'UA-109503398-2');
         </script>
+        <script src="https://cdn.jsdelivr.net/npm/glottologist"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/stylesheet.min.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/stylesheet.min.css">
 		<!-- Loading CodeMirror -->
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.min.js" charset="utf-8"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/javascript/javascript.min.js" charset="utf-8"></script>

diff --git a/_layouts/noob.html b/_layouts/noob.html
@@ -23,6 +23,7 @@
             <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]-->
 
+        {% include nav-challenges.html %}
         {{content}}
 
         <script async src="https://www.w3counter.com/tracker.js?id=116354"></script>
@@ -34,6 +35,9 @@
 
             gtag('config', 'UA-109503398-2');
         </script>
+        <script src="https://cdn.jsdelivr.net/npm/glottologist"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/stylesheet.min.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/stylesheet.min.css">
 		<!-- 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>

diff --git a/_sass/styles-challenges.scss b/_sass/styles-challenges.scss
@@ -1,64 +1,153 @@
 /*====================================
 	Body
 =====================================*/
+:root {
+    color-scheme: light dark;
+    --text-color: #000;
+    --black: #000;
+    --footer: #fafafa;
+    --white: white;
+    --background: white;
+    --opposite: #1e1e1e;
+    --semi-white: #eee;
+}
+
+.white {
+    display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --text-color: #fff;
+        --black: #fff;
+        --footer: #000;
+        --white: #000;
+        --background: #1e1e1e;
+        --opposite: #fff;
+        --semi-white: #333;
+    }
+
+    .white {
+        display: block;
+    }
+
+    .black {
+        display: none;
+    }
+
+    header:after {
+        filter: invert(100%);
+        -webkit-filter: invert(100%);
+    }
+
+    nav .logo {
+        background: url("../img/logo-white.svg") !important;
+        background-size: contain !important;
+    }
+
+    .markdown-body {
+        color: var(--text-color) !important;
+        table, pre {
+            color: black !important;
+        }
+    }
+}
+
+html {
+    overflow-x: hidden
+}
+
 body {
+    background: var(--background);
+    overflow-x: hidden;
+    font-family: SF Pro Display;
+    font-style: normal;
+	color: var(--text-color);
 	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;
+
+.mono {
+    font-family: sf_monobold;
+}
+p.magnify {
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 24px;
+}
+
+* {
+    z-index: 10;
+}
+
+nav {
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    height: 100px;
+    background-color: var(--white);
+    z-index: 100;
+
+    .logo {
+        position: relative;
+        left: 5vw;
+        top: 0;
+        width: 100px;
+        height: 100px;
+        background: url("../img/logo-black.svg");
+        background-size: contain;
+        cursor: pointer;
+    }
+
+    .menu-container {
+        position: fixed;
+        top: 0;
+        left: calc(5vw + 100px);
+        right: calc(5vw + 100px);
+        height: 100px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        a {
+            margin: 50px;
+            color: var(--text-color);
+            text-decoration: none;
+            font-family: sf_monobold;
+            font-size: 13px;
+            line-height: 16px;
+            /* identical to box height */
+            text-align: center;
+            letter-spacing: 0.3em;
+        }
 	}
-	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;
-				}
-			}
-		}
+	.right {
+		position: fixed;
+		top: 0;
+		right: 5vw;
+		height: 100px;
+		display: flex;
+        justify-content: center;
+        align-items: center;
+		a {
+            margin: 50px;
+            color: var(--text-color);
+            text-decoration: underline;
+            font-family: sf_monobold;
+            font-size: 13px;
+            line-height: 16px;
+            /* identical to box height */
+            text-align: center;
+            letter-spacing: 0.3em;
+        }
 	}
 }
 /*====================================
@@ -78,7 +167,8 @@ body {
 	margin-top: 96px;
 	width: 50vw;
 	height: calc(67vh - 96px);
-	max-height: 100vh;
+    max-height: 100vh;
+    z-index: 100;
 	.CodeMirror {
 		height: 100% !important;
 		width: 100%;