@whykusanagi/corrupted-theme 0.1.0

package/src/css/theme.css

@@ -0,0 +1,478 @@
+/* theme.css — Corrupted Theme Master Stylesheet */
+/*
+ * A dark, glassmorphic design system with pink/purple accents
+ * Modular architecture for maximum flexibility and reusability
+ *
+ * Import this single file to get all theme styles
+ * Or import individual modules for granular control
+ */
+
+/* ========== CORE FOUNDATION ========== */
+@import './variables.css';
+
+/* ========== TYPOGRAPHY & TEXT ========== */
+@import './typography.css';
+
+/* ========== GLASSMORPHISM EFFECTS ========== */
+@import './glassmorphism.css';
+
+/* ========== ANIMATIONS ========== */
+@import './animations.css';
+
+/* ========== REUSABLE COMPONENTS ========== */
+@import './components.css';
+
+/* ========== UTILITY CLASSES ========== */
+@import './utilities.css';
+
+/* ========== RESPONSIVE GRID SYSTEM ========== */
+
+.container {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4rem;
+  align-items: center;
+  min-height: 100vh;
+  padding: 3rem;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.content {
+  padding: 2.5rem;
+  background: var(--glass);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-2xl);
+  backdrop-filter: blur(15px);
+  box-shadow: 0 8px 32px rgba(217, 79, 144, 0.15), inset 0 0 20px rgba(217, 79, 144, 0.05);
+  animation: slideIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.character {
+  text-align: center;
+  animation: fadeIn 2s ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.character img {
+  max-height: 85vh;
+  width: auto;
+  object-fit: contain;
+  filter: drop-shadow(0 0 30px rgba(217, 79, 144, 0.25));
+}
+
+.logo {
+  display: block;
+  max-width: 280px;
+  margin: 0 auto 2rem;
+  filter: drop-shadow(0 0 20px rgba(217, 79, 144, 0.3));
+}
+
+.intro {
+  font-size: 1rem;
+  text-align: center;
+  margin-bottom: 2rem;
+  line-height: 1.8;
+  color: var(--text-secondary);
+}
+
+.intro a {
+  color: var(--accent-light);
+  text-decoration: none;
+  transition: color var(--transition-normal);
+}
+
+.intro a:hover {
+  color: var(--accent);
+  text-decoration: underline;
+}
+
+.intro code {
+  background: rgba(217, 79, 144, 0.15);
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-family: 'Monaco', 'Courier New', monospace;
+  font-size: 0.9rem;
+  color: var(--accent-light);
+}
+
+.social-icons {
+  display: flex;
+  justify-content: center;
+  gap: 1.5rem;
+  font-size: 1.3rem;
+  flex-wrap: wrap;
+}
+
+.social-icons a {
+  color: var(--text-secondary);
+  transition: all var(--transition-normal) var(--transition-easing);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: var(--radius-lg);
+  background: rgba(217, 79, 144, 0.08);
+  border: 1px solid rgba(217, 79, 144, 0.15);
+}
+
+.social-icons a:hover {
+  color: var(--accent);
+  transform: translateY(-4px);
+  background: rgba(217, 79, 144, 0.15);
+  border-color: rgba(217, 79, 144, 0.4);
+  box-shadow: 0 8px 16px rgba(217, 79, 144, 0.2);
+}
+
+footer {
+  text-align: center;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  padding: 1.5rem;
+  z-index: 1;
+  position: relative;
+  border-top: 1px solid var(--border);
+  margin-top: 4rem;
+}
+
+footer a {
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: color var(--transition-normal);
+}
+
+footer a:hover {
+  color: var(--accent);
+}
+
+/* ========== NAVIGATION ========== */
+
+nav.navbar {
+  position: sticky;
+  top: 0;
+  z-index: var(--z-navbar);
+  background: rgba(10, 10, 10, 0.95);
+  border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(15px);
+  padding: 0;
+}
+
+.navbar-content {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+}
+
+.navbar-logo {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--accent);
+  text-decoration: none;
+  transition: all var(--transition-normal);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: fit-content;
+}
+
+.navbar-logo:hover {
+  color: var(--accent-light);
+  transform: translateY(-2px);
+}
+
+.navbar-links {
+  display: flex;
+  gap: 1.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.navbar-links a {
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 0.95rem;
+  font-weight: 500;
+  transition: all var(--transition-normal);
+  padding: 0.5rem 0;
+  position: relative;
+}
+
+.navbar-links a::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--accent);
+  transition: width var(--transition-normal);
+}
+
+.navbar-links a:hover {
+  color: var(--accent);
+}
+
+.navbar-links a:hover::after {
+  width: 100%;
+}
+
+.navbar-links a.active {
+  color: var(--accent);
+}
+
+.navbar-links a.active::after {
+  width: 100%;
+}
+
+/* ========== SECTIONS ========== */
+
+.section {
+  padding: 3rem 2rem;
+  position: relative;
+  z-index: 1;
+}
+
+.section-title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  background: var(--gradient-accent);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: -0.5px;
+}
+
+.section-subtitle {
+  font-size: 1rem;
+  color: var(--text-secondary);
+  margin-bottom: 2rem;
+  line-height: 1.6;
+}
+
+/* ========== GRID LAYOUTS ========== */
+
+.grid {
+  display: grid;
+  gap: 2rem;
+  grid-auto-fit: auto-fit;
+}
+
+.grid-2 {
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.grid-3 {
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}
+
+.grid-4 {
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+/* ========== RESPONSIVE DESIGN ========== */
+
+@media screen and (max-width: 1200px) {
+  .container {
+    grid-template-columns: 1fr;
+    gap: 3rem;
+    padding: 2.5rem 2rem;
+  }
+
+  .character img {
+    max-height: 70vh;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+  }
+
+  .section-title {
+    font-size: 1.5rem;
+  }
+
+  .grid-3 {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .container {
+    padding: 2rem 1.5rem;
+    gap: 2rem;
+    min-height: auto;
+  }
+
+  .content {
+    padding: 2rem;
+    border-radius: var(--radius-xl);
+  }
+
+  .logo {
+    max-width: 220px;
+    margin-bottom: 1.5rem;
+  }
+
+  .intro {
+    font-size: 0.95rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .social-icons {
+    gap: 1rem;
+    font-size: 1.1rem;
+  }
+
+  .social-icons a {
+    width: 40px;
+    height: 40px;
+  }
+
+  .character img {
+    max-height: 60vh;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  h2 {
+    font-size: 1.25rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  .section {
+    padding: 2rem 1rem;
+  }
+
+  .card {
+    padding: 1.5rem;
+  }
+
+  .grid-2,
+  .grid-3,
+  .grid-4 {
+    grid-template-columns: 1fr;
+  }
+
+  .navbar-content {
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  .navbar-links {
+    gap: 1rem;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .navbar-links a {
+    font-size: 0.9rem;
+  }
+}
+
+/* ========== CONTENT OVERLAYS & SPECIAL EFFECTS ========== */
+
+.gallery-item.nsfw-content {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.gallery-item.nsfw-content img {
+  filter: blur(15px) !important;
+  transition: filter var(--transition-normal);
+  cursor: pointer;
+  pointer-events: none;
+}
+
+.gallery-item.nsfw-content::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 10;
+  transition: all var(--transition-normal);
+  cursor: pointer;
+}
+
+.gallery-item.nsfw-content::after {
+  content: '18+ - Click to view';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 11;
+  background: rgba(217, 79, 144, 0.95);
+  color: #fff;
+  padding: 1rem 1.5rem;
+  border-radius: var(--radius-lg);
+  font-size: 0.95rem;
+  font-weight: 700;
+  white-space: nowrap;
+  pointer-events: none;
+  transition: all var(--transition-normal);
+  text-align: center;
+  letter-spacing: 0.5px;
+}
+
+.gallery-item.nsfw-content:hover::before {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.gallery-item.nsfw-content:hover::after {
+  transform: translate(-50%, -50%) scale(1.1);
+  box-shadow: 0 4px 16px rgba(217, 79, 144, 0.4);
+}
+
+.gallery-item.nsfw-content.revealed img {
+  filter: blur(0) !important;
+}
+
+.gallery-item.nsfw-content.revealed::before,
+.gallery-item.nsfw-content.revealed::after {
+  display: none !important;
+}
+
+/* ========== LIGHTBOX ========== */
+
+.lightbox:fullscreen .gallery-item.nsfw-content img,
+.lightbox:-webkit-full-screen .gallery-item.nsfw-content img {
+  filter: blur(0) !important;
+}
+
+.lightbox:fullscreen .gallery-item.nsfw-content::before,
+.lightbox:-webkit-full-screen .gallery-item.nsfw-content::before,
+.lightbox:fullscreen .gallery-item.nsfw-content::after,
+.lightbox:-webkit-full-screen .gallery-item.nsfw-content::after {
+  display: none !important;
+}
+
+.lightbox.fullscreen-active img {
+  filter: blur(0) !important;
+}

package/src/css/typography.css

@@ -0,0 +1,198 @@
+/* typography.css — Font hierarchy and text styles */
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  color: var(--text);
+  font-size: 1rem;
+  line-height: 1.7;
+  background-attachment: fixed;
+  min-height: 100vh;
+  overflow-x: hidden;
+  position: relative;
+}
+
+/* ========== HEADING HIERARCHY ========== */
+
+h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  letter-spacing: -0.5px;
+  line-height: 1.2;
+}
+
+h2 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  letter-spacing: -0.3px;
+  line-height: 1.3;
+}
+
+h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  letter-spacing: -0.2px;
+  line-height: 1.4;
+}
+
+h4 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  line-height: 1.5;
+}
+
+h5 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+h6 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+/* ========== PARAGRAPH & TEXT ========== */
+
+p {
+  line-height: 1.7;
+  margin-bottom: 1rem;
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: color var(--transition-normal);
+}
+
+a:hover {
+  color: var(--accent-light);
+  text-decoration: underline;
+}
+
+/* ========== LISTS ========== */
+
+ul,
+ol {
+  margin-bottom: 1.5rem;
+  padding-left: 1.5rem;
+}
+
+li {
+  margin-bottom: 0.5rem;
+}
+
+/* ========== CODE & PREFORMATTED ========== */
+
+code {
+  background: rgba(217, 79, 144, 0.15);
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-family: 'Monaco', 'Courier New', monospace;
+  font-size: 0.9rem;
+  color: var(--accent-light);
+}
+
+pre {
+  background: rgba(20, 12, 40, 0.8);
+  padding: 1rem;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  overflow-x: auto;
+  line-height: 1.5;
+  margin-bottom: 1.5rem;
+}
+
+pre code {
+  background: none;
+  padding: 0;
+  color: var(--text);
+  font-size: 0.95rem;
+}
+
+/* ========== BLOCKQUOTE ========== */
+
+blockquote {
+  border-left: 4px solid var(--accent);
+  padding-left: 1.5rem;
+  margin: 1.5rem 0;
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+/* ========== STRONG & EMPHASIS ========== */
+
+strong,
+b {
+  font-weight: 700;
+  color: var(--text);
+}
+
+em,
+i {
+  font-style: italic;
+}
+
+/* ========== MARK ========== */
+
+mark {
+  background: rgba(217, 79, 144, 0.3);
+  padding: 0.2rem 0.4rem;
+  border-radius: var(--radius-sm);
+}
+
+/* ========== SMALL TEXT ========== */
+
+small {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}
+
+/* ========== HORIZONTAL RULE ========== */
+
+hr {
+  border: none;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--border), transparent);
+  margin: 2rem 0;
+}
+
+/* ========== RESPONSIVENESS ========== */
+
+@media screen and (max-width: 1024px) {
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+  }
+
+  h3 {
+    font-size: 1.25rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  h2 {
+    font-size: 1.25rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  p {
+    font-size: 0.95rem;
+  }
+}