diff options
author | tyil <p.spek@tyil.nl> | 2018-10-11 06:01:24 +0000 |
---|---|---|
committer | tyil <p.spek@tyil.nl> | 2018-10-11 06:01:24 +0000 |
commit | 4961b882d1c905f4494efba77efa004b47c853a6 (patch) | |
tree | ca4f78d6294d9819644adf28954706e75788e137 /css | |
parent | e9365b34190c4a3c54385f963efcf56ecd705112 (diff) | |
parent | 5f931a9e6dc2b01da8ca26caedbcbbcc0fd5693a (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')
-rw-r--r-- | css/language-war.less | 69 | ||||
-rw-r--r-- | css/main.less | 18 | ||||
-rw-r--r-- | css/variables.less | 3 |
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; |