Skip to content

Commit

Permalink
Merge pull request #827 from Dev-JoyA/feature/vocabulary-design-syste…
Browse files Browse the repository at this point in the history 
…m-header

Align header with the Vocabulary design system
  • Loading branch information
@TimidRobot
TimidRobot authored Nov 5, 2024
2 parents ccc1547 + 6556b2a commit 6766e43
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 96 deletions.
7 changes: 2 additions & 5 deletions assets/static/vocabulary/css/vocabulary.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,6 @@ EX:
/* typography */

body {
/* display: grid;
grid-template-columns: 5% 3% 6% 6% 15% 30% 15% 6% 6% 3% 5%;
overflow-x: hidden; */

font-weight: 400;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
Expand Down Expand Up @@ -800,7 +796,7 @@ body > header .masthead {
}

body > header .masthead h1 {
margin: 0;
margin: 0 0 0 3rem;
}

/* allows the child identity-logo element to have a focus state */
Expand Down Expand Up @@ -947,6 +943,7 @@ body > header .ancilliary-menu {
top: 0;
/* right: var(--vocabulary-page-edges-space); */
right: 0;
margin-right: 4rem;

font-family: "Source Sans Pro";
font-style: normal;
Expand Down
214 changes: 123 additions & 91 deletions themes/vocabulary_theme/templates/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" type="image/x-icon" href="{{ '/static/favicon.ico'|url }}">
<link rel="stylesheet" href="{{ '/static/gen/style.css'|url }}">
<link rel="stylesheet" href="{{ '/static/vocabulary/css/vocabulary.css'|url }}">
<link rel="stylesheet" href="{{ get_pygments_stylesheet()|url }}">
<meta property="og:site_name" content="Creative Commons" />
<meta property="og:title" content="{{ this.title }}" />
Expand Down Expand Up @@ -35,101 +36,131 @@
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ '/static/gen/script.js'|url }}"></script>
<script src="https://unpkg.com/@creativecommons/[email protected]/js/vocabulary.js"></script>
<script>
const globalHeaderInstance = vocabulary.createGlobalHeader();
</script>
<title>{% block title %}Welcome{% endblock %} — Creative Commons Open Source</title>

<body>

<!-- Header -->
<header class="container">
<nav class="navbar">
<div class="navbar-brand">
<a class="has-text-black" href="{{ '/'|url }}" aria-label="Home">
<svg
class="logo margin-top-small"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 284 46">
<use href="#opensource"></use>
</svg>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<!-- <span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span> -->
Menu
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item {% if this.is_child_of('/blog') %} is-active{% endif%}" href="{{ '/blog/entries'|url }}">
Blog
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless {% if this.is_child_of('/contributing-code') %} is-active{% endif%}" tabindex="0">
Contribute<i class="icon caret-down"></i></a>
<div class="navbar-dropdown">
{% for href, title in [
['/contributing-code', 'Contribution Guidelines'],
['/contributing-code/projects', 'Project List'],
['/contributing-code/issue-finder', 'Issue Finder'],
['/contributing-code/pr-guidelines', 'Pull Request Guidelines'],
['/contributing-code/github-repo-guidelines', 'GitHub Repo Guidelines'],
['/contributing-code/repo-labels', 'Repository Labels'],
['/contributing-code/foundational-tech', 'Foundational technologies'],
['/contributing-code/documentation-guidelines', 'Documentation Guidelines'],
['/contributing-code/javascript-guidelines', 'JavaScript Guidelines'],
['/contributing-code/python-guidelines', 'Python Guidelines'],
['/contributing-code/translation-guide', 'Translation Guide'],
['/contributing-code/usability', 'Usability'],
] %}
<a class="navbar-item" href="{{ href|url }}">{{ title }}</a>
{% endfor %}
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless {% if this.is_child_of('/community') %} is-active{% endif%}" tabindex="0">
Community<i class="icon caret-down"></i></a>
<div class="navbar-dropdown is-active">
{% for href, title in [
['/community', 'Join the Community'],
['/community/community-team', 'Community Team'],
['/community/community-team/members', 'Community Team Members'],
['/community/community-team/project-roles', 'Project Roles'],
['/community/community-team/community-building-roles', 'Community Building Roles'],
['/community/write-a-blog-post', 'Write a Blog Post'],
['/community/code-of-conduct', 'Code of Conduct'],
['/community/code-of-conduct/enforcement', 'Code of Conduct Enforcement'],
['/community/supporters', 'Supporters'],
] %}
<a class="navbar-item" href="{{ href|url }}">{{ title }}</a>
{% endfor %}
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless {% if this.is_child_of('/programs') %} is-active{% endif%}" tabindex="0">
Work Programs<i class="icon caret-down"></i></a>
<div class="navbar-dropdown">
{% for href, title in [
['/programs', 'Overview'],
['/programs/project-ideas', 'Project Ideas'],
['/programs/applicant-guide', 'Applicant Guide'],
['/programs/contrib-guide', 'Contributor Guide'],
['/programs/lead-guide', 'Project Lead Guide'],
['/programs/history', 'History'],
] %}
<a class="navbar-item" href="{{ href|url }}">{{ title }}</a>
{% endfor %}
</div>
</div>
</div>
</div>
</nav>
</header>
<a class="skip-to-content" href="#main-content-marker">Skip to content</a>

<header>
<div class="masthead">
<h1><a class="identity-logo product" href="{{ '/'|url }}">Open Source</a></h1>
<button class="expand-menu">Menu</button>
<nav class="primary-menu">
<ul>
<li><a class="navbar-item {% if this.is_child_of('/blog') %} is-active{% endif%}" href="{{ '/blog/entries'|url }}">
Blog
</a></li>
<li><div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless {% if this.is_child_of('/contributing-code') %} is-active{% endif%}" tabindex="0">
Contribute</a>
<div class="navbar-dropdown">
{% for href, title in [
['/contributing-code', 'Contribution Guidelines'],
['/contributing-code/projects', 'Project List'],
['/contributing-code/issue-finder', 'Issue Finder'],
['/contributing-code/pr-guidelines', 'Pull Request Guidelines'],
['/contributing-code/github-repo-guidelines', 'GitHub Repo Guidelines'],
['/contributing-code/repo-labels', 'Repository Labels'],
['/contributing-code/foundational-tech', 'Foundational technologies'],
['/contributing-code/documentation-guidelines', 'Documentation Guidelines'],
['/contributing-code/javascript-guidelines', 'JavaScript Guidelines'],
['/contributing-code/python-guidelines', 'Python Guidelines'],
['/contributing-code/translation-guide', 'Translation Guide'],
['/contributing-code/usability', 'Usability'],
] %}
<a class="navbar-item" href="{{ href|url }}">{{ title }}</a>
{% endfor %}
</div>
</div></li>
<li><div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless {% if this.is_child_of('/community') %} is-active{% endif%}" tabindex="0">
Community</a>
<div class="navbar-dropdown is-active">
{% for href, title in [
['/community', 'Join the Community'],
['/community/community-team', 'Community Team'],
['/community/community-team/members', 'Community Team Members'],
['/community/community-team/project-roles', 'Project Roles'],
['/community/community-team/community-building-roles', 'Community Building Roles'],
['/community/write-a-blog-post', 'Write a Blog Post'],
['/community/code-of-conduct', 'Code of Conduct'],
['/community/code-of-conduct/enforcement', 'Code of Conduct Enforcement'],
['/community/supporters', 'Supporters'],
] %}
<a class="navbar-item" href="{{ href|url }}">{{ title }}</a>
{% endfor %}
</div>
</div></li>
<li><div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link is-arrowless {% if this.is_child_of('/programs') %} is-active{% endif%}" tabindex="0">
Work Programs</i></a>
<div class="navbar-dropdown">
{% for href, title in [
['/programs', 'Overview'],
['/programs/project-ideas', 'Project Ideas'],
['/programs/applicant-guide', 'Applicant Guide'],
['/programs/contrib-guide', 'Contributor Guide'],
['/programs/lead-guide', 'Project Lead Guide'],
['/programs/history', 'History'],
] %}
<a class="navbar-item" href="{{ href|url }}">{{ title }}</a>
{% endfor %}
</div>
</div></li>
</ul>
</nav>

<nav class="ancilliary-menu">
<ul>
<!-- uncomment below line, if translation functionality is present on site -->
<li><button class="locale icon-attach fa-globe">English</button></li>
<!-- uncomment below line, if search functionality is present on site -->
<!-- <li><a class="search icon-attach fa-search" href="#">Search</a></li> -->
<li><a class="donate icon-attach fa-heart" href="https://www.classy.org/give/313412/#!/donation/checkout?c_src=website&amp;c_src2=top-of-page-banner" target="_blank">Donate</a></li>
<li><button class="explore">Explore CC</button></li>
</ul>
</nav>
</div>



<div class="explore-panel">

<!-- (optional main CC logo, p, link on non-home site back to main site) -->
<aside>
<a class="identity-logo" href="https://creativecommons.org">Creative Commons</a>
<h2>Our Work Relies On You!</h2>
<p>Help us keep the internet free and open.</p>
</aside>

<nav class="explore-menu">
<ul>
<li>
<a href="https://network.creativecommons.org/" target="_blank">Global Network</a>
<p>Join a global community working to strengthen the Commons</p>
</li>
<li>
<a href="https://certificate.creativecommons.org/" target="_blank">Certificate</a>
<p>Become an expert in creating and engaging with openly licensed materials</p>
</li>
<li>
<a href="https://summit.creativecommons.org/" target="_blank">Global Summit</a>
<p>Attend our annual event, promoting the power of open licensing</p>
</li>
<li>
<a href="/choose" target="_blank">Chooser</a>
<p>Get help choosing the appropriate license for your work</p>
</li>
<li>
<a href="https://search.creativecommons.org/" target="_blank">Search Portal</a>
<p>Find engines to search openly licensed material for creative and educational reuse</p>
</li>
</ul>
</nav>
</div>
</header>

<!-- Breadcrumb -->
{% if this._path != '/'%}
<div class="breadcrumb-container">
Expand Down Expand Up @@ -273,5 +304,6 @@ <h5>Our work relies on you!</h5>
</div>
</div>
</footer>
</body>
<script src="{{ '/static/vocabulary/js/vocabulary.js'|url }}"></script>
</body>
</html>

0 comments on commit 6766e43

Please sign in to comment.