Add logo to site menu

This commit is contained in:
Marco Janotta 2021-05-03 11:17:35 +02:00 committed by Daniel Micay
parent ecec6b01f3
commit c479130069
22 changed files with 36 additions and 22 deletions

View File

@ -29,7 +29,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -31,7 +31,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -31,7 +31,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -31,7 +31,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -31,7 +31,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -32,7 +32,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li aria-current="page"><a href="/build">Build</a></li> <li aria-current="page"><a href="/build">Build</a></li>

View File

@ -31,7 +31,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -31,7 +31,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -32,7 +32,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -31,7 +31,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li aria-current="page"><a href="/features">Features</a></li> <li aria-current="page"><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -61,10 +61,12 @@ code {
#site-menu { #site-menu {
background-color: #212121; /* grey900 */ background-color: #212121; /* grey900 */
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
white-space: nowrap;
} }
#site-menu ul li { #site-menu ul li {
list-style-type: none; list-style-type: none;
display: flex;
} }
#site-menu ul li:hover { #site-menu ul li:hover {
@ -73,9 +75,10 @@ code {
#site-menu ul li a { #site-menu ul li a {
color: #fff; /* 100% white */ color: #fff; /* 100% white */
display: block; display: flex;
text-decoration: none; text-decoration: none;
padding: 1em; padding: 1em;
align-items: center;
} }
#site-menu ul li a:visited { #site-menu ul li a:visited {
@ -86,6 +89,17 @@ code {
color: #64b5f6; /* blue300 */ color: #64b5f6; /* blue300 */
} }
#site-menu img {
height: 1.8rem;
filter: invert(100);
vertical-align: middle;
margin-right: 0.5rem;
}
#site-menu ul li[aria-current] img {
filter: invert(67%) sepia(13%) saturate(3136%) hue-rotate(180deg) brightness(102%) contrast(93%);
}
main { main {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;

View File

@ -31,7 +31,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -31,7 +31,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -31,7 +31,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -32,7 +32,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li aria-current="page"><a href="/">GrapheneOS</a></li> <li aria-current="page"><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -32,7 +32,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -32,7 +32,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li aria-current="page"><a href="/install/">Install</a></li> <li aria-current="page"><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -34,7 +34,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -31,7 +31,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -34,7 +34,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -31,7 +31,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>

View File

@ -32,7 +32,7 @@
<header> <header>
<nav id="site-menu"> <nav id="site-menu">
<ul> <ul>
<li><a href="/">GrapheneOS</a></li> <li><a href="/"><img src="/mask-icon.svg" alt="GrapheneOS logo"/>GrapheneOS</a></li>
<li><a href="/features">Features</a></li> <li><a href="/features">Features</a></li>
<li><a href="/install/">Install</a></li> <li><a href="/install/">Install</a></li>
<li><a href="/build">Build</a></li> <li><a href="/build">Build</a></li>