mirror of
https://github.com/wah-su/wahs.wah.su.git
synced 2025-04-05 15:54:37 +00:00
round elements
This commit is contained in:
parent
257649beaf
commit
420fdd23a9
GPG key ID:
858E8EE696525EED
2 changed files with 69 additions and 3 deletions
|
|
@ -521,6 +521,9 @@
|
|||
}
|
||||
}
|
||||
@layer utilities {
|
||||
.collapse {
|
||||
visibility: collapse;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
@ -578,12 +581,33 @@
|
|||
.mt-4 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.contents {
|
||||
display: contents;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.list-item {
|
||||
display: list-item;
|
||||
}
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
.aspect-square {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
|
@ -608,12 +632,18 @@
|
|||
.min-w-48 {
|
||||
min-width: calc(var(--spacing) * 48);
|
||||
}
|
||||
.border-collapse {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.transform {
|
||||
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
|
||||
}
|
||||
.animate-pulse {
|
||||
animation: var(--animate-pulse);
|
||||
}
|
||||
.resize {
|
||||
resize: both;
|
||||
}
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -629,19 +659,38 @@
|
|||
.gap-4 {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.overflow-x-auto {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.rounded-sm {
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.rounded-b-lg {
|
||||
border-bottom-right-radius: var(--radius-lg);
|
||||
border-bottom-left-radius: var(--radius-lg);
|
||||
}
|
||||
.border {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
}
|
||||
.bg-\[\#faebeb\] {
|
||||
background-color: #faebeb;
|
||||
}
|
||||
.bg-gray-400 {
|
||||
background-color: var(--color-gray-400);
|
||||
}
|
||||
.bg-orange-600 {
|
||||
background-color: var(--color-orange-600);
|
||||
}
|
||||
.bg-orange-800 {
|
||||
background-color: var(--color-orange-800);
|
||||
}
|
||||
.bg-orange-800\/50 {
|
||||
background-color: color-mix(in oklab, var(--color-orange-800) 50%, transparent);
|
||||
}
|
||||
.bg-orange-950 {
|
||||
background-color: var(--color-orange-950);
|
||||
}
|
||||
|
|
@ -651,6 +700,9 @@
|
|||
.object-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
.p-4 {
|
||||
padding: calc(var(--spacing) * 4);
|
||||
}
|
||||
.px-4 {
|
||||
padding-inline: calc(var(--spacing) * 4);
|
||||
}
|
||||
|
|
@ -677,6 +729,10 @@
|
|||
.opacity-30 {
|
||||
opacity: 30%;
|
||||
}
|
||||
.outline {
|
||||
outline-style: var(--tw-outline-style);
|
||||
outline-width: 1px;
|
||||
}
|
||||
.transition-colors {
|
||||
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
|
|
@ -818,3 +874,13 @@
|
|||
inherits: false;
|
||||
initial-value: skewY(0);
|
||||
}
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
@property --tw-outline-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default function Index(props: {
|
|||
<Header path={props.path} />
|
||||
<div className="container mx-auto py-4 px-4 sm:px-8">
|
||||
<div>
|
||||
<p className="text-4xl ">Images</p>
|
||||
<p className="text-4xl bg-orange-800/50 rounded-sm p-4">Images</p>
|
||||
<div
|
||||
id="index_images"
|
||||
className="mt-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-4"
|
||||
|
|
@ -35,7 +35,7 @@ export default function Index(props: {
|
|||
<a
|
||||
data-type="index__placeholder__image"
|
||||
key={`index__placeholder__image-${num}`}
|
||||
className={`relative aspect-square min-w-48 sm:min-w-auto ${
|
||||
className={`relative aspect-square min-w-48 sm:min-w-auto rounded-sm overflow-hidden ${
|
||||
idx >= 5 ? "hidden xl:block" : ""
|
||||
}`}
|
||||
>
|
||||
|
|
@ -48,7 +48,7 @@ export default function Index(props: {
|
|||
})}
|
||||
<a
|
||||
href="/images/"
|
||||
className="text-[#f9ebeb] hover:bg-orange-600 transition-colors aspect-square bg-yellow-950 min-w-48 sm:min-w-auto flex items-center justify-center flex-col"
|
||||
className="text-[#f9ebeb] hover:bg-orange-600 rounded-sm overflow-hidden transition-colors aspect-square bg-yellow-950 min-w-48 sm:min-w-auto flex items-center justify-center flex-col"
|
||||
>
|
||||
<span className="material-symbols--arrow-forward-rounded w-16 h-16"></span>
|
||||
<p className="text-xl">All Images</p>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue