Skip to content

Commit

Permalink
Create new classes
Browse files Browse the repository at this point in the history
  • Loading branch information
“yndira-flowforge” committed Oct 16, 2023
1 parent 1adde56 commit 1bdca85
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 32 deletions.
27 changes: 27 additions & 0 deletions src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1095,6 +1095,33 @@ h4:hover .header-anchor {
.ff-features-key label {
margin-left: 12px;
}
/*
Certify hardware lists
*/

.ff-certify-list {
@apply flex flex-col pb-6 gap-y-10 sm:gap-y-0;
}

.ff-certify-list > .ff-item {
@apply grid grid-cols-[1fr,50px,1fr] sm:grid-cols-[24px,1fr] sm:grid-flow-col md:px-10 sm:gap-x-6 sm:grid-rows-[minmax(18px,1fr),60px,minmax(18px,1fr)];
}

.ff-certify-list > .ff-item:first-of-type {
@apply sm:grid-rows-[36px,minmax(18px,1fr)];
}

.ff-line-container {
@apply grid items-stretch my-auto sm:my-0 sm:mx-auto;
}

.ff-line {
@apply sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500;
}

.ff-certify-list-icon {
@apply m-auto text-gray-500 w-[24px];
}

/*
Used for nicely formatting links
Expand Down
64 changes: 32 additions & 32 deletions src/product/certify-hardware.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,34 +14,34 @@ layout: layouts/page.njk
<div class="ff-bg-light w-full px-6 pt-10 pb-20 md:px-0 flex flex-col gap-10 md:gap-12">
<div class="container max-w-screen-md m-auto flex flex-col gap-4">
<h3 class="m-auto text-center w-full mb-6 max-w-xs sm:max-w-none">Technical Qualification in 3 Steps</h3>
<div class="flex flex-col pb-6 gap-y-10 sm:gap-y-0">
<div class="grid grid-cols-[1fr,50px,1fr] sm:grid-cols-[24px,1fr] sm:grid-rows-[36px,minmax(18px,1fr)] sm:grid-flow-col md:px-10 sm:gap-x-6">
<div class="grid items-stretch my-auto sm:my-0 sm:mx-auto sm:hidden">
<div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
<div class="ff-certify-list">
<div class="ff-item">
<div class="ff-line-container sm:hidden">
<div class="ff-line"></div>
</div>
<div class="m-auto text-gray-500 w-[24px] sm:pb-2">{% include "components/icons/book-open.svg" %}</div>
<div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
<div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
<div class="ff-certify-list-icon sm:pb-2">{% include "components/icons/book-open.svg" %}</div>
<div class="ff-line-container">
<div class="ff-line"></div>
</div>
<div class="sm:row-span-2 col-span-3 sm:col-auto pt-6 sm:pt-0">Explore the FlowFuse Device Agent <a href="https://github.com/FlowFuse/device-agent" target="_blank">Repository</a> and <a href="/../docs/device-agent/introduction/">Documentation</a>.</div>
</div>
<div class="grid grid-cols-[1fr,50px,1fr] sm:grid-cols-[24px,1fr] sm:grid-rows-[minmax(18px,1fr),60px,minmax(18px,1fr)] sm:grid-flow-col md:px-10 sm:gap-x-6">
<div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
<div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
<div class="ff-item">
<div class="ff-line-container">
<div class="ff-line"></div>
</div>
<div class="m-auto text-gray-500 w-[24px]">{% include "components/icons/check-circle.svg" %}</div>
<div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
<div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
<div class="ff-certify-list-icon">{% include "components/icons/check-circle.svg" %}</div>
<div class="ff-line-container">
<div class="ff-line"></div>
</div>
<div class="sm:row-span-3 col-span-3 my-auto pt-6 sm:pt-0">Ensure that the Device Agent comes pre-installed on your device. Alternatively, it should be available from a store or marketplace as a "one-click" installer.</div>
</div>
<div class="grid grid-cols-[1fr,50px,1fr] sm:grid-cols-[24px,1fr] sm:grid-rows-[minmax(18px,1fr),60px,minmax(18px,1fr)] sm:grid-flow-col md:px-10 sm:gap-x-6">
<div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
<div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
<div class="ff-item">
<div class="ff-line-container">
<div class="ff-line"></div>
</div>
<div class="m-auto text-gray-500 w-[24px]">{% include "components/icons/document-arrow-up.svg" %}</div>
<div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
<div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500 sm:hidden"></div> <!-- Línea vertical -->
<div class="ff-certify-list-icon">{% include "components/icons/document-arrow-up.svg" %}</div>
<div class="ff-line-container">
<div class="ff-line sm:hidden"></div>
</div>
<div class="sm:row-span-3 col-span-3 my-auto pt-6 sm:pt-0">Users can easily upload their device configuration either through a custom user interface (e.g., file upload or input mask) or via the built-in Device Agent UI.</div>
</div>
Expand All @@ -64,24 +64,24 @@ layout: layouts/page.njk
</div>
<div class="container max-w-screen-md m-auto flex flex-col gap-4">
<h3 class="m-auto text-center w-full mb-6 max-w-xs sm:max-w-none">Marketing and Publications</h3>
<div class="flex flex-col pb-6 gap-y-10 sm:gap-y-0">
<div class="grid grid-cols-[1fr,50px,1fr] sm:grid-cols-[24px,1fr] sm:grid-rows-[36px,minmax(18px,1fr)] sm:grid-flow-col md:px-10 sm:gap-x-6">
<div class="grid items-stretch my-auto sm:my-0 sm:mx-auto sm:hidden">
<div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
<div class="ff-certify-list">
<div class="ff-item">
<div class="ff-line-container sm:hidden">
<div class="ff-line"></div>
</div>
<div class="m-auto text-gray-500 w-[24px] sm:pb-2">{% include "components/icons/chat-bubble-bottom-center-text.svg" %}</div>
<div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
<div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
<div class="ff-certify-list-icon sm:pb-2">{% include "components/icons/chat-bubble-bottom-center-text.svg" %}</div>
<div class="ff-line-container">
<div class="ff-line"></div>
</div>
<div class="sm:row-span-2 col-span-3 sm:col-auto pt-6 sm:pt-0">In a joint meeting, we will discuss marketing activities on a case-by-case basis.</div>
</div>
<div class="grid grid-cols-[1fr,50px,1fr] sm:grid-cols-[24px,1fr] sm:grid-rows-[minmax(18px,1fr),60px,minmax(18px,1fr)] sm:grid-flow-col md:px-10 sm:gap-x-6">
<div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
<div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
<div class="ff-item">
<div class="ff-line-container">
<div class="ff-line"></div>
</div>
<div class="m-auto text-gray-500 w-[24px]">{% include "components/icons/check-badge.svg" %}</div>
<div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
<div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500 sm:hidden"></div> <!-- Línea vertical -->
<div class="ff-certify-list-icon">{% include "components/icons/check-badge.svg" %}</div>
<div class="ff-line-container">
<div class="ff-line sm:hidden"></div>
</div>
<div class="sm:row-span-3 col-span-3 my-auto pt-6 sm:pt-0">Upon successful technical qualification, you will be granted the right to use the "FlowFuse Certified" logo.</div>
</div>
Expand Down

0 comments on commit 1bdca85

Please sign in to comment.