Skip to content

hero and navbar improvements #129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

hero and navbar improvements #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
25a2578
hero and navbar changes
reveurguy Jun 27, 2022
bc19a15
Merge branch 'containerd:main' into main
reveurguy Jun 30, 2022
3973c3f
changed background of footer and features-section
reveurguy Jun 30, 2022
d97eb62
updated bulma version
reveurguy Jul 2, 2022
d4ce849
removed package-lock file from gitignore
reveurguy Jul 20, 2022
bebfa51
hero and navbar changes
reveurguy Jun 27, 2022
f3f8013
changed background of footer and features-section
reveurguy Jun 30, 2022
e6c9a07
updated bulma version
reveurguy Jul 2, 2022
496b90b
removed package-lock file from gitignore
reveurguy Jul 20, 2022
a8552f5
made changes for small screen size according to suggestions
reveurguy Jul 21, 2022
658ce98
made changes for small screen size according to suggestions
reveurguy Jul 21, 2022
9225016
removed package-lock
reveurguy Jul 22, 2022
74b420d
Merge branch 'containerd:main' into main
reveurguy Dec 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
# macOS leftovers
.DS_Store
.hugo-build.lock

# Node.js-related assets (e.g. for CSS)
node_modules/
Expand Down
2 changes: 1 addition & 1 deletion Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,4 @@ install-link-checker:
run-link-checker:
bin/htmltest

check-links: clean production-build install-link-checker run-link-checker
check-links: clean production-build install-link-checker run-link-checker
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that nothing was changed here other than whitespace. Please undo the whitespace change.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"private": true,
"devDependencies": {
"bulma": "^0.7.1"
"bulma": "^0.9.4"
}
}
23 changes: 23 additions & 0 deletions themes/containerd/assets/sass/style.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,3 +243,26 @@ hr.short-hr

a
margin-bottom: .5rem

.has-background-pattern
background-color: #000022
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='2000' viewBox='0 0 800 800'%3E%3Cg fill='none' %3E%3Cg stroke='%23026' stroke-width='17'%3E%3Cline x1='-8' y1='-8' x2='808' y2='808'/%3E%3Cline x1='-8' y1='792' x2='808' y2='1608'/%3E%3Cline x1='-8' y1='-808' x2='808' y2='8'/%3E%3C/g%3E%3Cg stroke='%23002163' stroke-width='16'%3E%3Cline x1='-8' y1='767' x2='808' y2='1583'/%3E%3Cline x1='-8' y1='17' x2='808' y2='833'/%3E%3Cline x1='-8' y1='-33' x2='808' y2='783'/%3E%3Cline x1='-8' y1='-783' x2='808' y2='33'/%3E%3C/g%3E%3Cg stroke='%23002060' stroke-width='15'%3E%3Cline x1='-8' y1='742' x2='808' y2='1558'/%3E%3Cline x1='-8' y1='42' x2='808' y2='858'/%3E%3Cline x1='-8' y1='-58' x2='808' y2='758'/%3E%3Cline x1='-8' y1='-758' x2='808' y2='58'/%3E%3C/g%3E%3Cg stroke='%23001f5c' stroke-width='14'%3E%3Cline x1='-8' y1='67' x2='808' y2='883'/%3E%3Cline x1='-8' y1='717' x2='808' y2='1533'/%3E%3Cline x1='-8' y1='-733' x2='808' y2='83'/%3E%3Cline x1='-8' y1='-83' x2='808' y2='733'/%3E%3C/g%3E%3Cg stroke='%23001e59' stroke-width='13'%3E%3Cline x1='-8' y1='92' x2='808' y2='908'/%3E%3Cline x1='-8' y1='692' x2='808' y2='1508'/%3E%3Cline x1='-8' y1='-108' x2='808' y2='708'/%3E%3Cline x1='-8' y1='-708' x2='808' y2='108'/%3E%3C/g%3E%3Cg stroke='%23001d56' stroke-width='12'%3E%3Cline x1='-8' y1='667' x2='808' y2='1483'/%3E%3Cline x1='-8' y1='117' x2='808' y2='933'/%3E%3Cline x1='-8' y1='-133' x2='808' y2='683'/%3E%3Cline x1='-8' y1='-683' x2='808' y2='133'/%3E%3C/g%3E%3Cg stroke='%23001c53' stroke-width='11'%3E%3Cline x1='-8' y1='642' x2='808' y2='1458'/%3E%3Cline x1='-8' y1='142' x2='808' y2='958'/%3E%3Cline x1='-8' y1='-158' x2='808' y2='658'/%3E%3Cline x1='-8' y1='-658' x2='808' y2='158'/%3E%3C/g%3E%3Cg stroke='%23001b4f' stroke-width='10'%3E%3Cline x1='-8' y1='167' x2='808' y2='983'/%3E%3Cline x1='-8' y1='617' x2='808' y2='1433'/%3E%3Cline x1='-8' y1='-633' x2='808' y2='183'/%3E%3Cline x1='-8' y1='-183' x2='808' y2='633'/%3E%3C/g%3E%3Cg stroke='%23001a4c' stroke-width='9'%3E%3Cline x1='-8' y1='592' x2='808' y2='1408'/%3E%3Cline x1='-8' y1='192' x2='808' y2='1008'/%3E%3Cline x1='-8' y1='-608' x2='808' y2='208'/%3E%3Cline x1='-8' y1='-208' x2='808' y2='608'/%3E%3C/g%3E%3Cg stroke='%23001949' stroke-width='8'%3E%3Cline x1='-8' y1='567' x2='808' y2='1383'/%3E%3Cline x1='-8' y1='217' x2='808' y2='1033'/%3E%3Cline x1='-8' y1='-233' x2='808' y2='583'/%3E%3Cline x1='-8' y1='-583' x2='808' y2='233'/%3E%3C/g%3E%3Cg stroke='%23001846' stroke-width='7'%3E%3Cline x1='-8' y1='242' x2='808' y2='1058'/%3E%3Cline x1='-8' y1='542' x2='808' y2='1358'/%3E%3Cline x1='-8' y1='-558' x2='808' y2='258'/%3E%3Cline x1='-8' y1='-258' x2='808' y2='558'/%3E%3C/g%3E%3Cg stroke='%23001743' stroke-width='6'%3E%3Cline x1='-8' y1='267' x2='808' y2='1083'/%3E%3Cline x1='-8' y1='517' x2='808' y2='1333'/%3E%3Cline x1='-8' y1='-533' x2='808' y2='283'/%3E%3Cline x1='-8' y1='-283' x2='808' y2='533'/%3E%3C/g%3E%3Cg stroke='%2300163f' stroke-width='5'%3E%3Cline x1='-8' y1='292' x2='808' y2='1108'/%3E%3Cline x1='-8' y1='492' x2='808' y2='1308'/%3E%3Cline x1='-8' y1='-308' x2='808' y2='508'/%3E%3Cline x1='-8' y1='-508' x2='808' y2='308'/%3E%3C/g%3E%3Cg stroke='%2300153c' stroke-width='4'%3E%3Cline x1='-8' y1='467' x2='808' y2='1283'/%3E%3Cline x1='-8' y1='317' x2='808' y2='1133'/%3E%3Cline x1='-8' y1='-333' x2='808' y2='483'/%3E%3Cline x1='-8' y1='-483' x2='808' y2='333'/%3E%3C/g%3E%3Cg stroke='%23001439' stroke-width='3'%3E%3Cline x1='-8' y1='342' x2='808' y2='1158'/%3E%3Cline x1='-8' y1='442' x2='808' y2='1258'/%3E%3Cline x1='-8' y1='-458' x2='808' y2='358'/%3E%3Cline x1='-8' y1='-358' x2='808' y2='458'/%3E%3C/g%3E%3Cg stroke='%23001336' stroke-width='2'%3E%3Cline x1='-8' y1='367' x2='808' y2='1183'/%3E%3Cline x1='-8' y1='417' x2='808' y2='1233'/%3E%3Cline x1='-8' y1='-433' x2='808' y2='383'/%3E%3Cline x1='-8' y1='-383' x2='808' y2='433'/%3E%3C/g%3E%3Cg stroke='%23013' stroke-width='1'%3E%3Cline x1='-8' y1='392' x2='808' y2='1208'/%3E%3Cline x1='-8' y1='-408' x2='808' y2='408'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
background-attachment: fixed

.scrolled
background: #1d1c29 !important
transition: background 1000ms

.subtitle strong
color: white;
font-weight: 600;

.footer .container .columns .column ul li a, .footer .container .columns .column
color: white;

.hr
margin: 1rem 0;

@media (max-width: 600px)
.is-footer-logo
transform: scale(1.5) !important;
21 changes: 11 additions & 10 deletions themes/containerd/layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,41 +6,42 @@
{{- $about := .Site.Params.home.about | markdownify }}
{{- $diagram := "img/architecture.png" | relURL }}
{{- $adopterLogos := .Site.Data.adopters }}
<section class="hero has-text-centered is-dark has-shadow">
<section class="hero has-text-centered has-shadow has-background-pattern">
<div class="hero-body">
<div class="container">
<img src="{{ $logo }}" class="title is-home-logo" alt="containerd hero logo">

<br />

<p class="subtitle is-size-3 is-size-4-mobile has-text-weight-light">
<p class="subtitle is-size-3 is-size-4-mobile has-text-white has-text-weight-light">
{{ $subtitle }}
</p>

<br />

<div class="buttons is-centered">
<a class="button is-medium is-radiusless is-borderless has-text-weight-bold" href="/docs/getting-started">
<a class="button is-medium is-rounded is-borderless has-text-weight-bold" href="/docs/getting-started">

<span class="icon">
<i class="fas fa-sm fa-step-forward"></i>
<i class="fas fa-sm fa-play"></i>
</span>
<span>
Getting started
</span>
</a>

<a class="button is-dark is-outlined is-inverted is-radiusless" href="/docs">
<a class="button is-medium is-info is-rounded has-text-weight-bold" href="/docs">
<span class="icon">
<i class="fas fa-sm fa-info"></i>
<i class="fas fa-sm fa-book"></i>
</span>
<span>
Docs
</span>
</a>

<a class="button is-orange is-radiusless" href="/downloads">
<a class="button is-medium is-danger is-rounded has-text-weight-bold" href="/downloads">
<span class="icon">
<i class="fas fa-file-download"></i>
<i class="fas fa-download"></i>
</span>
<span>
Downloads
Expand Down Expand Up @@ -75,15 +76,15 @@
</div>
</section>

<section class="section is-grey" id="features">
<section class="section has-background-pattern has-text-white" id="features">
<div class="container">
<div class="columns">
<div class="column is-one-quarter">
<p class="is-size-3 is-size-4-mobile has-text-weight-semibold">
Features
</p>

<hr class="short-hr is-black" />
<hr class="short-hr" />
</div>

<div class="column">
Expand Down
36 changes: 18 additions & 18 deletions themes/containerd/layouts/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{{- $logo := "img/logos/footer-logo.png" | relURL }}
{{- $logo := "/img/logos/navbar-light-logo.png" | relURL }}
{{- $docs := where .Site.Pages "Section" "docs" }}
{{- $year := now.Year }}
{{- $twitterHandle := .Site.Params.twitterHandle }}
Expand All @@ -7,19 +7,19 @@
{{- $githubUrl := printf "https://github.com/%s" $githubRepo }}
{{- $slackChannel := .Site.Params.slackChannel }}
{{- $projectPages := where .Site.RegularPages "Section" "" }}
<div class="footer">
<div class="footer has-background-pattern has-text-white">
<div class="container">
<div class="columns">
<div class="column">
<img src="{{ $logo }}" class="is-footer-logo" alt="containerd footer logo">
<div class="column" style="display: flex;justify-content: center;align-items: center;">
<img style=" transform:scale(1.2);" src="{{ $logo }}" class="is-footer-logo" alt="containerd footer logo">
Comment on lines +13 to +14
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't hardcode style attributes.

</div>

<div class="column">
<span class="is-size-4 is-size-5-mobile">
<span class="is-size-4 is-size-5-mobile has-text-weight-bold">
Docs
</span>

<hr class="hr has-background-grey">
<hr class="hr ">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: remove unnecessary space in class string, here and the other instances below.


<ul>
{{- range $docs }}
Expand All @@ -33,11 +33,11 @@
</div>

<div class="column">
<span class="is-size-4 is-size-5-mobile">
<span class="is-size-4 is-size-5-mobile has-text-weight-bold">
Project
</span>

<hr class="hr has-background-grey">
<hr class="hr ">

<ul>
<li>
Expand All @@ -57,14 +57,14 @@
</div>

<div class="column">
<span class="is-size-4 is-size-5-mobile">
<span class="is-size-4 is-size-5-mobile has-text-weight-bold">
Community
</span>

<hr class="hr has-background-grey">
<hr class="hr ">

<div class="buttons">
<a class="button has-background-twitter-blue is-borderless has-text-white" href="{{ $twitterUrl }}">
<a class="button is-normal has-background-twitter-blue is-borderless has-text-white has-text-weight-semibold" href="{{ $twitterUrl }}">
<span class="icon">
<i class="fab fa-twitter" aria-hidden="true"></i>
</span>
Expand All @@ -73,16 +73,16 @@
</span>
</a>

<a class="button is-borderless has-background-black has-text-white" href="{{ $githubUrl }}">
<a class="button is-normal is-borderless has-background-white has-text-black has-text-weight-semibold" href="{{ $githubUrl }}">
<span class="icon">
<i class="fab fa-github" aria-hidden="true"></i>
<i style="color:black" class="fab fa-github" aria-hidden="true"></i>
</span>
<span>
GitHub
</span>
</a>

<a class="button is-borderless has-background-slack-green has-text-white" href="{{ $slackChannel }}">
<a class="button is-normal is-borderless has-background-slack-green has-text-white has-text-weight-semibold" href="{{ $slackChannel }}">
<span class="icon">
<i class="fab fa-slack" aria-hidden="true"></i>
</span>
Expand All @@ -95,19 +95,19 @@
</div> <!-- .column -->
</div> <!-- .column -->

<hr class="hr has-background-grey-lighter">
<hr style="background: transparent;" class="hr">
</div> <!-- .columns -->

<div class="container has-text-centered">
<div class="has-text-weight-light">
<div class="has-text-weight-normal">
<p class="is-size-5 is-size-6-mobile">
&copy; containerd Authors {{ $year }} | Documentation Distributed under <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a>
&copy; containerd Authors {{ $year }} | Documentation Distributed under <a href="https://creativecommons.org/licenses/by/4.0/" class="has-text-white is-underlined" >CC-BY-4.0</a>
</p>

<br />

<p>
&copy; {{ $year }} The Linux Foundation. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our <a href="https://www.linuxfoundation.org/trademark-usage">Trademark Usage</a> page.
&copy; {{ $year }} The Linux Foundation. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our <a class="has-text-white is-underlined" href="https://www.linuxfoundation.org/trademark-usage">Trademark Usage</a> page.
</p>
</div>
</div> <!-- .container -->
Expand Down
31 changes: 22 additions & 9 deletions themes/containerd/layouts/partials/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
{{- $isHome := .IsHome }}
{{- $logo := cond $isHome ("img/logos/navbar-light-logo.png" | relURL) ("img/logos/navbar-dark-logo.png" | relURL) }}
{{- $logo := cond $isHome ("img/logos/navbar-light-logo.png" | relURL) ("img/logos/navbar-light-logo.png" | relURL) }}
{{- $docs := where .Site.Pages "Section" "docs" }}
{{- $twitterHandle := .Site.Params.twitterHandle }}
{{- $twitterUrl := printf "https://twitter.com/@%s" $twitterHandle }}
{{- $githubRepo := .Site.Params.githubRepo }}
{{- $githubUrl := printf "https://github.com/%s" $githubRepo }}
{{- $slackChannel := .Site.Params.slackChannel }}
{{- $projectPages := where .Site.RegularPages "Section" "" }}
<div class="navbar is-fixed-top{{ if $isHome }} is-dark{{ else }} has-shadow{{ end }}">
<div id="mainnav" style="padding:10px" class="navbar is-transparent has-background-pattern is-fixed-top{{ if $isHome }} {{ else }} has-shadow{{ end }}">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="{{ .Site.BaseURL }}">
<img src="{{ $logo }}" alt="containerd navbar logo">
<img src="{{ $logo }}" alt="containerd navbar logo" style="transform: scale(1.2);padding-left: 20px;">
</a>

{{- if not $isHome }}
<div class="navbar-item is-docs-title has-text-weight-bold is-hidden-mobile">
<div class="navbar-item is-docs-title has-text-weight-bold has-text-white is-hidden-mobile">
{{ .Title }}
</div>
{{- end }}
Expand All @@ -29,12 +29,12 @@

<div class="navbar-menu" id="navbarMenu">
<div class="navbar-end">
<a class="navbar-item has-text-weight-bold" href="/downloads">
<a class="navbar-item has-text-weight-bold has-text-white" href="/downloads">
Downloads
</a>

<div class="navbar-item is-hoverable has-dropdown has-text-weight-bold" href="/docs">
<a class="navbar-link">
<a class="navbar-link has-text-white">
Docs
</a>

Expand All @@ -48,7 +48,7 @@
</div> <!-- .navbar-item -->

<div class="navbar-item is-hoverable has-dropdown has-text-weight-bold">
<div class="navbar-link">
<div class="navbar-link has-text-white">
Project
</div>

Expand Down Expand Up @@ -78,9 +78,9 @@
</span>
</a>

<a class="button is-borderless has-background-black has-text-white" href="{{ $githubUrl }}">
<a class="button is-borderless has-background-white has-text-white" href="{{ $githubUrl }}">
<span class="icon">
<i class="fab fa-github" aria-hidden="true"></i>
<i class="fab fa-github" aria-hidden="true" style="color:black"></i>
</span>
</a>

Expand All @@ -96,3 +96,16 @@
</div> <!-- .navbar-menu -->
</div> <!-- .container -->
</div> <!-- .navbar -->

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This project already includes jQuery 3.6 (see under the themes folder).

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
Comment on lines +100 to +102
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CSS frameworks are resource heavy, and add a non-trivial overhead for maintainers. This website was built using bulma. Here you're adding full support for Bootstrap. We don't want that. Use either bulma or Bootstrap, not both.


<script>
$(function () {
$(document).scroll(function () {
var $nav = $("#mainnav");
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
});
});
</script>
Comment on lines +104 to +111
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

navbar.html shouldn't contain embedded script elements. Instead add the code in a manner consistent with this project (see the javascript.html partial).

11 changes: 4 additions & 7 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@
# yarn lockfile v1


bulma-badge@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/bulma-badge/-/bulma-badge-2.0.0.tgz#7c7f8fee805400fa35117a43c80f5f9784f3d513"

bulma@^0.7.1:
version "0.7.2"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.7.2.tgz#8e944377b74c7926558830d38d8e19eaf49f5fb6"
"bulma@^0.9.4":
"integrity" "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ=="
"resolved" "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz"
"version" "0.9.4"