infrastructure/archive-website
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

UI: Archive-website web-assets v2 upgrade #1

Merged
Márton Lente merged 14 commits from ui/web-assets-v2-upgrade into main 2024-08-26 17:19:01 +02:00
Conversation 1 Commits 14 Files Changed 9 +228 -150
1 changed files with 228 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f1179c2bde - Show all commits

378
index.html
View File

@ -66,49 +66,47 @@
<body> <body>
<div class="container-main"> <div class="container-main">
<style> <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. */ /* Variables. */
.nav-global { .nav-global {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
--nav-global-color-bg: hsl(213, 10%, 14%); /*
--nav-global-color-text: hsl(213, 5%, 64%); *Variables come from, and match partial _variables, and are prefixed with 'bwa-'.
--nav-global-color-text-secondary: hsl(213, 5%, 44%); *Sizes must be defined in pixels as default rem-sizing might vary in projects.
--nav-global-color-text-highlight: hsl(213, 5%, 84%); */
--nav-global-color-text-hover: white;
--nav-global-color-text-active: white;
--nav-global-color-primary: hsl(204, 98%, 54%); --bwa-color-bg-primary: hsl(213, 10%, 21%);
--nav-global-color-primary-bg: hsla(204, 100%, 46%, .1); --bwa-color-bg-tertiary: hsl(213, 10%, 14%);
--nav-global-color-button-bg-hover: hsl(213, 10%, 24%); --bwa-color-text: hsl(213, 10%, 80%);
--nav-global-color-button-text: var(--nav-global-color-text); --bwa-color-text-primary: hsl(213, 10%, 98%);
--nav-global-color-menu-bg: var(--nav-global-color-bg); /* Colours Components. */
--nav-global-color-menu-border: hsl(213, 10%, 18%); --bwa-border-color: hsla(213, 10%, 80%, .15);
--nav-global-color-menu-zindex: 1040; --bwa-btn-color-bg-hover: hsl(213, 10%, 30%);
--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); /* Colours Status. */
--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); --bwa-color-accent: hsl(204deg, 100%, 50%);
--bwa-color-accent-bg: hsla(204deg, 100%, 50%, .1);
--bwa-color-accent-bg-hover: hsla(204deg, 100%, 50%, .2);
--nav-global-navbar-height: 45px; --bwa-border-radius: 6px;
--bwa-border-radius-lg: 12px;
--nav-global-spacer: 15px; --bwa-transition-speed: 150ms;
--nav-global-spacer-sm: 10px;
--nav-global-spacer-xs: 5px;
--nav-global-border-radius: 6px; --bwa-zindex-fixed: 1030;
--nav-global-border-radius-lg: 10px; --bwa-zindex-dropdown: 1040;
--nav-global-button-height: 35px; /* Grid. */
--nav-global-link-padding-x: var(--nav-global-spacer); --bwa-spacer: 16px;
--nav-global-link-padding-y: var(--nav-global-spacer-sm); --bwa-spacer-1: calc(var(--bwa-spacer) * 0.25);
--bwa-spacer-2: calc(var(--bwa-spacer) * 0.5);
--bwa-spacer-3: var(--bwa-spacer);
--nav-global-font-size: 14px; /* Type. */
--nav-global-transition-speed: 150ms; --bwa-fs-base: 14px;
} }
/* Reset. */ /* Reset. */
@ -117,8 +115,6 @@
.nav-global :not(svg|*), .nav-global :not(svg|*),
.nav-global *::before, .nav-global *::before,
.nav-global *::after { .nav-global *::after {
-webkit-box-sizing: border-box;
all: unset; all: unset;
display: revert; display: revert;
box-sizing: border-box; box-sizing: border-box;
@ -131,15 +127,23 @@
.nav-global * { .nav-global * {
-webkit-text-size-adjust: 100%; -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-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-variation-settings: 'wght' 400; font-variation-settings: 'wght' 400;
font-weight: normal; font-weight: normal;
} }
.nav-global {
background-color: var(--bwa-color-bg-tertiary);
color: var(--bwa-color-text);
display: flex;
position: relative;
z-index: var(--zindex-fixed);
}
.nav-global h3, .nav-global h3,
.nav-global h4, .nav-global h4,
.nav-global strong { .nav-global strong {
font-variation-settings: 'wght' 600; font-variation-settings: 'wght' 500;
} }
.nav-global figure, .nav-global figure,
@ -149,12 +153,7 @@
.nav-global svg:not(:root) { .nav-global svg:not(:root) {
overflow: hidden; overflow: hidden;
} vertical-align: middle;
.nav-global {
background-color: var(--nav-global-color-bg);
color: var(--nav-global-color-text);
display: flex;
} }
.nav-global .nav-global-container { .nav-global .nav-global-container {
@ -166,78 +165,122 @@
.nav-global nav { .nav-global nav {
align-items: center; align-items: center;
display: flex; display: flex;
line-height: 1.5rem; line-height: var(--bwa-fs-base);
font-size: var(--nav-global-font-size); font-size: var(--bwa-fs-base);
height: var(--nav-global-navbar-height); justify-content: space-between;
min-height: calc(var(--bwa-spacer) * 4);
margin: 0 auto; margin: 0 auto;
padding: 0 var(--nav-global-spacer); padding: 0 var(--bwa-spacer);
position: relative; position: relative;
} }
/* Links. */ /* Links. */
.nav-global a { .nav-global a:not(.dropdown-item) {
color: var(--nav-global-color-text); color: inherit;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
transition: background-color var(--nav-global-transition-speed) ease-out, color var(--nav-global-transition-speed) ease-out; transition: background-color var(--bwa-transition-speed) ease-out, color var(--bwa-transition-speed) ease-out;
} }
.nav-global a:hover { .nav-global-nav-links {
color: var(--nav-global-color-text-hover); flex-grow: 1;
}
.nav-global-nav-links a:not(.dropdown-item) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-global a:not(.dropdown-item):hover {
color: var(--bwa-color-text-primary);
} }
/* Navigation items. */ /* Navigation items. */
.nav-global nav>ul { .nav-global nav>ul {
align-items: center; flex-wrap: wrap;
display: flex;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.nav-global nav>ul>li { .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; position: relative;
} }
.nav-global nav>ul>li>a { .nav-global nav>ul>li>a {
align-items: center; padding: var(--bwa-spacer-2);
display: inline-flex;
padding: var(--nav-global-link-padding-y) var(--nav-global-link-padding-x);
position: relative;
top: 1px;
} }
.nav-global .nav-global-link-active, @media (min-width: 1320px) {
.nav-global .nav-global-link-active svg { .nav-global nav>ul>li>a {
color: var(--nav-global-color-text-active); padding-left: var(--bwa-spacer);
fill: var(--nav-global-color-text-active); padding-right: var(--bwa-spacer);
}
}
.nav-global nav>a.is-active,
.nav-global nav>a.is-active svg,
.nav-global nav>ul>li>a.is-active {
color: var(--bwa-color-text-primary) !important;
fill: var(--bwa-color-text-primary);
font-variation-settings: 'wght', 500;
font-weight: bold;
} }
.nav-global .nav-global-links-right { .nav-global .nav-global-links-right {
margin-left: auto; flex-wrap: nowrap;
gap: 0 var(--bwa-spacer-2);
} }
/* Logo. */ /* Logo. */
.nav-global a.nav-global-logo { .nav-global a.nav-global-logo {
margin-right: var(--nav-global-spacer-sm); margin-right: var(--bwa-spacer);
position: relative;
top: 2px;
white-space: nowrap;
} }
.nav-global .nav-global-logo svg { .nav-global a.nav-global-logo strong {
margin-inline: var(--bwa-spacer-2);
font-size: 18px;
}
.nav-global .nav-global-logo svg,
.nav-global .nav-global-logo img {
height: 21px; height: 21px;
pointer-events: none;
} }
.nav-global a.nav-global-logo svg { .nav-global a.nav-global-logo svg {
position: relative; position: relative;
top: -2px; top: calc(var(--bwa-spacer-1) * -1);
} }
.nav-global svg { .nav-global svg {
fill: var(--nav-global-color-text); fill: var(--bwa-color-text);
transition: fill var(--nav-global-transition-speed) ease-out; transition: fill var(--bwa-transition-speed) ease-out;
} }
.nav-global .nav-global-logo:hover svg { .nav-global .nav-global-logo:hover svg {
fill: white; fill: var(--bwa-color-text-primary);
}
.nav-global .nav-global-logo.is-active,
.nav-global .nav-global-logo.is-active svg,
// TODO: make classes 'is-active' and 'nav-global-btn-active' consistent
.nav-global button.nav-global-btn-active svg {
color: var(--bwa-color-text-primary);
fill: var(--bwa-color-text-primary);
} }
/* Apps button. */ /* Apps button. */
@ -247,52 +290,66 @@
align-items: center; align-items: center;
background-color: transparent; background-color: transparent;
border-radius: var(--nav-global-border-radius); border-radius: var(--bwa-border-radius);
border: 0; border: 0;
color: var(--nav-global-color-button-text); color: var(--bwa-btn-color-text);
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
font: inherit; font: inherit;
height: var(--nav-global-button-height); height: calc(var(--bwa-spacer) * 2.25);
margin: 0; margin: 0;
outline: 0; outline: 0;
overflow: visible; overflow: visible;
padding: var(--nav-global-spacer-xs) var(--nav-global-spacer); padding: var(--bwa-spacer-1) var(--bwa-spacer-2);
text-transform: none; 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; transition: background-color var(--bwa-transition-speed) ease-out, color var(--bwa-transition-speed) ease-out, transform var(--bwa-transition-speed) ease-out;
white-space: nowrap; white-space: nowrap;
} }
.nav-global .nav-global-btn.nav-global-btn-primary {
padding-left: var(--bwa-spacer);
padding-right: var(--bwa-spacer);
}
.nav-global button span, .nav-global button span,
.nav-global .nav-global-btn span { .nav-global .nav-global-btn span {
white-space: nowrap; white-space: nowrap;
} }
.nav-global button:hover, .nav-global button:hover,
.nav-global .nav-global-btn:hover { .nav-global .nav-global-btn:hover,
background-color: var(--nav-global-color-button-bg-hover); .nav-global button.nav-global-btn-active,
color: var(--nav-global-color-text-hover); .nav-global .nav-global-btn.nav-global-btn-active {
background-color: var(--bwa-btn-color-bg-hover);
color: var(--bwa-color-text-primary);
cursor: pointer; cursor: pointer;
} }
.nav-global button.nav-global-btn-active, .nav-global .nav-global-btn span {
.nav-global .nav-global-btn.nav-global-btn-active { margin-left: var(--bwa-spacer-2);
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-primary {
.nav-global .nav-global-btn.nav-global-btn-active svg { background-color: var(--bwa-color-accent-bg);
fill: var(--nav-global-color-primary); color: var(--bwa-color-accent) !important;
}
.nav-global .nav-global-btn-primary:hover {
background-color: var(--bwa-color-accent-bg-hover);
} }
.nav-global .nav-global-icon { .nav-global .nav-global-icon {
height: 20px; height: 20px;
pointer-events: none;
width: 20px; width: 20px;
} }
.nav-global-icon-dropdown-toggle { .nav-global .nav-global-icon-alt {
margin-left: var(--nav-global-spacer-xs); transform: rotate(90deg);
}
.nav-global .dropdown-toggle.active {
color: var(--bwa-color-text-primary)
} }
.nav-global button:hover svg, .nav-global button:hover svg,
@ -302,18 +359,18 @@
/* Apps dropdown menu. */ /* Apps dropdown menu. */
.nav-global .nav-global-apps-menu { .nav-global .nav-global-apps-menu {
background-color: var(--nav-global-color-menu-bg); background-color: var(--bwa-color-bg-tertiary);
border-radius: var(--nav-global-border-radius-lg); border-radius: var(--bwa-border-radius-lg);
border: thin solid var(--nav-global-color-menu-border); border: thin solid var(--bwa-border-color);
box-shadow: var(--nav-global-box-shadow-menu); box-shadow: 0 var(--bwa-spacer-1) var(--bwa-spacer) -2px rgba(0, 0, 0, 0.33), 0px var(--bwa-spacer-1) var(--bwa-spacer) calc(var(--bwa-spacer-1) * -1) rgba(0, 0, 0, 0.33);
display: none; display: none;
padding: var(--nav-global-spacer-sm); padding: var(--bwa-spacer-2);
position: absolute; position: absolute;
right: 0; right: 0;
top: calc(100% + 15px); top: calc(100% + var(--bwa-spacer));
visibility: hidden; visibility: hidden;
width: 640px; width: 640px;
z-index: var(--nav-global-color-menu-zindex); z-index: var(--bwa-zindex-dropdown);
} }
.nav-global .nav-global-dropdown.is-visible { .nav-global .nav-global-dropdown.is-visible {
@ -322,10 +379,11 @@
} }
/* Tiny triangle in the corner. */ /* Tiny triangle in the corner. */
// TODO: consider removing for consistency
.nav-global .nav-global-apps-menu::before { .nav-global .nav-global-apps-menu::before {
background-color: var(--nav-global-color-menu-bg); background-color: var(--bwa-color-bg-tertiary);
border-radius: 3px; border-radius: 3px;
border: 2px var(--nav-global-color-menu-bg) solid; border: 2px var(--bwa-color-bg-tertiary) solid;
content: ''; content: '';
display: block; display: block;
height: .85rem; height: .85rem;
@ -338,22 +396,17 @@
} }
.nav-global .nav-global-apps-menu ul { .nav-global .nav-global-apps-menu ul {
border-bottom: 2px solid rgba(255, 255, 255, .05);
display: grid; display: grid;
gap: var(--nav-global-spacer-sm); gap: var(--bwa-spacer-2);
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
list-style: none; list-style: none;
margin: 0; margin: 0 0 var(--bwa-spacer-1) 0;
padding: 0; padding: var(--bwa-spacer-1) 0 var(--bwa-spacer-2) 0;
}
.nav-global .nav-global-apps-menu ul {
border-bottom: 2px solid rgba(255, 255, 255, .05);
margin: 0 0 var(--nav-global-spacer-xs) 0;
padding: var(--nav-global-spacer-xs) 0;
} }
.nav-global .nav-global-apps-menu ul>li>a { .nav-global .nav-global-apps-menu ul>li>a {
border-radius: var(--nav-global-border-radius-lg); border-radius: var(--bwa-border-radius-lg);
display: flex; display: flex;
flex: 1; flex: 1;
height: 100%; height: 100%;
@ -361,45 +414,46 @@
.nav-global .nav-global-apps-menu ul>li>a:hover { .nav-global .nav-global-apps-menu ul>li>a:hover {
background-color: rgba(255, 255, 255, .05); background-color: rgba(255, 255, 255, .05);
color: var(--nav-global-color-text-active); color: var(--bwa-color-text-primary);
box-shadow: var(--nav-global-box-shadow-menu-item); box-shadow: 0px 1px var(--bwa-spacer-1) 0 rgba(0, 0, 0, 0.05), 0 var(--bwa-spacer) 20px -1px rgba(0, 0, 0, 0.025);
} }
.nav-global .nav-global-apps-menu ul>li>a:hover h4, .nav-global .nav-global-apps-menu ul>li>a:hover h4,
.nav-global .nav-global-apps-menu ul>li>a:hover svg { .nav-global .nav-global-apps-menu ul>li>a:hover svg {
color: var(--nav-global-color-primary); color: var(--bwa-color-accent);
fill: var(--nav-global-color-primary); fill: var(--bwa-color-accent);
} }
.nav-global .nav-global-apps-menu h3 { .nav-global .nav-global-apps-menu h3 {
color: white; color: white;
display: inline-block; display: inline-block;
font-size: 13px; font-size: 12px;
line-height: 18px; line-height: var(--bwa-spacer);
margin: 0; margin: 0;
margin-top: 2px;
opacity: .3; opacity: .3;
padding-left: var(--nav-global-spacer); padding-left: var(--bwa-spacer);
} }
.nav-global .nav-global-apps-menu h4 { .nav-global .nav-global-apps-menu h4 {
color: var(--nav-global-color-text-highlight); color: var(--bwa-color-text-primary);
font-size: 17px; font-size: 18px;
line-height: 18px; line-height: 20px;
margin: var(--nav-global-spacer-xs) 0 0; margin: var(--bwa-spacer-1) 0 0;
padding: var(--nav-global-spacer-sm) var(--nav-global-spacer) 0; padding: var(--bwa-spacer-2) var(--bwa-spacer) 0;
transition: color var(--nav-global-transition-speed) ease-out; transition: color var(--bwa-transition-speed) ease-out;
} }
.nav-global .nav-global-apps-menu p { .nav-global .nav-global-apps-menu p {
font-size: 15px; font-size: var(--bwa-fs-base);
line-height: 20px; line-height: 20px;
margin: 0; margin: 0;
opacity: .8; opacity: .8;
padding: var(--nav-global-spacer-xs) var(--nav-global-spacer) var(--nav-global-spacer-sm); padding: var(--bwa-spacer-1) var(--bwa-spacer) var(--bwa-spacer-2);
} }
.nav-global .nav-global-apps-menu figure { .nav-global .nav-global-apps-menu figure {
margin: var(--nav-global-spacer) 0 0 var(--nav-global-spacer); margin: var(--bwa-spacer) 0 0 var(--bwa-spacer);
} }
.nav-global .nav-global-apps-menu ul>li>a svg { .nav-global .nav-global-apps-menu ul>li>a svg {
@ -416,7 +470,7 @@
.nav-global .nav-global-apps-menu-section-donate a svg { .nav-global .nav-global-apps-menu-section-donate a svg {
fill: hsl(352, 90%, 62%) !important; fill: hsl(352, 90%, 62%) !important;
transition: transform var(--nav-global-transition-speed) ease-out; transition: transform var(--bwa-transition-speed) ease-out;
} }
.nav-global .nav-global-apps-menu-section-donate ul>li:first-child>a { .nav-global .nav-global-apps-menu-section-donate ul>li:first-child>a {
@ -443,65 +497,89 @@
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.nav-global-apps-dropdown-container, .nav-global-apps-dropdown-container,
.nav-global a.nav-global-logo { .nav-global a.nav-global-logo {
display: none; display: none;
} }
.nav-global button.nav-global-logo { .nav-global button.nav-global-logo {
display: block; display: flex;
visibility: visible; visibility: visible;
} }
.nav-global button.nav-global-logo strong,
.nav-global button.nav-global-logo svg {
margin-right: var(--bwa-spacer-2)
}
.nav-global .nav-global-nav-links { .nav-global .nav-global-nav-links {
align-items: flex-start; align-items: flex-start;
background-color: var(--nav-global-color-menu-bg); background-color: var(--bwa-color-bg-primary);
border-radius: var(--nav-global-border-radius-lg); border-radius: 6px;
display: none; display: none;
flex-direction: column; flex-direction: column;
left: 1rem; height: auto;
padding: 0 var(--nav-global-spacer-sm); padding: var(--bwa-spacer-1);
position: absolute; position: absolute;
top: calc(100% + .5rem); top: 72px;
visibility: visible; visibility: visible;
width: 10rem; z-index: var(--bwa-zindex-dropdown);
z-index: var(--nav-global-color-menu-zindex);
} }
.nav-global .nav-global-nav-links.is-visible { .nav-global .nav-global-nav-links.is-visible {
display: flex; display: flex;
} }
.nav-global .nav-global-nav-links::before { .nav-global .nav-global-nav-links li {
background-color: var(--nav-global-color-menu-bg); align-items: center;
border-radius: 3px; display: flex;
border: 2px var(--nav-global-color-menu-bg) solid; margin-bottom: var(--bwa-spacer-1);
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-global-nav-links>li {
border-bottom: 2px solid rgba(255, 255, 255, .05);
width: 100%; width: 100%;
} }
.nav-global .nav-global-nav-links>li:last-child { .nav-global .nav-global-nav-links li:last-child {
border: none; margin-bottom: 0;
} }
.nav-global .nav-global-nav-links>li>a { .nav-global .nav-global-nav-links li a {
padding-inline: 0; border-radius: 6px;
color: var(--bwa-color-text);
display: inline-flex;
flex: 1;
line-height: initial;
padding: var(--bwa-spacer-2) var(--bwa-spacer);
transition: background-color var(--bwa-transition-speed) var(--bwa-transition-timing-fast), color var(--bwa-transition-speed) var(--bwa-transition-timing-fast);
text-decoration: none;
white-space: nowrap;
width: 100%; width: 100%;
} }
.nav-global .nav-global-nav-links li a:hover,
.nav-global .nav-global-nav-links li a.nav-global-link-active {
background-color: var(--bwa-color-accent-bg);
color: var(--bwa-color-accent);
text-decoration: none;
} }
}
.nav-global .nav-global-nav-links li a.nav-global-link-active {
font-variation-settings: 'wght' 700;
font-weight: bold;
}
/* Site-specific tweaks. */
/* Make sure to start every line with ".nav-global"
* so changes affect the developer navbar only. */
/* Limit navbar width on large screens (optional). */
/*
@media (min-width: 1380px) { // grid breakpoint 'xl'
.nav-global .nav-global-container {
max-width: var(--container-width);
}
}
*/
</style> </style>
<div class="nav-global"> <div class="nav-global">