diff options
Diffstat (limited to 'micro.pinapelz.com/css/style.css')
| -rw-r--r-- | micro.pinapelz.com/css/style.css | 296 |
1 files changed, 296 insertions, 0 deletions
diff --git a/micro.pinapelz.com/css/style.css b/micro.pinapelz.com/css/style.css new file mode 100644 index 0000000..4a930c1 --- /dev/null +++ b/micro.pinapelz.com/css/style.css @@ -0,0 +1,296 @@ +html { + overflow-y: scroll; +} + +/* 🌸 PASTEL PALETTE */ +:root { + --bgcolor: #fff7fb; + --fontcolor: #3a2c3d; + + --linkcolor: #ff77c8; + --visitedcolor: #d76dff; + + --precolor: #4a3e4f; + --prebgcolor: #ffe6f4; + + --alertbgcolor: #ffe0f1; + --hrcolor: #ffbde6; + + --blockquotecolor: #ffe8f6; + --pcodecolor: #f7d2f0; + + --sitetitlecolor: #ff99dd; + --titlecolor: #c77fff; +} + +/* 🌙 DARK MODE PASTEL NIGHT */ +@media (prefers-color-scheme: dark) { + :root { + --bgcolor: #241b2b; + --fontcolor: #f8e8ff; + + --linkcolor: #ff9be9; + --visitedcolor: #e49cff; + + --precolor: #ffeefe; + --prebgcolor: #35263f; + + --alertbgcolor: #3f304a; + --hrcolor: #f4cfff; + + --blockquotecolor: #3a2b45; + --pcodecolor: #614c70; + + --sitetitlecolor: #ffd1f6; + --titlecolor: #d9a7ff; + } +} + +/* 🌸 TYPO + BASE */ +body { + max-width: 800px; + margin: 40px auto; + padding: 0 10px; + + font: 15px/1.6 "IBM Plex Mono", "Fira Mono", monospace; + color: var(--fontcolor); + background: var(--bgcolor); + + transition: background 0.3s ease, color 0.3s ease; +} + +/* 🌸 LINKS */ +a { + color: var(--linkcolor); + text-decoration: none; + transition: color 0.2s ease, text-shadow 0.2s ease; +} + +a:hover { + color: var(--visitedcolor); + text-shadow: 0 0 6px currentColor; +} + +a:visited { + color: var(--visitedcolor); +} + +/* 🌸 HEADERS */ +h1, h2, h3 { + line-height: 1.25; + color: var(--titlecolor); + margin-top: 1.6rem; + font-weight: 700; +} + +h1.site-title { + color: var(--sitetitlecolor); + text-align: center; + font-size: 2rem; + margin-bottom: 1rem; +} + +/* 🌸 PARAGRAPHS */ +p { + margin-top: 1.3rem; +} + +/* 🌸 INLINE CODE */ +p > code, +li > code { + color: var(--precolor); + background: var(--pcodecolor); + padding: 3px 5px; + border-radius: 6px; +} + +/* 🌸 FULL CODE */ +code { + color: var(--precolor); + background: var(--prebgcolor); + padding: 3px 5px; + border-radius: 6px; +} + +pre { + color: var(--precolor); + background: var(--prebgcolor); + padding: 24px; + overflow-x: auto; + border-radius: 12px; + box-shadow: 0 0 10px rgba(255, 180, 220, 0.25); +} + +/* 🌸 ARTICLES */ +article { + padding: 24px 0; +} + +/* 🌸 IMAGES */ +img { + display: block; + max-width: 100%; + height: auto; + margin: auto; + border-radius: 12px; +} + +/* cute avatar */ +.avatar { + width: 100px; + height: 100px; + border-radius: 50%; + box-shadow: 0 0 8px rgba(255, 140, 200, 0.4); + border: 4px solid var(--bgcolor); + transition: transform 0.3s ease; +} + +/* Banner with overlay avatar */ +.banner { + position: relative; + margin-bottom: 1rem; +} + +.banner img:first-child { + width: 100%; + max-width: 600px; + height: auto; + border-radius: 8px; + opacity: 0.85; +} + +.banner .avatar { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 2; + width: 120px; + height: 120px; + box-shadow: 0 0 20px rgba(255, 140, 200, 0.6); +} + +.banner .avatar:hover { + transform: translate(-50%, -50%) scale(1.05); +} + +/* 🌸 ALERTS */ +.alert { + color: var(--fontcolor); + background: var(--alertbgcolor); + padding: 20px; + border-radius: 12px; + box-shadow: 0 0 12px rgba(255, 180, 220, 0.3); + overflow-x: auto; +} + +/* 🌸 NEXT/PREV */ +.article-nextprev { + display: flex; + flex-flow: row wrap-reverse; + justify-content: space-between; +} + +/* 🌸 DIVIDERS */ +hr { + margin: 35px 33% 15px; + border-color: var(--hrcolor); + border-width: 3px; + border-radius: 3px; +} + +hr.small { + margin: 35px 44% 25px; + border: 1px dashed var(--hrcolor); +} + +/* 🌸 BLOCKQUOTE */ +blockquote { + background: var(--blockquotecolor); + margin: 1.2rem 0; + padding: 12px 20px; + border-radius: 12px; + box-shadow: 0 0 8px rgba(255, 200, 240, 0.25); + border-left: 4px solid var(--hrcolor); +} + +/* 🌸 LISTS */ +ol, ul { + padding-left: 1.1rem; +} + +ol > li, +ul > li { + margin-bottom: 0.8rem; +} + +ul > li { + list-style-type: disclosure-closed; +} + +/* 🌸 TABLES */ +table { + text-align: left; + border: 1px solid var(--hrcolor); + border-radius: 10px; + overflow: hidden; +} + +thead th, tfoot th, tfoot td { + padding: 6px 10px; + background-color: var(--alertbgcolor); + color: var(--titlecolor); +} + +td { + padding: 8px 10px; +} + +tbody tr:nth-child(even) { + background-color: var(--alertbgcolor); +} + +/* 🌸 RESPONSIVE MOE */ +@media all and (max-width: 800px) { + .bio-card .bio { + justify-content: space-around; + flex-direction: column; + } + .bio-card .bio > img { + align-self: center; + margin: auto; + } + .bio-card .bio > p { + align-self: center; + text-align: center; + } + + /* Smaller avatar on mobile */ + .banner .avatar { + width: 90px; + height: 90px; + } + + .banner img:first-child { + border-radius: 6px; + } +} + +/* PRINT */ +@media print { + a, a:visited { + color: #000; + text-decoration: none; + } + a::after { + content: " (" attr(href) ") "; + } + nav, footer, hr, .noprint { + display: none !important; + } + pre, blockquote, code { + background: #fff; + border: none; + box-shadow: none; + } +} |