Skip to content

GitLab

Commit 5ac260e0 authored by Guillaume Grossetie's avatar Guillaume Grossetie 🎧
Browse files

mobile menu and hover styles

parent ace93f8d
Hide whitespace changes
Inline Side-by-side
pages/_layouts/main.njk
View file @ 5ac260e0
......@@ -13,6 +13,11 @@
<header class="header">
<nav>
<div class="logo"><img src="./assets/img/asciidoc-horizontal-white.svg" alt="AsciiDoc Logo"/></div>
<div class="navbar-mobile">
<img src="./assets/img/asciidoc-horizontal-color.svg" alt="AsciiDoc Logo"/>
<img class="close" src="./assets/img/close.svg"/>
<img class="open" src="./assets/img/menu.svg"/>
</div>
<ul class="menu">
<li><a href="#about">About</a></li>
<li><a href="#compare">Compare</a></li>
......
pages/assets/css/_base.css
View file @ 5ac260e0
......@@ -43,16 +43,89 @@ body {
}
.header {
position: relative;
background-color: var(--brand-color);
padding-bottom: 1rem;
padding-top: 1rem;
margin-left: 0;
margin-right: 0;
z-index: 1;
background-color: white;
}
.header .menu a {
color: var(--gray-color-900);
text-decoration: none;
font-weight: 500;
font-size: 1rem;
line-height: 1.5;
}
.header .logo {
display: none;
}
.header .navbar-mobile {
display: flex;
align-content: center;
justify-content: space-between;
padding: 1.25rem;
}
.header .navbar-mobile .close,
.header .navbar-mobile .open {
cursor: pointer;
}
.header .navbar-mobile .close {
display: none;
}
.header .navbar-mobile.navbar-open .close {
display: block;
}
.header .navbar-mobile.navbar-open .open {
display: none;
}
.header .menu {
display: none;
flex-direction: column;
padding: 0.5rem 2rem 1.25rem;
gap: 2rem;
font-family: var(--brand-font-secondary);
}
.header .menu.is-active {
display: flex;
}
@media screen and (max-width: 767px) {
.header .menu.is-active {
position: absolute;
background: white;
width: 100%;
z-index: 99;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
}
@media screen and (min-width: 768px) {
.header {
background-color: var(--brand-color);
padding-bottom: 1rem;
padding-top: 1rem;
margin-left: 0;
margin-right: 0;
z-index: 1;
}
.header .menu {
display: flex;
}
.header .logo {
display: block;
}
.header .navbar-mobile {
display: none;
}
.header::before {
content: "";
position: absolute;
......@@ -63,36 +136,27 @@ body {
right: 20px;
background-image: url("../img/dot-watermark.svg");
background-repeat: repeat-y;
z-index: -1;
}
}
.header > nav {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
padding-right: 3rem;
padding-left: 3rem;
}
@media screen and (min-width: 1024px) {
.header > nav {
padding-right: 7rem;
padding-left: 7rem;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
padding-right: 3rem;
padding-left: 3rem;
}
}
.header .menu {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-top: 2rem;
font-family: var(--brand-font-secondary);
font-weight: 700;
}
.header .menu a {
color: white;
text-decoration: none;
font-weight: 700;
}
.header .menu a:hover {
text-decoration: underline;
}
@media screen and (min-width: 768px) {
.header .menu {
flex-direction: row;
gap: 2.5rem;
......@@ -107,15 +171,10 @@ body {
padding: 0.75rem;
margin-left: auto;
}
}
.header .menu a {
color: white;
text-decoration: none;
}
.header .menu a:hover {
text-decoration: underline;
.header > nav {
padding-right: 7rem;
padding-left: 7rem;
}
}
header .logo {
......@@ -133,9 +192,14 @@ header .logo > img {
.main > .hero {
background-color: var(--brand-color);
color: white;
background-image: url("../img/dot-watermark.svg");
background-repeat: repeat-y;
background-origin: border-box;
}
@media screen and (min-width: 768px) {
.main > .hero {
background-image: url("../img/dot-watermark.svg");
background-repeat: repeat-y;
background-origin: border-box;
}
}
.main > .hero .content {
......@@ -895,6 +959,10 @@ section.specifications a.action {
font-weight: 500;
}
section.specifications a.action:hover {
text-decoration: none;
}
section.specifications .paragraph:not(:last-child) {
padding-bottom: 1.5rem;
}
......@@ -942,6 +1010,16 @@ section a.action:hover::after {
text-decoration: none;
}
section.tools a.explore:hover {
text-decoration: none;
color: white;
background-color: var(--brand-color);
}
section.tools a.explore:hover::after {
background-image: url("../img/arrow-right-long-white.svg");
}
section a.action {
display: flex;
text-decoration: none;
......@@ -1162,6 +1240,12 @@ section.docs a {
letter-spacing: 0.015em;
}
section.docs a:hover {
background-color: white;
color: var(--brand-color-700);
border-color: white;
}
.main h3 {
font-family: var(--brand-font-secondary);
font-size: 2.25rem;
......@@ -1454,6 +1538,10 @@ section.docs a {
color: var(--brand-color-500);
}
.tabs li:not(.is-active):hover {
border-bottom: 2px solid rgb(107 114 128 / 20%);
}
.tabs.ulist li p {
font-size: 0.875rem;
line-height: 1.1rem;
......
pages/assets/img/asciidoc-horizontal-color.svg 0 → 100644
View file @ 5ac260e0
<svg width="153" height="36" viewBox="0 0 153 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.10788 0.843225L14.4468 20.6052H34.1323C34.2617 19.7557 34.3287 18.8857 34.3287 18.0001C34.3287 8.52045 26.644 0.835693 17.1644 0.835693H3.33376C3.25785 0.835693 3.18253 0.838231 3.10788 0.843225Z" fill="#1F8197"/>
<path d="M0 7.16769L7.7101 20.6052H0V7.16769Z" fill="#1F8197"/>
<path d="M0 26.4484V31.8307C0 33.6719 1.49257 35.1644 3.33376 35.1644H16.0638L11.0628 26.4484H0Z" fill="#1F8197"/>
<path d="M22.3441 34.3691C26.5116 33.0515 29.9914 30.1865 32.1091 26.4484H17.7994L22.3441 34.3691Z" fill="#1F8197"/>
<path d="M42.959 27.8015L51.2322 7.24999H54.4772L62.7212 27.8015H58.4823L52.1092 10.9335H53.5709L47.1102 27.8015H42.959ZM47.3441 23.9719V20.6392H58.3946V23.9719H47.3441Z" fill="#404040"/>
<path d="M69.0896 28.1231C68.2906 28.1231 67.5013 28.0159 66.7217 27.8015C65.9616 27.5871 65.26 27.2948 64.6168 26.9245C63.9737 26.5347 63.4182 26.067 62.9505 25.5213L65.2307 23.2118C65.718 23.7575 66.2832 24.1667 66.9263 24.4396C67.5695 24.7124 68.2808 24.8489 69.0604 24.8489C69.6841 24.8489 70.1518 24.7612 70.4636 24.5858C70.795 24.4104 70.9606 24.1473 70.9606 23.7964C70.9606 23.4067 70.7852 23.1046 70.4344 22.8902C70.1031 22.6758 69.6646 22.5004 69.1189 22.364C68.5732 22.2081 67.9982 22.0424 67.3941 21.867C66.8094 21.6721 66.2442 21.4285 65.6985 21.1362C65.1528 20.8243 64.7045 20.4053 64.3537 19.8791C64.0224 19.3334 63.8567 18.6318 63.8567 17.7742C63.8567 16.8777 64.0711 16.0982 64.4999 15.4355C64.9482 14.7729 65.5816 14.2564 66.4001 13.8861C67.2187 13.5158 68.1834 13.3307 69.2943 13.3307C70.4636 13.3307 71.5161 13.5353 72.4516 13.9446C73.4065 14.3539 74.1959 14.9678 74.8195 15.7863L72.51 18.0958C72.0813 17.5696 71.594 17.1896 71.0483 16.9557C70.5221 16.7218 69.9472 16.6049 69.3235 16.6049C68.7583 16.6049 68.3198 16.6926 68.008 16.868C67.7156 17.0434 67.5695 17.287 67.5695 17.5988C67.5695 17.9496 67.7351 18.2225 68.0665 18.4174C68.4173 18.6123 68.8655 18.7877 69.4112 18.9436C69.9569 19.08 70.5221 19.2457 71.1068 19.4406C71.711 19.616 72.2761 19.8693 72.8024 20.2007C73.3481 20.532 73.7866 20.9705 74.1179 21.5162C74.4687 22.0619 74.6441 22.7635 74.6441 23.621C74.6441 25.0048 74.1471 26.1059 73.1532 26.9245C72.1592 27.7236 70.8047 28.1231 69.0896 28.1231Z" fill="#404040"/>
<path d="M83.161 28.0939C81.7188 28.0939 80.4228 27.7723 79.2729 27.1291C78.123 26.486 77.2168 25.609 76.5541 24.4981C75.8915 23.3872 75.5602 22.1399 75.5602 20.7561C75.5602 19.3529 75.8915 18.0958 76.5541 16.9849C77.2168 15.874 78.123 14.997 79.2729 14.3539C80.4423 13.6912 81.7383 13.3599 83.161 13.3599C84.2719 13.3599 85.2951 13.5645 86.2306 13.9738C87.1661 14.3831 87.9749 14.9678 88.657 15.7279L86.2014 18.2127C85.8311 17.8035 85.3828 17.4916 84.8566 17.2773C84.3499 17.0629 83.7847 16.9557 83.161 16.9557C82.4594 16.9557 81.826 17.1213 81.2608 17.4527C80.7151 17.7645 80.2766 18.203 79.9453 18.7682C79.6335 19.3139 79.4775 19.9668 79.4775 20.7269C79.4775 21.4675 79.6335 22.1301 79.9453 22.7148C80.2766 23.28 80.7151 23.7282 81.2608 24.0596C81.826 24.3714 82.4594 24.5273 83.161 24.5273C83.8042 24.5273 84.3791 24.4201 84.8858 24.2057C85.412 23.9719 85.8603 23.6405 86.2306 23.2118L88.7155 25.6967C87.9944 26.4762 87.1661 27.0707 86.2306 27.4799C85.2951 27.8892 84.2719 28.0939 83.161 28.0939Z" fill="#404040"/>
<path d="M90.1534 27.8015V13.6815H94.0123V27.8015H90.1534ZM92.0829 11.4012C91.4592 11.4012 90.9428 11.1966 90.5335 10.7873C90.1242 10.3585 89.9196 9.83232 89.9196 9.20867C89.9196 8.6045 90.1242 8.08803 90.5335 7.65926C90.9428 7.2305 91.4592 7.01611 92.0829 7.01611C92.726 7.01611 93.2425 7.2305 93.6323 7.65926C94.0416 8.08803 94.2462 8.6045 94.2462 9.20867C94.2462 9.83232 94.0416 10.3585 93.6323 10.7873C93.2425 11.1966 92.726 11.4012 92.0829 11.4012Z" fill="#404040"/>
<path d="M96.674 27.8015V13.6815H100.533V27.8015H96.674ZM98.6034 11.4012C97.9798 11.4012 97.4633 11.1966 97.054 10.7873C96.6448 10.3585 96.4401 9.83232 96.4401 9.20867C96.4401 8.6045 96.6448 8.08803 97.054 7.65926C97.4633 7.2305 97.9798 7.01611 98.6034 7.01611C99.2466 7.01611 99.7631 7.2305 100.153 7.65926C100.562 8.08803 100.767 8.6045 100.767 9.20867C100.767 9.83232 100.562 10.3585 100.153 10.7873C99.7631 11.1966 99.2466 11.4012 98.6034 11.4012Z" fill="#404040"/>
<path d="M106.101 27.8015V24.2642H111.334C112.659 24.2642 113.819 23.9913 114.813 23.4456C115.807 22.8804 116.577 22.0911 117.122 21.0777C117.688 20.0642 117.97 18.8656 117.97 17.4819C117.97 16.1371 117.688 14.9678 117.122 13.9738C116.557 12.9604 115.778 12.1808 114.784 11.6351C113.79 11.0699 112.64 10.7873 111.334 10.7873H106.013V7.24999H111.393C112.913 7.24999 114.316 7.50335 115.602 8.01007C116.908 8.51679 118.038 9.2379 118.993 10.1734C119.968 11.0894 120.718 12.171 121.244 13.4184C121.79 14.6657 122.063 16.0299 122.063 17.5111C122.063 18.9923 121.79 20.3663 121.244 21.6331C120.718 22.8804 119.978 23.9719 119.023 24.9073C118.068 25.8233 116.937 26.5347 115.631 27.0414C114.345 27.5481 112.952 27.8015 111.451 27.8015H106.101ZM103.382 27.8015V7.24999H107.358V27.8015H103.382Z" fill="#404040"/>
<path d="M130.497 28.0939C129.074 28.0939 127.788 27.7723 126.638 27.1291C125.508 26.4665 124.601 25.5797 123.919 24.4688C123.257 23.3384 122.925 22.0814 122.925 20.6976C122.925 19.3139 123.257 18.0763 123.919 16.9849C124.582 15.874 125.488 14.997 126.638 14.3539C127.788 13.6912 129.064 13.3599 130.468 13.3599C131.91 13.3599 133.196 13.6912 134.326 14.3539C135.476 14.997 136.383 15.874 137.045 16.9849C137.708 18.0763 138.039 19.3139 138.039 20.6976C138.039 22.0814 137.708 23.3384 137.045 24.4688C136.383 25.5797 135.476 26.4665 134.326 27.1291C133.196 27.7723 131.92 28.0939 130.497 28.0939ZM130.468 24.5273C131.189 24.5273 131.822 24.3714 132.368 24.0596C132.933 23.7282 133.362 23.28 133.654 22.7148C133.966 22.1301 134.122 21.4675 134.122 20.7269C134.122 19.9863 133.966 19.3334 133.654 18.7682C133.342 18.203 132.914 17.7645 132.368 17.4527C131.822 17.1213 131.189 16.9557 130.468 16.9557C129.766 16.9557 129.142 17.1213 128.597 17.4527C128.051 17.7645 127.622 18.203 127.31 18.7682C126.999 19.3334 126.843 19.9863 126.843 20.7269C126.843 21.4675 126.999 22.1301 127.31 22.7148C127.622 23.28 128.051 23.7282 128.597 24.0596C129.142 24.3714 129.766 24.5273 130.468 24.5273Z" fill="#404040"/>
<path d="M146.661 28.0939C145.218 28.0939 143.922 27.7723 142.773 27.1291C141.623 26.486 140.716 25.609 140.054 24.4981C139.391 23.3872 139.06 22.1399 139.06 20.7561C139.06 19.3529 139.391 18.0958 140.054 16.9849C140.716 15.874 141.623 14.997 142.773 14.3539C143.942 13.6912 145.238 13.3599 146.661 13.3599C147.772 13.3599 148.795 13.5645 149.73 13.9738C150.666 14.3831 151.475 14.9678 152.157 15.7279L149.701 18.2127C149.331 17.8035 148.882 17.4916 148.356 17.2773C147.849 17.0629 147.284 16.9557 146.661 16.9557C145.959 16.9557 145.326 17.1213 144.76 17.4527C144.215 17.7645 143.776 18.203 143.445 18.7682C143.133 19.3139 142.977 19.9668 142.977 20.7269C142.977 21.4675 143.133 22.1301 143.445 22.7148C143.776 23.28 144.215 23.7282 144.76 24.0596C145.326 24.3714 145.959 24.5273 146.661 24.5273C147.304 24.5273 147.879 24.4201 148.385 24.2057C148.912 23.9719 149.36 23.6405 149.73 23.2118L152.215 25.6967C151.494 26.4762 150.666 27.0707 149.73 27.4799C148.795 27.8892 147.772 28.0939 146.661 28.0939Z" fill="#404040"/>
</svg>
pages/assets/img/close.svg 0 → 100644
View file @ 5ac260e0
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6M6 6L18 18" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
pages/assets/img/menu.svg 0 → 100644
View file @ 5ac260e0
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6H20M4 12H20M4 18H20" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
pages/assets/js/main.js
View file @ 5ac260e0
import { init as initMobileMenu } from './mobile-menu.js'
import { init as initTabSet } from './tabs-block-behavior.js'
import { init as initToggle } from './toggle-behavior.js'
import { init as initInteractiveEditor } from './interactive-editor.js'
import { init as initSyntaxHighlighting } from './syntax-highlighting.js'
initMobileMenu()
initTabSet()
initToggle()
initInteractiveEditor()
......
pages/assets/js/mobile-menu.js 0 → 100644
View file @ 5ac260e0
export function init () {
const navbar = document.querySelector('.header > nav > .navbar-mobile')
const closeButton = navbar.querySelector(':scope > .close')
const openButton = navbar.querySelector(':scope > .open')
const menu = document.querySelector('.header > nav > .menu')
closeButton.addEventListener('click', () => {
menu.classList.remove('is-active')
navbar.classList.remove('navbar-open')
})
openButton.addEventListener('click', () => {
menu.classList.add('is-active')
navbar.classList.add('navbar-open')
})
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Copyright © Eclipse Foundation, Inc. All Rights Reserved.     Privacy Policy | Terms of Use | Copyright Agent