oreospaws

Subscribe via Atom

Homepage

https://sweetpyon.neocities.org/

Email

Not defined

About

/*! * Pancaketchi Theme for status.cafe * Created by smallpancakes (https://smallpancakes.nekoweb.org) * Feel free to use this theme! Just please keep the credits ♡ */ @import url("https://fonts.googleapis.com/css2?family=VT323&display=swap"); :root { /* Pastel Colors */ --kawaii-purple: #b892ff; --kawaii-pink: #ffa6e6; --kawaii-light: #fff8ff; --kawaii-soft: #e8d6ff; --kawaii-text: #9d71d1; --kawaii-shadow: rgba(184, 146, 255, 0.2); --kawaii-screen: #e8f4ff; /* Device Sizes */ --device-width: 290px; --device-height: 340px; --screen-padding: 15px; } /* Base Styles */ body { background-color: var(--kawaii-light); background-image: linear-gradient( 45deg, var(--kawaii-soft) 1px, transparent 1px ), linear-gradient(-45deg, var(--kawaii-soft) 1px, transparent 1px); background-size: 20px 20px; color: var(--kawaii-text); font-family: "VT323", monospace; } /* Tamagotchi-like Device */ section:first-of-type { background: linear-gradient(135deg, var(--kawaii-pink), var(--kawaii-purple)); width: var(--device-width); height: var(--device-height); margin: 20px auto; position: relative; top: 50px; border-radius: 150px 150px 130px 130px / 180px 180px 140px 140px; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.1), inset 0 8px 0 rgba(255, 255, 255, 0.5), 0 10px 20px var(--kawaii-shadow), 0 2px 5px rgba(0, 0, 0, 0.1); } /* Screen Frame */ section:first-of-type::before { content: ""; position: absolute; top: 55px; left: 60px; right: 60px; bottom: 85px; background: var(--kawaii-screen); border-radius: 8px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 0 30px var(--kawaii-shadow), 0 0 0 3px rgba(255, 255, 255, 0.5); z-index: 1; } /* Device Buttons */ section:first-of-type::after { content: "●"; position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 3rem; color: rgba(255, 255, 255, 0.9); text-shadow: -45px 0 0 rgba(255, 255, 255, 0.9), 45px 0 0 rgba(255, 255, 255, 0.9); letter-spacing: 0; width: 90px; text-align: center; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); z-index: 3; } /* Title Area */ section:first-of-type h2 { position: absolute; top: -60px; color: var(--kawaii-text); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); } section:first-of-type p { position: absolute; top: -53px; right: 0; } section:first-of-type p a { color: var(--kawaii-text); opacity: 0.9; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); } /* Scrollable Content */ section:first-of-type dl { position: absolute; top: 55px; left: 65px; right: 60px; bottom: 85px; margin: 0; padding: 5px; overflow-y: auto; /* Scrollbar styling */ scrollbar-width: thin; /* Firefox */ scrollbar-color: var(--kawaii-pink) var(--kawaii-soft); /* Firefox */ /* WebKit scrollbar styling */ &::-webkit-scrollbar { width: 8px; } &::-webkit-scrollbar-track { background: var(--kawaii-soft); border-radius: 4px; } &::-webkit-scrollbar-thumb { background: var(--kawaii-pink); border-radius: 4px; } &::-webkit-scrollbar-thumb:hover { background: var(--kawaii-purple); } z-index: 2; display: flex; flex-direction: column; align-items: stretch; border-radius: 6px; } /* Content Items */ dd, dt { margin: 0; } section:first-of-type dt { color: var(--kawaii-text); opacity: 0.9; margin-bottom: 4px; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); } section:first-of-type dd { margin-bottom: 12px; background: rgba(255, 255, 255, 0.7); border-radius: 4px; padding: 6px 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.05); } dd.homepage { word-break: break-all; } section:first-of-type dd:last-child { margin-bottom: 0; } /* Links in Device */ section:first-of-type a { color: var(--kawaii-text); text-decoration: none; transition: all 0.2s ease; } section:first-of-type a:hover { color: var(--kawaii-pink); text-shadow: 0 0 2px rgba(255, 166, 230, 0.3); } /* Kawaii Status Posts */ .status { background: var(--kawaii-light); padding: 20px; margin: 15px 0; border-radius: 15px; position: relative; box-shadow: 0 4px 15px var(--kawaii-shadow), inset 0 0 0 1px var(--kawaii-soft); transition: all 0.3s ease; /* Add a subtle gradient overlay */ background-image: linear-gradient( 135deg, rgba(255, 255, 255, 0.8), rgba(232, 214, 255, 0.2) ); /* Add decorative corner */ &::before { content: "❤️"; position: absolute; top: -8px; right: -8px; background: var(--kawaii-pink); color: white; padding: 4px 8px; border-radius: 12px; opacity: 0; transform: scale(0.8); transition: all 0.3s ease; } } .status:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 8px 20px var(--kawaii-shadow), inset 0 0 0 1px var(--kawaii-pink); &::before { opacity: 1; transform: scale(1); } } /* Links */ a { color: var(--kawaii-purple); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--kawaii-pink); }

Statuses