mirror of
https://github.com/RetroDECK/RetroDECK-Website.git
synced 2024-11-21 14:35:38 +00:00
Implement first pass of screenshot scrolling
This commit is contained in:
Adam Iannazzone
parent
dd8aeca6f7
commit
97e54f8355
|
|
@ -96,27 +96,39 @@ footer {
|
|||
}
|
||||
|
||||
/* Features Styles */
|
||||
|
||||
#features {
|
||||
background: #000;
|
||||
border-top: var(--rd-purple) 5px solid;
|
||||
border-bottom: var(--rd-purple) 5px solid;
|
||||
}
|
||||
|
||||
#feature-card-container {
|
||||
/* overflow-x: scroll; */
|
||||
#feature-card-row, #screenshot-row {
|
||||
flex-wrap: nowrap;
|
||||
scrollbar-width: none;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
scale: 80%;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--rd-blue);
|
||||
border: white 2px solid;
|
||||
border-radius: 5px;
|
||||
width: 40%;
|
||||
cursor: pointer;
|
||||
scale: 80%;
|
||||
}
|
||||
|
||||
.feature-card#active-feature-card, .screenshot#active-screenshot {
|
||||
scale: 100%;
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
.feature-card#empty-feature, .screenshot#empty-screenshot {
|
||||
visibility: hidden;
|
||||
}
|
||||
.feature-card h3 {
|
||||
color: white;
|
||||
font-family: var(--pixel-font);
|
||||
|
|
|
|||
224
index.html
224
index.html
|
|
@ -54,61 +54,91 @@
|
|||
href="https://retrodeck.readthedocs.io/en/latest/blog/">Blog</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="#" role="button" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Social <i class="bi bi-caret-down-square-fill"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a class="dropdown-item" target="_blank" rel="noopener noreferrer"
|
||||
href="https://discord.gg/WDc5C9YWMx">
|
||||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>Discord
|
||||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Discord</title>
|
||||
<path
|
||||
d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
|
||||
</svg>Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" target="_blank" rel="noopener noreferrer"
|
||||
href="https://matrix.to/#/#retrodeck:matrix.org">
|
||||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg>Matrix
|
||||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Matrix</title>
|
||||
<path
|
||||
d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z" />
|
||||
</svg>Matrix
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" target="_blank" rel="noopener noreferrer"
|
||||
href="https://www.reddit.com/r/RetroDeck/">
|
||||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Reddit</title><path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/></svg>Reddit
|
||||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Reddit</title>
|
||||
<path
|
||||
d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z" />
|
||||
</svg>Reddit
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" target="_blank" rel="noopener noreferrer"
|
||||
href="https://lemmy.zip/c/retrodeck">
|
||||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Lemmy</title><path d="M2.9595 4.2228a3.9132 3.9132 0 0 0-.332.019c-.8781.1012-1.67.5699-2.155 1.3862-.475.8-.5922 1.6809-.35 2.4971.2421.8162.8297 1.5575 1.6982 2.1449.0053.0035.0106.0076.0163.0114.746.4498 1.492.7431 2.2877.8994-.02.3318-.0272.6689-.006 1.0181.0634 1.0432.4368 2.0006.996 2.8492l-2.0061.8189a.4163.4163 0 0 0-.2276.2239.416.416 0 0 0 .0879.455.415.415 0 0 0 .2941.1231.4156.4156 0 0 0 .1595-.0312l2.2093-.9035c.408.4859.8695.9315 1.3723 1.318.0196.0151.0407.0264.0603.0423l-1.2918 1.7103a.416.416 0 0 0 .664.501l1.314-1.7385c.7185.4548 1.4782.7927 2.2294 1.0242.3833.7209 1.1379 1.1871 2.0202 1.1871.8907 0 1.6442-.501 2.0242-1.2072.744-.2347 1.4959-.5729 2.2073-1.0262l1.332 1.7606a.4157.4157 0 0 0 .7439-.1936.4165.4165 0 0 0-.0799-.3074l-1.3099-1.7345c.0083-.0075.0178-.0113.0261-.0188.4968-.3803.9549-.8175 1.3622-1.2939l2.155.8794a.4156.4156 0 0 0 .5412-.2276.4151.4151 0 0 0-.2273-.5432l-1.9438-.7928c.577-.8538.9697-1.8183 1.0504-2.8693.0268-.3507.0242-.6914.0079-1.0262.7905-.1572 1.5321-.4502 2.2737-.8974.0053-.0033.011-.0076.0163-.0113.8684-.5874 1.456-1.3287 1.6982-2.145.2421-.8161.125-1.697-.3501-2.497-.4849-.8163-1.2768-1.2852-2.155-1.3863a3.2175 3.2175 0 0 0-.332-.0189c-.7852-.0151-1.6231.229-2.4286.6942-.5926.342-1.1252.867-1.5433 1.4387-1.1699-.6703-2.6923-1.0476-4.5635-1.0785a15.5768 15.5768 0 0 0-.5111 0c-2.085.034-3.7537.43-5.0142 1.1449-.0033-.0038-.0045-.0114-.008-.0152-.4233-.5916-.973-1.1365-1.5835-1.489-.8055-.465-1.6434-.7083-2.4286-.6941Zm.2858.7365c.5568.042 1.1696.2358 1.7787.5875.485.28.9757.7554 1.346 1.2696a5.6875 5.6875 0 0 0-.4969.4085c-.9201.8516-1.4615 1.9597-1.668 3.2335-.6809-.1402-1.3183-.3945-1.984-.7948-.7553-.5128-1.2159-1.1225-1.4004-1.7445-.1851-.624-.1074-1.2712.2776-1.9196.3743-.63.9275-.9534 1.6118-1.0322a2.796 2.796 0 0 1 .5352-.0076Zm17.5094 0a2.797 2.797 0 0 1 .5353.0075c.6842.0786 1.2374.4021 1.6117 1.0322.385.6484.4627 1.2957.2776 1.9196-.1845.622-.645 1.2317-1.4004 1.7445-.6578.3955-1.2881.6472-1.9598.7888-.1942-1.2968-.7375-2.4338-1.666-3.302a5.5639 5.5639 0 0 0-.4709-.3923c.3645-.49.8287-.9428 1.2938-1.2113.6091-.3515 1.2219-.5454 1.7787-.5875ZM12.006 6.0036a14.832 14.832 0 0 1 .487 0c2.3901.0393 4.0848.67 5.1631 1.678 1.1501 1.0754 1.6423 2.6006 1.499 4.467-.1311 1.7079-1.2203 3.2281-2.652 4.324-.694.5313-1.4626.9354-2.2254 1.2294.0031-.0453.014-.0888.014-.1349.0029-1.1964-.9313-2.2133-2.2918-2.2133-1.3606 0-2.3222 1.0154-2.2918 2.2213.0013.0507.014.0972.0181.1471-.781-.2933-1.5696-.7013-2.2777-1.2456-1.4239-1.0945-2.4997-2.6129-2.6037-4.322-.1129-1.8567.3778-3.3382 1.5212-4.3965C7.5094 6.7 9.352 6.047 12.006 6.0036Zm-3.6419 6.8291c-.6053 0-1.0966.4903-1.0966 1.0966 0 .6063.4913 1.0986 1.0966 1.0986s1.0966-.4923 1.0966-1.0986c0-.6063-.4913-1.0966-1.0966-1.0966zm7.2819.0113c-.5998 0-1.0866.4859-1.0866 1.0866s.4868 1.0885 1.0866 1.0885c.5997 0 1.0865-.4878 1.0865-1.0885s-.4868-1.0866-1.0865-1.0866zM12 16.0835c1.0237 0 1.5654.638 1.5634 1.4829-.0018.7849-.6723 1.485-1.5634 1.485-.9167 0-1.54-.5629-1.5634-1.493-.0212-.8347.5397-1.4749 1.5634-1.4749Z"/></svg>Lemmy
|
||||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Lemmy</title>
|
||||
<path
|
||||
d="M2.9595 4.2228a3.9132 3.9132 0 0 0-.332.019c-.8781.1012-1.67.5699-2.155 1.3862-.475.8-.5922 1.6809-.35 2.4971.2421.8162.8297 1.5575 1.6982 2.1449.0053.0035.0106.0076.0163.0114.746.4498 1.492.7431 2.2877.8994-.02.3318-.0272.6689-.006 1.0181.0634 1.0432.4368 2.0006.996 2.8492l-2.0061.8189a.4163.4163 0 0 0-.2276.2239.416.416 0 0 0 .0879.455.415.415 0 0 0 .2941.1231.4156.4156 0 0 0 .1595-.0312l2.2093-.9035c.408.4859.8695.9315 1.3723 1.318.0196.0151.0407.0264.0603.0423l-1.2918 1.7103a.416.416 0 0 0 .664.501l1.314-1.7385c.7185.4548 1.4782.7927 2.2294 1.0242.3833.7209 1.1379 1.1871 2.0202 1.1871.8907 0 1.6442-.501 2.0242-1.2072.744-.2347 1.4959-.5729 2.2073-1.0262l1.332 1.7606a.4157.4157 0 0 0 .7439-.1936.4165.4165 0 0 0-.0799-.3074l-1.3099-1.7345c.0083-.0075.0178-.0113.0261-.0188.4968-.3803.9549-.8175 1.3622-1.2939l2.155.8794a.4156.4156 0 0 0 .5412-.2276.4151.4151 0 0 0-.2273-.5432l-1.9438-.7928c.577-.8538.9697-1.8183 1.0504-2.8693.0268-.3507.0242-.6914.0079-1.0262.7905-.1572 1.5321-.4502 2.2737-.8974.0053-.0033.011-.0076.0163-.0113.8684-.5874 1.456-1.3287 1.6982-2.145.2421-.8161.125-1.697-.3501-2.497-.4849-.8163-1.2768-1.2852-2.155-1.3863a3.2175 3.2175 0 0 0-.332-.0189c-.7852-.0151-1.6231.229-2.4286.6942-.5926.342-1.1252.867-1.5433 1.4387-1.1699-.6703-2.6923-1.0476-4.5635-1.0785a15.5768 15.5768 0 0 0-.5111 0c-2.085.034-3.7537.43-5.0142 1.1449-.0033-.0038-.0045-.0114-.008-.0152-.4233-.5916-.973-1.1365-1.5835-1.489-.8055-.465-1.6434-.7083-2.4286-.6941Zm.2858.7365c.5568.042 1.1696.2358 1.7787.5875.485.28.9757.7554 1.346 1.2696a5.6875 5.6875 0 0 0-.4969.4085c-.9201.8516-1.4615 1.9597-1.668 3.2335-.6809-.1402-1.3183-.3945-1.984-.7948-.7553-.5128-1.2159-1.1225-1.4004-1.7445-.1851-.624-.1074-1.2712.2776-1.9196.3743-.63.9275-.9534 1.6118-1.0322a2.796 2.796 0 0 1 .5352-.0076Zm17.5094 0a2.797 2.797 0 0 1 .5353.0075c.6842.0786 1.2374.4021 1.6117 1.0322.385.6484.4627 1.2957.2776 1.9196-.1845.622-.645 1.2317-1.4004 1.7445-.6578.3955-1.2881.6472-1.9598.7888-.1942-1.2968-.7375-2.4338-1.666-3.302a5.5639 5.5639 0 0 0-.4709-.3923c.3645-.49.8287-.9428 1.2938-1.2113.6091-.3515 1.2219-.5454 1.7787-.5875ZM12.006 6.0036a14.832 14.832 0 0 1 .487 0c2.3901.0393 4.0848.67 5.1631 1.678 1.1501 1.0754 1.6423 2.6006 1.499 4.467-.1311 1.7079-1.2203 3.2281-2.652 4.324-.694.5313-1.4626.9354-2.2254 1.2294.0031-.0453.014-.0888.014-.1349.0029-1.1964-.9313-2.2133-2.2918-2.2133-1.3606 0-2.3222 1.0154-2.2918 2.2213.0013.0507.014.0972.0181.1471-.781-.2933-1.5696-.7013-2.2777-1.2456-1.4239-1.0945-2.4997-2.6129-2.6037-4.322-.1129-1.8567.3778-3.3382 1.5212-4.3965C7.5094 6.7 9.352 6.047 12.006 6.0036Zm-3.6419 6.8291c-.6053 0-1.0966.4903-1.0966 1.0966 0 .6063.4913 1.0986 1.0966 1.0986s1.0966-.4923 1.0966-1.0986c0-.6063-.4913-1.0966-1.0966-1.0966zm7.2819.0113c-.5998 0-1.0866.4859-1.0866 1.0866s.4868 1.0885 1.0866 1.0885c.5997 0 1.0865-.4878 1.0865-1.0885s-.4868-1.0866-1.0865-1.0866zM12 16.0835c1.0237 0 1.5654.638 1.5634 1.4829-.0018.7849-.6723 1.485-1.5634 1.485-.9167 0-1.54-.5629-1.5634-1.493-.0212-.8347.5397-1.4749 1.5634-1.4749Z" />
|
||||
</svg>Lemmy
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="#" role="button" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Source Code <i class="bi bi-caret-down-square-fill"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://github.com/XargonWan/RetroDECK/tree/main"
|
||||
target="_blank" rel="noopener noreferrer">
|
||||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>Github
|
||||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<title>GitHub</title>
|
||||
<path
|
||||
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
||||
</svg>Github
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://github.com/XargonWan/RetroDECK-cooker/"
|
||||
target="_blank" rel="noopener noreferrer">
|
||||
<svg role="img" height="1rem" class="pe-2" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-fire" viewBox="0 0 16 16">
|
||||
<path d="M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16m0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 15 8 15"/>
|
||||
</svg></i>Cooker
|
||||
<svg role="img" height="1rem" class="pe-2" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor" class="bi bi-fire" viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16m0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 15 8 15" />
|
||||
</svg></i>Cooker
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="https://repo.retrodeck.net/"
|
||||
target="_blank" rel="noopener noreferrer">
|
||||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Forgejo</title><path d="M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.1175a7.0759 7.0759 0 0 1 4.148-1.4205l.1176-.001 1.3385.0002c.4973-.8827 1.4434-1.4788 2.5288-1.4788 1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.319c.8827.4973 1.4788 1.4434 1.4788 2.5287 0 1.602-1.2986 2.9005-2.9005 2.9005-1.6018 0-2.9004-1.2986-2.9004-2.9005 0-1.0853.596-2.0314 1.4788-2.5287l-.0002-9.9831c0-3.887 3.1195-7.0453 6.9915-7.108l.1176-.001h1.3385C14.7458.5962 15.692 0 16.7773 0ZM7.2227 19.9052c-.6596 0-1.1943.5347-1.1943 1.1943s.5347 1.1943 1.1943 1.1943 1.1944-.5347 1.1944-1.1943-.5348-1.1943-1.1944-1.1943Zm9.5546-10.4644c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Zm0-7.7346c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Z"/></svg>Forejo
|
||||
<a class="dropdown-item" href="https://repo.retrodeck.net/" target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Forgejo</title>
|
||||
<path
|
||||
d="M16.7773 0c1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.1175a7.0759 7.0759 0 0 1 4.148-1.4205l.1176-.001 1.3385.0002c.4973-.8827 1.4434-1.4788 2.5288-1.4788 1.6018 0 2.9004 1.2986 2.9004 2.9005s-1.2986 2.9004-2.9004 2.9004c-1.0854 0-2.0315-.596-2.5288-1.4787H12.91c-2.3322 0-4.2272 1.8718-4.2649 4.195l-.0007 2.319c.8827.4973 1.4788 1.4434 1.4788 2.5287 0 1.602-1.2986 2.9005-2.9005 2.9005-1.6018 0-2.9004-1.2986-2.9004-2.9005 0-1.0853.596-2.0314 1.4788-2.5287l-.0002-9.9831c0-3.887 3.1195-7.0453 6.9915-7.108l.1176-.001h1.3385C14.7458.5962 15.692 0 16.7773 0ZM7.2227 19.9052c-.6596 0-1.1943.5347-1.1943 1.1943s.5347 1.1943 1.1943 1.1943 1.1944-.5347 1.1944-1.1943-.5348-1.1943-1.1944-1.1943Zm9.5546-10.4644c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Zm0-7.7346c-.6596 0-1.1944.5347-1.1944 1.1943s.5348 1.1943 1.1944 1.1943c.6596 0 1.1943-.5347 1.1943-1.1943s-.5347-1.1943-1.1943-1.1943Z" />
|
||||
</svg>Forejo
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -140,18 +170,27 @@
|
|||
|
||||
<!-- Flathub Link -->
|
||||
<div class="col-md-4 text-center">
|
||||
<a type="button" class="btn btn-dark align-center p-2" target="_blank" rel="noopener noreferrer"
|
||||
href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-4">
|
||||
<svg fill="#946beb" role="img" height="2rem" class="px-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Flathub</title><path d="M6.068 0a6 6 0 0 0-6 6 6 6 0 0 0 6 6 6 6 0 0 0 5.998-6 6 6 0 0 0-5.998-6Zm9.15.08a1.656 1.656 0 0 0-1.654 1.656v8.15a1.656 1.656 0 0 0 2.483 1.434l7.058-4.074a1.656 1.656 0 0 0 0-2.869l-1.044-.604-6.014-3.47a1.656 1.656 0 0 0-.828-.223Zm3.575 13.135a.815.815 0 0 0-.816.818v2.453h-2.454a.817.817 0 1 0 0 1.635h2.454v2.453a.817.817 0 1 0 1.635 0v-2.453h2.452a.817.817 0 1 0 0-1.635h-2.453v-2.453a.817.817 0 0 0-.818-.818zM2.865 13.5a2.794 2.794 0 0 0-2.799 2.8v4.9c0 1.55 1.248 2.8 2.8 2.8h4.9c1.55 0 2.8-1.25 2.8-2.8v-4.9c0-1.55-1.25-2.8-2.8-2.8Z"/></svg>
|
||||
<a type="button" class="btn btn-dark align-center p-2" target="_blank" rel="noopener noreferrer"
|
||||
href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-4">
|
||||
<svg fill="#946beb" role="img" height="2rem" class="px-2" viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Flathub</title>
|
||||
<path
|
||||
d="M6.068 0a6 6 0 0 0-6 6 6 6 0 0 0 6 6 6 6 0 0 0 5.998-6 6 6 0 0 0-5.998-6Zm9.15.08a1.656 1.656 0 0 0-1.654 1.656v8.15a1.656 1.656 0 0 0 2.483 1.434l7.058-4.074a1.656 1.656 0 0 0 0-2.869l-1.044-.604-6.014-3.47a1.656 1.656 0 0 0-.828-.223Zm3.575 13.135a.815.815 0 0 0-.816.818v2.453h-2.454a.817.817 0 1 0 0 1.635h2.454v2.453a.817.817 0 1 0 1.635 0v-2.453h2.452a.817.817 0 1 0 0-1.635h-2.453v-2.453a.817.817 0 0 0-.818-.818zM2.865 13.5a2.794 2.794 0 0 0-2.799 2.8v4.9c0 1.55 1.248 2.8 2.8 2.8h4.9c1.55 0 2.8-1.25 2.8-2.8v-4.9c0-1.55-1.25-2.8-2.8-2.8Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="col-8 text-start">
|
||||
<div class="row">
|
||||
<div class="col">Get it on</div>
|
||||
</div>
|
||||
<div class="col-8 text-start">
|
||||
<div class="row"><div class="col">Get it on</div></div>
|
||||
<div class="row"><div class="col">Flathub</div></div>
|
||||
<div class="row">
|
||||
<div class="col">Flathub</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- End Flathub Link -->
|
||||
|
||||
|
|
@ -170,57 +209,133 @@
|
|||
</div>
|
||||
|
||||
<div class="row"></div>
|
||||
<p class="fs-md-4">
|
||||
With RetroDECK, everything has been pre-configured for optimal performance and quality on the Steam Deck.
|
||||
If you want to dig deeper, you tinker with common emulator settings in the RetroDECK Configurator.
|
||||
And don’t worry – you can always reset with a single click.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- End Second Section -->
|
||||
|
||||
<p class="fs-md-4">
|
||||
With RetroDECK, everything has been pre-configured for optimal performance and quality on the Steam
|
||||
Deck.
|
||||
If you want to dig deeper, you tinker with common emulator settings in the RetroDECK Configurator.
|
||||
And don’t worry – you can always reset with a single click.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- End Second Section -->
|
||||
|
||||
</div>
|
||||
<!-- End Jumbotron -->
|
||||
|
||||
<!-- Screenshot/Feature Section -->
|
||||
<div class="container-fluid mb-4" id="features" height="100px">
|
||||
|
||||
<!-- Steam Deck Image -->
|
||||
<div class="container mb-2">
|
||||
|
||||
<!-- Screenshot Images -->
|
||||
<!-- <div class="container mb-2">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img clas="img-fluid" width="100%" src="assets/screens/Steam Deck.webp">
|
||||
<div id="screenshotCarousel" class="carousel carousel-fade slide mb-4 position-relative">
|
||||
<div class="carousel-inner" id="deck-carousel">
|
||||
<div class="carousel-item active">
|
||||
<img src="assets/screens/large/screen01.png" class="d-block w-100 rounded-3"
|
||||
alt="The RetroDECK logo displayed on a Steam Deck">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="assets/screens/large/screen02.png" class="d-block w-100 rounded-3"
|
||||
alt="The RetroDECK icon visible in a Steam Library">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="assets/screens/large/screen03.png" class="d-block w-100 rounded-3"
|
||||
alt="Steam Deck quick settings in the foreground with the RetroDECK interface behind it">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="assets/screens/large/screen04.png" class="d-block w-100 rounded-3"
|
||||
alt="One of the ES-DE Themes with SEGA Genesis visible">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="assets/screens/large/screen05.png" class="d-block w-100 rounded-3"
|
||||
alt="Sonic the Hedgehog 2 (SEGA Genesis) on the Steam Deck">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="assets/screens/large/screen06.png" class="d-block w-100 rounded-3"
|
||||
alt="A list of TurboGrafx games in the ES-DE frontend">
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev z-2" type="button" data-bs-target="#screenshotCarousel"
|
||||
data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next z-2" type="button" data-bs-target="#screenshotCarousel"
|
||||
data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Screenshots v2 -->
|
||||
<div class="row mb-2 overflow-x-scroll" id="screenshot-row">
|
||||
<div class="col-4 screenshot" id="empty-screenshot"></div>
|
||||
<div class="col-4 screenshot" id="active-screenshot">
|
||||
<img src="assets/screens/large/screen01.png" class="d-block w-100 rounded-3"
|
||||
alt=""/>
|
||||
</div>
|
||||
<div class="col-4 screenshot" id="">
|
||||
<img src="assets/screens/large/screen02.png" class="d-block w-100 rounded-3"
|
||||
alt=""/>
|
||||
</div>
|
||||
<div class="col-4 screenshot" id="">
|
||||
<img src="assets/screens/large/screen03.png" class="d-block w-100 rounded-3"
|
||||
alt=""/>
|
||||
</div>
|
||||
<div class="col-4 screenshot" id="">
|
||||
<img src="assets/screens/large/screen04.png" class="d-block w-100 rounded-3"
|
||||
alt=""/>
|
||||
</div>
|
||||
<div class="col-4 screenshot" id="">
|
||||
<img src="assets/screens/large/screen05.png" class="d-block w-100 rounded-3"
|
||||
alt=""/>
|
||||
</div>
|
||||
<div class="col-4 screenshot" id="">
|
||||
<img src="assets/screens/large/screen06.png" class="d-block w-100 rounded-3"
|
||||
alt=""/>
|
||||
</div>
|
||||
<div class="col-4 screenshot" id="empty-screenshot"></div>
|
||||
</div>
|
||||
|
||||
<!-- Feature List -->
|
||||
<div class="row mb-2 overflow-x-scroll" id="feature-card-container">
|
||||
<div class="col-4 feature-card mx-2" id="">
|
||||
<div class="row mb-2 overflow-x-scroll" id="feature-card-row">
|
||||
|
||||
<div class="col-4 feature-card" id="empty-feature"></div>
|
||||
<div class="col-4 feature-card" id="active-feature-card">
|
||||
<h3>Feature 1</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales
|
||||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
</div>
|
||||
<div class="col-4 feature-card mx-2" id="active-feature-card">
|
||||
<div class="col-4 feature-card" id="">
|
||||
<h3>Feature 2</h3>
|
||||
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit
|
||||
sodales mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
</div>
|
||||
<div class="col-4 feature-card mx-2" id="">
|
||||
<div class="col-4 feature-card" id="">
|
||||
<h3>Feature 3</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales
|
||||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
</div>
|
||||
<div class="col-4 feature-card mx-2" id="">
|
||||
<div class="col-4 feature-card" id="">
|
||||
<h3>Feature 4</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales
|
||||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
</div>
|
||||
<div class="col-4 feature-card mx-2" id="">
|
||||
<div class="col-4 feature-card" id="">
|
||||
<h3>Feature 5</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales
|
||||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
</div>
|
||||
<div class="col-4 feature-card mx-2" id="">
|
||||
<div class="col-4 feature-card" id="">
|
||||
<h3>Feature 6</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia elit sagittis elit sodales
|
||||
mattis. Praesent eget lacinia risus, ut bibendum est.</p>
|
||||
</div>
|
||||
<div class="col-4 feature-card" id="empty-feature"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -235,7 +350,8 @@
|
|||
<h2 class="display-md-5 jumbo-header">We can't do this alone!</h2>
|
||||
<p class="fs-md-4">
|
||||
RetroDECK is run by volunteers.
|
||||
If you appreciate our work, please consider code contribution or donating to us or our sibling projects.
|
||||
If you appreciate our work, please consider code contribution or donating to us or our
|
||||
sibling projects.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -245,8 +361,10 @@
|
|||
href="https://retrodeck.readthedocs.io/en/latest/wiki_about/donations-licenses/">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="2rem" fill="#946beb" class="bi bi-balloon-heart-fill px-2" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8.49 10.92C19.412 3.382 11.28-2.387 8 .986 4.719-2.387-3.413 3.382 7.51 10.92l-.234.468a.25.25 0 1 0 .448.224l.04-.08c.009.17.024.315.051.45.068.344.208.622.448 1.102l.013.028c.212.422.182.85.05 1.246-.135.402-.366.751-.534 1.003a.25.25 0 0 0 .416.278l.004-.007c.166-.248.431-.646.588-1.115.16-.479.212-1.051-.076-1.629-.258-.515-.365-.732-.419-1.004a2 2 0 0 1-.037-.289l.008.017a.25.25 0 1 0 .448-.224l-.235-.468ZM6.726 1.269c-1.167-.61-2.8-.142-3.454 1.135-.237.463-.36 1.08-.202 1.85.055.27.467.197.527-.071.285-1.256 1.177-2.462 2.989-2.528.234-.008.348-.278.14-.386"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="2rem" fill="#946beb"
|
||||
class="bi bi-balloon-heart-fill px-2" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M8.49 10.92C19.412 3.382 11.28-2.387 8 .986 4.719-2.387-3.413 3.382 7.51 10.92l-.234.468a.25.25 0 1 0 .448.224l.04-.08c.009.17.024.315.051.45.068.344.208.622.448 1.102l.013.028c.212.422.182.85.05 1.246-.135.402-.366.751-.534 1.003a.25.25 0 0 0 .416.278l.004-.007c.166-.248.431-.646.588-1.115.16-.479.212-1.051-.076-1.629-.258-.515-.365-.732-.419-1.004a2 2 0 0 1-.037-.289l.008.017a.25.25 0 1 0 .448-.224l-.235-.468ZM6.726 1.269c-1.167-.61-2.8-.142-3.454 1.135-.237.463-.36 1.08-.202 1.85.055.27.467.197.527-.071.285-1.256 1.177-2.462 2.989-2.528.234-.008.348-.278.14-.386" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="col-8 text-start">Learn More</div>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,31 @@
|
|||
const screenshotElems = document.getElementsByClassName('screenshot');
|
||||
const featureCardElems = document.getElementsByClassName('feature-card');
|
||||
const featureCardContainerElem = document.getElementById('feature-card-container');
|
||||
let currentFeatureCard = 1
|
||||
let currentFeature = 1
|
||||
|
||||
for (let i = 0; i < featureCardElems.length; i++) {
|
||||
featureCardElems[i].addEventListener('click', function() {
|
||||
if (i != currentFeatureCard) {
|
||||
updateActiveFeatureCard(i);
|
||||
screenshotElems[i].addEventListener('click', function() {
|
||||
if (i != currentFeature) {
|
||||
updateActiveFeature(i);
|
||||
}
|
||||
}, false)
|
||||
})
|
||||
featureCardElems[i].addEventListener('click', function() {
|
||||
if (i != currentFeature) {
|
||||
updateActiveFeature(i);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function updateActiveFeatureCard(i) {
|
||||
const lastCurrentFeature = currentFeatureCard;
|
||||
currentFeatureCard = i;
|
||||
console.log(i)
|
||||
function updateActiveFeature(i) {
|
||||
const lastCurrentFeature = currentFeature;
|
||||
currentFeature = i;
|
||||
|
||||
screenshotElems[i].id = 'active-screenshot';
|
||||
screenshotElems[lastCurrentFeature].id = "";
|
||||
|
||||
featureCardElems[i].id = 'active-feature-card';
|
||||
featureCardElems[lastCurrentFeature].id = "";
|
||||
if (lastCurrentFeature < i) {
|
||||
// featureCardContainerElem.scrollLeft = featureCardElems[i].offsetLeft - featureCardElems[i].offsetWidth/2
|
||||
featureCardContainerElem.scrollIntoView
|
||||
} else {
|
||||
featureCardContainerElem.scrollLeft = featureCardElems[i].offsetLeft - featureCardElems[i].offsetWidth
|
||||
}
|
||||
|
||||
|
||||
featureCardElems[i].scrollIntoView({inline: 'center'});
|
||||
screenshotElems[i].scrollIntoView({inline: 'center'});
|
||||
}
|
||||
Loading…
Reference in a new issue