summaryrefslogtreecommitdiff
path: root/src/css/language-war.less
diff options
context:
space:
mode:
Diffstat (limited to 'src/css/language-war.less')
-rw-r--r--src/css/language-war.less69
1 files changed, 69 insertions, 0 deletions
diff --git a/src/css/language-war.less b/src/css/language-war.less
new file mode 100644
index 0000000..c7f563b
--- /dev/null
+++ b/src/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;
+ }
+ }
+ }
+}