ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-04-30 06:34:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

button shenanigans, download selector almost done

Browse Source
This commit is contained in:
af-n 2022-07-20 20:22:57 -04:00
parent 68ef930163
commit 3105d5844c
8 changed files with 79 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/atoms/Button.svelte
View File

@ -2,10 +2,12 @@
export let kind = 'secondary';
$: type = 'button-' + kind;
export let href = '#';
export let fontsize = '1.2rem';
</script>
<a {href}>
<button class={type}>
<button class={type} style="font-size: {fontsize};">
<slot/>
</button>
</a>
@ -25,10 +27,8 @@
padding: 12px 40px;
cursor: pointer;
background-color: transparent;
font-size: 1.5rem;
margin-top: 45px;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
margin-right: 20px;
user-select: none;
}

4
src/lib/components/atoms/DownloadChannel.svelte
View File

@ -22,8 +22,8 @@
button {
font-weight: 300;
font-size: 1.5rem;
height: 60px;
font-size: 1.4rem;
height: 55px;
width: 100%;
color: var(--white);
border-radius: 200px;

70
src/lib/components/atoms/DownloadSelector.svelte
View File

@ -3,26 +3,17 @@
</script>
<div class="download-selection">
<h1>99.9.9a</h1>
<h3>2022-07-11</h3>
<h1>2.5.0</h1>
<h4>2022-07-11</h4>
<div class="info">
<div class='rounded-fill'>
<h2>Features</h2>
</div>
<div class='rounded-fill'><h3>Features</h3></div>
<ul>
<li><h4>sn is so oococolol</h4></li>
<li><h4>sn is so oococolol</h4></li>
<li><h4>sn is so oococolol</h4></li>
<li><h4>sn is so oococolol</h4></li>
<li><h4>sn is so oococolol</h4></li>
<li><h4>sn is so oococolol</h4></li>
<li><h4>sn is so oococolol</h4></li>
<li><h4>sn is so oococolol</h4></li>
<li><h4>sn is so oococolol</h4></li>
<li><h4>sn is so oococolol</h4></li>
<li><h4>sn is so oococolol</h4></li>
<li><h4>sn is so oococolol</h4></li>
<li><h4>sn is so oococolol</h4></li>
<li><h5>feature request issue template <a href="https://github.com/revanced/revanced-patcher/commit/112bc998f4761a647cb9eab7454e35264fa96fd9">(1b39278)</a></h5></li>
<li><h5>issue templates [skip ci] <a href="https://github.com/revanced/revanced-patcher/commit/112bc998f4761a647cb9eab7454e35264fa96fd9">(112bc99)</a></h5></li>
</ul>
<div class='rounded-fill'><h3>Bug Fixes</h3></div>
<ul>
<li><h5>missing additional items [skip ci] <a href="https://github.com/revanced/revanced-patcher/commit/0ebab8bf598d993df6e340651205cba48f1ef725">(0ebab8b)</a></h5></li>
</ul>
</div>
<div class="button">
@ -33,27 +24,30 @@
<style>
.download-selection {
background-color: var(--grey-two);
border-radius: 20px;
border-radius: 15px;
justify-content: center;
height:50vh;
height:100%;
}
h1 {
text-align: center;
margin-top: 1.75rem;
margin-top: 1.4rem;
font-weight: 700;
}
h2 {
h3 {
text-align: left;
font-weight: 700;
font-size:1.2rem;
}
h4 {
text-align: center;
}
.rounded-fill {
display:inline-block;
border-radius: 200px;
margin-left: 1rem;
padding: 0.5rem 1rem;
padding: 0.4rem 0.75rem;
background-color: var(--grey-three);
}
@ -61,35 +55,33 @@
margin-top: 1rem;
overflow-y: scroll;
margin-right: 0.5rem;
-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
height:30vh;
}
h3 {
font-weight:400;
font-size: 1.2rem;
text-align: center;
color:var(--grey-six)
}
h4 {
color: var(--white);
font-weight: 300;
}
ul {
margin-top: 0.5rem;
margin-left:3rem;
margin-bottom:1rem;
line-height: 1.5rem;
height: 10vw;
}
li {
color:var(--white)
color:var(--white);
}
ul a {
text-decoration: none;
color:var(--red);
}
.button {
display:flex;
justify-content: center;
margin-top: -2rem;
margin-top: -1.5rem;
margin-bottom: 1.5rem;
}
</style>

4
src/lib/components/atoms/Navigation.svelte
View File

@ -18,8 +18,8 @@
display: inline-block;
position: relative;
font-weight: 300;
margin-left: 7px;
margin-right: 7px;
margin-left: 0.5rem;
margin-right: 0.5rem;
align-items: center;
border: var(--grey-six);
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);

8
src/lib/components/molecules/DownloadChannelHost.svelte
View File

@ -13,7 +13,7 @@
};
</script>
<div class="download-selection">
<div class="download-channel">
{#each items as item}
<DownloadChannel active={item === activeTab}
on:click={handleTabChange(item)}>
@ -23,12 +23,12 @@
</div>
<style>
.download-selection {
.download-channel {
background-color: var(--grey-one);
border-radius: 200px;
display: flex;
padding: 8px 8px;
padding: 0.5rem 0.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap:1rem;
}
</style>

19
src/lib/components/molecules/DownloadSelectorHost.svelte
View File

@ -9,19 +9,24 @@
<DownloadSelector></DownloadSelector>
<DownloadSelector></DownloadSelector>
<DownloadSelector></DownloadSelector>
<DownloadSelector></DownloadSelector>
</div>
<style>
.download-selector-main {
margin-top: 2rem;
padding: 12px 12px;
border-radius: 25px;
background-color: var(--grey-one);
width: 100;
gap:15px;
align-items: center;
margin-top: 2rem;
padding: 0.75rem 0.75rem;
border-radius: 25px;
width: 100%;
gap:0.9rem;
display:grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-flow: column;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
overflow-x: scroll;
}
</style>

6
src/lib/components/organisms/IndexDescription.svelte
View File

@ -14,8 +14,8 @@
</h2>
<div class="hero-buttons">
<Button kind="primary" href="/download">Download</Button>
<Button href="/docs">Read The Docs</Button>
<Button kind="primary" href="/download" fontsize="1.5rem">Download</Button>
<Button href="/docs" fontsize="1.5rem">Read The Docs</Button>
</div>
</div>
</section>
@ -26,6 +26,8 @@
}
.hero-buttons {
display: flex;
gap:1rem;
user-select: none;
}

21
src/routes/__layout.svelte
View File

@ -68,6 +68,7 @@ import Wave from '$lib/components/atoms/Wave.svelte';
--grey-four: #1B1E29;
--grey-five: #D0D0D0;
--grey-six: #a19e9e;
--grey-seven: #535563;
}
:global(::selection) {
@ -88,6 +89,24 @@ import Wave from '$lib/components/atoms/Wave.svelte';
font-size: 1.85rem;
}
:global(h3) {
color: var(--white);
font-weight: 600;
font-size: 1rem;
}
:global(h4) {
color:var(--grey-six);
font-weight:500;
font-size: 1rem;
}
:global(h5) {
color:var(--white);
font-weight: 300;
font-size: 1rem;
}
/*-----scrollbar-----*/
:global(::-webkit-scrollbar) {
@ -103,6 +122,6 @@ import Wave from '$lib/components/atoms/Wave.svelte';
}
:global(::-webkit-scrollbar-thumb:hover) {
background-color: var(--grey-four);
background-color: var(--grey-seven);
}
</style>