Add "Hackerrank solutions: Python 3 and Perl 6 (part 2)"

3 files changed, 86 insertions, 4 deletions

diff --git a/css/language-war.less b/css/language-war.less
new file mode 100644
index 0000000..c7f563b
--- /dev/null
+++ b/css/language-war.less
@@ -0,0 +1,69 @@
+@import "./variables.less";
+
+main {
+	max-width: 80em;
+	margin: 0 auto;
+	text-align: justify;
+
+	@media(max-width: @mainWidth) {
+		padding: 1rem;
+	}
+
+	h1, h2, p {
+		max-width: @mainWidth;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.language-announcer {
+		max-width: @mainWidth;
+		margin: 0 auto;
+	}
+
+	.admonitionblock {
+		max-width: @mainWidth * .9;
+		margin: 0 auto;
+	}
+
+	figure.highlight pre {
+		overflow-x: auto;
+	}
+
+	@media(min-width: @mainWidth) {
+		.language-arena {
+			display: grid;
+
+			grid-template-columns: [challenger] 1fr [defender] 1fr [end];
+			grid-template-rows: [code] auto [comments] auto [end];
+
+			.language-challenger {
+				grid-column-start: challenger;
+				grid-column-end: defender;
+				grid-row-start: code;
+				grid-row-end: end;
+			}
+
+			.language-defender {
+				grid-column-start: defender;
+				grid-column-end: end;
+				grid-row-start: code;
+				grid-row-end: end;
+			}
+
+			.language-code {
+				grid-row-start: code;
+				grid-row-end: comments;
+
+				max-width: 40em;
+			}
+
+			.language-commentary {
+				max-width: @mainWidth;
+				grid-row-start: comments;
+				grid-row-end: end;
+
+				margin: 0 40px;
+			}
+		}
+	}
+}
diff --git a/css/main.less b/css/main.less
index af1605f..4a5019c 100644
--- a/css/main.less
+++ b/css/main.less
@@ -32,18 +32,28 @@ table {
 	width: 100%;
 }
 
-figure.highlight pre, pre.pygments {
+figure.highlight {
 	border: 2px solid @blockBorderColor;
-	padding: 8px;
+	background-color: @blockBackgroundColor;
+
+	pre, pre.pygments {
+		margin: 0;
+		padding: 6px 6px;
+	}
+
+	.code-link {
+		border-top: 1px dotted @blockBorderColor;
+		padding: 3px 8px;
+		text-align: right;
+	}
 }
 
 code {
-	background-color: @blockBackgroundColor;
 	padding: 2px;
 }
 
 div.container {
-  max-width: 900px;
+  max-width: @mainWidth;
   margin: 0 auto 0.5em auto;
   padding-top: 1em;
 }
diff --git a/css/variables.less b/css/variables.less
index 88347cf..9441283 100644
--- a/css/variables.less
+++ b/css/variables.less
@@ -9,3 +9,6 @@
 // Special blocks
 @blockBackgroundColor: #f6f6f6;
 @blockBorderColor: #d7d7d7;
+
+// Sizes
+@mainWidth: 900px;