feat(css): lots of it
This commit is contained in:
Dimitrie Stefanescu
+266589
-3
File diff suppressed because it is too large
Load Diff
@@ -8,6 +8,8 @@
|
||||
/* Main
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
[x-cloak] { display: none !important; }
|
||||
|
||||
.text-gradient {
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
@@ -40,6 +42,10 @@
|
||||
transform: rotateX(15deg) rotateY(0deg);
|
||||
}
|
||||
|
||||
.no-underline {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
.post-body h2 {
|
||||
@apply text-4xl my-4 px-4 sm:px-2 md:px-0;
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
{{!< default}} {{#post}}
|
||||
|
||||
{{!-- Header --}}
|
||||
|
||||
<main class="relative w-default flex flex-wrap mt-24">
|
||||
<div class="w-3/3">
|
||||
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-gray-100 sm:text-5xl md:text-6xl">
|
||||
<span class="inline-block xl:inline text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">
|
||||
{{title}}
|
||||
</span>
|
||||
</h1>
|
||||
<p class="text-base text-justify text-gray-500 dark:text-gray-100 sm:text-lg md:text-xl md:max-w-6xl mt-10">
|
||||
{{excerpt}}
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{> interop/connectorTagCards}}
|
||||
|
||||
{{!-- {{> interop/connectorSlider}} --}}
|
||||
|
||||
<div class="prose prose-blue lg:prose-xl mx-auto dark:prose-dark my-10 px-4 md:px-0">
|
||||
|
||||
{{content}}
|
||||
|
||||
</div>
|
||||
|
||||
{{/post}}
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden">
|
||||
<div class="flex-shrink-0 ">
|
||||
<a href="{{url}}" class="block mt-2">
|
||||
<div class="flex-shrink-0">
|
||||
<a href="{{url}}" class="block">
|
||||
{{#if feature_image}}
|
||||
<img class="h-48 w-full object-cover" srcset="{{img_url feature_image size="s"}} 300w,
|
||||
{{img_url feature_image size="m"}} 600w,
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden border-solid {{#if featured}}border-8 border-blue-500 border-opacity-50 {{/if}}">
|
||||
<div class="flex-shrink-0">
|
||||
<a href="{{url}}" class="block">
|
||||
{{#if feature_image}}
|
||||
<img class="h-40 w-full object-cover" srcset="{{img_url feature_image size="s"}} 300w,
|
||||
{{img_url feature_image size="m"}} 600w,
|
||||
{{img_url feature_image size="l"}} 1000w,
|
||||
{{img_url feature_image size="xl"}} 2000w"
|
||||
sizes="(max-width: 1000px) 400px, 700px" src="{{img_url feature_image size="m"}}"
|
||||
alt="{{title}}">
|
||||
{{else}}
|
||||
<div class="h-40 w-full block bg-gradient-to-r from-blue-400 to-blue-300 dark:from-blue-900 dark:to-blue-700"> </div>
|
||||
{{/if}}
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
|
||||
<div class="flex-1">
|
||||
<a href="{{url}}" class="block mt-2">
|
||||
<p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
|
||||
{{title}}
|
||||
</p>
|
||||
<p class="mt-3 text-base text-gray-500 line-clamp-3 md:line-clamp-4">
|
||||
{{excerpt}}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-6 flex items-center">
|
||||
<div class="">
|
||||
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">
|
||||
<span class="text-gray-500"> <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<a href="/getstarted" class="inline-block items-center justify-center px-8 py-3 border-4 border-blue-600 transition text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 hover:shadow-3xl md:py-4 md:text-lg">
|
||||
<span class="text-white no-underline">Get Started</span>
|
||||
</a>
|
||||
@@ -0,0 +1,59 @@
|
||||
<div class="pt-10 mx-10">
|
||||
<div class="swiper-container connector-swiper mx-auto">
|
||||
<div class="swiper-wrapper mb-10">
|
||||
{{#get "tags" limit="all" filter="slug:-[features,developers,careers,blog,connectors]"}}
|
||||
{{#foreach tags }}
|
||||
<div
|
||||
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 flex flex-col prose-blue prose dark:prose-dark max-w-none
|
||||
shadow-lg dark:bg-gray-900 bg-gray-100 rounded-xl
|
||||
">
|
||||
<div>
|
||||
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110 object-contain"
|
||||
src="{{feature_image}}">
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="w-full mt-4">
|
||||
{{name}}
|
||||
</h2>
|
||||
<p>{{description}}</p>
|
||||
<h3><a href="{{url}}">Check out</a></h3>
|
||||
</div>
|
||||
</div>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
var swiper = new Swiper(".connector-swiper", {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 20,
|
||||
loop: true,
|
||||
grabCursor: true,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true
|
||||
},
|
||||
breakpoints: {
|
||||
640: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 40,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 50,
|
||||
},
|
||||
1280: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 50,
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,145 @@
|
||||
<div class="sticky w-default transform z-40 top-20 mt-5">
|
||||
<div class="bg-gradient-to-r from-blue-500 to-blue-700 px-5 pt-2 pb-3 flex flex-wrap items-center justify-center md:justify-start rounded-lg w-full text-white">
|
||||
Send
|
||||
<select id="from" name="from"
|
||||
class="block w-full md:inline-block md:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500 dark:bg-blue-900 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
|
||||
<option value="Select a connector">From</option>
|
||||
{{#get "tags" limit="all" include='count.posts' order='count.posts desc'
|
||||
filter="slug:-[features,developers,careers,blog,tutorials]"}}
|
||||
{{#foreach tags }}
|
||||
<option value="{{name}}">{{name}}</option>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</select>
|
||||
to
|
||||
<select id="to" name="to"
|
||||
class="block w-full md:inline-block md:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500 dark:bg-blue-900 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
|
||||
<option value="Select a connector">To </option>
|
||||
{{#get "tags" limit="all" include='count.posts' order='count.posts desc'
|
||||
filter="slug:-[features,developers,careers,blog,tutorials]"}}
|
||||
{{#foreach tags }}
|
||||
<option value="{{name}}">{{name}}</option>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
</select>
|
||||
<button class="mt-1" onclick="clearSelection()" id='clearbutton' style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex items-center w-default mt-4 text-white"></div>
|
||||
<div class="w-default pt-10 grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{{#get "tags" limit="all" include='count.posts' order='count.posts desc'
|
||||
filter="slug:-[features,developers,careers,blog,tutorials]"}}
|
||||
{{#foreach tags }}
|
||||
<div class="group dark:text-gray-200 text-gray-600 p-2 flex flex-col sm:flex-row prose-blue prose-nounderline prose prose-sm dark:prose-dark max-w-none
|
||||
shadow-sm hover:shadow-xl transition-shadow dark:bg-gray-900 bg-white rounded-xl col-span-1 connector-card connector-{{name}}
|
||||
">
|
||||
<div class="flex flex-shrink-0 items-center justify-center mx-6">
|
||||
<img class="mx-auto h-32 w-32 transition-transform transform group-hover:scale-110 object-contain"
|
||||
src="{{feature_image}}">
|
||||
</div>
|
||||
<div class="flex-grow flex flex-col justify-between text-center sm:text-left p-4">
|
||||
<h2 class="w-full mt-4">
|
||||
{{name}}
|
||||
</h2>
|
||||
<p>{{description}}</p>
|
||||
<h3>
|
||||
<a href="{{url}}" class="no-underline flex items-center justify-center sm:justify-start">
|
||||
<span class="no-underline">Tutorials</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="ml-2 h-6 w-6 transition-opacity opacity-0 group-hover:opacity-100" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
{{/foreach}}
|
||||
{{/get}}
|
||||
|
||||
<div
|
||||
class="group dark:text-gray-200 text-gray-600 p-2 col-span-2 tip-card flex flex-col justify-center items-center my-10 dark:bg-gray-900 bg-white rounded-xl shadow-xl py-10"
|
||||
id='tipcontainer' style="display: none;">
|
||||
<div class="prose-blue prose prose-sm dark:prose-dark max-w-none">
|
||||
<h3 id="tip-text">Speckle allow you to send data from Rhino to Revit, and basically sketch shit in one.</h3>
|
||||
</div>
|
||||
<div class="my-4">
|
||||
{{> ctaButton}}
|
||||
</div>
|
||||
<div class="prose prose-sm dark:prose-dark">
|
||||
<p>For the full details, check our list of <a href="https://speckle.guide/user/support-tables.html">supported
|
||||
elements</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
document.getElementById('from').addEventListener('change', fromSelect)
|
||||
document.getElementById('to').addEventListener('change', toSelect)
|
||||
|
||||
let selection = [null, null]
|
||||
|
||||
function fromSelect(event) {
|
||||
selection[0] = event.target.value
|
||||
filterCards()
|
||||
}
|
||||
|
||||
function toSelect(event) {
|
||||
selection[1] = event.target.value
|
||||
filterCards()
|
||||
}
|
||||
|
||||
function clearSelection() {
|
||||
selection[0] = null
|
||||
selection[1] = null
|
||||
document.getElementById('from').value = 'Select a connector'
|
||||
document.getElementById('to').value = 'Select a connector'
|
||||
filterCards()
|
||||
document.getElementById('clearbutton').style.display = 'none'
|
||||
document.getElementById('tipcontainer').style.display = 'none'
|
||||
}
|
||||
|
||||
function filterCards() {
|
||||
console.log(tips[selection[0] + selection[1]])
|
||||
|
||||
|
||||
if (selection[0] === 'Select a connector' || !selection[0]) {
|
||||
[].forEach.call(document.getElementsByClassName(`connector-card`), el => el.style.display = 'flex')
|
||||
return
|
||||
}
|
||||
document.getElementById('clearbutton').style.display = 'flex'
|
||||
|
||||
;[].forEach.call(document.getElementsByClassName(`connector-card`), el => el.style.display = 'none')
|
||||
|
||||
document.getElementsByClassName(`connector-${selection[0]}`)[0].style.display = 'flex'
|
||||
|
||||
if (selection[1] === 'Select a connector' || !selection[1]) return
|
||||
document.getElementsByClassName(`connector-${selection[1]}`)[0].style.display = 'flex'
|
||||
|
||||
if (tips[selection[0] + selection[1]]) {
|
||||
document.getElementById('tip-text').innerHTML = tips[selection[0] + selection[1]]
|
||||
} else {
|
||||
document.getElementById('tip-text').innerHTML = 'Do you use this workflow? Let us know on the <a href="https://speckle.community">community forum</a>!'
|
||||
}
|
||||
document.getElementById('tipcontainer').style.display = 'flex'
|
||||
}
|
||||
|
||||
const tips = {
|
||||
'GrasshopperExcel': `TIP TODO`,
|
||||
'ExcelRevit': `So you want to control properties of specific Revit elements from Excel? Yes you can.`,
|
||||
'RevitExcel': `Scheduling much? Let Speckle help!`,
|
||||
'ExcelExcel': `Excel to Excel workflows work quite well - especially for a distributed team!`,
|
||||
'ExcelRhino': `You can actually create full on geometry and BIM elements from Excel, send them to Speckle, and receive them in Rhino.`,
|
||||
'ExcelGrasshopper': `You can actually create full on geometry and BIM elements from Excel, send them to Speckle, and receive in Grasshopper.`,
|
||||
'ExcelDynamo': `You can actually create full on geometry and BIM elements from Excel, send them to Speckle, and receive them in Dynamo.`,
|
||||
'ExcelBlender': `You can actually create full on geometry and BIM elements from Excel, send them to Speckle, and receive them in Blender.`,
|
||||
'ExcelAutocad': `You can actually create full on geometry and BIM elements from Excel, send them to Speckle, and receive them in Autocad.`,
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -3,7 +3,7 @@
|
||||
class="perspective-transform w-full md:w-2/3 lg:w-1/2 mx-auto dark:bg-gray-900 bg-gray-200 prose lg:prose-lg dark:prose-dark max-w-none text-center rounded-t-3xl pt-10 pb-6 mt-10 -mb-12">
|
||||
<div class="px-4">
|
||||
<h1><span class='text-blue-500'>Speckle</span> Connectors</h1>
|
||||
{{#get "posts" filter="primary_tag:features+featured:true+title:'Interoperability'" limit="5"}}
|
||||
{{#get "posts" filter="primary_tag:features+featured:true+title:'Speckle Connectors'" limit="1"}}
|
||||
{{#foreach posts}}
|
||||
<p class="pb-4">{{excerpt}}</p>
|
||||
{{/foreach}}
|
||||
@@ -38,13 +38,6 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{!-- unccomment in stage 2 --}}
|
||||
{{!-- <div
|
||||
class="swiper-slide group p-2 bg-white h-full rounded-xl text-center content-center flex flex-wrap justify-center h-auto">
|
||||
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
Check out all our connectors!
|
||||
</p>
|
||||
</div> --}}
|
||||
|
||||
<div
|
||||
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center"
|
||||
@@ -55,6 +48,15 @@
|
||||
Revit
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{!-- unccomment in stage 2 --}}
|
||||
<div
|
||||
class="swiper-slide group p-2 bg-white dark:bg-gray-800 rounded-xl text-center content-center flex flex-wrap justify-center h-auto">
|
||||
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<a href="/features/connectors">Check out all our connectors!</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center">
|
||||
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110"
|
||||
@@ -122,7 +124,7 @@
|
||||
|
||||
<div class="relative">
|
||||
<div class="w-default mx-auto pb-10 space space-y-4 mt-20">
|
||||
{{#get "posts" filter="primary_tag:features+featured:true+title:-'Interoperability'" limit="5"}}
|
||||
{{#get "posts" filter="primary_tag:features+featured:true+title:-'Speckle Connectors'" limit="5"}}
|
||||
{{#foreach posts}}
|
||||
<div class="px-4 flex flex-col md:flex-row group">
|
||||
<a href="{{url}}"
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
<div class="relative w-default container mb-10 mx-auto mt-4 sm:mt-10 md:mt-5 opacity-75">
|
||||
<div class="text-gray-500 text-center text-xs w-full mb-10">
|
||||
Seen in the wild at
|
||||
</div>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-gray-500 dark:text-gray-600">
|
||||
{{!-- Arup --}}
|
||||
<div class="p-3 h-20 flex items-center justify-center">
|
||||
<svg viewBox="0 0 1430 496" class="w-24 h-24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M668.627 0C532.213 0 420.774 111.436 420.774 247.852s111.439 247.854 247.853 247.854c136.416 0 247.854-111.441 247.854-247.854S805.043-.001 668.627-.001zm0 475.212c-125.527 0-227.999-101.832-227.999-228s101.832-227.998 228-227.998c125.528 0 228 101.83 228 227.999 0 126.167-103.114 227.999-228 227.999zm-468.17-251.055c-90.298-16.012-158.825-35.225-158.825-100.55 0-64.045 59.561-103.753 142.18-103.753 69.167 0 125.527 29.46 157.549 71.73l17.292-10.248C323.427 33.303 261.3-.001 184.447-.001 89.663 0 21.776 47.393 21.776 123.606c0 78.135 76.213 102.472 176.762 119.764 91.585 16.012 161.394 40.346 161.394 114.637 0 72.372-67.889 116.564-162.674 116.564-80.056 0-144.74-37.145-179.325-89.662L0 395.794c37.786 58.921 108.236 99.27 195.977 99.27 106.315 0 183.168-51.877 183.168-137.057 0-87.098-76.853-115.918-178.685-133.85h-.003zm800.561-185.73h.642l192.776 451.516h21.775l191.495-451.516h.636v451.516h21.145V5.763h-32.027l-191.494 456h-.64l-194.06-456h-30.1V489.3h19.854V38.427h-.002z" fill="#888" fill-rule="nonzero"/></svg>
|
||||
</div>
|
||||
{{!-- Woods B --}}
|
||||
<div class="p-3 h-20 text-center align-center flex items-center justify-center">
|
||||
<svg class="w-24 h-24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 1212 503"><defs/><path fill="gray" fill-rule="nonzero" d="M1141.9 76.6h61.7c-.3-53.7-47.8-76.6-95-76.6-44.6 0-96.7 20.5-96.7 72.3 0 43.7 35.7 58.9 69.5 68.5 34.1 9.6 68.2 13.6 68.2 34.4 0 17.7-19.2 24.2-37.8 24.2-26.4 0-43.7-9-45-36.9h-62c.3 60.8 48.7 84.7 103 84.7 52 0 103.5-19.3 103.5-79.4 0-42.8-34.7-59-68.8-68.6-34.7-9.6-68.9-13-68.9-31.3 0-15.5 16.8-20.1 30.1-20.1 19 0 39 7 38.2 28.8m-137.4 46.2C1004.5 49.3 960.8 5 888.2 5h-102v237.5h102c72 0 116.3-41.9 116.3-119.7m-61.7-.3c0 47.4-18.6 65.7-65.5 67h-29.1V58.3h29.1c41.9 0 65.5 20.8 65.5 64.2M779 123.7C779 55 736.8 0 661.8 0c-74.7 0-117.2 54.9-117.2 123.7 0 68.9 42.2 123.8 117.2 123.8S779 192.5 779 123.7m-62 0c0 35.4-15.2 70.4-55.2 70.4s-55.2-35.3-55.2-70.4c0-35.3 15.2-70.4 55.2-70.4s55.2 35 55.2 70.4m-176.8 0C540.2 55 498.1 0 423.3 0c-74.7 0-117.2 54.9-117.2 123.7 0 68.9 42.2 123.8 117.2 123.8 74.8 0 117-55 117-123.8m-62 0c0 35.4-15.3 70.4-55.3 70.4s-55.2-35.3-55.2-70.4c0-35.3 15.2-70.4 55.2-70.4s55.2 35 55.2 70.4M259 242.5L320.4 5h-62l-33.6 173.6h-.6L189.2 5h-58l-35 173.6h-.7L62 5H0l60.2 237.5h63l36.5-163.7h.6L197 242.5h62zm-86.6 17.4H61.1v237.5h114.1c50.9 0 92.4-17.3 92.4-73.8a56 56 0 00-40.9-56.1 53.6 53.6 0 0031.3-48c0-49.7-45-60.2-85.6-59.6m-49.3 133.3h49.6c18.7 0 33.2 6.8 33.2 28 0 19.5-13.6 26.6-33.2 26.6h-49.6v-54.6zm47.8-85.6c13 0 25.4 5.6 25.4 23 0 16.7-14.6 22.6-25.4 22.6H123v-45.6H171zM342.7 260L254 497.4h63.6l14.9-42.5h82.8l14.5 42.5h64.5L405.6 260h-62.9zm4 148.8l27-83h.6l26.4 83h-54zm123.5-30c0 68.8 46.5 123.7 118.4 123.7 22 0 50-8 66-31l3.8 26h40v-130h-99.9v46h43.1c-3.4 21.7-23.8 36-54.5 36-40 0-55.2-35.4-55.2-70.4 0-35.4 15.2-70.4 55.2-70.4 24.8 0 45 12.4 46.8 32.5h61.7c-5.6-59.5-58.3-85.9-107.3-85.9-71.6-.3-118.1 54.6-118.1 123.5m232 0c0 68.8 42.1 123.7 117.1 123.7 74.8 0 117.3-54.9 117.3-123.7 0-68.9-42.2-123.8-117.3-123.8-75 0-117.2 54.9-117.2 123.8m62 0c0-35.4 15.2-70.4 55.2-70.4s55.2 35.3 55.2 70.4c0 35.3-15.1 70.3-55.2 70.3-40 0-55.2-35-55.2-70.3M927 313.2h70.7v184.2h62V313.2h70.7V260H927v53.3zM1128 455h-34.2v4.7h14.3v37.8h5.5v-37.8h14.3v-4.7zm9.5 0h-7.7v42.5h5.2v-35.3l13.4 35.3h5l13.3-35.3v35.3h5.2V455h-7.7l-13.3 35.7-13.4-35.7z"/></svg>
|
||||
</div>
|
||||
{{!-- HOK --}}
|
||||
<div class="p-3 h-20 text-center align-center flex items-center justify-center opacity-75">
|
||||
<svg class="w-14 h-16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 558 558"><defs/><path fill="gray" fill-rule="nonzero" d="M0 0h557.2v557.2H0z"/><path fill="#fff" fill-rule="nonzero" d="M87.4 11.8h20.3v309.4H87.4V333h83.2v-11.8h-21.7v-91.9c8-12.8 34.2-28.2 50.9-28.2 10.7 0 20.4 8.7 20.4 23.6v96.5H201V333h83.2v-11.8h-22.8V217.4c0-12-8.2-33.1-38.1-34.2-33.5-1.1-62.8 21.8-70 28.5-2.7 2.5-4.4.7-4.4-1.3V0H87.4v11.8zM280.9 245.1h34.8v-34.8h13.5v34.8h34.9v13.6h-34.9v34.7h-13.5v-34.7H281V245z"/><path fill="#fff" fill-rule="nonzero" d="M425 262.2l-.2 59h21.6V333h-83.2v-11.8h20.3V12h-20.3V0h61.6v244.6c0 2.2 2 3.3 4.3 1.4l67.4-54.5h-22.2v-11.8h68.4v11.8h-19c-7.9 0-19.8 6.3-26.4 11.7-8.4 7-15.7 12.8-15.7 12.8l64 105.2h11.6V333h-83v-11.8h21l-47.3-77.7-23 18.7z"/><path fill="#fff" d="M266 161.8c-49.4.1-84.2-34.1-84.2-75 0-40.7 34.8-75 84.3-75 49.4 0 84.2 34.3 84.2 75 0 40.9-34.8 75.1-84.2 75zm-39.5-75c0 56.6 16.6 63.4 39.6 63.7 23-.3 39.7-7.1 39.5-63.7.2-56.5-16.5-63.3-39.5-63.6-23 .3-39.7 7.1-39.6 63.6z"/></svg>
|
||||
</div>
|
||||
{{!-- Royal --}}
|
||||
<div class="p-3 h-20 text-center align-center flex items-center justify-center">
|
||||
<svg class="w-36 h-36" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 1280 469"><defs/><path fill="#848484" fill-rule="nonzero" d="M327.1 205.4h26.7c30.1 0 44.3 8.4 44.3 34.2 0 16-5.6 25.4-17 30.1l21.2 36.3v.4h-10.7c-7.1 0-10 0-13.6-6l-15.6-26.6h-16.9v32.6h-18.4v-101zm27.7 15.2h-9.3v38h9.3c16.4 0 24-3.7 24-19 0-15.4-7.6-19-24-19M445.6 230.9c23 0 34.7 12.1 34.7 38.5s-11.8 38.5-34.7 38.5c-23 0-34.7-12.1-34.7-38.5s11.7-38.5 34.7-38.5m0 63.1c11.4 0 16.6-7.7 16.6-24.6 0-16.9-5.2-24.6-16.6-24.6-11.6 0-16.6 7.7-16.6 24.6 0 16.9 5 24.6 16.6 24.6M503.8 332.5l9.8-26-27.6-73.7v-.5h16.8l12.9 35.8c2.8 7.8 4.6 13.8 6.2 20.6h.3a184 184 0 016.1-20.6l13-35.8h17.4v.5L523 327.7c-2 5.3-6.8 5.3-14 5.3h-5.3v-.5zM630 256v50.4h-4.2a30.2 30.2 0 01-9.7-5c-4.5 3.9-10.9 6.5-22.1 6.5-18.7 0-28.3-7-28.3-24.6 0-17.5 9.6-24.4 28.9-24.4 7 0 13 1.2 18 2.7v-4c0-9.5-3.8-12-16.8-12-8.7 0-16 1.1-24.5 2.8l-1.6-14.3a121 121 0 0129.2-3.2c21.5 0 31 7 31 25.2m-17.4 34.6v-16.6c-4.3-1.1-9-1.9-15.7-1.9-10 0-13 4.6-13 11.1 0 6.7 3 11.3 13 11.3 7.2 0 12-2 15.7-3.9M649.6 290.3v-70.6c0-7 0-11.5 17.5-15.8v81.8c0 4.9 2.2 6.2 5.6 6.2 2 0 3.4-.1 5-.3l.6 14.3c-3.5.8-8.4 1.3-13.6 1.3-9.4 0-15.1-4.9-15.1-16.9M381 398.4h-35.5V442h-18.4V340.9h18.4V383H381V341h18.4v101H381v-43.5zM482 391.6V442H478a31.2 31.2 0 01-9.8-5c-4.4 3.8-10.8 6.4-22 6.4-18.8 0-28.4-7-28.4-24.6 0-17.5 9.6-24.4 29-24.4a61 61 0 0117.8 2.7v-4c0-9.5-3.7-12-16.7-12-8.6 0-15.9 1.1-24.5 2.8l-1.6-14.3c9-1.9 16.2-3.2 29.2-3.2 21.5 0 31.1 7 31.1 25.2m-17.5 34.7v-16.7a57 57 0 00-15.7-1.9c-9.9 0-13 4.6-13 11.1 0 6.7 3.1 11.3 13 11.3 7.3 0 12-2 15.7-3.8M498.7 440.2l1.6-14c8.6 1.7 14.4 2.7 23 2.7 10 0 15.4-2 15.4-7.7 0-6.4-10-7.7-19-9.8-8.7-2-19.9-4.9-19.9-22.2 0-14.7 9-22.8 28.6-22.8 11.3 0 18.1 1.3 25.7 3.2l-1.6 14a86.7 86.7 0 00-21-2.7c-10 0-13.9 2-13.9 7.4 0 6.7 8.5 7.7 17.5 10 8.8 2.4 21.4 5 21.4 21.7 0 15.3-10.4 23.4-30.1 23.4a108 108 0 01-27.7-3.2M574 355.3c0-7 0-11.6 17.5-16V442H574v-86.7zm42.3 12.5h20.2v.5l-23.1 34 23.7 39.2v.5h-11c-4.4 0-9.3 0-13.2-6.4l-19.5-32.2 23-35.6zM679.8 366.4c23 0 34.7 12.1 34.7 38.5s-11.7 38.5-34.7 38.5c-23 0-34.7-12.1-34.7-38.5s11.7-38.5 34.7-38.5m0 63.1c11.4 0 16.6-7.7 16.6-24.6 0-16.9-5.2-24.6-16.6-24.6-11.6 0-16.6 7.7-16.6 24.6 0 16.9 5 24.6 16.6 24.6M731.4 367.8h4.1a34 34 0 017.7 3.6c4.6-3 11.5-5 21-5 19.8 0 29.4 7 29.4 30V442h-17.5v-43c0-14-3.6-17.8-13.6-17.8a30 30 0 00-13.6 3V442h-17.5v-74.2zM813.2 340.9h17.5v17.8h-17.5v-17.8zm0 27h17.5v74h-17.5v-74zM851.2 367.8h4.1c3.4 1.2 5.7 2.3 7.7 3.6 4.6-3 11.4-5 21-5 19.8 0 29.4 7 29.4 30V442H896v-43c0-14-3.7-17.8-13.6-17.8-6.1 0-10.2 1.3-13.6 3V442h-17.5v-74.2zM929.4 403.4c0-29.3 10.7-37 30.4-37 9.7 0 16.5 2 21 5 2.1-1.3 4.4-2.4 7.8-3.6h4.1v75.5c0 18-9.6 25.2-31.1 25.2a120 120 0 01-29.2-3.3L934 451a126 126 0 0024.5 2.7c13 0 16.7-2.4 16.7-11.9v-5.5c-4 2.7-9.2 3.9-15.4 3.9-19.7 0-30.4-7.7-30.4-36.8m45.8 19.1v-38.3c-3.4-1.7-7.7-3-13.6-3-10 0-14 3.8-14 22.2 0 18.1 4 22 14 22 6 0 10.2-1.4 13.6-2.9M1015 340.9h30.5c30 0 45.5 15.8 45.5 50.5 0 34.6-15.4 50.6-45.5 50.6h-30.6V340.9zm31.5 15.2h-13.2v70.6h13.2c16.3 0 25.2-11.1 25.2-35.3 0-24.3-8.9-35.3-25.2-35.3M1163.8 398.4h-35.4V442H1110V340.9h18.4V383h35.4V341h18.4v101h-18.4v-43.5zM1196.5 341.3v-.4h19.2l16 54.5c2.8 9.4 4.9 19.1 6.2 26h.3c1.2-6.9 3.3-16.6 6-26l14.6-48.6c1.6-5.3 7.1-6 14.2-6h6.4v.5L1247.7 442h-19.4l-31.8-100.7zM211.4 217.1l-60 51 17.2-99L79 86.3 178 115C103.8 29.1 0 46.7 0 46.7s25.2 86.9 121.1 126.9c-31.3 54.8-25.8 111.4-3.5 167.3l92-82.6c4 4.8 11.1 12 24.9 17.5a67.2 67.2 0 0050 .3l-73.1-59z"/><path fill="#848484" fill-rule="nonzero" d="M0 46.7s25.2 86.9 121.1 126.9c-31.3 54.8-25.8 111.4-3.5 167.3l92-82.6c4 4.8 11.1 12 24.9 17.5a67.3 67.3 0 0050 .3l-73.1-59-60 51 17.2-99L79 86.3 178 115A202.7 202.7 0 0023 45.2c-14.2 0-23 1.5-23 1.5zM232.4 89.1L243 3.7a59 59 0 00-62.4 13.6 58.4 58.4 0 000 82.7l10.8-62 35.7 91 65.4 18.8-43.8 37.7C335 177.2 370 114.2 370 114.2l-137.5-25z"/><g transform="translate(-2886.4 -1731.7) scale(8.33333)"><clipPath id="a"><path d="M368 209.9a7 7 0 000 10l1.3-7.5 4.3 10.9 7.9 2.2-5.3 4.6c10.4-1 14.6-8.6 14.6-8.6l-16.5-3 1.2-10.3c-.8-.3-1.7-.4-2.5-.4a7 7 0 00-5 2z" clip-rule="nonzero"/></clipPath><g clip-path="url(#a)"><path fill="#848484" d="M365.2 207.2h25.6V230h-25.6z"/></g></g></svg>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 text-gray-500 dark:text-gray-600">
|
||||
{{!-- BIG --}}
|
||||
<div class="p-3 h-20 text-center align-center flex items-center justify-center">
|
||||
<svg class="w-20 h-20" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 1111 504"><defs/><path fill="#8d8d8d" fill-rule="nonzero" d="M705.9 503.5V0h404.8v98.7h-306v306h207.2V301.2h-98.7v-98.7h197.5v301.1H705.9zm-197.5 0V0h93.8v503.5h-93.8zm-306-301.1V98.7H98.7v103.7h103.7zM306 404.8V301H98.7v103.7h207.4zM0 503.5V0h301l1.3 100 1.3 100 50.6 1.3 50.6 1.4v300.8H0z"/></svg>
|
||||
</div>
|
||||
{{!-- Sasaki --}}
|
||||
<div class="p-3 h-20 text-center align-center flex items-center justify-center">
|
||||
<svg class="w-24 h-36" viewBox="0 0 1756 459" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><g fill-rule="nonzero"><g fill="#a7a7a7"><path d="M92.083 177.339l41.86 25.81-32.294 52.822-41.854-25.81c-1.596-.803-3.985-2.404-7.177-4.803-24.713-17.606-40.858-41.615-48.434-72.029-7.97-33.61-2.987-65.021 14.953-94.233 17.935-29.211 43.45-47.82 76.537-55.824 31.491-6.803 60.393-3.003 86.702 11.406l7.172 3.601 46.044 28.813-32.887 52.817-46.044-28.21c-1.192-1.201-3.387-2.603-6.574-4.204-12.758-5.6-26.114-6.803-40.064-3.6-15.945 3.6-28.703 12.807-38.269 27.61-8.767 15.605-11.161 31.41-7.176 47.42 3.191 13.202 10.164 24.409 20.927 33.61.399.4.997.904 1.795 1.502a31.527 31.527 0 002.694 1.8c.992.599 1.69 1.103 2.09 1.502zM572.839 174.94v279.706H510.65V174.94h62.189zM386.872 454.646h-61.586V174.94h61.586v279.706zM845.502 233.762c26.31 18.807 42.653 44.214 49.032 76.228 6.379 32.01 1.197 62.024-15.546 90.033-11.56 18.808-26.807 33.312-45.745 43.516-18.932 10.204-38.967 15.306-60.093 15.306-20.33 0-39.466-4.603-57.401-13.805-1.596-1.202-3.99-2.598-7.177-4.2l-46.044-28.812 32.289-52.822 46.044 28.214c.798.4 3.386 1.8 7.775 4.2 13.551 6.004 27.8 6.703 42.753 2.1 14.947-4.6 26.408-13.507 34.378-26.709 8.374-13.206 11.262-27.41 8.673-42.617-2.593-15.207-9.665-27.61-21.226-37.212-3.192-2.404-5.78-4.204-7.776-5.406l-41.256-25.805 32.289-52.822 41.855 25.81c3.191 2.399 5.58 4 7.176 4.803zM1235.366 174.94v279.706h-62.188V174.94h62.188zM1049.404 454.646h-61.59V174.94h61.59v279.706zM1500.26 149.728l-43.655-43.815L1560.653 1.471l43.65 43.82-104.043 104.437zM1604.303 415.03l-43.65 43.815-104.048-104.437 43.655-43.82 104.043 104.443zM1325.056 455.244V5.072h61.59v450.172h-61.59zM1755.582 454.646h-61.59V229.557h61.59v225.089z"/></g><g fill="#959595"><path d="M182.975 233.762c26.308 18.807 42.652 44.214 49.031 76.228 6.38 32.01 1.197 62.024-15.546 90.033-11.56 18.808-26.812 33.312-45.745 43.516-18.937 10.204-38.967 15.306-60.093 15.306-20.33 0-39.466-4.603-57.406-13.805-1.59-1.202-3.985-2.598-7.172-4.2L0 412.029l32.289-52.822 46.044 28.214c.798.4 3.386 1.8 7.77 4.2 13.556 6.004 27.805 6.703 42.758 2.1 14.947-4.6 26.408-13.507 34.378-26.709 8.374-13.206 11.262-27.41 8.673-42.617-2.593-15.207-9.67-27.61-21.226-37.212-3.192-2.404-5.78-4.204-7.776-5.406l-41.26-25.805 32.293-52.822 41.855 25.81c3.187 2.399 5.58 4 7.177 4.803zM572.839 124.517v50.423H510.65v-50.423c0-17.207-5.98-31.91-17.94-44.114-11.96-12.205-26.508-18.31-43.65-18.31s-31.79 6.105-43.95 18.31c-12.159 12.204-18.238 26.907-18.238 44.114v50.423h-61.586v-50.423c0-34.414 12.055-63.72 36.174-87.93C385.58 12.375 414.776.275 449.06.275c34.284 0 63.485 12.1 87.6 36.314 24.119 24.209 36.179 53.515 36.179 87.929zM510.65 258.37v61.824H386.872V258.37H510.65zM754.611 177.339l41.86 25.81-32.289 52.822-41.86-25.81c-1.59-.803-3.985-2.404-7.172-4.803-24.717-17.606-40.862-41.615-48.438-72.029-7.97-33.61-2.987-65.021 14.953-94.233 17.935-29.211 43.45-47.82 76.537-55.824 31.49-6.803 60.393-3.003 86.702 11.406l7.177 3.601 46.039 28.813-32.887 52.817-46.04-28.21c-1.196-1.201-3.39-2.603-6.578-4.204-12.758-5.6-26.11-6.803-40.064-3.6-15.945 3.6-28.703 12.807-38.269 27.61-8.768 15.605-11.162 31.41-7.177 47.42 3.192 13.202 10.17 24.409 20.933 33.61.399.4.992.904 1.79 1.502a31.527 31.527 0 002.693 1.8c.998.599 1.696 1.103 2.09 1.502zM1235.366 124.517v50.423h-62.188v-50.423c0-17.207-5.98-31.91-17.94-44.114-11.955-12.205-26.508-18.31-43.65-18.31s-31.79 6.105-43.95 18.31c-12.154 12.204-18.234 26.907-18.234 44.114v50.423h-61.59v-50.423c0-34.414 12.06-63.72 36.174-87.93 24.12-24.213 53.321-36.313 87.6-36.313 34.284 0 63.485 12.1 87.6 36.314 24.119 24.209 36.178 53.515 36.178 87.929zM1173.178 258.37v61.824h-123.774V258.37h123.774zM1463.782 186.341c-11.96 12.005-17.94 26.613-17.94 43.82s5.98 31.81 17.94 43.815l36.478 36.612-43.655 43.82-36.473-36.618c-16.743-16.802-27.905-37.012-33.486-60.622v-54.02c5.98-24.408 17.142-44.617 33.486-60.622l36.473-36.613 43.655 43.815-36.478 36.613zM1755.582 229.557h-61.59V4.474h61.59v225.083z"/></g></g></svg>
|
||||
</div>
|
||||
{{!-- WSP --}}
|
||||
<div class="p-3 h-20 mt-3 text-center align-center flex items-center justify-center">
|
||||
<svg class="w-24 h-24" viewBox="0 0 934 439" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M869.754 119.438c0-49.823-18.238-91.387-42.05-118.618h69.215c22.719 27.682 36.76 74.771 36.76 118.618v.156c0 43.92-14.077 91.084-36.866 118.753h-69.216c23.848-27.232 42.157-68.845 42.157-118.753v-.156zM63.824 0H0l87.594 237.559h33.922l14.953-40.557L63.824 0zm171.229 0h-63.825l87.594 237.559h33.923l14.953-40.557L235.053 0zm487.554 438.944V.01h-61.07v438.934h61.07zM383.094 36.055c.988-12.17 3.21-24.158 8.256-35.235h55.845c-4.657 8.431-9.032 23.795-4.057 39.063 4.515 13.797 14.04 23.21 26.07 30.96 14.288 9.183 30.904 14.295 46.179 21.424 16.051 7.458 31.644 15.269 45.05 26.903 19.473 16.906 31.327 36.961 33.232 62.88.247 3.097.353 6.205.353 9.317 0 16.238-2.576 32.332-9.808 46.98h-57.362c5.645-9.596 10.09-22.677 9.278-34.75-2.01-29.93-38.558-46.288-69.18-59.905-4.656-2.078-9.243-4.117-13.617-6.156-13.441-6.293-26.67-13.518-38.136-23.054-11.853-9.85-20.884-19.713-26.388-34.177-4.868-12.693-6.632-26.455-5.997-39.984.07-1.422.177-2.844.282-4.266" fill="#848484" fill-rule="nonzero"/></svg>
|
||||
</div>
|
||||
<div class="p-3 h-20 text-center align-center flex items-center justify-center">
|
||||
{{!-- Grimshaw --}}
|
||||
<svg class="w-36 h-36" viewBox="0 0 2212 274" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M154.81 41.668c-31.608.284-55.725 9.417-72.583 27.325C65.21 87.002 56.61 109.802 56.61 137.602c0 27.608 8.175 49.933 24.5 67.083 16 18.017 38.525 27.158 67.45 27.35 14.767 0 26.617-1.225 35.767-3.783v-68.967H126.86v-41.758h109.375v142.591c-28.942 8.567-58.192 13.1-87.675 13.659-44.5 0-80.042-11.017-106.725-32.975C14.193 219.21.227 186.135-.007 141.46 1.802 48.168 51.335 1.052 148.56.002c30.525.3 57.025 3.975 79.533 11.041L224.66 55.81c-22.808-9.442-46.058-14.142-69.85-14.142M1831.75 4.542h57l50.442 211.566h.775l46.2-211.566h73.675l47.758 211.566h.75l50.833-211.566h52.809l-70.659 264.708h-69.8L2022.608 57.6h-.766l-48.075 211.65h-70.259L1831.75 4.542zM358.47 117.528h17.867c6.966 0 13.958-.466 20.958-1.408 6.7-.85 12.8-2.55 18.225-4.992 5.425-2.541 9.975-6.225 13.542-11.041 3.175-5.084 4.7-11.484 4.7-19.209 0-8.208-1.525-14.608-4.7-19.416-3.567-4.525-8.109-8.009-13.542-10.267-5.425-2.258-11.525-3.775-18.225-4.533-7-.284-13.992-.375-20.958-.375H358.47v71.241zM304.178 4.545h58.584c14.966 0 30 .192 44.983.367 15.008.775 28.708 3.308 41.117 7.641 12.716 4.059 22.766 11.117 30.316 21.209 7.217 9.8 11 24.033 11.234 42.5 0 15.65-4.9 29.116-14.767 40.516-9.8 11.409-23.5 18.384-41.092 20.834v.85c7.234.658 13.167 3.858 17.842 9.416 4.675 5.575 8.275 11.517 10.867 17.9l43.45 103.475h-60.509l-32.608-82.75c-3.392-9.791-7.617-16.941-12.825-21.191-5.4-4.042-13.692-6.017-24.833-6.017H358.47v109.958h-54.292V4.545z" fill="gray" fill-rule="nonzero"/><path fill="gray" d="M556.776 4.545h54.3v264.708h-54.3z"/><path d="M692.512 4.542h86.991l64.4 200.633h.734L909.103 4.542h86.867V269.25h-51.933V50.9h-.825l-72.934 218.35H818.27L745.337 50.9l-.767.75v217.6h-52.058V4.542zM1162.84 41.677c-4.683 0-9.325.566-13.992 1.608-4.925 1.025-9.575 2.908-13.991 5.65-4.142 2.525-7.609 6.3-10.5 11.392-2.784 4.8-4.209 10.933-4.209 18.183 0 5.475 1.784 10.183 5.434 14.042 3.633 3.775 8.158 7.266 13.566 10.183a173.914 173.914 0 0019.434 8.383c6.708 2.825 13.8 5.65 21.316 8.675 7.5 2.825 14.75 6.109 21.734 9.884 7.216 4.066 13.566 8.958 19 14.8 5.441 5.558 9.966 12.25 13.583 20.083 3.117 8.1 4.658 17.808 4.658 29.208-.516 28.55-10.466 48.992-29.85 61.442-19.408 12.342-43.3 18.575-71.783 18.575-13.95 0-25.767-1.058-35.325-3.025a898.998 898.998 0 01-34.167-7.25l5.067-47.8c19.142 10.65 39.542 16.125 61.292 16.325 11.108 0 21.875-2.833 32.241-8.292 10.284-5.566 15.592-14.233 15.834-25.825 0-6.241-1.542-11.783-4.584-16.3-3.65-4.533-8.2-8.3-13.608-11.316-11.875-6.142-25.5-11.975-40.708-17.525-7.55-3.025-14.634-6.6-21.367-10.559-7.017-3.766-13.475-8.3-19.367-13.666-5.516-5.559-10.016-12.25-13.616-20.167-3.625-7.825-5.459-16.967-5.459-27.517.542-29.408 10.492-50.416 29.934-63.041 18.541-11.875 40.191-17.825 64.75-17.825 23.275 0 44.875 3.216 64.808 9.533l-5.058 43.533c-17.309-7.341-35.725-11.108-55.067-11.391M1295.89 4.542h54.342v106.95h108.608V4.542h54.35V269.25h-54.35v-116.1h-108.608v116.1h-54.342V4.542zM1693.24 57.598h-.825l-39.175 109.217h79.142L1693.24 57.598zM1663.332 4.54h61.333l106.267 264.708h-60.125l-23.3-60.691h-109.784l-23.666 60.691h-56.234L1663.332 4.54z" fill="gray" fill-rule="nonzero"/></svg>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
+1
-1
@@ -3,7 +3,7 @@
|
||||
|
||||
{{!-- Actual navbar --}}
|
||||
<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-20">
|
||||
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">
|
||||
|
||||
|
||||
@@ -29,6 +29,11 @@ collections:
|
||||
tempate: careers
|
||||
filter: tag:careers
|
||||
data: tag.careers
|
||||
|
||||
/tutorials/:
|
||||
permalink: /tutorials/{slug}/
|
||||
filter: tag:tutorials
|
||||
data: tag.tutorials
|
||||
|
||||
# Note: root is disabled
|
||||
# /:
|
||||
|
||||
@@ -1,33 +1,67 @@
|
||||
{{!< default}}
|
||||
{{!< default}} {{#tag}} <div x-data="{ docsLink: null, sourceLink: null, videoLink:null }"
|
||||
x-init="
|
||||
docsLink = window.docsLink; sourceLink = window.sourceLink; videoLink = window.videoLink;
|
||||
if( videoLink ) document.getElementById('tagvideo').src = videoLink;">
|
||||
|
||||
<div>
|
||||
|
||||
{{#tag}}
|
||||
|
||||
<main class="h-screen/4 flex flex-wrap content-center mx-auto max-w-5xl px-10 lg:px-24 sm:mt-24">
|
||||
<div class="w-3/3 text-center">
|
||||
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-gray-100 sm:text-5xl md:text-6xl">
|
||||
<span class="text-gradient text-gradient bg-gradient-to-r from-blue-500 to-blue-700">
|
||||
{{name}}
|
||||
</span>
|
||||
</h1>
|
||||
<p class="text-base text-justify text-gray-500 sm:text-lg md:text-xl md:max-w-6xl mt-10">
|
||||
{{description}}
|
||||
</p>
|
||||
<main class="w-default my-10 space-x-6 space-y-6 flex flex-col md:flex-row items-center">
|
||||
<div class="w-1/2">
|
||||
<div class="prose lg:prose-xl dark:prose-dark max-w-none mb-4">
|
||||
<h1>{{name}}</h1>
|
||||
<p>{{description}}</p>
|
||||
</div>
|
||||
</main>
|
||||
<a class="py-2 px-4 rounded inline-flex items-center text-white bg-blue-500 dark:bg-blue-800 transition-shadow hover:shadow-xl"
|
||||
x-show="docsLink" href="#" x-cloak x-bind:href="docsLink">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||||
</svg>
|
||||
<span>Reference Documentation</span>
|
||||
</a>
|
||||
<a class="py-2 px-4 rounded inline-flex items-center text-gray-700 dark:text-gray-300 transition-shadow hover:shadow-xl"
|
||||
x-show="sourceLink" href="#" x-cloak x-bind:href="sourceLink">
|
||||
<svg class="h-6 w-6 mr-3" 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>
|
||||
<span>Source Code</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-1/2" x-show="!videoLink">
|
||||
<img class="mx-auto h-48 w-48 transition-transform transform group-hover:scale-110 object-contain"
|
||||
src="{{feature_image}}">
|
||||
</div>
|
||||
<div class="w-1/2" x-show="videoLink">
|
||||
<div class="overflow-hidden shadow-2xl rounded-2xl mx-auto max-w-xl lg:w-full aspect-w-16 aspect-h-9">
|
||||
<div class="h-full">
|
||||
<iframe id='tagvideo' width="100%" height="100%" v-bind:src="videoLink" title="YouTube video player" frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{/tag}}
|
||||
|
||||
<div class="mt-12 max-w-lg grid gap-5 md:grid-cols-2 lg:grid-cols-3 mx-auto max-w-5xl px-10 lg:px-12 sm:mt-24">
|
||||
|
||||
<div class="w-default my-12 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 mx-auto">
|
||||
|
||||
{{#get "posts" filter="tag:{{slug}}" include="authors,tags" order="featured desc"}}
|
||||
|
||||
{{#foreach posts visibility="all"}}
|
||||
|
||||
{{> cardSimple}}
|
||||
{{> cardTutorial }}
|
||||
|
||||
{{/foreach}}
|
||||
|
||||
{{> cardCTA}}
|
||||
{{/get}}
|
||||
|
||||
|
||||
{{!-- {{> cardCTA}} --}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/tag}}
|
||||
+52
-62
@@ -2,107 +2,97 @@ const colors = require('tailwindcss/colors')
|
||||
|
||||
module.exports = {
|
||||
purge: {
|
||||
enabled: process.env.NODE_ENV === 'production',
|
||||
content: [
|
||||
'./*.hbs',
|
||||
'./partials/**/*.hbs'
|
||||
]
|
||||
enabled: process.env.NODE_ENV === "production",
|
||||
content: ["./*.hbs", "./partials/**/*.hbs"],
|
||||
},
|
||||
darkMode: 'media', // or 'media' or 'class'
|
||||
darkMode: "media", // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {
|
||||
maxHeight: {
|
||||
'1/2': '50%',
|
||||
'3/4': '75%',
|
||||
'full': '100%'
|
||||
"1/2": "50%",
|
||||
"3/4": "75%",
|
||||
full: "100%",
|
||||
},
|
||||
height: theme => ({
|
||||
'screen/2': '50vh',
|
||||
'screen/3': 'calc(100vh / 3)',
|
||||
'screen/4': 'calc(100vh / 4)',
|
||||
'screen/5': 'calc(100vh / 5)',
|
||||
'screen/2-3': 'calc(100vh * 0.66)',
|
||||
height: (theme) => ({
|
||||
"screen/2": "50vh",
|
||||
"screen/3": "calc(100vh / 3)",
|
||||
"screen/4": "calc(100vh / 4)",
|
||||
"screen/5": "calc(100vh / 5)",
|
||||
"screen/2-3": "calc(100vh * 0.66)",
|
||||
}),
|
||||
typography: theme => ({
|
||||
typography: (theme) => ({
|
||||
dark: {
|
||||
css: {
|
||||
color: theme('colors.gray.300'),
|
||||
color: theme("colors.gray.300"),
|
||||
a: {
|
||||
color: theme('colors.blue.500'),
|
||||
'&:hover': {
|
||||
color: theme('colors.blue.400'),
|
||||
color: theme("colors.blue.500"),
|
||||
"&:hover": {
|
||||
color: theme("colors.blue.400"),
|
||||
},
|
||||
code: { color: theme('colors.blue.400') },
|
||||
code: { color: theme("colors.blue.400") },
|
||||
},
|
||||
h1: {
|
||||
fontWeight: '700',
|
||||
letterSpacing: theme(
|
||||
'letterSpacing.tight'),
|
||||
color: theme('colors.gray.100'),
|
||||
fontWeight: "700",
|
||||
letterSpacing: theme("letterSpacing.tight"),
|
||||
color: theme("colors.gray.100"),
|
||||
},
|
||||
h2: {
|
||||
fontWeight: '700',
|
||||
letterSpacing: theme(
|
||||
'letterSpacing.tight'),
|
||||
color: theme('colors.gray.100'),
|
||||
fontWeight: "700",
|
||||
letterSpacing: theme("letterSpacing.tight"),
|
||||
color: theme("colors.gray.100"),
|
||||
},
|
||||
h3: {
|
||||
fontWeight: '600',
|
||||
color: theme('colors.gray.100'),
|
||||
fontWeight: "600",
|
||||
color: theme("colors.gray.100"),
|
||||
},
|
||||
'h4,h5,h6': {
|
||||
color: theme('colors.gray.100'),
|
||||
"h4,h5,h6": {
|
||||
color: theme("colors.gray.100"),
|
||||
},
|
||||
code: {
|
||||
backgroundColor: theme(
|
||||
'colors.gray.800'),
|
||||
backgroundColor: theme("colors.gray.800"),
|
||||
},
|
||||
hr: { borderColor: theme(
|
||||
'colors.gray.700') },
|
||||
'ol li:before': {
|
||||
fontWeight: '600',
|
||||
color: theme('colors.gray.400'),
|
||||
hr: { borderColor: theme("colors.gray.700") },
|
||||
"ol li:before": {
|
||||
fontWeight: "600",
|
||||
color: theme("colors.gray.400"),
|
||||
},
|
||||
'ul li:before': {
|
||||
backgroundColor: theme(
|
||||
'colors.gray.400'),
|
||||
"ul li:before": {
|
||||
backgroundColor: theme("colors.gray.400"),
|
||||
},
|
||||
strong: { color: theme('colors.gray.100') },
|
||||
strong: { color: theme("colors.gray.100") },
|
||||
thead: {
|
||||
color: theme('colors.gray.100'),
|
||||
color: theme("colors.gray.100"),
|
||||
},
|
||||
tbody: {
|
||||
tr: {
|
||||
borderBottomColor: theme(
|
||||
'colors.gray.700'),
|
||||
borderBottomColor: theme("colors.gray.700"),
|
||||
},
|
||||
},
|
||||
blockquote: {
|
||||
color: theme('colors.gray.100'),
|
||||
borderLeftColor: theme(
|
||||
'colors.gray.700'),
|
||||
color: theme("colors.gray.100"),
|
||||
borderLeftColor: theme("colors.gray.700"),
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}),
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Space Grotesk', 'sans-serif'],
|
||||
serif: ['Merriweather', 'serif'],
|
||||
sans: ["Space Grotesk", "sans-serif"],
|
||||
serif: ["Merriweather", "serif"],
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
typography: ['dark'],
|
||||
typography: ["dark"],
|
||||
extend: {
|
||||
opacity: ['active', 'dark'],
|
||||
visibility: ['hover', 'dark'],
|
||||
ringWidth: ['hover', 'active'],
|
||||
scale: [ 'group-hover' ]
|
||||
opacity: ["active", "dark"],
|
||||
visibility: ["hover", "dark"],
|
||||
ringWidth: ["hover", "active"],
|
||||
scale: ["group-hover"],
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/line-clamp'),
|
||||
require('@tailwindcss/aspect-ratio'),
|
||||
require('@tailwindcss/typography')
|
||||
require("@tailwindcss/line-clamp"),
|
||||
require("@tailwindcss/aspect-ratio"),
|
||||
require("@tailwindcss/typography"),
|
||||
],
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user