From f2aa9119be9460312b4ac46e81fd2eab53a96d17 Mon Sep 17 00:00:00 2001 From: Pablo Borowicz Date: Fri, 14 Jan 2022 16:26:06 -0300 Subject: [PATCH 1/4] Fix notices, make them look like devdocs --- assets/scss/style.scss | 1 + assets/scss/templates/_main.scss | 4 +- assets/scss/templates/_notices.scss | 107 ++++++++++++++++++++++++++++ 3 files changed, 111 insertions(+), 1 deletion(-) create mode 100644 assets/scss/templates/_notices.scss diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 735ae99a..8f278a83 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -26,5 +26,6 @@ $icon-font: '{{.icon_font | default "Font Awesome 5 Free"}}'; @import 'templates/main.scss'; @import 'templates/breadcrumb.scss'; @import 'templates/toc.scss'; +@import 'templates/notices.scss'; @import 'custom'; diff --git a/assets/scss/templates/_main.scss b/assets/scss/templates/_main.scss index bbf49807..3cee4819 100644 --- a/assets/scss/templates/_main.scss +++ b/assets/scss/templates/_main.scss @@ -191,6 +191,8 @@ a.post-title { margin-bottom: 0; } +/* +old notices .notices { margin: 2rem 0; position: relative; @@ -265,7 +267,7 @@ a.post-title { color: #fff; left: 2rem; } - +*/ blockquote { font-size: 20px !important; diff --git a/assets/scss/templates/_notices.scss b/assets/scss/templates/_notices.scss new file mode 100644 index 00000000..a9ca2d33 --- /dev/null +++ b/assets/scss/templates/_notices.scss @@ -0,0 +1,107 @@ +/* notices */ + +@mixin notice-border($color) { + // kept in case we change our mind later + //border-left: 5px solid $color; +} + +div.notices { + margin: 2rem 0; + position: relative; + line-height: 1.6; + padding: 1rem 2rem; + padding-left: 3.5rem; + color: #555; + font-size: 90%; + border-radius: .2rem; + + /*@media (min-width: $tocBreakpoint) { + margin: 2rem 2rem; + }*/ + + p { + font-size: 1em; + margin: { + top: 0; + bottom: 0; + } + } + + ul, ol { + margin: { + top: .5rem; + bottom: .5rem; + } + + li { + margin-bottom: 0 !important; + } + + &:last-child { + margin-bottom: 0 !important; + } + } + + // code blocks + pre { + code { + font-size: 90%; + } + + &:last-child { + margin-bottom: .8rem; + } + } + + // icon + &:before { + position: absolute; + top: .6rem; + font-family: $icon-font; + font-size: 1.4rem; + content: ''; + left: 1.3rem; + } + + &.info { + @include notice-border(#f0b37e); + background: #fff2db; + + &:before { + color: #f5a132; + } + } + + &.warning { + @include notice-border(rgba(217, 83, 79, 0.8)); + background: #fae2e2; + &, & p { + color: #6d2622; + } + + &:before { + content: '\F071'; + color: rgb(217, 83, 79); + } + } + + &.note { + @include notice-border(#6ab0de); + background: #e7f2fa; + + &:before { + content: '\F05A'; + color: #4ea5de; + } + } + + &.tip { + @include notice-border(rgba(92, 184, 92, 0.8)); + background: #e6f9e6; + + &:before { + content: '\F0EB'; + color: rgb(92, 184, 92); + } + } +} From 1e0952be4c8ebc9f213dcc67761bffafc716e537 Mon Sep 17 00:00:00 2001 From: Pablo Borowicz Date: Fri, 14 Jan 2022 17:26:04 -0300 Subject: [PATCH 2/4] Fix code and syntax highlight --- assets/scss/style.scss | 2 + assets/scss/templates/_code.scss | 31 +++++++++ assets/scss/templates/_main.scss | 1 - assets/scss/templates/_syntax-github.scss | 85 +++++++++++++++++++++++ 4 files changed, 118 insertions(+), 1 deletion(-) create mode 100644 assets/scss/templates/_code.scss create mode 100644 assets/scss/templates/_syntax-github.scss diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 8f278a83..f599f7f5 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -27,5 +27,7 @@ $icon-font: '{{.icon_font | default "Font Awesome 5 Free"}}'; @import 'templates/breadcrumb.scss'; @import 'templates/toc.scss'; @import 'templates/notices.scss'; +@import 'templates/code.scss'; +@import 'templates/syntax-github.scss'; @import 'custom'; diff --git a/assets/scss/templates/_code.scss b/assets/scss/templates/_code.scss new file mode 100644 index 00000000..15684a31 --- /dev/null +++ b/assets/scss/templates/_code.scss @@ -0,0 +1,31 @@ +div.highlight { + margin: 1.5rem 0; + background: #f7f7f8; + overflow-x: auto; + position: relative; +} + +code { + color: #444; + margin: 0; +} + +pre { + padding: 1rem; + margin: 0; + border: 0; + border-radius: 2px; + line-height: 1.15; + + + code { + display: block; + color: #333; + background: inherit; + white-space: inherit; + border: 0; + padding: 0.5em; // same as in highlighter + font-size: 14px; + line-height: 1.45; + } +} diff --git a/assets/scss/templates/_main.scss b/assets/scss/templates/_main.scss index 3cee4819..737f3333 100644 --- a/assets/scss/templates/_main.scss +++ b/assets/scss/templates/_main.scss @@ -292,7 +292,6 @@ old notices code { margin-bottom: 0 !important; - font-size: 100%; } } diff --git a/assets/scss/templates/_syntax-github.scss b/assets/scss/templates/_syntax-github.scss new file mode 100644 index 00000000..9611bdfe --- /dev/null +++ b/assets/scss/templates/_syntax-github.scss @@ -0,0 +1,85 @@ +/* Background */ .chroma { } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } +/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } +/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } +/* Keyword */ .chroma .k { color: #d73a49 } +/* KeywordConstant */ .chroma .kc { color: #005cc5 } +/* KeywordDeclaration */ .chroma .kd { color: #24292e; font-weight: bold } +/* KeywordNamespace */ .chroma .kn { color: #24292e; font-weight: bold } +/* KeywordPseudo */ .chroma .kp { color: #24292e; font-weight: bold } +/* KeywordReserved */ .chroma .kr { color: #24292e; font-weight: bold } +/* KeywordType */ .chroma .kt { color: #445588; font-weight: bold } +/* Name */ .chroma .n { } +/* NameAttribute */ .chroma .na { color: #6f42c1 } +/* NameBuiltin */ .chroma .nb { color: #0086b3 } +/* NameBuiltinPseudo */ .chroma .bp { color: #999999 } +/* NameClass */ .chroma .nc { color: #445588 } +/* NameConstant */ .chroma .no { color: #008080 } +/* NameDecorator */ .chroma .nd { color: #3c5d5d } +/* NameEntity */ .chroma .ni { color: #800080 } +/* NameException */ .chroma .ne { color: #990000 } +/* NameFunction */ .chroma .nf { color: #6f42c1; } +/* NameFunctionMagic */ .chroma .fm { } +/* NameLabel */ .chroma .nl { color: #990000; font-weight: bold } +/* NameNamespace */ .chroma .nn { color: #555555 } +/* NameOther */ .chroma .nx { color: #e36209 } +/* NameProperty */ .chroma .py { } +/* NameTag */ .chroma .nt { color: #000080 } +/* NameVariable */ .chroma .nv { color: #24292e } +/* NameVariableClass */ .chroma .vc { color: #008080 } +/* NameVariableGlobal */ .chroma .vg { color: #008080 } +/* NameVariableInstance */ .chroma .vi { color: #008080 } +/* NameVariableMagic */ .chroma .vm { } +/* Literal */ .chroma .l { } +/* LiteralDate */ .chroma .ld { } +/* LiteralString */ .chroma .s { color: #032f62 } +/* LiteralStringAffix */ .chroma .sa { color: #032f62 } +/* LiteralStringBacktick */ .chroma .sb { color: #dd1144 } +/* LiteralStringChar */ .chroma .sc { color: #032f62 } +/* LiteralStringDelimiter */ .chroma .dl { color: #dd1144 } +/* LiteralStringDoc */ .chroma .sd { color: #6a737d } +/* LiteralStringDouble */ .chroma .s2 { color: #032f62 } +/* LiteralStringEscape */ .chroma .se { color: #dd1144 } +/* LiteralStringHeredoc */ .chroma .sh { color: #032f62 } +/* LiteralStringInterpol */ .chroma .si { color: #dd1144 } +/* LiteralStringOther */ .chroma .sx { color: #dd1144 } +/* LiteralStringRegex */ .chroma .sr { color: #009926 } +/* LiteralStringSingle */ .chroma .s1 { color: #032f62 } +/* LiteralStringSymbol */ .chroma .ss { color: #990073 } +/* LiteralNumber */ .chroma .m { color: #009999 } +/* LiteralNumberBin */ .chroma .mb { color: #009999 } +/* LiteralNumberFloat */ .chroma .mf { color: #009999 } +/* LiteralNumberHex */ .chroma .mh { color: #009999 } +/* LiteralNumberInteger */ .chroma .mi { color: #009999 } +/* LiteralNumberIntegerLong */ .chroma .il { color: #009999 } +/* LiteralNumberOct */ .chroma .mo { color: #009999 } +/* Operator */ .chroma .o { color: #24292e } +/* OperatorWord */ .chroma .ow { color: #24292e } +/* Punctuation */ .chroma .p { } +/* Comment */ .chroma .c { color: #6a737d } +/* CommentHashbang */ .chroma .ch { color: #6a737d } +/* CommentMultiline */ .chroma .cm { color: #6a737d } +/* CommentSingle */ .chroma .c1 { color: #6a737d } +/* CommentSpecial */ .chroma .cs { color: #6a737d; font-weight: bold } +/* CommentPreproc */ .chroma .cp { color: #032f62 } +/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-style: italic } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { color: #24292e; background-color: #ffdddd } +/* GenericEmph */ .chroma .ge { color: #24292e; font-style: italic } +/* GenericError */ .chroma .gr { color: #aa0000 } +/* GenericHeading */ .chroma .gh { color: #999999 } +/* GenericInserted */ .chroma .gi { color: #24292e; background-color: #ddffdd } +/* GenericOutput */ .chroma .go { color: #888888 } +/* GenericPrompt */ .chroma .gp { color: #555555 } +/* GenericStrong */ .chroma .gs { font-weight: bold } +/* GenericSubheading */ .chroma .gu { color: #aaaaaa } +/* GenericTraceback */ .chroma .gt { color: #aa0000 } +/* GenericUnderline */ .chroma .gl { text-decoration: underline } +/* TextWhitespace */ .chroma .w { color: #bbbbbb } + +/* PHP only */ +/* CommentPreproc */ .chroma .language-php .cp { color: #999999; font-style: italic } From 6cddbfe01fecf29e2435579faab177b9225b4516 Mon Sep 17 00:00:00 2001 From: Pablo Borowicz Date: Fri, 14 Jan 2022 18:27:05 -0300 Subject: [PATCH 3/4] Improve notices --- assets/scss/templates/_main.scss | 2 +- assets/scss/templates/_notices.scss | 31 +++++++++++++++-------------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/assets/scss/templates/_main.scss b/assets/scss/templates/_main.scss index 737f3333..784402a0 100644 --- a/assets/scss/templates/_main.scss +++ b/assets/scss/templates/_main.scss @@ -286,7 +286,7 @@ old notices pre { display: block; padding: 9.5px; - margin: 10px 0px 10px; + margin-bottom: 0; // to remote the margin bottom from `.content *` white-space: pre-wrap; } diff --git a/assets/scss/templates/_notices.scss b/assets/scss/templates/_notices.scss index a9ca2d33..4ad39ecc 100644 --- a/assets/scss/templates/_notices.scss +++ b/assets/scss/templates/_notices.scss @@ -6,19 +6,22 @@ } div.notices { - margin: 2rem 0; + margin: 1.5rem 0; position: relative; line-height: 1.6; - padding: 1rem 2rem; - padding-left: 3.5rem; - color: #555; + padding: 1rem 0 1rem 2.1rem; + color: $text-color; font-size: 90%; - border-radius: .2rem; /*@media (min-width: $tocBreakpoint) { margin: 2rem 2rem; }*/ + & + & { + margin-top: -1.5rem; + } + + p { font-size: 1em; margin: { @@ -56,16 +59,16 @@ div.notices { // icon &:before { position: absolute; - top: .6rem; + top: .75rem; font-family: $icon-font; - font-size: 1.4rem; + font-size: 1.2rem; content: ''; - left: 1.3rem; + left: 0.3rem; } &.info { @include notice-border(#f0b37e); - background: #fff2db; + //background: #fff2db; &:before { color: #f5a132; @@ -74,9 +77,9 @@ div.notices { &.warning { @include notice-border(rgba(217, 83, 79, 0.8)); - background: #fae2e2; + &, & p { - color: #6d2622; + color: #8d0c05; } &:before { @@ -87,7 +90,6 @@ div.notices { &.note { @include notice-border(#6ab0de); - background: #e7f2fa; &:before { content: '\F05A'; @@ -97,11 +99,10 @@ div.notices { &.tip { @include notice-border(rgba(92, 184, 92, 0.8)); - background: #e6f9e6; &:before { - content: '\F0EB'; - color: rgb(92, 184, 92); + content: '\f0eb'; + color: #4ca64c; } } } From 3e7d87f2dc98d4a2ded00ff4cc149818c836d926 Mon Sep 17 00:00:00 2001 From: Pablo Borowicz Date: Tue, 18 Jan 2022 16:33:02 +0100 Subject: [PATCH 4/4] Fix small mistakes Co-authored-by: SZCZUPAK Valentin --- assets/scss/templates/_code.scss | 3 +-- assets/scss/templates/_main.scss | 2 +- assets/scss/templates/_notices.scss | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/assets/scss/templates/_code.scss b/assets/scss/templates/_code.scss index 15684a31..dff12438 100644 --- a/assets/scss/templates/_code.scss +++ b/assets/scss/templates/_code.scss @@ -1,4 +1,4 @@ -div.highlight { +.highlight { margin: 1.5rem 0; background: #f7f7f8; overflow-x: auto; @@ -17,7 +17,6 @@ pre { border-radius: 2px; line-height: 1.15; - code { display: block; color: #333; diff --git a/assets/scss/templates/_main.scss b/assets/scss/templates/_main.scss index 784402a0..70588083 100644 --- a/assets/scss/templates/_main.scss +++ b/assets/scss/templates/_main.scss @@ -286,7 +286,7 @@ old notices pre { display: block; padding: 9.5px; - margin-bottom: 0; // to remote the margin bottom from `.content *` + margin-bottom: 0; // to remove the margin bottom from `.content *` white-space: pre-wrap; } diff --git a/assets/scss/templates/_notices.scss b/assets/scss/templates/_notices.scss index 4ad39ecc..50e334ae 100644 --- a/assets/scss/templates/_notices.scss +++ b/assets/scss/templates/_notices.scss @@ -5,7 +5,7 @@ //border-left: 5px solid $color; } -div.notices { +.notices { margin: 1.5rem 0; position: relative; line-height: 1.6;