719 lines
24 KiB
Cheetah
719 lines
24 KiB
Cheetah
<style>
|
|
/* This style block is copied across all sites using the developer navbar.
|
|
* For custom styling on this website, add a <style> block after this one. */
|
|
|
|
/* Variables. */
|
|
.nav-global {
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
--nav-global-color-bg: var(--color-primary-dark-2);
|
|
--nav-global-color-text: var(--color-text-light-2);
|
|
--nav-global-color-text-secondary: var(--color-text-light-3);
|
|
--nav-global-color-text-highlight: var(--color-text-light-1);
|
|
--nav-global-color-text-hover: white;
|
|
--nav-global-color-text-active: white;
|
|
|
|
--nav-global-color-primary: hsl(204, 98%, 54%);
|
|
--nav-global-color-primary-bg: hsla(204, 100%, 46%, .1);
|
|
|
|
--nav-global-color-button-bg-hover: hsl(213, 10%, 24%);
|
|
--nav-global-color-button-text: var(--nav-global-color-text);
|
|
|
|
--nav-global-color-menu-bg: var(--nav-global-color-bg);
|
|
--nav-global-color-menu-border: hsl(213, 10%, 18%);
|
|
|
|
--nav-global-color-menu-zindex: 1040;
|
|
|
|
--nav-global-box-shadow-menu: 0px 5px 15px -2px rgba(0, 0, 0, 0.33), 0px 5px 15px -5px rgba(0, 0, 0, 0.33);
|
|
--nav-global-box-shadow-menu-item: 0px 1px 4px 0px rgba(0, 0, 0, 0.05), 0px 15px 20px -1px rgba(0, 0, 0, 0.025);
|
|
|
|
--nav-global-navbar-height: var(--navbar-primary-height, 56px);
|
|
|
|
--nav-global-spacer: 15px;
|
|
--nav-global-spacer-sm: 10px;
|
|
--nav-global-spacer-xs: 5px;
|
|
|
|
--nav-global-border-radius: 6px;
|
|
--nav-global-border-radius-lg: 10px;
|
|
|
|
--nav-global-button-height: 35px;
|
|
--nav-global-link-padding-x: var(--nav-global-spacer);
|
|
--nav-global-link-padding-y: var(--nav-global-spacer-sm);
|
|
|
|
--nav-global-font-size: 14px;
|
|
--nav-global-transition-speed: 150ms;
|
|
}
|
|
|
|
/* Reset. */
|
|
@namespace svg "http://www.w3.org/2000/svg";
|
|
|
|
.nav-global :not(svg|*),
|
|
.nav-global *::before,
|
|
.nav-global *::after {
|
|
-webkit-box-sizing: border-box;
|
|
|
|
all: unset;
|
|
display: revert;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.nav-global [default-styles] {
|
|
all: revert;
|
|
}
|
|
|
|
.nav-global * {
|
|
-webkit-text-size-adjust: 100%;
|
|
|
|
font-family: 'Heebo', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
font-variation-settings: 'wght' 400;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.nav-global {
|
|
background-color: var(--nav-global-color-bg);
|
|
color: var(--nav-global-color-text);
|
|
display: flex;
|
|
position: relative;
|
|
z-index: var(--zindex-fixed);
|
|
}
|
|
|
|
.nav-global h3,
|
|
.nav-global h4,
|
|
.nav-global strong {
|
|
font-variation-settings: 'wght' 500;
|
|
}
|
|
|
|
.nav-global figure,
|
|
.nav-global section {
|
|
display: block;
|
|
}
|
|
|
|
.nav-global svg:not(:root) {
|
|
overflow: hidden;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.nav-global .nav-global-container {
|
|
flex: 1;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
/* Navigation. */
|
|
.nav-global nav {
|
|
align-items: center;
|
|
display: flex;
|
|
line-height: var(--nav-global-font-size);
|
|
font-size: var(--nav-global-font-size);
|
|
height: var(--nav-global-navbar-height);
|
|
margin: 0 auto;
|
|
padding: 0 var(--nav-global-spacer);
|
|
position: relative;
|
|
}
|
|
|
|
/* Links. */
|
|
.nav-global a:not(.dropdown-item) {
|
|
color: inherit;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: background-color var(--nav-global-transition-speed) ease-out, color var(--nav-global-transition-speed) ease-out;
|
|
}
|
|
|
|
.nav-global a:not(.dropdown-item):hover {
|
|
color: var(--nav-global-color-text-hover);
|
|
}
|
|
|
|
/* Navigation items. */
|
|
.nav-global nav > ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.nav-global nav > ul,
|
|
.nav-global nav > ul > li,
|
|
.nav-global nav > ul > li > a,
|
|
.nav-global-apps-dropdown-container {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
height: 100%;
|
|
}
|
|
|
|
.nav-global-apps-dropdown-container {
|
|
position: relative;
|
|
}
|
|
|
|
.nav-global nav > ul > li > a {
|
|
padding: var(--nav-global-link-padding-y) var(--nav-global-link-padding-x);
|
|
}
|
|
|
|
.nav-global nav > a.is-active,
|
|
.nav-global nav > a.is-active svg,
|
|
.nav-global nav > ul > li > a.is-active,
|
|
.nav-global .nav-global-link-active,
|
|
.nav-global .nav-global-link-active svg {
|
|
color: var(--nav-global-color-text-active) !important;
|
|
fill: var(--nav-global-color-text-active);
|
|
font-variation-settings: 'wght' 500;
|
|
}
|
|
|
|
.nav-global .nav-global-links-right {
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Logo. */
|
|
.nav-global a.nav-global-logo {
|
|
margin-right: var(--nav-global-spacer);
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
|
|
.nav-global a.nav-global-logo strong {
|
|
margin-inline: var(--nav-global-spacer-sm);
|
|
font-size: 18px;
|
|
}
|
|
|
|
.nav-global .nav-global-logo svg {
|
|
height: 21px;
|
|
}
|
|
|
|
.nav-global a.nav-global-logo svg {
|
|
position: relative;
|
|
top: -4px;
|
|
}
|
|
|
|
.nav-global svg {
|
|
fill: var(--nav-global-color-text);
|
|
transition: fill var(--nav-global-transition-speed) ease-out;
|
|
}
|
|
|
|
.nav-global .nav-global-logo:hover svg {
|
|
fill: white;
|
|
}
|
|
|
|
/* Apps button. */
|
|
.nav-global button,
|
|
.nav-global .nav-global-btn {
|
|
-webkit-appearance: button;
|
|
|
|
align-items: center;
|
|
background-color: transparent;
|
|
border-radius: var(--nav-global-border-radius);
|
|
border: 0;
|
|
color: var(--nav-global-color-button-text);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
font: inherit;
|
|
height: var(--nav-global-button-height);
|
|
margin: 0;
|
|
outline: 0;
|
|
overflow: visible;
|
|
padding: var(--nav-global-spacer-xs) var(--nav-global-spacer);
|
|
text-transform: none;
|
|
transition: background-color var(--nav-global-transition-speed) ease-out, color var(--nav-global-transition-speed) ease-out, transform var(--nav-global-transition-speed) ease-out;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-global button span,
|
|
.nav-global .nav-global-btn span {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-global button:hover,
|
|
.nav-global .nav-global-btn:hover {
|
|
background-color: var(--nav-global-color-button-bg-hover);
|
|
color: var(--nav-global-color-text-hover);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-global button.nav-global-btn-active,
|
|
.nav-global .nav-global-btn.nav-global-btn-active {
|
|
background-color: var(--nav-global-color-primary-bg);
|
|
color: var(--nav-global-color-primary);
|
|
}
|
|
|
|
.nav-global button.nav-global-btn-active svg,
|
|
.nav-global .nav-global-btn.nav-global-btn-active svg {
|
|
fill: var(--nav-global-color-primary);
|
|
}
|
|
|
|
.nav-global .nav-global-icon {
|
|
height: 20px;
|
|
pointer-events: none;
|
|
width: 20px;
|
|
}
|
|
|
|
.nav-global-icon-dropdown-toggle {
|
|
margin-left: var(--nav-global-spacer-xs);
|
|
}
|
|
|
|
.nav-global button:hover svg,
|
|
.nav-global .nav-global-btn:hover svg {
|
|
fill: white;
|
|
}
|
|
|
|
/* Apps dropdown menu. */
|
|
.nav-global .nav-global-apps-menu {
|
|
background-color: var(--nav-global-color-menu-bg);
|
|
border-radius: var(--nav-global-border-radius-lg);
|
|
border: thin solid var(--nav-global-color-menu-border);
|
|
box-shadow: var(--nav-global-box-shadow-menu);
|
|
display: none;
|
|
padding: var(--nav-global-spacer-sm);
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(100% + 15px);
|
|
visibility: hidden;
|
|
width: 90vw;
|
|
max-width: 640px;
|
|
z-index: var(--nav-global-color-menu-zindex);
|
|
}
|
|
|
|
.nav-global .nav-global-dropdown.is-visible {
|
|
display: block;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Tiny triangle in the corner. */
|
|
.nav-global .nav-global-apps-menu::before {
|
|
background-color: var(--nav-global-color-menu-bg);
|
|
border-radius: 3px;
|
|
border: 2px var(--nav-global-color-menu-bg) solid;
|
|
content: '';
|
|
display: block;
|
|
height: .85rem;
|
|
position: absolute;
|
|
right: .85rem;
|
|
top: -0.25rem;
|
|
transform: rotate(45deg);
|
|
width: 1rem;
|
|
z-index: -1;
|
|
}
|
|
|
|
.nav-global .nav-global-apps-menu ul {
|
|
border-bottom: 2px solid rgba(255, 255, 255, .05);
|
|
display: grid;
|
|
gap: var(--nav-global-spacer-sm);
|
|
grid-template-columns: repeat(2, 1fr);
|
|
list-style: none;
|
|
margin: 0 0 var(--nav-global-spacer-xs) 0;
|
|
padding: var(--nav-global-spacer-xs) 0 var(--nav-global-spacer-sm) 0;
|
|
}
|
|
|
|
.nav-global .nav-global-apps-menu ul>li>a {
|
|
border-radius: var(--nav-global-border-radius-lg);
|
|
display: flex;
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
.nav-global .nav-global-apps-menu ul>li>a:hover {
|
|
background-color: rgba(255, 255, 255, .05);
|
|
color: var(--nav-global-color-text-active);
|
|
box-shadow: var(--nav-global-box-shadow-menu-item);
|
|
}
|
|
|
|
.nav-global .nav-global-apps-menu ul>li>a:hover h4,
|
|
.nav-global .nav-global-apps-menu ul>li>a:hover svg {
|
|
color: var(--nav-global-color-primary);
|
|
fill: var(--nav-global-color-primary);
|
|
}
|
|
|
|
.nav-global .nav-global-apps-menu h3 {
|
|
color: white;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
margin: 0;
|
|
opacity: .3;
|
|
padding-left: var(--nav-global-spacer);
|
|
}
|
|
|
|
.nav-global .nav-global-apps-menu h4 {
|
|
color: var(--nav-global-color-text-highlight);
|
|
font-size: 17px;
|
|
line-height: 18px;
|
|
margin: var(--nav-global-spacer-xs) 0 0;
|
|
padding: var(--nav-global-spacer-sm) var(--nav-global-spacer) 0;
|
|
transition: color var(--nav-global-transition-speed) ease-out;
|
|
}
|
|
|
|
.nav-global .nav-global-apps-menu p {
|
|
font-size: 15px;
|
|
line-height: 20px;
|
|
margin: 0;
|
|
opacity: .8;
|
|
padding: var(--nav-global-spacer-xs) var(--nav-global-spacer) var(--nav-global-spacer-sm);
|
|
}
|
|
|
|
.nav-global .nav-global-apps-menu figure {
|
|
margin: var(--nav-global-spacer) 0 0 var(--nav-global-spacer);
|
|
}
|
|
|
|
.nav-global .nav-global-apps-menu ul>li>a svg {
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
/* Donate section of the menu. */
|
|
.nav-global .nav-global-apps-menu-section-donate ul {
|
|
border: none;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.nav-global .nav-global-apps-menu-section-donate a svg {
|
|
fill: hsl(352, 90%, 62%) !important;
|
|
transition: transform var(--nav-global-transition-speed) ease-out;
|
|
}
|
|
|
|
.nav-global .nav-global-apps-menu-section-donate ul>li:first-child>a {
|
|
background-color: hsla(352deg, 90%, 42%, .2);
|
|
}
|
|
|
|
.nav-global .nav-global-apps-menu-section-donate ul>li:first-child>a:hover {
|
|
background-color: hsla(352deg, 90%, 42%, .5);
|
|
}
|
|
|
|
.nav-global .nav-global-apps-menu-section-donate ul>li:first-child>a:hover svg {
|
|
fill: hsl(352, 90%, 72%) !important;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.nav-global .nav-global-apps-menu-section-donate ul>li:first-child>a:hover h4 {
|
|
color: white;
|
|
}
|
|
|
|
/* Mobile. */
|
|
.nav-global button.nav-global-logo {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
.nav-global a.nav-global-logo {
|
|
display: none;
|
|
}
|
|
|
|
.nav-global button.nav-global-logo {
|
|
display: block;
|
|
visibility: visible;
|
|
}
|
|
|
|
.nav-global .nav-global-nav-links {
|
|
align-items: flex-start;
|
|
background-color: var(--nav-global-color-menu-bg);
|
|
border-radius: var(--nav-global-border-radius-lg);
|
|
display: none;
|
|
flex-direction: column;
|
|
left: 1rem;
|
|
padding: 0 var(--nav-global-spacer-sm);
|
|
position: absolute;
|
|
top: calc(100% + .5rem);
|
|
visibility: visible;
|
|
width: 10rem;
|
|
z-index: var(--nav-global-color-menu-zindex);
|
|
}
|
|
|
|
.nav-global .nav-global-nav-links.is-visible {
|
|
display: flex;
|
|
}
|
|
|
|
.nav-global .nav-global-nav-links::before {
|
|
background-color: var(--nav-global-color-menu-bg);
|
|
border-radius: 3px;
|
|
border: 2px var(--nav-global-color-menu-bg) solid;
|
|
content: '';
|
|
display: block;
|
|
height: 0.8rem;
|
|
position: absolute;
|
|
left: 1.5rem;
|
|
top: -0.133rem;
|
|
transform: rotate(45deg);
|
|
width: 1rem;
|
|
z-index: -1;
|
|
}
|
|
|
|
.nav-global nav>ul {
|
|
height: initial;
|
|
}
|
|
|
|
.nav-global .nav-global-nav-links>li {
|
|
border-bottom: 2px solid rgba(255, 255, 255, .05);
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-global .nav-global-nav-links>li:last-child {
|
|
border: none;
|
|
}
|
|
|
|
.nav-global .nav-global-nav-links>li>a {
|
|
padding-inline: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
/* Custom styling for projects.blender.org */
|
|
/* Make sure to start every line with ".nav-global"
|
|
* so changes affect the developer navbar only. */
|
|
|
|
/* Limit navbar width on large screens. */
|
|
@media (min-width: 1200px) {
|
|
[role="main"] > .dashboard-navbar,
|
|
.full.height > .menu.bar > [role="navigation"],
|
|
.nav-global .nav-global-container {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Override Gitea's default navbar height. */
|
|
#navbar {
|
|
min-height: 46px;
|
|
}
|
|
|
|
/* Hide the site logo. */
|
|
/* Seems to be breaking the sign-in button currently.
|
|
#navbar .item:first-child {
|
|
display: none;
|
|
}
|
|
*/
|
|
/* Fix alignment of text in dropdown items. */
|
|
.ui.dropdown>.text {
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
body > div.full.height {
|
|
padding-bottom: 0;
|
|
}
|
|
</style>
|
|
|
|
<div class="nav-global">
|
|
<div class="nav-global-container">
|
|
<nav>
|
|
<a href="https://capytal.company" class="nav-global-logo">
|
|
<img src="/assets/light-asset.svg" style="width:127px;"/>
|
|
</a>
|
|
|
|
<button class="nav-global-logo js-dropdown-toggle" data-toggle-menu-id="nav-global-nav-links">
|
|
<img src="/assets/light-asset.svg" style="width:127px;"/>
|
|
</button>
|
|
|
|
<ul class="nav-global-nav-links nav-global-dropdown js-dropdown-menu" id="nav-global-nav-links">
|
|
<li>
|
|
<a href="/capytalcode">Code</a>
|
|
</li>
|
|
<li>
|
|
<a href="/capytalcreators">Creators</a>
|
|
</li>
|
|
<li>
|
|
<a href="/loreddev">Lored</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul class="nav-global-links-right">
|
|
<li>
|
|
<div class="nav-global-apps-dropdown-container">
|
|
<button class="js-dropdown-toggle" data-toggle-menu-id="nav-global-apps-menu">
|
|
<svg class="nav-global-icon" height="100px" width="100px" viewBox="0 0 1000 1000">
|
|
<path
|
|
d="m 150.5,899 a 50,50 0 0 1 -49,-50 V 749 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 749 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 749 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m -598,-299 a 50,50 0 0 1 -49,-50 V 450 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 450 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 450 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m -598,-299 a 50,50 0 0 1 -49,-50 V 151 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 151 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 151 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="nav-global-apps-menu nav-global-dropdown js-dropdown-menu" id="nav-global-apps-menu">
|
|
<a href="https://capytal.company" target="_blank">
|
|
<h3>CAPYTAL</h3>
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="https://capytal.company/about" target="_blank">
|
|
<figure>
|
|
<!--
|
|
Icon "square-academic-cap-2-line-duotone" provided by Solar Icon Pack, from 480 Design.
|
|
Licensed under CC BY 4.0; https://www.figma.com/community/file/1166831539721848736/solar-icons-set
|
|
-->
|
|
<svg class="nav-global-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
|
|
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5">
|
|
<path d="M3.092 6.637L9.782 3.5a5.17 5.17 0 0 1 4.435 0l6.691 3.137c1.456.682 1.456 3.044 0 3.726l-6.69 3.137a5.17 5.17 0 0 1-4.435 0L5 11.258"/>
|
|
<path stroke-linejoin="round" d="M2.5 15v-2.862c0-1.28 0-1.92.33-2.42c.33-.501.919-.753 2.094-1.257L6 8" opacity=".5"/>
|
|
<path d="M19 11.5v5.125c0 1.008-.503 1.952-1.385 2.44C16.146 19.88 13.796 21 12 21s-4.146-1.121-5.615-1.934C5.504 18.577 5 17.633 5 16.626V11.5" opacity=".5"/>
|
|
</g>
|
|
</svg>
|
|
</figure>
|
|
<div>
|
|
<h4>About</h4>
|
|
<p>Read about the Capytal brand and it's projects.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://blog.capytal.company" target="_blank">
|
|
<div>
|
|
<h4>Blog</h4>
|
|
<p>Stay up-to-date with new updates from projects and the organization.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!-- TODO: UPDATE LINKS
|
|
<a href="/" target="_blank">
|
|
<h3>CONTRIBUITING</h3>
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="/" target="_blank">
|
|
<figure>
|
|
<!-
|
|
Icon "open-source-full" provided by Remix Icon Collection, from Remix Design.
|
|
Licensed under Apache 2.0; https://github.com/Remix-Design/RemixIcon
|
|
|
|
The icon is the Open Source Initiative trademarked icon. Capytal is not afiliated
|
|
with or endorsed by the Open Source Initiative in any way, shape, or form. It's use
|
|
here is merely intended as a visual representation of "Open Source".
|
|
->
|
|
<svg class="nav-global-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
|
|
<path fill="currentColor" d="M12.001 2c5.523 0 10 4.477 10 10c0 4.13-2.504 7.676-6.077 9.201l-2.518-6.55A3 3 0 0 0 12 9a3 3 0 0 0-1.404 5.652l-2.518 6.55A10 10 0 0 1 2 12C2 6.477 6.477 2 12 2"/>
|
|
</svg>
|
|
</figure>
|
|
<div>
|
|
<h4>How we do Open-Source</h4>
|
|
<p>See how and where to contribute to our projects.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/" target="_blank">
|
|
<div>
|
|
<h4>Code Of Conduct</h4>
|
|
<p>The code of conduct we follow.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!- TODO: UPDATE LINKS ->
|
|
<a href="/" target="_blank">
|
|
<h3>DEVELOPMENT</h3>
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="https://code.blender.org/?utm_medium=nav-global" target="_blank">
|
|
<figure>
|
|
<!-
|
|
Icon "code-line-duotone" provided by Solar Icon Pack, from 480 Design.
|
|
Licensed under CC BY 4.0; https://www.figma.com/community/file/1166831539721848736/solar-icons-set
|
|
->
|
|
<svg class="nav-global-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="m17 7.83l1.697 1.526c1.542 1.389 2.313 2.083 2.313 2.974c0 .89-.771 1.585-2.314 2.973L17 16.83"/><path d="m13.987 5l-3.974 14.83" opacity=".5"/><path d="M7 7.83L5.304 9.356C3.76 10.745 2.99 11.44 2.99 12.33s.771 1.585 2.314 2.973L7 16.83"/></g></svg>
|
|
</svg>
|
|
</figure>
|
|
<div>
|
|
<h4>Dev-To-Devs</h4>
|
|
<p>Updates and posts from developers to developers on our blog.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="." target="_blank">
|
|
<div>
|
|
<h4>Roadmaps</h4>
|
|
<p>Features and plans for the projects.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!--
|
|
TODO: UPDATE LINKS
|
|
<div class="nav-global-apps-menu-section-donate">
|
|
<a href="https://fund.blender.org/?utm_medium=nav-global" target="_blank">
|
|
<h3>DONATE</h3>
|
|
</a>
|
|
<ul>
|
|
<li>
|
|
<a href="https://fund.blender.org/?utm_medium=nav-global" target="_blank">
|
|
<figure>
|
|
<svg class="nav-global-icon" height="100px" width="100px" viewbox="0 0 1000 1000">
|
|
<path d="M 273.67169,58.416076 C 201.59785,62.59427 135.79129,94.975269 86.697523,145.11359 37.603742,194.20736 4.1781939,260.01391 0,332.08775 -4.1781926,403.11704 22.980065,480.41362 86.697523,545.17562 l 45.960127,45.96013 339.47823,338.43367 a 43.871033,43.871033 0 0 0 61.62835,0 L 872.1979,591.13575 918.15804,545.17562 c 109.67766,-110.72213 109.67766,-290.38445 0,-400.06203 -110.72213,-110.722127 -290.38445,-110.722127 -400.06204,0 l -15.66822,14.62368 -15.66822,-14.62368 C 423.04211,80.351592 345.74553,53.193334 273.67169,58.416076 Z m 5.22274,86.697514 c 48.04922,-3.13365 98.18754,12.53458 146.23677,60.5838 l 47.00468,47.00468 a 43.871033,43.871033 0 0 0 61.62835,0 l 45.96013,-47.00468 c 76.25204,-76.25203 199.50874,-76.25203 276.80532,0 77.29658,77.29658 77.29658,200.5533 0,277.84988 L 810.56956,529.50739 502.42778,837.64917 194.286,529.50739 148.32588,483.54727 C 100.27665,434.45349 84.608431,384.31516 86.697523,336.26594 c 3.133646,-47.00467 26.113717,-95.0539 61.628357,-130.56855 35.51464,-35.51464 82.51932,-58.49471 130.56855,-60.5838 z" style="stroke-width:1.04455"></path>
|
|
</svg>
|
|
</figure>
|
|
<div>
|
|
<h4>Development Fund</h4>
|
|
<p>Support core development with a monthly contribution.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.blender.org/about/donations/?utm_medium=nav-global" target="_blank">
|
|
<div>
|
|
<h4>One-time Donations</h4>
|
|
<p>Perform a single donation with more payment options available.</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const dropdownToggles = document.getElementsByClassName("js-dropdown-toggle");
|
|
const btnActiveClass = 'nav-global-btn-active';
|
|
const isVisibleClass = 'is-visible';
|
|
|
|
/* Hide all dropdowns. */
|
|
function dropdownHideAll() {
|
|
const dropdownMenus = document.getElementsByClassName("js-dropdown-menu");
|
|
|
|
if (dropdownMenus) {
|
|
for (let i = 0; i < dropdownMenus.length; i++) {
|
|
dropdownMenus[i].classList.remove(isVisibleClass);
|
|
}
|
|
}
|
|
|
|
/* Remove styling from all dropdown toggles. */
|
|
for (let i = 0; i < dropdownToggles.length; i++) {
|
|
dropdownToggles[i].classList.remove(btnActiveClass);
|
|
}
|
|
}
|
|
|
|
for (let i = 0; i < dropdownToggles.length; i++) {
|
|
dropdownToggles[i].addEventListener("click", function (e) {
|
|
e.stopPropagation();
|
|
|
|
const dropdownId = this.getAttribute('data-toggle-menu-id');
|
|
const el = document.getElementById(dropdownId);
|
|
|
|
if (el) {
|
|
/* If the button is already active, remove styling. */
|
|
if (el.classList.contains(isVisibleClass)) {
|
|
dropdownHideAll();
|
|
} else {
|
|
/* Style button as active and show menu. */
|
|
this.classList.add(btnActiveClass);
|
|
el.classList.add(isVisibleClass);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
/* Hide all dropdowns when clicking anywhere except menus. */
|
|
document.body.addEventListener("click", function (e) {
|
|
if (!e.target.classList.contains("js-dropdown-menu")) {
|
|
dropdownHideAll();
|
|
}
|
|
});
|
|
|
|
/* Hide all dropdowns when pressing Esc. */
|
|
window.addEventListener('keydown', function (event) {
|
|
if (event.key === 'Escape') {
|
|
dropdownHideAll();
|
|
}
|
|
});
|
|
</script>
|