huanld/ghost-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: top menu & mobile menu revamp

Browse Source
This commit is contained in:
Dimitrie Stefanescu
2021-07-14 14:38:05 +01:00
parent 78adad69c1
commit 7743b78b71
3 changed files with 190 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
partials/menus/resourcesMenu.hbs
+1 -3
View File
@@ -44,9 +44,7 @@
</span>Docs
</p>
<p class="mt-1 text-sm font-normal text-gray-900 dark:text-gray-50">
Documentation and step-by-step guides on how
to
get the best of Speckle.
In depth documentation on Speckle.
</p>
</div>
<p class="mt-2 text-sm font-medium text-blue-600 lg:mt-4">Check
partials/navbar.hbs
+188 -182
View File
@@ -2,7 +2,8 @@
<div class="mt-0 w-full h-20"></div>
{{!-- Actual navbar --}}
<div x-data="{ mobileMenuOpen: false, usecasesMenu: false, developersMenu: false, resourcesMenu: false, flyoutMenuOpen: false }"
<div
x-data="{ mobileMenuOpen: false, usecasesMenu: false, developersMenu: false, resourcesMenu: false, flyoutMenuOpen: false }"
class="fixed top-0 shadow mt-0 w-full bg-white dark:bg-gray-900 dark:text-white z-50">
<div class="relative">
<div class="w-default flex justify-between items-center py-5 sm:py-4 md:justify-between">
@@ -23,12 +24,9 @@
<div class="-mr-2 -my-2 lg:hidden">
<button @click="mobileMenuOpen = true" type="button"
class="bg-white dark:bg-gray-900 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<svg class="h-6 w-6" x-description="Heroicon name: menu"
xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<svg class="h-6 w-6" x-description="Heroicon name: menu" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
@@ -36,102 +34,144 @@
{{!-- Main Menu --}}
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-between">
<nav class="flex space-x-4">
<nav class="flex space-x-2">
{{!-- use cases menu button --}}
<div class="relative">
<button type="button" @mouseenter="usecasesMenu = true; resourcesMenu = false; developersMenu = false; flyoutMenuOpen = false;"
@click="usecasesMenu = !usecasesMenu;"
x-state:on="Item active" x-state:off="Item inactive"
:class="{ 'text-gray-900 dark:text-gray-50': usecasesMenu, 'text-gray-700 dark:text-gray-400': !usecasesMenu }"
class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
<span>Features</span>
<svg x-state:on="Item active" x-state:off="Item inactive"
class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
x-bind:class="{ 'text-gray-600': usecasesMenu, 'text-gray-400': !usecasesMenu }"
x-description="Heroicon name: chevron-down"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
<a href="/features/connectors"
class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
</svg>
</button>
<span>Connectors</span>
</a>
</div>
{{!-- developers menu button --}}
<div class="relative">
<button type="button" @mouseenter="developersMenu = true; usecasesMenu = false; resourcesMenu = false; flyoutMenuOpen = false;"
@click="developersMenu = !developersMenu;"
x-state:on="Item active" x-state:off="Item inactive"
:class="{ 'text-gray-900 dark:text-gray-50': developersMenu, 'text-gray-700 dark:text-gray-400': !developersMenu }"
class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
<span>Developers</span>
<svg x-state:on="Item active" x-state:off="Item inactive"
class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
x-bind:class="{ 'text-gray-600': developersMenu, 'text-gray-400': !developersMenu }"
x-description="Heroicon name: chevron-down"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
<a href="/tutorials" @mouseenter="resourcesMenu = false; flyoutMenuOpen = false;"
class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
</svg>
</button>
<span>Tutorials</span>
</a>
</div>
{{!-- Learn menu button --}}
<div class="relative" @mouseenter="resourcesMenu = false; flyoutMenuOpen = false;">
<a href="/developers"
class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
<span>Devs</span>
</a>
</div>
<div class="relative">
<button type="button" @mouseenter="resourcesMenu = true; usecasesMenu = false; developersMenu = false; flyoutMenuOpen = false;"
@click="resourcesMenu = !resourcesMenu;" x-state:on="Item active"
x-state:off="Item inactive" :class="{ 'text-gray-900 dark:text-gray-50': resourcesMenu, 'text-gray-700 dark:text-gray-400': !resourcesMenu }"
class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
{{!-- Resources menu button --}}
<div class="relative ml-1">
<button type="button" @mouseenter="resourcesMenu = true; flyoutMenuOpen = false;"
@click="resourcesMenu = !resourcesMenu;" x-state:on="Item active" x-state:off="Item inactive"
:class="{ 'text-gray-900 dark:text-gray-50': resourcesMenu, 'text-gray-700 dark:text-gray-400': !resourcesMenu }"
class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
</svg>
<span>Resources</span>
<svg x-state:on="Item active" x-state:off="Item inactive"
class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
x-bind:class="{ 'text-gray-600': resourcesMenu, 'text-gray-400': !resourcesMenu }"
x-description="Heroicon name: chevron-down"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
<div x-description="'resources' flyout menu, show/hide based on flyout menu state." x-show="resourcesMenu"
@mouseleave="resourcesMenu = false;" x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1"
class="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0">
<div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="relative grid gap-6 bg-white dark:bg-gray-900 px-5 py-6 sm:gap-8 sm:p-8">
<a href="/blog"
class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
<p class="text-base font-medium text-gray-900 dark:text-gray-100">
Blog
</p>
<p class="mt-1 text-sm text-gray-500">
Announcements and other musings from the Speckle team.
</p>
</a>
<a href="https://speckle.guide" target="_blank"
class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
<p class="text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
Docs
<svg xmlns="http://www.w3.org/2000/svg" class="ml-3 h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</p>
<p class="mt-1 text-sm text-gray-500">
The reference manuals for Speckle, both for end users and developers alike.
</p>
</a>
<a href="https://speckle.community" target="_blank"
class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
<p class="text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
Community Forum
<svg xmlns="http://www.w3.org/2000/svg" class="ml-3 h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</p>
<p class="mt-1 text-sm text-gray-500">
Meet & get help from the Speckle community!
</p>
</a>
</div>
</div>
{{!-- {{> menus/resourcesMenu }} --}}
</div>
</div>
{{!-- About --}}
{{!-- About --}}
<div class="relative" @mouseenter="resourcesMenu = false; usecasesMenu = false; developersMenu = false; flyoutMenuOpen = true"
@mouseleave="">
<button type="button" @click="flyoutMenuOpen = !flyoutMenuOpen"
x-state:on="Item active" x-state:off="Item inactive"
:class="{ 'text-gray-900': flyoutMenuOpen, 'text-gray-500': !flyoutMenuOpen }"
class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
<span>Company</span>
<svg x-state:on="Item active" x-state:off="Item inactive"
class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
x-bind:class="{ 'text-gray-600': flyoutMenuOpen, 'text-gray-400': !flyoutMenuOpen }"
x-description="Heroicon name: chevron-down"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
<div class="relative" @mouseenter="resourcesMenu = false; flyoutMenuOpen = true" @mouseleave="">
<button type="button" @click="flyoutMenuOpen = !flyoutMenuOpen" x-state:on="Item active"
x-state:off="Item inactive" :class="{ 'text-gray-900': flyoutMenuOpen, 'text-gray-500': !flyoutMenuOpen }"
class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
</svg>
<span>Company</span>
</button>
<div x-description="Flyout menu, show/hide based on flyout menu state."
@mouseleave="flyoutMenuOpen = false;" x-show="flyoutMenuOpen"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-1"
<div x-description="Company menu" @mouseleave="flyoutMenuOpen = false;" x-show="flyoutMenuOpen"
x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1"
class="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0">
<div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="relative grid gap-6 bg-white dark:bg-gray-900 px-5 py-6 sm:gap-8 sm:p-8">
<a href="/about" class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
<a href="/about"
class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
<p class="text-base font-medium text-gray-900 dark:text-gray-100">
About
</p>
@@ -140,7 +180,8 @@
</p>
</a>
<a href="/partnerships" class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
<a href="/partnerships"
class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
<p class="text-base font-medium text-gray-900 dark:text-gray-100">
Partnerships
</p>
@@ -149,7 +190,8 @@
</p>
</a>
<a href="/contact" class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
<a href="/contact"
class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
<p class="text-base font-medium text-gray-900 dark:text-gray-100">
Contact
</p>
@@ -158,7 +200,8 @@
</p>
</a>
<a href="/careers" class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
<a href="/careers"
class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
<p class="text-base font-medium text-gray-900 dark:text-gray-100">
Careers
</p>
@@ -171,8 +214,9 @@
</div>
</div>
<div class="relative" @mouseenter="resourcesMenu = false; usecasesMenu = false; developersMenu = false; flyoutMenuOpen = false">
&nbsp;
<div class="relative"
@mouseenter="resourcesMenu = false; usecasesMenu = false; developersMenu = false; flyoutMenuOpen = false">
&nbsp;&nbsp;
</div>
</nav>
@@ -180,11 +224,11 @@
{{!-- CTA --}}
<div class="flex items-center lg:ml-12">
<a href="https://github.com/specklesystems/speckle-server"
target="_blank" class="mr-4 transition hover:text-gray-500">
<svg class="h-6 w-6" fill="currentColor"
viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
<a href="https://github.com/specklesystems/speckle-server" target="_blank"
class="mr-4 transition hover:text-gray-500">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd"></path>
</svg>
</a>
@@ -194,56 +238,13 @@
</div>
</div>
<!-- Use cases menu -->
<div x-description="'Solutions' flyout menu, show/hide based on flyout menu state."
x-show="usecasesMenu" @mouseleave="usecasesMenu = false;"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1" class="hidden md:block absolute z-10 inset-x-0 transform shadow-lg">
{{> menus/tagDropdownMenu tag="features" maxcards="3" large="true" }}
</div>
<!-- Learn menu -->
<div x-description="'Learn' flyout menu, show/hide based on flyout menu state."
x-show="resourcesMenu" @mouseleave="resourcesMenu = false;"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1" class="hidden md:block absolute z-10 inset-x-0 transform shadow-lg">
{{> menus/resourcesMenu }}
</div>
<!-- Developers menu -->
<div x-description="'Developers' flyout menu, show/hide based on flyout menu state."
x-show="developersMenu" @mouseleave="developersMenu = false;"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1" class="hidden md:block absolute z-10 inset-x-0 transform shadow-lg">
{{> menus/tagDropdownMenu tag="developers" maxcards="3" large="true" }}
</div>
{{!-- Mobile menu --}}
<div x-description="Mobile menu, show/hide based on mobile menu state."
x-show="mobileMenuOpen" x-transition:enter="duration-200 ease-out"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="duration-100 ease-in"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95" class="fixed w-full h-full z-30 top-0 inset-x-0 p-2 transition transform origin-top-right lg:hidden">
<div x-description="Mobile menu, show/hide based on mobile menu state." x-show="mobileMenuOpen"
x-transition:enter="duration-200 ease-out" x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in"
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
class="fixed w-full h-full z-30 top-0 inset-x-0 p-2 transition transform origin-top-right lg:hidden">
<div class="rounded-lg shadow-2xl bg-white dark:bg-gray-900">
<div class="pt-5 pb-6 px-5 sm:pb-8">
<div class="flex items-center justify-between">
@@ -253,13 +254,9 @@
<div class="-mr-2">
<button @click="mobileMenuOpen = false" type="button"
class="bg-white dark:bg-gray-900 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<svg class="h-6 w-6" x-description="Heroicon name: x"
xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round"
stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
<svg class="h-6 w-6" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
@@ -268,31 +265,27 @@
<nav>
<div class="grid gap-7 sm:grid-cols-2 sm:gap-y-8 sm:gap-x-4">
<a href="/features" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: chart-bar"
xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round"
stroke-linejoin="round" stroke-width="2"
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
<a href="/features/connectors" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
<div
class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: chart-bar" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
</svg>
</div>
<div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
Features
Connectors
</div>
</a>
<a href="/developers" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: shield-check"
xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round"
stroke-linejoin="round" stroke-width="2"
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
<a href="/developers"
class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
<div
class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: shield-check" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
@@ -300,15 +293,29 @@
</div>
</a>
<a href="/tutorials" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
<div
class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: cursor-click" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
</path>
</svg>
</div>
<div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
Tutorials
</div>
</a>
<a href="/blog" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: cursor-click"
xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round"
stroke-linejoin="round" stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"></path>
<div
class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: cursor-click" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
</path>
</svg>
</div>
<div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
@@ -318,24 +325,23 @@
<a href="/about" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
<div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: view-grid"
xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round"
stroke-linejoin="round" stroke-width="2"
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
<div
class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: view-grid" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
</svg>
</div>
<div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
About
About Us
</div>
</a>
<div class="text-base">
<a href="https://speckle.community" target="_blank" class="font-medium text-blue-600 hover:text-blue-500">
<a href="https://speckle.community" target="_blank"
class="font-medium text-blue-600 hover:text-blue-500">
Community <span aria-hidden="true">→</span></a>
</div>
tutorials.hbs
+1 -1
View File
@@ -15,7 +15,7 @@
{{/tag}}
<div class="w-default flex flex-row space-x-4 flex-wrap content-center justify-center">
<p class="text-gray-500 w-full text-center text-sm mt-1">Popular topics:</p>
{{!-- <p class="text-gray-500 w-full text-center text-sm mt-1">Popular topics:</p> --}}
{{#get "tags" limit="all" filter="slug:-[features,tutorials,careers,developers,blog]"}}
{{#foreach tags}}
<a href="{{url}}" class="mt-2 px-2 py-1 bg-blue-500 rounded-full inline-block text-white ring-0 hover:ring-4 transition">