Marquee for customer logos (#332)

* marquee for customer logos

* fix

* two new logos

* fix

* marquee mixin fixes

* new logos and md files for them

* fixes

* fix

* fixes

* replaced text, moved the logos section up
This commit is contained in:
trean
2023-10-16 13:19:32 +02:00
committed by GitHub
parent fd98259a6f
commit 505faf46d9
42 changed files with 2220 additions and 75 deletions
+10 -27
View File
@@ -50,11 +50,19 @@ docker run -p 6333:6333 qdrant/qdrant</code>
</section>
<!-- End Banner Section -->
<!--Customers Section-->
<section class="pt-5 mt-5">
{{ with (.Site.GetPage "section" "stack") }}
{{ partial "customers-section" . }}
{{ end }}
</section>
<!--End Customers Section-->
{{ with (.Site.GetPage "section" "features") }}
<!-- Feature Section -->
<section class="features-section">
<section class="features-section pt-5">
<div class="auto-container">
<div class="row clearfix">
@@ -189,32 +197,7 @@ docker run -p 6333:6333 qdrant/qdrant</code>
{{ end }}
<!-- End Business Section -->
{{ with (.Site.GetPage "section" "stack") }}
<!--Clients Section-->
<section class="clients-section">
<div class="auto-container">
<div class="row">
<div class="col-12 sec-title">
<h2>{{ .Title | safeHTML }}</h2>
<div class="text">{{ .Params.subtitle}}</div>
</div>
</div>
<ul class="sponsors-outer">
{{ range $i, $e := first 3 .Pages }}
<li class="mt-3 mb-3 image-box">
<a href="{{ .Params.origin_url }}" target="_blank" rel="nofollow"><img src="{{ .Params.image }}-mono.png" alt=""></a>
</li>
{{ end }}
</ul>
</div>
</section>
<!--End Clients Section-->
{{ end }}
{{ with (.Site.GetPage "section" "articles") }}
{{ with (.Site.GetPage "section" "articles") }}
<!-- Start Articles Section -->
<section id="articles" class="projects-section-two" style="background: var(--brand-light);">
<div class="auto-container">
@@ -0,0 +1,33 @@
<div class="auto-container">
<div class="row">
<div class="col-12 sec-title">
<h2>{{ .Title | safeHTML }}</h2>
<div class="text">{{ .Params.subtitle}}</div>
</div>
</div>
</div>
<div class="marquee mt-3 mb-5">
<div class="marquee__container">
<div class="marquee__block">
<div class="marquee__inner marquee__inner_to-left">
<span>
{{ range .Pages }}
<div class="marquee__item">
<img src="{{ .Params.image }}-mono.png" alt="{{ .Params.name}} logo">
</div>
{{ end }}
</span>
<span>
{{ range .Pages }}
<div class="marquee__item">
<img src="{{ .Params.image }}-mono.png" alt="{{ .Params.name}} logo">
</div>
{{ end }}
</span>
</div>
</div>
</div>
</div>
@@ -88,21 +88,11 @@
font-size: 50px;
}
.clients-section-two .sponsors-outer,
.magic-block .inner-box {
padding-right: 0px;
}
.banner-section-two .image-column .inner-column {
padding-left: 0px;
margin-right: 0px;
}
.magic-section .blocks-column .inner-column,
.optimized-section .image-column .inner-column {
padding-left: 0px;
}
.banner-section-two .side-layer,
.about-section .content-column .inner-column .sec-title h2 br,
.magic-section .blocks-column .inner-column .magic-block:before {
@@ -1,5 +1,5 @@
@use "../helpers/functions" as lib;
@use "../helpers/mixins" as mixins;
@use "../mixins/mixins" as mixins;
article aside[role="alert"],
article aside[role="status"] {
@@ -1,4 +1,4 @@
@use "../helpers/mixins" as mixins;
@use "../mixins/mixins" as mixins;
@use "../helpers/functions" as lib;
.documentation {
File diff suppressed because one or more lines are too long
@@ -1,5 +1,6 @@
@use "helpers/functions";
@use "helpers/utils";
@use "mixins/marquee";
@import "colors";
@import "../../../../node_modules/bootstrap/scss/bootstrap.scss";
@@ -146,6 +147,10 @@ blockquote {
font-style: italic;
}
.marquee {
@include marquee.base(80px, 200px, 12, 6, 20px, false, 50s);
}
@import "blocks/forms";
@import "blocks/categories-widget";
@import "blocks/tags-widget";
@@ -0,0 +1,96 @@
@mixin base($height, $itemWidth: 200px, $total-marquee-items: 6, $visible-marquee-items: 6, $item-padding: 20px, $pauseOnHover: false, $speed: 25s) {
$inner-width: $total-marquee-items / $visible-marquee-items * 2 * 100%;
max-width: 100%;
text-align: center;
height: $height;
&__container {
overflow: hidden;
}
&__block {
height: $height;
display: grid;
width: $itemWidth * $visible-marquee-items;
overflow: hidden;
box-sizing: border-box;
position: relative;
margin: 0 auto;
&:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
box-shadow: 0 0 30px 30px white;
z-index: 1;
}
&:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 0;
box-shadow: 0 0 30px 30px white;
z-index: 1;
}
}
&__inner {
display: block;
width: $inner-width;
position: absolute;
& > span {
float: left;
width: 50%;
}
&_to-left {
animation: marqueeLeft $speed linear infinite;
}
&_to-right {
animation: marqueeRight $speed linear infinite;
}
}
&__item {
width: $itemWidth - $item-padding * 2;
height: $height;
display: inline-flex;
margin: 0 $item-padding;
float: left;
transition: all .2s ease-out;
align-items: center;
img {
max-width: 100%;
height: auto;
}
}
@keyframes marqueeLeft {
0% {
left: 0;
}
100% {
left: $inner-width / 2 * -1;
}
}
@keyframes marqueeRight {
0% {
left: $inner-width / 2 * -1;
}
100% {
left: 0;
}
}
}
@@ -80,4 +80,4 @@
-o-transition: all $ms ease;
-moz-transition: all $ms ease;
transition: all $ms ease;
}
}
@@ -0,0 +1,37 @@
/*!
* Bootstrap v4.6.2 (https://getbootstrap.com/)
* Copyright 2011-2022 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
/*!
* Splide.js
* Version : 4.1.4
* License : MIT
* Copyright: 2022 Naotoshi Fujita
*/
/**!
* @fileOverview Kickass library to create and place poppers near their reference elements.
* @version 1.16.1
* @license
* Copyright (c) 2016 Federico Zivolo and contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/