winsdominoes
/
winscloud-apps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update stuff

This commit is contained in:
WinsDominoes 2024-05-09 15:16:16 +07:00
parent 0d9565bdff
commit 286fe97acb
2 changed files with 122 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
assets/css/style.css
View File

@ -129,6 +129,92 @@ header {
display: none;
}
.container {
margin: 10px calc(10px + 1.5625vw);
padding: 10px;
}
.main-banner {
height: 300px;
border-radius: 0.75rem;
background-color: #2ec27e;
box-shadow: 1px 1px 4px 0 light-dark(var(--light-nav-shade-color), var(--dark-nav-shade-color));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
}
.main-banner h1 {
font-size: calc(45px + .5vw);
}
.main-banner p {
font-size: calc(12px + .5vw);
}
.main-apps {
display: flex;
flex-direction: column;
text-align: center;
justify-items: center;
}
.main-apps > #heading {
margin: 2rem 0 1rem 0;
}
.app-grid {
--grid-layout-gap: 1rem;
--grid-column-count: 3;
--grid-item--min-width: 350px;
/**
* Calculated values.
*/
--gap-count: calc(var(--grid-column-count) - 1);
--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
grid-gap: var(--grid-layout-gap);
align-items: center;
}
.app-grid__item {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: center;
text-align: start;
padding: 1rem;
cursor: pointer;
color: light-dark(var(--light-card-fg-color), var(--dark-card-fg-color));
background-color: light-dark(var(--light-card-bg-color), var(--dark-card-bg-color));
box-shadow: 1px 1px 5px 0 light-dark(var(--light-card-shade-color), var(--dark-card-shade-color));
text-decoration: none;
border-radius: 1rem;
}
.app-grid__item > .details {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.app-grid__item > img {
max-width: 100%;
height: 96px;
}
/* Screens smaller than 480 pixels */
@media (max-width: 420px) {
.nav {
@ -183,77 +269,27 @@ header {
height: calc(100vh - 50px);
padding: 5px;
}
}
.container {
margin: 10px calc(10px + 1.5625vw);
padding: 10px;
}
.main-banner {
height: 300px;
border-radius: 0.75rem;
background-color: #2ec27e;
box-shadow: 1px 1px 4px 0 light-dark(var(--light-nav-shade-color), var(--dark-nav-shade-color));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px;
}
.main-banner h1 {
font-size: calc(45px + .5vw);
}
.main-banner p {
font-size: calc(12px + .5vw);
}
.main-apps {
display: flex;
flex-direction: column;
text-align: center;
justify-items: center;
}
.main-apps > #heading {
margin: 2rem 0 1rem 0;
}
.app-grid {
display: grid;
align-items: center;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
grid-gap: 1rem;
}
.app-grid__item {
max-width: 100%;
display: flex;
flex-direction: row;
gap: 1rem;
align-items: center;
text-align: start;
padding-block: .5rem;
padding-inline: .5rem 1rem;
max-width: fit-content;
cursor: pointer;
color: light-dark(var(--light-card-fg-color), var(--dark-card-fg-color));
background-color: light-dark(var(--light-card-bg-color), var(--dark-card-bg-color));
box-shadow: 1px 1px 5px 0 light-dark(var(--light-card-shade-color), var(--dark-card-shade-color));
text-decoration: none;
.app-grid {
--grid-layout-gap: 1rem;
--grid-column-count: 3;
--grid-item--min-width: 0;
/**
* Calculated values.
*/
--gap-count: calc(var(--grid-column-count) - 1);
--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
display: grid;
grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
grid-gap: var(--grid-layout-gap);
align-items: center;
}
border-radius: 1rem;
}
.app-grid__item > img {
max-width: 100%;
height: 128px;
.app-grid__item > img {
max-width: 100%;
height: 64px;
}
}

19
index.html
View File

@ -52,9 +52,9 @@
</div>
<div class="app-grid">
<a class="app-grid__item" href="https://datecalculator.winscloud.net">
<a class="app-grid__item" href="https://datecalculator.winscloud.net">
<img src="assets/images/icons/apps/dateapp.png" alt="Date Calculator">
<div class="details">
<span class="text-bold">Date Calculator</span>
<p>
@ -63,7 +63,7 @@
</div>
</a>
<a class="app-grid__item" href="https://datecalculator.winscloud.net">
<a class="app-grid__item" href="https://apps.winscloud.net/Runoff">
<img src="https://git.winscloud.net/repo-avatars/828b37c6b4e0493035c0b9d3e263dc855e88ddd5340afcd14f027c55c0726ddc" alt="Runoff">
<div class="details">
@ -74,7 +74,7 @@
</div>
</a>
<a class="app-grid__item" href="https://datecalculator.winscloud.net">
<a class="app-grid__item" href="https://apps.winscloud.net/Aekasarn">
<img src="https://git.winscloud.net/repo-avatars/1afe8fbd0d0acb779caa1779e16ed0533404d24598e207d82d02b141adde09ba" alt="Aekasarn">
<div class="details">
@ -84,6 +84,17 @@
</p>
</div>
</a>
<a class="app-grid__item" href="https://apps.winscloud.net/">
<img src="https://git.winscloud.net/repo-avatars/1afe8fbd0d0acb779caa1779e16ed0533404d24598e207d82d02b141adde09ba" alt="Aekasarn">
<div class="details">
<span class="text-bold">PhotoSphereStudio</span>
<p>
Upload 360
</p>
</div>
</a>
</div>
</div>
</div>