Manila background - rounded pages
a { color: #9c3f1b; } a:hover { color: #c1663a; text-shadow: none; } h1 { color: #2d2a26; font-weight: 500; } body { background: #f6f2eb; color: #2d2a26; } .journal { border-radius: 6px; } .action { font-size: 1.1em; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; padding: 0.1em; margin: 4px; float: left; width: 24px; } .control-buttons { right: 3px; } .button { left: 0; color: #9c3f1b; font-size: 20px; padding: 0.1em; margin: 1px; width: 24px; } .action:hover { color: #4b3d32; text-shadow: none; } .target { background-color: #efe4d8 !important; } .page { padding: 0 16px; border-radius: 6px; border-style: solid; border-width: 1px; border-color: #d5cfc7; box-shadow: none; } .page.active { border-color: #b8b0a6; } .ghost { opacity: 0.8; border-color: #efece7; }
a { color: #2a6f5b; } a:hover { color: #78b48b; text-shadow: 0 0 6px rgba(120, 180, 139, 0.45); } h1, h2, h3 { color: #2f4d45; font-weight: 500; letter-spacing: 0.02em; font-family: "Marck Script", "Segoe Script", "Brush Script MT", "Apple Chancery", cursive; } body { background: radial-gradient(circle at top, #22322f 0%, #1a2422 45%, #111716 100%); color: #243432; font-family: "Cormorant Garamond", "Palatino Linotype", "Book Antiqua", Palatino, serif; } .journal { border-radius: 10px; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(42, 111, 91, 0.2); } .action { font-size: 1.1em; border-radius: 8px; padding: 0.15em; margin: 4px; float: left; width: 26px; background: rgba(42, 111, 91, 0.18); color: #1f3c35; } .control-buttons { right: 3px; } .button { left: 0; color: #1f3c35; font-size: 20px; padding: 0.1em; margin: 1px; width: 26px; border-radius: 8px; background: rgba(244, 244, 239, 0.95); border: 1px solid rgba(42, 111, 91, 0.3); } .action:hover, .button:hover { color: #102a26; text-shadow: 0 0 4px rgba(16, 42, 38, 0.35); } .target { background-color: #cfe7d4 !important; } .page { padding: 0 16px; border-radius: 8px 8px 6px 6px; border: 1px solid #c9c0b0; border-top: 6px solid #4f7a63; box-shadow: 0 18px 30px rgba(14, 22, 20, 0.25); background: #fdfbf7; position: relative; } .page::before { content: ""; position: absolute; top: -18px; left: 24px; width: 120px; height: 18px; border-radius: 10px 10px 0 0; background: #4f7a63; box-shadow: 0 6px 12px rgba(14, 22, 20, 0.2); } .page.active { border-color: #2f4d45; border-top-color: #2f4d45; box-shadow: 0 20px 36px rgba(14, 22, 20, 0.35); } .ghost { opacity: 0.85; border-color: #e8f1eb; } @media (max-width: 720px) { body { overflow: auto; } .main { overflow-x: auto; overflow-y: hidden; width: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .page { width: calc(100vw - 32px); scroll-snap-align: start; } .page::before { left: 16px; width: 90px; } }