Xargon/RetroDECK-Website
1
0
Fork 0
mirror of https://github.com/RetroDECK/RetroDECK-Website.git synced 2024-11-22 06:55:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Implement first pass of screenshot scrolling

Browse source
This commit is contained in:
Adam Iannazzone 2024-09-24 11:46:13 -04:00
parent dd8aeca6f7
commit 97e54f8355
3 changed files with 207 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
css/style.css
View file

@ -96,27 +96,39 @@ footer {
} }
/* Features Styles */ /* Features Styles */
#features { #features {
background: #000; background: #000;
border-top: var(--rd-purple) 5px solid; border-top: var(--rd-purple) 5px solid;
border-bottom: var(--rd-purple) 5px solid; border-bottom: var(--rd-purple) 5px solid;
} }
#feature-card-container { #feature-card-row, #screenshot-row {
/* overflow-x: scroll; */
flex-wrap: nowrap; flex-wrap: nowrap;
scrollbar-width: none; scrollbar-width: none;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
.screenshot {
scale: 80%;
}
.feature-card { .feature-card {
background: var(--rd-blue); background: var(--rd-blue);
border: white 2px solid; border: white 2px solid;
border-radius: 5px; 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 { .feature-card h3 {
color: white; color: white;
font-family: var(--pixel-font); font-family: var(--pixel-font);

194
index.html
View file

@ -54,61 +54,91 @@
href="https://retrodeck.readthedocs.io/en/latest/blog/">Blog</a> href="https://retrodeck.readthedocs.io/en/latest/blog/">Blog</a>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
aria-expanded="false">
Social <i class="bi bi-caret-down-square-fill"></i> Social <i class="bi bi-caret-down-square-fill"></i>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li> <li>
<a class="dropdown-item" target="_blank" rel="noopener noreferrer" <a class="dropdown-item" target="_blank" rel="noopener noreferrer"
href="https://discord.gg/WDc5C9YWMx"> 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> </a>
</li> </li>
<li> <li>
<a class="dropdown-item" target="_blank" rel="noopener noreferrer" <a class="dropdown-item" target="_blank" rel="noopener noreferrer"
href="https://matrix.to/#/#retrodeck:matrix.org"> 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> </a>
</li> </li>
<li> <li>
<a class="dropdown-item" target="_blank" rel="noopener noreferrer" <a class="dropdown-item" target="_blank" rel="noopener noreferrer"
href="https://www.reddit.com/r/RetroDeck/"> 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> </a>
</li> </li>
<li> <li>
<a class="dropdown-item" target="_blank" rel="noopener noreferrer" <a class="dropdown-item" target="_blank" rel="noopener noreferrer"
href="https://lemmy.zip/c/retrodeck"> 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> </a>
</li> </li>
</ul> </ul>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" <a class="nav-link" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
aria-expanded="false">
Source Code <i class="bi bi-caret-down-square-fill"></i> Source Code <i class="bi bi-caret-down-square-fill"></i>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li> <li>
<a class="dropdown-item" href="https://github.com/XargonWan/RetroDECK/tree/main" <a class="dropdown-item" href="https://github.com/XargonWan/RetroDECK/tree/main"
target="_blank" rel="noopener noreferrer"> 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> </a>
</li> </li>
<li> <li>
<a class="dropdown-item" href="https://github.com/XargonWan/RetroDECK-cooker/" <a class="dropdown-item" href="https://github.com/XargonWan/RetroDECK-cooker/"
target="_blank" rel="noopener noreferrer"> 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"> <svg role="img" height="1rem" class="pe-2" xmlns="http://www.w3.org/2000/svg"
<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"/> 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></i>Cooker
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item" href="https://repo.retrodeck.net/" <a class="dropdown-item" href="https://repo.retrodeck.net/" target="_blank"
target="_blank" rel="noopener noreferrer"> 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 <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> </a>
</li> </li>
</ul> </ul>
@ -144,11 +174,20 @@
href="https://flathub.org/apps/details/net.retrodeck.retrodeck"> href="https://flathub.org/apps/details/net.retrodeck.retrodeck">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-4"> <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> <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>
<div class="col-8 text-start"> <div class="col-8 text-start">
<div class="row"><div class="col">Get it on</div></div> <div class="row">
<div class="row"><div class="col">Flathub</div></div> <div class="col">Get it on</div>
</div>
<div class="row">
<div class="col">Flathub</div>
</div>
</div> </div>
</div> </div>
</a> </a>
@ -171,7 +210,8 @@
<div class="row"></div> <div class="row"></div>
<p class="fs-md-4"> <p class="fs-md-4">
With RetroDECK, everything has been pre-configured for optimal performance and quality on the Steam Deck. 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. 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. And don’t worry – you can always reset with a single click.
</p> </p>
@ -180,47 +220,122 @@
<!-- End Second Section --> <!-- End Second Section -->
</div> </div>
</div>
<!-- End Jumbotron --> <!-- End Jumbotron -->
<!-- Screenshot/Feature Section --> <!-- Screenshot/Feature Section -->
<div class="container-fluid mb-4" id="features" height="100px"> <div class="container-fluid mb-4" id="features" height="100px">
<!-- Steam Deck Image --> <!-- Screenshot Images -->
<div class="container mb-2"> <!-- <div class="container mb-2">
<div class="row"> <div class="row">
<div class="col"> <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>
</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> </div>
<!-- Feature List --> <!-- Feature List -->
<div class="row mb-2 overflow-x-scroll" id="feature-card-container"> <div class="row mb-2 overflow-x-scroll" id="feature-card-row">
<div class="col-4 feature-card mx-2" id="">
<div class="col-4 feature-card" id="empty-feature"></div>
<div class="col-4 feature-card" id="active-feature-card">
<h3>Feature 1</h3> <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>
<div class="col-4 feature-card mx-2" id="active-feature-card"> <div class="col-4 feature-card" id="">
<h3>Feature 2</h3> <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>
<div class="col-4 feature-card mx-2" id=""> <div class="col-4 feature-card" id="">
<h3>Feature 3</h3> <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>
<div class="col-4 feature-card mx-2" id=""> <div class="col-4 feature-card" id="">
<h3>Feature 4</h3> <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>
<div class="col-4 feature-card mx-2" id=""> <div class="col-4 feature-card" id="">
<h3>Feature 5</h3> <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>
<div class="col-4 feature-card mx-2" id=""> <div class="col-4 feature-card" id="">
<h3>Feature 6</h3> <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>
<div class="col-4 feature-card" id="empty-feature"></div>
</div> </div>
</div> </div>
@ -235,7 +350,8 @@
<h2 class="display-md-5 jumbo-header">We can't do this alone!</h2> <h2 class="display-md-5 jumbo-header">We can't do this alone!</h2>
<p class="fs-md-4"> <p class="fs-md-4">
RetroDECK is run by volunteers. 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> </p>
</div> </div>
@ -245,8 +361,10 @@
href="https://retrodeck.readthedocs.io/en/latest/wiki_about/donations-licenses/"> href="https://retrodeck.readthedocs.io/en/latest/wiki_about/donations-licenses/">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-4"> <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"> <svg xmlns="http://www.w3.org/2000/svg" height="2rem" fill="#946beb"
<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"/> 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> </svg>
</div> </div>
<div class="col-8 text-start">Learn More</div> <div class="col-8 text-start">Learn More</div>

37
scripts/features.js
View file

@ -1,26 +1,31 @@
const screenshotElems = document.getElementsByClassName('screenshot');
const featureCardElems = document.getElementsByClassName('feature-card'); const featureCardElems = document.getElementsByClassName('feature-card');
const featureCardContainerElem = document.getElementById('feature-card-container'); let currentFeature = 1
let currentFeatureCard = 1
for (let i = 0; i < featureCardElems.length; i++) { for (let i = 0; i < featureCardElems.length; i++) {
featureCardElems[i].addEventListener('click', function() { screenshotElems[i].addEventListener('click', function() {
if (i != currentFeatureCard) { if (i != currentFeature) {
updateActiveFeatureCard(i); updateActiveFeature(i);
} }
}, false) })
featureCardElems[i].addEventListener('click', function() {
if (i != currentFeature) {
updateActiveFeature(i);
}
})
} }
function updateActiveFeatureCard(i) { function updateActiveFeature(i) {
const lastCurrentFeature = currentFeatureCard; const lastCurrentFeature = currentFeature;
currentFeatureCard = i; currentFeature = i;
console.log(i)
screenshotElems[i].id = 'active-screenshot';
screenshotElems[lastCurrentFeature].id = "";
featureCardElems[i].id = 'active-feature-card'; featureCardElems[i].id = 'active-feature-card';
featureCardElems[lastCurrentFeature].id = ""; featureCardElems[lastCurrentFeature].id = "";
if (lastCurrentFeature < i) {
// featureCardContainerElem.scrollLeft = featureCardElems[i].offsetLeft - featureCardElems[i].offsetWidth/2
featureCardContainerElem.scrollIntoView featureCardElems[i].scrollIntoView({inline: 'center'});
} else { screenshotElems[i].scrollIntoView({inline: 'center'});
featureCardContainerElem.scrollLeft = featureCardElems[i].offsetLeft - featureCardElems[i].offsetWidth
}
} }