From bbf14effd2cea6492ac7788670552bbed85a1d1e Mon Sep 17 00:00:00 2001 From: gonpombo8 Date: Mon, 10 Oct 2022 12:39:38 -0300 Subject: [PATCH] add footer --- assets/_defaults.scss | 2 +- assets/_fonts.scss | 263 +------------------------ assets/_footer.scss | 2 + assets/_home.scss | 173 ++++++++-------- assets/_main.scss | 11 +- layouts/_default/baseof.html | 68 +++---- layouts/partials/docs/html-footer.html | 36 ++++ 7 files changed, 182 insertions(+), 373 deletions(-) create mode 100644 assets/_footer.scss create mode 100644 layouts/partials/docs/html-footer.html diff --git a/assets/_defaults.scss b/assets/_defaults.scss index 908538a..e97d4aa 100644 --- a/assets/_defaults.scss +++ b/assets/_defaults.scss @@ -17,7 +17,7 @@ $body-min-width: 20rem !default; $container-max-width: 1064px !default; $header-height: 3.5rem !default; -$menu-width: 280px !default; +$menu-width: 340px !default; $toc-width: 16rem !default; $mobile-breakpoint: 768px; diff --git a/assets/_fonts.scss b/assets/_fonts.scss index d187891..028b248 100644 --- a/assets/_fonts.scss +++ b/assets/_fonts.scss @@ -1,12 +1,12 @@ @font-face { - font-family: 'Inter UI'; + font-family: 'Inter'; font-style: normal; font-weight: 400; src: url("fonts/Inter-UI-Regular.woff2") format("woff2"), url("fonts/Inter-UI-Regular.woff") format("woff"); } @font-face { - font-family: 'Inter UI'; + font-family: 'Inter'; font-style: italic; font-weight: 400; src: url("fonts/Inter-UI-Italic.woff2") format("woff2"), @@ -14,14 +14,14 @@ } @font-face { - font-family: 'Inter UI'; + font-family: 'Inter'; font-style: normal; font-weight: 500; src: url("fonts/Inter-UI-Medium.woff2") format("woff2"), url("fonts/Inter-UI-Medium.woff") format("woff"); } @font-face { - font-family: 'Inter UI'; + font-family: 'Inter'; font-style: italic; font-weight: 500; src: url("fonts/Inter-UI-MediumItalic.woff2") format("woff2"), @@ -29,14 +29,14 @@ } @font-face { - font-family: 'Inter UI'; + font-family: 'Inter'; font-style: normal; font-weight: 700; src: url("fonts/Inter-UI-Bold.woff2") format("woff2"), url("fonts/Inter-UI-Bold.woff") format("woff"); } @font-face { - font-family: 'Inter UI'; + font-family: 'Inter'; font-style: italic; font-weight: 700; src: url("fonts/Inter-UI-BoldItalic.woff2") format("woff2"), @@ -44,14 +44,14 @@ } @font-face { - font-family: 'Inter UI'; + font-family: 'Inter'; font-style: normal; font-weight: 900; src: url("fonts/Inter-UI-Black.woff2") format("woff2"), url("fonts/Inter-UI-Black.woff") format("woff"); } @font-face { - font-family: 'Inter UI'; + font-family: 'Inter'; font-style: italic; font-weight: 900; src: url("fonts/Inter-UI-BlackItalic.woff2") format("woff2"), @@ -59,253 +59,10 @@ } -@font-face { - font-family: 'Iosevka'; - font-weight: 100; - font-style: normal; - src: url('fonts/iosevka/woff2/iosevka-mz-thin.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-thin.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-thin.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 100; - font-style: italic; - src: url('fonts/iosevka/woff2/iosevka-mz-thinitalic.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-thinitalic.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-thinitalic.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 100; - font-style: oblique; - src: url('fonts/iosevka/woff2/iosevka-mz-thinoblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-thinoblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-thinoblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka Oblique'; - font-weight: 100; - src: url('fonts/iosevka/woff2/iosevka-mz-thinoblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-thinoblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-thinoblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 200; - font-style: normal; - src: url('fonts/iosevka/woff2/iosevka-mz-extralight.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-extralight.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-extralight.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 200; - font-style: italic; - src: url('fonts/iosevka/woff2/iosevka-mz-extralightitalic.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-extralightitalic.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-extralightitalic.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 200; - font-style: oblique; - src: url('fonts/iosevka/woff2/iosevka-mz-extralightoblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-extralightoblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-extralightoblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka Oblique'; - font-weight: 200; - src: url('fonts/iosevka/woff2/iosevka-mz-extralightoblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-extralightoblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-extralightoblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 300; - font-style: normal; - src: url('fonts/iosevka/woff2/iosevka-mz-light.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-light.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-light.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 300; - font-style: italic; - src: url('fonts/iosevka/woff2/iosevka-mz-lightitalic.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-lightitalic.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-lightitalic.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 300; - font-style: oblique; - src: url('fonts/iosevka/woff2/iosevka-mz-lightoblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-lightoblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-lightoblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka Oblique'; - font-weight: 300; - src: url('fonts/iosevka/woff2/iosevka-mz-lightoblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-lightoblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-lightoblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 400; - font-style: normal; - src: url('fonts/iosevka/woff2/iosevka-mz-regular.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-regular.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-regular.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 400; - font-style: italic; - src: url('fonts/iosevka/woff2/iosevka-mz-italic.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-italic.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-italic.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 400; - font-style: oblique; - src: url('fonts/iosevka/woff2/iosevka-mz-oblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-oblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-oblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka Oblique'; - font-weight: 400; - src: url('fonts/iosevka/woff2/iosevka-mz-oblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-oblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-oblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 500; - font-style: normal; - src: url('fonts/iosevka/woff2/iosevka-mz-medium.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-medium.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-medium.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 500; - font-style: italic; - src: url('fonts/iosevka/woff2/iosevka-mz-mediumitalic.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-mediumitalic.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-mediumitalic.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 500; - font-style: oblique; - src: url('fonts/iosevka/woff2/iosevka-mz-mediumoblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-mediumoblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-mediumoblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka Oblique'; - font-weight: 500; - src: url('fonts/iosevka/woff2/iosevka-mz-mediumoblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-mediumoblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-mediumoblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 600; - font-style: normal; - src: url('fonts/iosevka/woff2/iosevka-mz-semibold.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-semibold.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-semibold.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 600; - font-style: italic; - src: url('fonts/iosevka/woff2/iosevka-mz-semibolditalic.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-semibolditalic.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-semibolditalic.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 600; - font-style: oblique; - src: url('fonts/iosevka/woff2/iosevka-mz-semiboldoblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-semiboldoblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-semiboldoblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka Oblique'; - font-weight: 600; - src: url('fonts/iosevka/woff2/iosevka-mz-semiboldoblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-semiboldoblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-semiboldoblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 700; - font-style: normal; - src: url('fonts/iosevka/woff2/iosevka-mz-bold.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-bold.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-bold.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 700; - font-style: italic; - src: url('fonts/iosevka/woff2/iosevka-mz-bolditalic.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-bolditalic.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-bolditalic.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 700; - font-style: oblique; - src: url('fonts/iosevka/woff2/iosevka-mz-boldoblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-boldoblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-boldoblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka Oblique'; - font-weight: 700; - src: url('fonts/iosevka/woff2/iosevka-mz-boldoblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-boldoblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-boldoblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 800; - font-style: normal; - src: url('fonts/iosevka/woff2/iosevka-mz-extrabold.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-extrabold.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-extrabold.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 800; - font-style: italic; - src: url('fonts/iosevka/woff2/iosevka-mz-extrabolditalic.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-extrabolditalic.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-extrabolditalic.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 800; - font-style: oblique; - src: url('fonts/iosevka/woff2/iosevka-mz-extraboldoblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-extraboldoblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-extraboldoblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka Oblique'; - font-weight: 800; - src: url('fonts/iosevka/woff2/iosevka-mz-extraboldoblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-extraboldoblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-extraboldoblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 900; - font-style: normal; - src: url('fonts/iosevka/woff2/iosevka-mz-heavy.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-heavy.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-heavy.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 900; - font-style: italic; - src: url('fonts/iosevka/woff2/iosevka-mz-heavyitalic.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-heavyitalic.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-heavyitalic.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka'; - font-weight: 900; - font-style: oblique; - src: url('fonts/iosevka/woff2/iosevka-mz-heavyoblique.woff2') format('woff2'), url('fonts/iosevka/woff/iosevka-mz-heavyoblique.woff') format('woff'), url('fonts/iosevka/ttf/iosevka-mz-heavyoblique.ttf') format('truetype'); -} - -@font-face { - font-family: 'Iosevka Oblique'; - font-weight: 900; - src: url('fonts/iosevka/woff2/iosevka-mz-heavyoblique.woff2') format('woff2'), url('woff/iosevka-mz-heavyoblique.woff') format('woff'), url('ttf/iosevka-mz-heavyoblique.ttf') format('truetype'); -} - body { - font-family: 'Inter UI', sans-serif; + font-family: 'Inter', sans-serif; } code { - font-family: 'Iosevka', monospace; + font-family: monospace; } diff --git a/assets/_footer.scss b/assets/_footer.scss new file mode 100644 index 0000000..db6cd61 --- /dev/null +++ b/assets/_footer.scss @@ -0,0 +1,2 @@ +.dcl.footer { +} \ No newline at end of file diff --git a/assets/_home.scss b/assets/_home.scss index 0c2a504..1073e63 100644 --- a/assets/_home.scss +++ b/assets/_home.scss @@ -1,92 +1,97 @@ -.home { - margin-top: 32px; - display: flex; - flex-direction: column; - .welcome-wrapper { - .welcome-header { - font-size: 48px; - font-weight: 700; - line-height: 56px; - } - .welcome-subheader { - color: var(--gray); - font-size: 21px; - margin-bottom: 20px; - } - } - .book-search { - width: 420px; - padding: unset; - margin-top: 16px; - margin-bottom: 32px; - } - .section-cards-container { - display: flex; - justify-content: space-between; - margin: 0 auto; - padding-top: 30px; - .user-card { - font-weight: 500; - border-radius: 8px; - box-shadow: 0 10px 9px -8px rgba(0, 0, 0, 0.48); - flex: 1 1; - height: 280px; - margin-right: 20px; - padding: 20px; - text-align: left; - - * { - color: white - } - - h3 { - font-weight: 700; - } - .card-img { - border-style: none; - padding: 20px 0; - } - - .card-info { - flex: 1 1; - width: 100%; - padding-bottom: 30px; - } - - .card-cta { - align-items: center; - display: flex; - span { - margin-right: 10px; - } - img { - border-style: none; - } - } - &:hover { - box-shadow: 0 20px 18px -16px rgba(0, 0, 0, 0.48); - -webkit-filter: brightness(1.2); - filter: brightness(1.2); - margin-top: -10px; - } - transition: all .5s ease-in-out; - - } - } -} - -@media (max-width: 768px) { +.main-home { .home { + margin-top: 32px; + display: flex; + flex-direction: column; + .welcome-wrapper { + .welcome-header { + font-size: 48px; + font-weight: 700; + line-height: 56px; + } + .welcome-subheader { + color: var(--gray); + font-size: 21px; + margin-bottom: 20px; + } + } .book-search { - width: unset; + width: 420px; + padding: unset; + margin-top: 16px; + margin-bottom: 32px; + #book-search-hits { + max-height: calc(100vh - 400px) !important; // 130px -> uitopbar + titles + search input + } } - .section-cards-container { - flex-direction: column; - } + display: flex; + justify-content: space-between; + margin: 0 auto; + padding-top: 30px; + .user-card { + font-weight: 500; + border-radius: 8px; + box-shadow: 0 10px 9px -8px rgba(0, 0, 0, 0.48); + flex: 1 1; + height: 280px; + margin-right: 20px; + padding: 20px; + text-align: left; - .user-card { - margin: 8px 0; + * { + color: white + } + + h3 { + font-weight: 700; + } + .card-img { + border-style: none; + padding: 20px 0; + } + + .card-info { + flex: 1 1; + width: 100%; + padding-bottom: 30px; + } + + .card-cta { + align-items: center; + display: flex; + span { + margin-right: 10px; + } + img { + border-style: none; + } + } + &:hover { + box-shadow: 0 20px 18px -16px rgba(0, 0, 0, 0.48); + -webkit-filter: brightness(1.2); + filter: brightness(1.2); + margin-top: -10px; + } + transition: all .5s ease-in-out; + + } + } + } + + @media (max-width: 768px) { + .home { + .book-search { + width: unset; + } + + .section-cards-container { + flex-direction: column; + } + + .user-card { + margin: 8px 0; + } } } } \ No newline at end of file diff --git a/assets/_main.scss b/assets/_main.scss index 448a897..689ee45 100644 --- a/assets/_main.scss +++ b/assets/_main.scss @@ -1,5 +1,6 @@ @import "_dcl-ui.scss"; @import "_home.scss"; +@import "_footer.scss"; html { font-size: $font-size-base; @@ -84,6 +85,11 @@ aside nav ul { } } +.book-menu-content label a { + font-weight: 400 !important; + color: #736e7d !important; +} + .book-menu-content nav > ul { padding-inline-start: 0; } @@ -533,8 +539,11 @@ body[dir="rtl"] .book-menu { @import "syntax.scss"; +.code { + font-family: 'monospace' !important; +} .tabs-navigation { - font-family: "Inter UI"; + font-family: "Inter"; font-style: normal; font-weight: 500; font-size: 17px; diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 279e33f..2a83c5e 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -26,42 +26,43 @@ {{ if .IsHome }} -
-
-
-

Decentraland Documentation

-

The first-ever virtual world owned by its users

-
- {{ partial "docs/search" . }} -

- This site is maintained by the Decentraland Foundation.
- The content in this site is divided into sections for different user profiles. Choose a section that matches your needs. -

-
- {{ range $.Site.Data.sections }} -
- -
- {{.name}} -
-
-

For {{.name}}

-

{{.description}}

-
-
- VIEW MORE - View More -
- -
- {{end}} +
+
+
+
+

Decentraland Documentation

+

The first-ever virtual world owned by its users

+
+ {{ partial "docs/search" . }} +

+ This site is maintained by the Decentraland Foundation.
+ The content in this site is divided into sections for different user profiles. Choose a section that matches your needs. +

+
+ {{ range $.Site.Data.sections }} +
+ +
+ {{.name}} +
+
+

For {{.name}}

+

{{.description}}

+
+
+ VIEW MORE + View More +
+ +
+ {{end}} +
-
{{end}} {{ if not .IsHome }} -
+
{{ range $.Site.Data.sections }} @@ -107,9 +108,7 @@ {{ template "comments" . }} - +
{{ if default true (default .Site.Params.BookToC .Params.BookToC) }} @@ -121,6 +120,7 @@ {{ end }} {{ end }} + {{ partial "docs/html-footer.html" . }} {{ partial "docs/inject/body" . }} diff --git a/layouts/partials/docs/html-footer.html b/layouts/partials/docs/html-footer.html new file mode 100644 index 0000000..b6ac1dd --- /dev/null +++ b/layouts/partials/docs/html-footer.html @@ -0,0 +1,36 @@ +
+
+ +
+ Home + Privacy Policy + Terms of Use + Content Policy + Code of Ethics +
+
+
+ +
© 2022 Decentraland
+
+
\ No newline at end of file