mirror of
https://github.com/wah-su/wah-su.github.io.git
synced 2025-04-06 08:14:40 +00:00
some changes
This commit is contained in:
parent
80e8c00c40
commit
5b7f81a5b8
GPG key ID:
858E8EE696525EED
3 changed files with 222 additions and 35 deletions
|
|
@ -518,12 +518,18 @@
|
|||
}
|
||||
}
|
||||
@layer utilities {
|
||||
.collapse {
|
||||
visibility: collapse;
|
||||
}
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -593,6 +599,9 @@
|
|||
.mx-auto {
|
||||
margin-inline: auto;
|
||||
}
|
||||
.mt-8 {
|
||||
margin-top: calc(var(--spacing) * 8);
|
||||
}
|
||||
.ml-1 {
|
||||
margin-left: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
|
@ -608,9 +617,21 @@
|
|||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.list-item {
|
||||
display: list-item;
|
||||
}
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
.aspect-square {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
|
@ -659,15 +680,21 @@
|
|||
.max-w-\[75\%\] {
|
||||
max-width: 75%;
|
||||
}
|
||||
.max-w-\[590px\] {
|
||||
max-width: 590px;
|
||||
.max-w-\[500px\] {
|
||||
max-width: 500px;
|
||||
}
|
||||
.max-w-\[1210px\] {
|
||||
max-width: 1210px;
|
||||
}
|
||||
.flex-shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.border-collapse {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.origin-center {
|
||||
transform-origin: center;
|
||||
}
|
||||
|
|
@ -695,9 +722,15 @@
|
|||
--tw-scale-z: 150%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
.transform {
|
||||
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
|
||||
}
|
||||
.animate-ping {
|
||||
animation: var(--animate-ping);
|
||||
}
|
||||
.resize {
|
||||
resize: both;
|
||||
}
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
|
@ -822,9 +855,6 @@
|
|||
.py-8 {
|
||||
padding-block: calc(var(--spacing) * 8);
|
||||
}
|
||||
.py-14 {
|
||||
padding-block: calc(var(--spacing) * 14);
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -858,6 +888,20 @@
|
|||
.text-white {
|
||||
color: var(--color-white);
|
||||
}
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.outline {
|
||||
outline-style: var(--tw-outline-style);
|
||||
outline-width: 1px;
|
||||
}
|
||||
.filter {
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
.backdrop-filter {
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
}
|
||||
.transition {
|
||||
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
|
|
@ -907,19 +951,34 @@
|
|||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
.md\:scale-95 {
|
||||
.sm\:py-14 {
|
||||
@media (width >= 40rem) {
|
||||
padding-block: calc(var(--spacing) * 14);
|
||||
}
|
||||
}
|
||||
.sm\:py-\[200px\] {
|
||||
@media (width >= 40rem) {
|
||||
padding-block: 200px;
|
||||
}
|
||||
}
|
||||
.md\:-my-8 {
|
||||
@media (width >= 48rem) {
|
||||
--tw-scale-x: 95%;
|
||||
--tw-scale-y: 95%;
|
||||
--tw-scale-z: 95%;
|
||||
margin-block: calc(var(--spacing) * -8);
|
||||
}
|
||||
}
|
||||
.md\:scale-85 {
|
||||
@media (width >= 48rem) {
|
||||
--tw-scale-x: 85%;
|
||||
--tw-scale-y: 85%;
|
||||
--tw-scale-z: 85%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
}
|
||||
.md\:scale-100 {
|
||||
.md\:scale-90 {
|
||||
@media (width >= 48rem) {
|
||||
--tw-scale-x: 100%;
|
||||
--tw-scale-y: 100%;
|
||||
--tw-scale-z: 100%;
|
||||
--tw-scale-x: 90%;
|
||||
--tw-scale-y: 90%;
|
||||
--tw-scale-z: 90%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
}
|
||||
|
|
@ -949,17 +1008,40 @@
|
|||
letter-spacing: var(--tracking-normal);
|
||||
}
|
||||
}
|
||||
.lg\:scale-90 {
|
||||
.lg\:mt-16 {
|
||||
@media (width >= 64rem) {
|
||||
--tw-scale-x: 90%;
|
||||
--tw-scale-y: 90%;
|
||||
--tw-scale-z: 90%;
|
||||
margin-top: calc(var(--spacing) * 16);
|
||||
}
|
||||
}
|
||||
.lg\:scale-95 {
|
||||
@media (width >= 64rem) {
|
||||
--tw-scale-x: 95%;
|
||||
--tw-scale-y: 95%;
|
||||
--tw-scale-z: 95%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
}
|
||||
.xl\:mt-2 {
|
||||
.lg\:scale-100 {
|
||||
@media (width >= 64rem) {
|
||||
--tw-scale-x: 100%;
|
||||
--tw-scale-y: 100%;
|
||||
--tw-scale-z: 100%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
}
|
||||
.lg\:flex-row {
|
||||
@media (width >= 64rem) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.xl\:my-0 {
|
||||
@media (width >= 80rem) {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
margin-block: calc(var(--spacing) * 0);
|
||||
}
|
||||
}
|
||||
.xl\:mt-0 {
|
||||
@media (width >= 80rem) {
|
||||
margin-top: calc(var(--spacing) * 0);
|
||||
}
|
||||
}
|
||||
.xl\:max-h-none {
|
||||
|
|
@ -967,17 +1049,9 @@
|
|||
max-height: none;
|
||||
}
|
||||
}
|
||||
.xl\:scale-95 {
|
||||
.xl\:max-w-\[590px\] {
|
||||
@media (width >= 80rem) {
|
||||
--tw-scale-x: 95%;
|
||||
--tw-scale-y: 95%;
|
||||
--tw-scale-z: 95%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
}
|
||||
.xl\:flex-row {
|
||||
@media (width >= 80rem) {
|
||||
flex-direction: row;
|
||||
max-width: 590px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1045,6 +1119,31 @@ body {
|
|||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-rotate-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: rotateX(0);
|
||||
}
|
||||
@property --tw-rotate-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: rotateY(0);
|
||||
}
|
||||
@property --tw-rotate-z {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: rotateZ(0);
|
||||
}
|
||||
@property --tw-skew-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: skewX(0);
|
||||
}
|
||||
@property --tw-skew-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: skewY(0);
|
||||
}
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
|
|
@ -1100,6 +1199,83 @@ body {
|
|||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-outline-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
@property --tw-blur {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-brightness {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-contrast {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-grayscale {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-hue-rotate {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-invert {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-opacity {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-saturate {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-sepia {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-backdrop-blur {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-backdrop-brightness {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-backdrop-contrast {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-backdrop-grayscale {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-backdrop-hue-rotate {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-backdrop-invert {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-backdrop-opacity {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-backdrop-saturate {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-backdrop-sepia {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-duration {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import Footer from "./Footer";
|
|||
|
||||
export default function Bento() {
|
||||
return (
|
||||
<div className="w-full grid grid-cols-[repeat(4,minmax(0,280px))] grid-rows-[repeat(4,minmax(0,136px))] gap-2">
|
||||
<div className="px-8 mt-8 lg:mt-16 xl:mt-0 w-full grid grid-cols-[repeat(4,minmax(0,280px))] grid-rows-[repeat(4,minmax(0,136px))] gap-2">
|
||||
<BentoCard
|
||||
logo="/static/images/logos/xbb.png"
|
||||
image="/static/images/cards/xbb.png"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
export default function Title() {
|
||||
return (
|
||||
<div className=" min-h-[438px] flex gap-4 px-8 flex-col-reverse xl:flex-row items-center justify-center">
|
||||
<div className="flex items-center justify-center gap-4 flex-col max-w-[590px]">
|
||||
<div className="min-h-[438px] flex gap-4 px-8 flex-col-reverse lg:flex-row items-center justify-center">
|
||||
<div className="flex items-center justify-center gap-4 flex-col w-full max-w-[500px] xl:max-w-[590px]">
|
||||
<h1 className="text-[#FF851A] text-[64px] md:text-[128px] ubuntu-mono-regular leading-none">
|
||||
WAH.su<span className="text-[32px] md:text-[48px]">(d0)</span>
|
||||
</h1>
|
||||
|
|
@ -10,9 +10,20 @@ export default function Title() {
|
|||
non-company, 200% wah!
|
||||
</p>
|
||||
</div>
|
||||
<a href="https://wahs.wah.su" className="hover:-rotate-5 origin-center transition-transform grid grid-cols-1 grid-rows-1 flex-shrink-0 sm:flex-shrink-1 py-14 md:py-0">
|
||||
<img className="col-[1] row-[1] scale-150 max-h-[512px] xl:max-h-none md:scale-100 -z-10" src="/static/images/card-blur.png" alt=""></img>
|
||||
<img className="col-[1] row-[1] scale-140 md:scale-95 lg:scale-90 xl:scale-95 xl:mt-2 max-h-[512px] xl:max-h-none" src="/static/images/card.png" alt="Sleeping red panda on the tree"></img>
|
||||
<a
|
||||
href="https://wahs.wah.su"
|
||||
className="hover:-rotate-5 origin-center transition-transform grid grid-cols-1 grid-rows-1 items-center justify-center flex-shrink-0 sm:flex-shrink-1 py-8 sm:py-14 md:py-0 md:-my-8 xl:my-0"
|
||||
>
|
||||
<img
|
||||
className="col-[1] row-[1] scale-150 max-h-[512px] xl:max-h-none md:scale-90 lg:scale-100 -z-10"
|
||||
src="/static/images/card-blur.png"
|
||||
alt=""
|
||||
></img>
|
||||
<img
|
||||
className="col-[1] row-[1] scale-140 md:scale-85 lg:scale-95 max-h-[512px] xl:max-h-none"
|
||||
src="/static/images/card.png"
|
||||
alt="Sleeping red panda on the tree"
|
||||
></img>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue