From nobody Wed Oct 05 21:35:13 2022 X-Original-To: dev-commits-doc-all@mlmmj.nyi.freebsd.org Received: from mx1.freebsd.org (mx1.freebsd.org [IPv6:2610:1c1:1:606c::19:1]) by mlmmj.nyi.freebsd.org (Postfix) with ESMTP id 4MjSXd5TRbz4f7RK for ; Wed, 5 Oct 2022 21:35:13 +0000 (UTC) (envelope-from git@FreeBSD.org) Received: from mxrelay.nyi.freebsd.org (mxrelay.nyi.freebsd.org [IPv6:2610:1c1:1:606c::19:3]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (4096 bits) server-digest SHA256 client-signature RSA-PSS (4096 bits) client-digest SHA256) (Client CN "mxrelay.nyi.freebsd.org", Issuer "R3" (verified OK)) by mx1.freebsd.org (Postfix) with ESMTPS id 4MjSXd54qpz3HKq; Wed, 5 Oct 2022 21:35:13 +0000 (UTC) (envelope-from git@FreeBSD.org) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=freebsd.org; s=dkim; t=1665005713; h=from:from:reply-to:subject:subject:date:date:message-id:message-id: to:to:cc:mime-version:mime-version:content-type:content-type: content-transfer-encoding:content-transfer-encoding; bh=iXMglc6FSdmww3U7nlABEiyQN3oWIXhLQH+fooE2/HE=; b=aBHTU4naCoVmiDNMzdAT+bo2RgXEqSM86VJGYsfHOe4AkI2KKNA1K42rrRXrYV565nUin1 K9DXFM2i31ew9o2M2mYbmrDQXwtjBhgL3ub5qzKEruSx+6ojwfWSAD/jaRrR7I9KPMKBWw Wj4h38ApAN6pCqC2Q+YIgUaf6a2CWn4M/HeW+9nbzz/EMr3bvhXllhJlZW3zm9NSNgW+HV TKTzDSmmIuqkNwNo8GlH9yyTwTFvY9x7uCjmazMT2WjR20LATYJVtfgY/DG6DJtKaI4Izs RO5SH9EeChrwxiJrHVOjCwAWc/FPEzEb6a11BSvxSNKxpfenzOn5tsL2yHkFkQ== Received: from gitrepo.freebsd.org (gitrepo.freebsd.org [IPv6:2610:1c1:1:6068::e6a:5]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (4096 bits) server-digest SHA256) (Client did not present a certificate) by mxrelay.nyi.freebsd.org (Postfix) with ESMTPS id 4MjSXd41sGz12W7; Wed, 5 Oct 2022 21:35:13 +0000 (UTC) (envelope-from git@FreeBSD.org) Received: from gitrepo.freebsd.org ([127.0.1.44]) by gitrepo.freebsd.org (8.16.1/8.16.1) with ESMTP id 295LZDXx026394; Wed, 5 Oct 2022 21:35:13 GMT (envelope-from git@gitrepo.freebsd.org) Received: (from git@localhost) by gitrepo.freebsd.org (8.16.1/8.16.1/Submit) id 295LZDTI026393; Wed, 5 Oct 2022 21:35:13 GMT (envelope-from git) Date: Wed, 5 Oct 2022 21:35:13 GMT Message-Id: <202210052135.295LZDTI026393@gitrepo.freebsd.org> To: doc-committers@FreeBSD.org, dev-commits-doc-all@FreeBSD.org From: Sergio Carlavilla Delgado Subject: git: 88afe2c0b5 - main - Documentation Portal - Improve UX List-Id: Commit messages for all branches of the doc repository List-Archive: https://lists.freebsd.org/archives/dev-commits-doc-all List-Help: List-Post: List-Subscribe: List-Unsubscribe: Sender: owner-dev-commits-doc-all@freebsd.org X-BeenThere: dev-commits-doc-all@freebsd.org MIME-Version: 1.0 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 8bit X-Git-Committer: carlavilla X-Git-Repository: doc X-Git-Refname: refs/heads/main X-Git-Reftype: branch X-Git-Commit: 88afe2c0b5f25f27d6ca3baf68599b6be5ef0425 Auto-Submitted: auto-generated ARC-Message-Signature: i=1; a=rsa-sha256; c=relaxed/relaxed; d=freebsd.org; s=dkim; t=1665005713; h=from:from:reply-to:subject:subject:date:date:message-id:message-id: to:to:cc:mime-version:mime-version:content-type:content-type: content-transfer-encoding:content-transfer-encoding; bh=iXMglc6FSdmww3U7nlABEiyQN3oWIXhLQH+fooE2/HE=; b=L3gOaO88mVLwueQ81Fk2ZeZ1vsljxNHSgBElX5qif+tsEiRdOX0IZzRyz6guA5TedMXwuH VuhJxPnIcduO/mwlEyn5i9vF8fzUcm/PRqr3arXKALszr5hre+PCEasOjERTHhoQeoXVY3 3o0gn9FFibmm/ZKoQEXluK+QavzOIu2Cxc6155UXMB4MoHPCBLRJADlIfdlkB7cPxdD/Ep k5bEgaITitf2vVT8IEAKWkPkQJg+Ul9ISTgcZNXNHN1F7ISATLtN46cny8ObEw9ywLrlS4 j0DQZ4NjqzYcfWv7vfZMypTvWCJEjoOf4RirEK7k2bi0w5zbA33yFl9Ct+aC6w== ARC-Seal: i=1; s=dkim; d=freebsd.org; t=1665005713; a=rsa-sha256; cv=none; b=PCxb0rGyKwaulUB8QCSWnJawLTjJw89is+z6MxGpsl/ZHQX0ddBQMnEYVgoe+4jfo4MzrZ OpJlb0owgffel58QAzEbuk4OWNwau1l6MQcL5rBH6p69DcHXZHbS7Q17eCiAgmIE9ysnvS PvsOn3lYfQ8ghYUJwGiER50ruaYAQU7wLijok+WX6wR2c+UmG2cxCbWZsf53I/iMaemhj9 Lbq8zQBVPynfNFSl0gCwQKzcA+jlmHYCm3Bm2EJwiqbqsuNxW/QWXux1oMXNytt9XH0KpM Q1mDlP+/HvDCQtvYeCF1fNhp742MIIpqEc49Di45rBYNfDvmdGbFWodSoiqFgA== ARC-Authentication-Results: i=1; mx1.freebsd.org; none X-ThisMailContainsUnwantedMimeParts: N The branch main has been updated by carlavilla: URL: https://cgit.FreeBSD.org/doc/commit/?id=88afe2c0b5f25f27d6ca3baf68599b6be5ef0425 commit 88afe2c0b5f25f27d6ca3baf68599b6be5ef0425 Author: Sergio Carlavilla Delgado AuthorDate: 2022-10-05 21:33:23 +0000 Commit: Sergio Carlavilla Delgado CommitDate: 2022-10-05 21:35:04 +0000 Documentation Portal - Improve UX * Move main page to use CSS grid for the entries * Fix articles, books and languages list * Prepare CSS classes to allow other documents * Improve book menu sidenav --- .../beastie/assets/styles/documentation.scss | 4 +- .../themes/beastie/assets/styles/footer.scss | 7 +- .../themes/beastie/assets/styles/global.scss | 207 ++++++++------------- .../themes/beastie/assets/styles/header.scss | 12 +- .../themes/beastie/layouts/_default/languages.html | 24 +-- .../beastie/layouts/articles/total-list.html | 2 +- .../themes/beastie/layouts/books/total-list.html | 2 +- documentation/themes/beastie/layouts/index.html | 108 +++++------ .../beastie/layouts/partials/site-footer.html | 2 +- .../beastie/layouts/partials/site-header.html | 2 +- .../shortcodes/list-articles-directories.html | 2 +- .../layouts/shortcodes/list-books-directories.html | 2 +- 12 files changed, 166 insertions(+), 208 deletions(-) diff --git a/documentation/themes/beastie/assets/styles/documentation.scss b/documentation/themes/beastie/assets/styles/documentation.scss index 39d4c1d27f..dbb015b745 100644 --- a/documentation/themes/beastie/assets/styles/documentation.scss +++ b/documentation/themes/beastie/assets/styles/documentation.scss @@ -26,7 +26,7 @@ * */ -.articles-books-list { +.documents-list { list-style: none; padding-left: 10px; @@ -134,7 +134,7 @@ #MenuContents { position: sticky; overflow: auto; - max-height: calc(90vh); + max-height: calc(100vh - 8rem); line-height: 2; ul { diff --git a/documentation/themes/beastie/assets/styles/footer.scss b/documentation/themes/beastie/assets/styles/footer.scss index 947687c4fe..041e8db47d 100644 --- a/documentation/themes/beastie/assets/styles/footer.scss +++ b/documentation/themes/beastie/assets/styles/footer.scss @@ -101,7 +101,12 @@ footer { } .heart { - color: red; + font-size: 1.2rem; + color: #E38582; +} + +.heart:hover { + color: #D1332E; } .options-container { diff --git a/documentation/themes/beastie/assets/styles/global.scss b/documentation/themes/beastie/assets/styles/global.scss index 83537922e5..a1d8b40e5b 100644 --- a/documentation/themes/beastie/assets/styles/global.scss +++ b/documentation/themes/beastie/assets/styles/global.scss @@ -38,7 +38,8 @@ html { } } -html, body { +html, +body { text-rendering: optimizeLegibility; line-height: 1.5; } @@ -61,18 +62,12 @@ body { display: flex; flex-direction: column; justify-content: center; - margin-left: auto; - margin-right: auto; + margin: 0 auto; + width: 100%; max-width: var(--max-width); transition: padding .15s; background-color: var(--global-background-color); - .article { - .paragraph { - padding-left: .5rem; - } - } - .welcome-container { display: flex; width: 100%; @@ -89,7 +84,7 @@ body { h2 { margin: 0; border-bottom: 0px; - margin-left: auto; + margin-left: 10%; } a { @@ -114,7 +109,7 @@ body { input { display: block; - width: 50%; + width: 80%; padding: 10px 20px; border: 1px solid #CCC; border-radius: 4px; @@ -127,52 +122,46 @@ body { } .cards-container { - display: flex; - flex-direction: column; - justify-content: center; - width: 100%; + display: grid; + grid-gap: 1rem; + margin: 0 auto; margin-top: 3rem; margin-bottom: 3rem; + padding-right: 10%; + padding-left: 10%; - .row { - display: flex; - flex-direction: row; - justify-content: center; - width: 100%; - margin-bottom: 2rem; + .card { + padding: 1rem; + border: 1px solid var(--card-border-color); + background-color: var(--card-background-color); - .card { + a { display: flex; - flex: 280px 0; - margin-left: 16px; - padding: 24px; - border: 1px solid var(--card-border-color); - background-color: var(--card-background-color); - - a { - display: flex; - flex-direction: column; - text-decoration: none; - - h5 { - color: var(--global-font-color); - font-weight: 700; - font-size: 22px; - margin: 0px 0px 8px 0px; - border-bottom: 0px; - } + flex-direction: column; + text-decoration: none; + + h5 { + color: var(--global-font-color); + font-weight: 700; + font-size: 22px; + margin: 0px 0px 8px 0px; + border-bottom: 0px; + } - p { - color: var(--global-font-color); - font-size: 18px; - margin: 0px; - margin-top: auto; - text-align: inherit; - } + p { + color: var(--global-font-color); + font-size: 18px; + margin: 0px; + margin-top: auto; + text-align: inherit; } } } } + + .document { + padding: var(--documentation-padding); + } } ul.language-list { @@ -196,72 +185,31 @@ ul.language-list { } } -@media (max-width: 55em) { +@media (min-width: 600px) { .main-wrapper { - padding: 0rem 1rem 2rem 1rem; - .welcome-container { - margin-bottom: 2.5rem; - - form { - input { - width: 100%; - background-color: var(--white); + .title-language-container { + h2 { + margin-left: auto; } } - } - - .cards-container { - display: block; - width: 100%; - margin: 0; - padding: 0; - - .row { - display: block; - width: 100%; - - .card { - display: block; - width: 100%; - margin: 0px; - margin-bottom: 2rem; - padding: 0px; - - a { - display: flex; - padding: 20px; - min-height: 100px; - } + form { + input { + width: 50%; } } } } -} - -@media (min-width: 1200px) { - .main-wrapper { - .cards-container { - .row { - .card { - width: 33.3%; - } - } - } + .cards-container { + grid-template-columns: repeat(2, 1fr); } } -@media (min-width: 768px) { - .main-wrapper { - .cards-container { - .row { - .card { - width: 50%; - } - } - } +@media (min-width: 900px) { + .cards-container { + grid-template-columns: repeat(3, 1fr); } } @@ -316,11 +264,11 @@ h6 { font-size: var(--size-300); } -h2 > .anchor, -h3 > .anchor, -h4 > .anchor, -h5 > .anchor, -h6 > .anchor { +h2>.anchor, +h3>.anchor, +h4>.anchor, +h5>.anchor, +h6>.anchor { text-decoration: none; &:hover { @@ -328,11 +276,11 @@ h6 > .anchor { } } -h2 > .anchor::before, -h3 > .anchor::before, -h4 > .anchor::before, -h5 > .anchor::before, -h6 > .anchor::before { +h2>.anchor::before, +h3>.anchor::before, +h4>.anchor::before, +h5>.anchor::before, +h6>.anchor::before { visibility: hidden; margin-left: .3rem; content: "#"; @@ -405,7 +353,10 @@ p { text-justify: inter-word; } -b, dt, strong, th { +b, +dt, +strong, +th { font-weight: bolder; } @@ -460,7 +411,8 @@ blockquote { padding-bottom: 4px; } -.colist tr td b, .programlisting b { +.colist tr td b, +.programlisting b { display: none; } @@ -510,11 +462,13 @@ table.tableblock { border: none; } - td:first-of-type, th:first-of-type { + td:first-of-type, + th:first-of-type { border-left: none; } - td:last-of-type, th:last-of-type { + td:last-of-type, + th:last-of-type { border-right: none; } } @@ -561,27 +515,27 @@ table.stretch { } .icon-note::before { - content:"\f05a"; + content: "\f05a"; color: var(--admonition-note-color); } .icon-tip::before { - content:"\f0eb"; + content: "\f0eb"; color: var(--admonition-tip-color) } .icon-warning::before { - content:"\f071"; + content: "\f071"; color: var(--admonition-warning-color); } .icon-caution::before { - content:"\f06d"; + content: "\f06d"; color: var(--admonition-caution-color); } .icon-important::before { - content:"\f06a"; + content: "\f06a"; color: var(--admonition-important-color); } } @@ -638,7 +592,8 @@ table.stretch { } /* Example */ -.example, .exampleblock { +.example, +.exampleblock { border-left: 5px solid var(--example-block-color); padding: 1rem; background-color: var(--example-block-background-color); @@ -655,7 +610,7 @@ table.stretch { .content { .literalblock { - .content{ + .content { background: #fefde6 !important; border: none !important; color: var(--global-font-color); @@ -676,8 +631,8 @@ table.stretch { /* Misc */ .fa { - font-family: FontAwesome; - font-style: normal; + font-family: FontAwesome; + font-style: normal; } .listingblock { @@ -710,13 +665,13 @@ details { kbd { font-family: "DejaVu Sans", "DejaVu Sans Bold"; display: inline-block; - color: rgba(0,0,0,.8); + color: rgba(0, 0, 0, .8); font-size: .65em; line-height: 1.45; background-color: #F7F7F7; border: 1px solid #ccc; border-radius: 3px; - box-shadow: 0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #FFF inset; + box-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 0 0 .1em #FFF inset; margin: 0 .15em; padding: .2em .5em; vertical-align: middle; @@ -789,4 +744,4 @@ kbd { transition: visibility 0s easy 0s; } -} +} \ No newline at end of file diff --git a/documentation/themes/beastie/assets/styles/header.scss b/documentation/themes/beastie/assets/styles/header.scss index 25c38759c7..3e151aeb76 100644 --- a/documentation/themes/beastie/assets/styles/header.scss +++ b/documentation/themes/beastie/assets/styles/header.scss @@ -205,13 +205,14 @@ input[type='checkbox'] { border-radius: .4rem; } -.donate a i, -.heart i { +.donate a .heart, +.heart .heart { + font-size: 1.2rem; color: #E38582; } -.donate:hover a i, -.heart:hover i { +.donate:hover a .heart, +.heart:hover .heart { color: #D1332E; } @@ -328,7 +329,8 @@ input[type='checkbox'] { text-align: center; } - .donate a i { + .donate a .heart { + font-size: 1.2rem; color: #D1332E; } } diff --git a/documentation/themes/beastie/layouts/_default/languages.html b/documentation/themes/beastie/layouts/_default/languages.html index ba487c26c3..8743c86312 100644 --- a/documentation/themes/beastie/layouts/_default/languages.html +++ b/documentation/themes/beastie/layouts/_default/languages.html @@ -4,17 +4,19 @@ {{ block "header" . }}{{ partial "site-header.html" .}}{{ end }}
- {{ $home := .Site.Home }} -

{{ i18n "select-language" }}

-

{{ i18n "current-selection" }} {{ .Site.Language.LanguageName }}

-
    - {{ range $.Site.Home.AllTranslations }} - {{ $isCurrentLang := eq $home.Language .Language }} -
  • - {{.Language.LanguageName }} -
    • - {{ end }} -
+
+ {{ $home := .Site.Home }} +

{{ i18n "select-language" }}

+

{{ i18n "current-selection" }} {{ .Site.Language.LanguageName }}

+
    + {{ range $.Site.Home.AllTranslations }} + {{ $isCurrentLang := eq $home.Language .Language }} +
  • + {{.Language.LanguageName }} +
    • + {{ end }} +
+
{{ block "footer" . }}{{ partial "site-footer.html" .}}{{ end }} diff --git a/documentation/themes/beastie/layouts/articles/total-list.html b/documentation/themes/beastie/layouts/articles/total-list.html index 1a279510ad..e266ed2618 100644 --- a/documentation/themes/beastie/layouts/articles/total-list.html +++ b/documentation/themes/beastie/layouts/articles/total-list.html @@ -1,6 +1,6 @@ {{ define "main" }}
-
+
{{ .Content }}
diff --git a/documentation/themes/beastie/layouts/books/total-list.html b/documentation/themes/beastie/layouts/books/total-list.html index 1a279510ad..e266ed2618 100644 --- a/documentation/themes/beastie/layouts/books/total-list.html +++ b/documentation/themes/beastie/layouts/books/total-list.html @@ -1,6 +1,6 @@ {{ define "main" }}
-
+
{{ .Content }}
diff --git a/documentation/themes/beastie/layouts/index.html b/documentation/themes/beastie/layouts/index.html index ac491fa7cd..6ee1b26a3b 100644 --- a/documentation/themes/beastie/layouts/index.html +++ b/documentation/themes/beastie/layouts/index.html @@ -8,65 +8,59 @@
{{ partial "global-search.html" . }}
-
-
- -
{{ i18n "getting-started" }}
-

{{ i18n "learn-basics" }}

- -
-
- -
{{ i18n "download" }}
-

{{ i18n "download-freebsd" }}

- -
-
- -
{{ i18n "handbook" }}
-

{{ i18n "handbook-desc" }}

- -
+
+ +
{{ i18n "getting-started" }}
+

{{ i18n "learn-basics" }}

+
-
-
- -
{{ i18n "porters-handbook" }}
-

{{ i18n "porters-handbook-desc" }}

- -
-
- -
{{ i18n "faq" }}
-

{{ i18n "faq-desc" }}

- -
-
- -
{{ i18n "fdp" }}
-

{{ i18n "fdp-desc" }}

- -
+
+ +
{{ i18n "download" }}
+

{{ i18n "download-freebsd" }}

+
-
-
- -
{{ i18n "books" }}
-

{{ i18n "books-list" }}

- -
-
- -
{{ i18n "articles" }}
-

{{ i18n "articles-list" }}

- -
-
- -
{{ i18n "manual-pages" }}
-

{{ i18n "manual-pages-desc" }}

- -
+
+ +
{{ i18n "handbook" }}
+

{{ i18n "handbook-desc" }}

+ +
+
+ +
{{ i18n "porters-handbook" }}
+

{{ i18n "porters-handbook-desc" }}

+ +
+
+ +
{{ i18n "faq" }}
+

{{ i18n "faq-desc" }}

+ +
+
+ +
{{ i18n "fdp" }}
+

{{ i18n "fdp-desc" }}

+ +
+
+ +
{{ i18n "books" }}
+

{{ i18n "books-list" }}

+ +
+
+ +
{{ i18n "articles" }}
+

{{ i18n "articles-list" }}

+ +
+
+ +
{{ i18n "manual-pages" }}
+

{{ i18n "manual-pages-desc" }}

+
diff --git a/documentation/themes/beastie/layouts/partials/site-footer.html b/documentation/themes/beastie/layouts/partials/site-footer.html index 015be73356..be343f7545 100755 --- a/documentation/themes/beastie/layouts/partials/site-footer.html +++ b/documentation/themes/beastie/layouts/partials/site-footer.html @@ -107,7 +107,7 @@

© 1994-{{ now.Format "2006" }} {{ i18n "f-all-rights-reserved" }}

- {{ i18n "f-made-with" }} {{ i18n "f-by-freebsd-community" }} + {{ i18n "f-made-with" }} ♥ {{ i18n "f-by-freebsd-community" }}
diff --git a/documentation/themes/beastie/layouts/partials/site-header.html b/documentation/themes/beastie/layouts/partials/site-header.html index 18480e6d3e..96341eb4ae 100755 --- a/documentation/themes/beastie/layouts/partials/site-header.html +++ b/documentation/themes/beastie/layouts/partials/site-header.html @@ -98,7 +98,7 @@ diff --git a/documentation/themes/beastie/layouts/shortcodes/list-articles-directories.html b/documentation/themes/beastie/layouts/shortcodes/list-articles-directories.html index 6105d1e874..843300d4aa 100644 --- a/documentation/themes/beastie/layouts/shortcodes/list-articles-directories.html +++ b/documentation/themes/beastie/layouts/shortcodes/list-articles-directories.html @@ -26,7 +26,7 @@ {{ end }} {{ end }} -
    +
      {{ range sort $articles "weight" "path" }} {{ if in .path "_index.adoc" }} {{ $articlePath := replaceRE "/_index.adoc" "" .path }} diff --git a/documentation/themes/beastie/layouts/shortcodes/list-books-directories.html b/documentation/themes/beastie/layouts/shortcodes/list-books-directories.html index 46e8aef165..10df5da34c 100644 --- a/documentation/themes/beastie/layouts/shortcodes/list-books-directories.html +++ b/documentation/themes/beastie/layouts/shortcodes/list-books-directories.html @@ -26,7 +26,7 @@ {{ end }} {{ end }} -
        +
          {{ range sort $books "bookOrder" "path" }} {{ if in .path "_index.adoc" }} {{ $bookPath := replaceRE "/_index.adoc" "" .path }}