update stuff
This commit is contained in:
WinsDominoes
parent
0d9565bdff
commit
286fe97acb
|
|
@ -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;
|
||||
}
|
||||
.app-grid {
|
||||
--grid-layout-gap: 1rem;
|
||||
--grid-column-count: 3;
|
||||
--grid-item--min-width: 0;
|
||||
|
||||
.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));
|
||||
/**
|
||||
* 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: 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;
|
||||
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;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.app-grid__item {
|
||||
.app-grid__item > img {
|
||||
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;
|
||||
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.app-grid__item > img {
|
||||
max-width: 100%;
|
||||
height: 128px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
15
index.html
15
index.html
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue