summaryrefslogtreecommitdiff
path: root/css/language-war.less
diff options
context:
space:
mode:
authortyil <p.spek@tyil.nl>2018-10-11 06:01:24 +0000
committertyil <p.spek@tyil.nl>2018-10-11 06:01:24 +0000
commit4961b882d1c905f4494efba77efa004b47c853a6 (patch)
treeca4f78d6294d9819644adf28954706e75788e137 /css/language-war.less
parente9365b34190c4a3c54385f963efcf56ecd705112 (diff)
parent5f931a9e6dc2b01da8ca26caedbcbbcc0fd5693a (diff)
Merge branch 'hackerrank-2' into 'master'
Hackerrank solutions: Python 3 and Perl 6 (part 2) See merge request tyil/blog!3
Diffstat (limited to 'css/language-war.less')
-rw-r--r--css/language-war.less69
1 files changed, 69 insertions, 0 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;
+ }
+ }
+ }
+}