diff --git a/assets/icons/discuss.svg b/assets/icons/discuss.svg new file mode 100644 index 00000000..ff193247 --- /dev/null +++ b/assets/icons/discuss.svg @@ -0,0 +1 @@ +Discourse_logo \ No newline at end of file diff --git a/assets/icons/docker.svg b/assets/icons/docker.svg new file mode 100644 index 00000000..6b5e601c --- /dev/null +++ b/assets/icons/docker.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/envelope.svg b/assets/icons/envelope.svg new file mode 100644 index 00000000..36bc794f --- /dev/null +++ b/assets/icons/envelope.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/github.svg b/assets/icons/github.svg new file mode 100644 index 00000000..8435de51 --- /dev/null +++ b/assets/icons/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/linkedin.svg b/assets/icons/linkedin.svg new file mode 100644 index 00000000..92e378b4 --- /dev/null +++ b/assets/icons/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/slack.svg b/assets/icons/slack.svg new file mode 100644 index 00000000..d9accdf8 --- /dev/null +++ b/assets/icons/slack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/twitter.svg b/assets/icons/twitter.svg new file mode 100644 index 00000000..99499699 --- /dev/null +++ b/assets/icons/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/youtube.svg b/assets/icons/youtube.svg new file mode 100644 index 00000000..9757790f --- /dev/null +++ b/assets/icons/youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/scss/_content_project.scss b/assets/scss/_content_project.scss index 02f6fb1a..efd5288e 100644 --- a/assets/scss/_content_project.scss +++ b/assets/scss/_content_project.scss @@ -1,3 +1,5 @@ +@import 'footer'; + // // Style Markdown content // @@ -109,4 +111,27 @@ h1, h2, h3, h4, h5, h6 { @include media-breakpoint-up(sm) { font-size: 3rem; } - } \ No newline at end of file + } + +/* width */ +::-webkit-scrollbar { + width: 8px; + background-color: transparent; +} + +/* Track */ +::-webkit-scrollbar-track { + border-radius: 10px; + background-color: transparent; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + background: $primary; + border-radius: 10px; +} + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover { + background: $secondary; +} \ No newline at end of file diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index a5571611..c7a9dddc 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -3,6 +3,10 @@ @import 'image-modal_project.scss'; @import 'elements_project.scss'; +:root, :host{ + overflow-y: scroll; + overflow-x: hidden; +} // Global Navigation Bar .td-navbar{ diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss index c794fe42..8028711a 100644 --- a/assets/scss/_variables_project.scss +++ b/assets/scss/_variables_project.scss @@ -25,7 +25,7 @@ $code-color: shade-color($secondary, 40%) !default; // $bg-gradient-dark: linear-gradient(250deg, #477e96 0%, #00b39f 35%, rgb(60, 73, 79) 100%); // Body -$body-color: #ccc; +$body-color: #CCCCCC; $body-bg: #010101; // $bs-body-bg: $dark; // $bs-card-cap-bg: $dark; @@ -67,6 +67,7 @@ $web-font-path: "https://fonts.googleapis.com/css?family=#{$google_font_family}& $font-awesome-font-name: "Font Awesome 6 Free" !default; $td-fonts-serif: "Qanelas Soft", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +$font-qanelas: "Qanelas Soft", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; @if $td-enable-google-fonts { $td-fonts-serif: prepend($td-fonts-serif, "#{$google_font_name}"); diff --git a/assets/scss/footer.scss b/assets/scss/footer.scss new file mode 100644 index 00000000..dae018cf --- /dev/null +++ b/assets/scss/footer.scss @@ -0,0 +1,514 @@ +.footer { + background-color: $black; + color: $white; + line-height: 28px; + padding: 2.5rem 3rem 1.5rem; + z-index: 100; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: -12px; + font-family: $font-qanelas; + + .d-header { + height: 6rem; + background-color: $white; + } + + .custom-header-links { + .headerLink { + a { + --font-up-1: 15px; + margin: 0 10px; + color: red; + + &:hover { + color: $secondary; + } + } + } + } + + .search-widget { + display: none; + } + + .list-controls { + .combo-box { + .combo-box-header { + border: none; + font-size: 1.25em; + text-transform: capitalize; + } + } + } + + .select-kit.combo-box { + .select-kit-header { + border: none; + font-size: 1.25em; + } + } + + .categories-and-latest { + div.column.categories { + flex: 1 1 55%; + } + + div.column { + flex: 0 1 40%; + } + } + + .category-list { + border-collapse: separate; + border-spacing: 0 1em; + + thead { + display: none; + } + + tr { + display: flex; + box-sizing: border-box; + padding: 1em; + margin-bottom: 2.5em; + border: none; + background: $white; + } + + tbody { + .category { + border: none; + + .category-logo.aspect-image { + --max-height: 75px; + max-width: 5.625rem; + height: auto; + } + } + } + } + + .latest-topic-list-item { + border-bottom: none; + margin-bottom: 20px; + } + + .table-heading { + border-bottom: none; + } + + .latest-topic-list-item.visited { + a.title { + &:not(.badge-notification) { + color: $dark; + } + } + } + + .latest-topic-list { + .table-heading { + margin-left: 10px; + color: $dark; + font-size: 20px; + } + } + + .twiiter-sidebar { + margin-top: 20px; + } + + .container { + max-width: 90%; + margin: auto; + } + + .footer { + background-color: $dark; + z-index: 100; + color: $body-color; + line-height: 28px; + } + + .row { + width: 100%; + } + + .footer-top { + display: flex; + margin-bottom: 1rem; + } + + .footer-info { + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: flex-start; + } + + .footer-info2 { + display: flex; + flex-direction: column; + } + + .col-lg-6 { + width: 50%; + padding: 15px; + } + + .footer-logo { + margin-left: -10px; + max-width: 300px; + height: auto; + } + + .col-lg-3 { + width: 22%; + } + + .col-lg-9 { + display: flex; + flex-direction: column; + } + + .footer-desc { + padding-right: 1rem; + font-style: italic; + font-weight: 100; + font-size: 16px; + } + + .section-title { + font-size: 1.25rem; + font-weight: 400; + width: fit-content; + } + + .footer-h5 { + padding: 0; + font-size: 1rem; + margin-top: 10px; + width: fit-content; + } + + .footer-sections { + flex: auto; + padding: 0 1rem; + //margin-top: 15px; + + a { + color: $body-color; + font-weight: 400 !important; + + &:hover { + color: $primary; + } + } + } + + .footer-icons { + justify-content: flex-end; + + img { + padding: 0.1rem; + height: 30px; + width: 32px; + } + + a { + padding-right: 15px; + filter: grayscale(1) invert(0.25); + + &:hover { + filter: grayscale(0) invert(0); + } + } + } + + .social-icon { + filter: grayscale(0) invert(0.38) !important; + } + + .social-icon:hover { + filter: grayscale(0) invert(1) !important; + } + + .subscribe { + margin: 3rem 0px 2rem 0px; + + p { + margin-bottom: 0; + } + + .footer-end { + display: flex; + align-items: flex-end; + justify-content: flex-end; + } + + form { + margin: 0; + } + } + + input.footer-input { + padding: 1rem; + margin-right: 0.25rem; + width: 20rem; + height: 3.5rem; + border: 0.5px solid $white; + background: transparent; + border-radius: 0.5rem; + outline: none; + color: $white; + + &:focus { + padding: 1rem; + margin-right: 0.25rem; + width: 24rem; + height: 3.5rem; + border: 0.5px solid $white; + background: transparent; + border-radius: 0.5rem; + outline-width: 0; + color: $white; + } + } + + .footer-button { + height: 3.5rem; + background: $primary; + color: $white; + width: 160px; + border-radius: 0.25rem; + border: none; + } + + .footer-hr { + width: 100%; + color: $white; + margin: 0; + } + + .footer-bottom { + padding: 10px; + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + justify-content: space-between; + + span { + margin: 0 0 1rem; + font-size: 0.8rem; + } + + a { + color: $white; + } + } + + .odd-col { + flex: 1 1 auto; + } + + .even-col { + flex: 1 1 auto; + } + + + /* Media Query for Mobile */ + @media (max-width: 490px) { + + padding: 2.5rem 0; + .footer-info { + flex-wrap: wrap !important; + } + + .row { + padding: 0; + } + + .footer-h5 { + font-size: 0.85rem; + } + .footer-resources { + margin: 0 !important; + } + .footer-sections { + padding: 20px !important; + } + .footer-icons { + a { + margin-bottom: 15px; + } + } + .odd-col { + flex: 0 0 60%; + } + .even-col { + flex: 0 0 40%; + } + .col-lg-3 { + width: 100% !important; + } + .footer-desc { + padding: 0px 10px 0px 10px !important; + text-align: center !important; + } + .col-lg-9 { + width: 100% !important; + } + .footer-top { + flex-direction: column-reverse !important; + } + .col-lg-6 { + width: 100% !important; + text-align: center !important; + } + .footer-icons { + justify-content: center !important; + } + .footer-logo { + padding: 10px 10px 0px 10px !important; + } + .subscribe { + justify-content: center !important; + } + input.footer-input { + width: 13rem !important; + } + .footer-button { + margin-top: 5px; + width: 7.5rem !important; + } + .footer-bottom-right { + margin: 1.5% !important; + } + .footer-bottom-left { + padding: 2% !important; + } + } + + /* Media Query for low resolution Tablets, Ipads */ + @media (min-width: 489px) and (max-width: 767px) { + .footer-info { + flex-wrap: wrap !important; + } + .footer-resources { + margin: 0 !important; + } + .footer-sections { + padding: 20px !important; + } + .odd-col { + flex: 0 0 60%; + } + .even-col { + flex: 0 0 40%; + } + .col-lg-3 { + width: 100% !important; + } + .footer-desc { + padding: 0px 10px 0px 10px !important; + text-align: center !important; + } + .col-lg-9 { + width: 100% !important; + } + .footer-top { + flex-direction: column-reverse !important; + } + .col-lg-6 { + width: 100% !important; + text-align: center !important; + } + .footer-icons { + justify-content: center !important; + a { + margin-bottom: 15px; + } + } + .footer-logo { + padding: 10px 10px 0px 10px !important; + } + .subscribe { + justify-content: center !important; + } + input.footer-input { + width: 13rem !important; + } + .footer-button { + margin-top: 5px; + width: 7.5rem !important; + } + .footer-bottom-right { + margin: 1.5% !important; + } + .footer-bottom-left { + padding: 2% !important; + } + } + + /* Media Query for Tablets Ipads portrait mode */ + @media (min-width: 768px) and (max-width: 850px) { + .footer-info { + flex-wrap: wrap !important; + } + .footer-resources { + margin: 0 !important; + } + .footer-sections { + padding: 20px !important; + } + .footer-sections a { + font-weight: 400; + } + .odd-col, .even-col { + flex: 0 1 auto; + width: auto; /* Adjust the width to auto */ + margin: 0; /* Reset any margin */ + padding: 20px; /* Consistent padding */ + } + .even-col { + flex: 0 1 auto; + } + .col-lg-3 { + width: 100% !important; + } + .footer-desc { + padding: 0px 10px 0px 10px !important; + text-align: center !important; + } + .footer-top { + flex-direction: column-reverse !important; + } + .col-lg-6 { + width: 100% !important; + text-align: center !important; + } + .footer-icons { + justify-content: center !important; + } + .footer-logo { + padding: 10px 10px 0px 10px !important; + } + .subscribe { + justify-content: center !important; + margin-top: -8rem; + } + .footer-button { + width: 120px !important; + } + .footer-bottom-right { + margin: 1.5% !important; + } + .footer-bottom-left { + padding: 2% !important; + } + } + +} \ No newline at end of file diff --git a/hugo.toml b/hugo.toml index dcd14a25..879a416d 100644 --- a/hugo.toml +++ b/hugo.toml @@ -62,7 +62,7 @@ id = "UA-00000000-0" [languages] [languages.en] -languageName ="English" +languageName = "English" # Weight used for sorting. weight = 1 [languages.en.params] @@ -123,7 +123,7 @@ github_project_repo = "https://github.com/layer5io/docs" # Uncomment this if your GitHub repo does not have "main" as the default branch, # or specify a new value if you want to reference another branch in your GitHub links -github_branch= "master" +github_branch = "master" # Google Custom Search Engine ID. Remove or comment out to disable search. gcs_engine_id = "f475448a7bc1d43a4" @@ -177,38 +177,126 @@ no = 'Sorry to hear that. Please +
+
+ {{ $svg := resources.Get "icons/logo.svg" }} + + +
+
+ {{ range .Site.Params.links.footer.icons }} + + {{ $svg1 := resources.Get .icon }} + + + {{ end }} +
+
+
+
+

An empowerer of engineers, Layer5 helps you extract more value from your infrastructure. Creator and + maintainer of cloud native standards. Maker of Meshery, the cloud native manager.

+
+ +
+
+ +
+

RESOURCES

+ {{ range .Site.Params.links.footer.resources.items }} +
+ {{ .name }} +
+ {{ end }} +
+ + +
+

COMMUNITY

+ {{ range .Site.Params.links.footer.community.items }} +
{{ .name }}
+ {{ end }} +
+ + +
+

SOLUTIONS

+ {{ range .Site.Params.links.footer.projects.items }} +
{{ .name }}
+ {{ end }} +
+ + +
+

COMPANY

+ {{ range .Site.Params.links.footer.company.items }} +
{{ .name }}
+ {{ end }} +
+
+ +
+
+
+
+
+ + Copyright ©Layer5, Inc | All Rights Reserved + +
+
+ Privacy   Terms +
+
+ \ No newline at end of file