Kira's Notebook
version 1
/*
* Kira's Notebook - A Death Note inspired theme for Write.as/WriteFreely
* Inspired by the Death Note anime and manga series
*
* Features:
* - Stark black and white color scheme
* - High contrast typography
* - Minimalist, clinical aesthetic
* - Red accent color for emphasis (like the Death Note)
* - Clean, precise layout
* - Elegant serif typography
*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Roboto:wght@300;400;500;700&display=swap');
:root {
--kira-black: #0a0a0a;
--kira-dark: #1a1a1a;
--kira-charcoal: #2a2a2a;
--kira-gray: #4a4a4a;
--kira-light-gray: #8a8a8a;
--kira-white: #f5f5f5;
--kira-cream: #fafafa;
--kira-red: #cc0000;
--kira-red-dark: #990000;
--kira-red-light: #ff3333;
}
body {
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
line-height: 1.7;
color: var(--kira-white);
background-color: var(--kira-black);
margin: 0;
padding: 0;
letter-spacing: 0.3px;
}
/* Header and Navigation */
body h1 a,
body h1 a:visited,
body h1 a:link,
body header h2 a,
body header h2 a:visited,
body header h2 a:link {
color: var(--kira-white);
text-decoration: none;
font-weight: 900;
font-family: 'Playfair Display', Georgia, serif;
letter-spacing: -0.02em;
text-transform: uppercase;
font-size: 1.3em;
}
body header p.description {
color: var(--kira-light-gray);
font-size: 13px;
font-weight: 300;
margin-top: 0.5rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
body header nav a,
#post nav a:not(.home) {
color: var(--kira-red);
text-decoration: none;
font-weight: 500;
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: all 0.2s ease;
padding: 0.5rem 1rem;
border: 1px solid transparent;
}
body header nav a:hover,
#post nav a:not(.home):hover {
color: var(--kira-red-light);
border-bottom: 2px solid var(--kira-red);
}
/* Typography */
body#post article h2#title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 2.8rem;
font-weight: 900;
color: var(--kira-white);
line-height: 1.1;
margin-bottom: 1.5rem;
text-align: center;
letter-spacing: -0.03em;
text-transform: uppercase;
position: relative;
}
body#post article h2#title::before,
body#post article h2#title::after {
content: '';
display: block;
width: 100px;
height: 2px;
background: var(--kira-red);
margin: 1rem auto;
}
.post-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.8rem;
font-weight: 700;
color: var(--kira-white);
text-decoration: none;
line-height: 1.3;
transition: all 0.3s ease;
display: block;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.post-title a:hover {
color: var(--kira-red);
text-shadow: 0 0 10px rgba(204, 0, 0, 0.5);
}
/* Content Areas */
body#post,
body#collection,
body#subpage {
color: var(--kira-white);
max-width: 700px;
margin: 0 auto;
padding: 3rem 2rem;
background: linear-gradient(135deg, var(--kira-black) 0%, var(--kira-dark) 100%);
border-top: 3px solid var(--kira-red);
border-bottom: 3px solid var(--kira-red);
margin-top: 2rem;
margin-bottom: 2rem;
position: relative;
box-shadow: 0 0 40px rgba(204, 0, 0, 0.1);
}
body#post::before,
body#collection::before,
body#subpage::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--kira-red) 50%, transparent 100%);
}
/* Paragraphs */
body#post p,
body#collection p,
body#subpage p {
margin-bottom: 1.5rem;
color: var(--kira-white);
}
/* Links */
body article p a:not(.hashtag),
body article ul a:not(.hashtag),
body article table a:not(.hashtag),
p a {
color: var(--kira-red);
text-decoration: none;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
font-weight: 500;
position: relative;
}
body article p a:not(.hashtag):hover,
body article ul a:not(.hashtag):hover,
body article table a:not(.hashtag):hover,
p a:hover {
color: var(--kira-red-light);
border-bottom-color: var(--kira-red-light);
text-shadow: 0 0 8px rgba(204, 0, 0, 0.5);
}
/* Timestamps and Meta */
body#post article time.dt-published,
body#collection article time.dt-published,
body#subpage article time.dt-published,
#collection #wrapper time,
#subpage #wrapper time {
color: var(--kira-light-gray);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.8;
}
/* Blockquotes */
body#post blockquote,
body#collection blockquote,
body#subpage blockquote {
color: var(--kira-light-gray);
border-left: 4px solid var(--kira-red);
padding: 1.5rem 2rem;
margin: 2.5rem 0;
font-style: italic;
background: rgba(204, 0, 0, 0.05);
border-radius: 0;
position: relative;
box-shadow: inset 0 0 20px rgba(204, 0, 0, 0.05);
}
body#post blockquote::before,
body#collection blockquote::before,
body#subpage blockquote::before {
content: '"';
font-size: 3.5rem;
color: var(--kira-red);
position: absolute;
top: -0.5rem;
left: 0.5rem;
font-family: 'Playfair Display', Georgia, serif;
opacity: 0.3;
}
/* Code */
body#post pre,
body#post code,
body#collection pre,
body#collection code,
body#subpage pre,
body#subpage code {
background: rgba(204, 0, 0, 0.1);
color: var(--kira-red-light);
font-family: 'Roboto Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;
font-size: 14px;
border: 1px solid rgba(204, 0, 0, 0.3);
}
body#post pre,
body#collection pre,
body#subpage pre {
padding: 1.5rem;
border-radius: 0;
overflow-x: auto;
border-left: 4px solid var(--kira-red);
background: rgba(204, 0, 0, 0.08);
}
/* Hashtags */
a.hashtag span:first-child {
color: var(--kira-light-gray);
}
a.hashtag span,
span.p-category {
color: var(--kira-red);
font-weight: 500;
}
/* Forms */
input {
font-family: 'Roboto', sans-serif;
border: 2px solid var(--kira-red);
border-radius: 0;
padding: 0.75rem 1rem;
background: rgba(204, 0, 0, 0.05);
color: var(--kira-white);
transition: all 0.3s ease;
letter-spacing: 0.05em;
}
input:focus {
border-color: var(--kira-red-light);
outline: none;
box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.2);
background: rgba(204, 0, 0, 0.1);
}
input[type=email] {
border: 2px solid var(--kira-red);
}
#subscribe-btn {
border: 2px solid var(--kira-red);
background: var(--kira-red);
color: var(--kira-black);
border-radius: 0;
padding: 0.75rem 1.5rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.3s ease;
cursor: pointer;
font-size: 13px;
}
#subscribe-btn:hover {
background: var(--kira-red-light);
border-color: var(--kira-red-light);
box-shadow: 0 0 20px rgba(204, 0, 0, 0.5);
transform: translateY(-2px);
}
/* Horizontal Rules */
hr {
background: none;
height: 2px;
border: none;
margin: 3rem 0;
background: linear-gradient(90deg, transparent 0%, var(--kira-red) 50%, transparent 100%);
border-radius: 1px;
}
/* Footer */
body footer a.home:link,
body footer a.home:visited {
color: var(--kira-red);
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: color 0.3s ease;
}
body footer a.home:hover {
color: var(--kira-red-light);
text-shadow: 0 0 8px rgba(204, 0, 0, 0.5);
}
/* Manage and Dropdown Navigation */
body #manage a,
body .dropdown-nav a,
body #manage ul a {
color: var(--kira-white);
}
body #manage ul,
body .dropdown-nav ul,
body #manage ul ul {
background: var(--kira-charcoal);
border: 1px solid var(--kira-red);
}
body #manage ul li:hover,
body .dropdown-nav ul li:hover,
body #manage ul ul li:hover {
background: rgba(204, 0, 0, 0.1);
}
body #manage ul li a,
body .dropdown-nav ul li a,
body #manage ul ul li a {
color: var(--kira-white);
}
/* Death Note aesthetic - subtle animations */
@keyframes deathNote {
0% {
text-shadow: 0 0 0 rgba(204, 0, 0, 0);
}
50% {
text-shadow: 0 0 10px rgba(204, 0, 0, 0.5);
}
100% {
text-shadow: 0 0 0 rgba(204, 0, 0, 0);
}
}
body#post article h2#title:hover {
animation: deathNote 1s ease-in-out;
}
/* Light mode override for system preference */
@media (prefers-color-scheme: light) {
:root {
--kira-black: #f5f5f5;
--kira-dark: #fafafa;
--kira-charcoal: #ffffff;
--kira-gray: #e0e0e0;
--kira-light-gray: #808080;
--kira-white: #0a0a0a;
--kira-cream: #f0f0f0;
--kira-red: #cc0000;
--kira-red-dark: #990000;
--kira-red-light: #ff3333;
}
body {
background-color: var(--kira-black);
}
body#post,
body#collection,
body#subpage {
background: linear-gradient(135deg, var(--kira-black) 0%, var(--kira-dark) 100%);
}
body#post blockquote,
body#collection blockquote,
body#subpage blockquote {
background: rgba(204, 0, 0, 0.05);
}
input {
background: rgba(204, 0, 0, 0.05);
}
input:focus {
background: rgba(204, 0, 0, 0.1);
}
}
version 2
/*
* Kira's Notebook - Enhanced Edition
* A Death Note inspired theme for Write.as/WriteFreely
* Incorporates design elements from cv-app and DeathNote.ttf font
*
* Features:
* - DeathNote.ttf custom font for authentic aesthetic
* - Dark minimalist design with red accents
* - Smooth transitions and hover effects from cv-app
* - High contrast typography
* - Elegant card-based layout elements
*/
@font-face {
font-family: 'DeathNote';
src: url('/DeathNote.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
:root {
--kira-black: #0a0a0a;
--kira-dark: #1c1c1c;
--kira-charcoal: #2a2a2a;
--kira-darker-gray: #242424;
--kira-gray: #4a4a4a;
--kira-light-gray: #8a8a8a;
--kira-white: #f5f5f5;
--kira-cream: #fafafa;
--kira-red: #cc0000;
--kira-red-dark: #990000;
--kira-red-light: #ff3333;
--kira-transition: 300ms ease-in-out;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'DeathNote', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
line-height: 1.7;
color: var(--kira-white);
background-color: var(--kira-black);
margin: 0;
padding: 0;
letter-spacing: 0.3px;
font-weight: bold;
}
/* Header and Navigation */
body h1 a,
body h1 a:visited,
body h1 a:link,
body header h2 a,
body header h2 a:visited,
body header h2 a:link {
color: var(--kira-white);
text-decoration: none;
font-weight: 900;
font-family: 'DeathNote', Georgia, serif;
letter-spacing: -0.02em;
text-transform: uppercase;
font-size: 1.3em;
transition: var(--kira-transition);
}
body h1 a:hover,
body header h2 a:hover {
color: var(--kira-red);
text-shadow: 0 0 10px rgba(204, 0, 0, 0.5);
}
body header p.description {
color: var(--kira-light-gray);
font-size: 13px;
font-weight: 700;
margin-top: 0.5rem;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.8;
}
body header nav a,
#post nav a:not(.home) {
color: var(--kira-red);
text-decoration: none;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: var(--kira-transition);
padding: 0.5rem 1rem;
border: 1px solid transparent;
background: var(--kira-darker-gray);
border-radius: 12px;
display: inline-block;
margin: 0.25rem;
}
body header nav a:hover,
#post nav a:not(.home):hover {
color: var(--kira-red-light);
border-color: var(--kira-red);
background: rgba(204, 0, 0, 0.1);
transform: translateY(-2px);
}
body header nav a:active,
#post nav a:not(.home):active {
transform: scale(0.95);
}
/* Typography */
body#post article h2#title {
font-family: 'DeathNote', Georgia, serif;
font-size: 2.8rem;
font-weight: 900;
color: var(--kira-white);
line-height: 1.1;
margin-bottom: 1.5rem;
text-align: center;
letter-spacing: -0.03em;
text-transform: uppercase;
position: relative;
transition: var(--kira-transition);
}
body#post article h2#title::before,
body#post article h2#title::after {
content: '';
display: block;
width: 100px;
height: 2px;
background: var(--kira-red);
margin: 1rem auto;
}
body#post article h2#title:hover {
color: var(--kira-red);
text-shadow: 0 0 15px rgba(204, 0, 0, 0.6);
}
.post-title {
font-family: 'DeathNote', Georgia, serif;
font-size: 1.8rem;
font-weight: 900;
color: var(--kira-white);
text-decoration: none;
line-height: 1.3;
transition: var(--kira-transition);
display: block;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: -0.01em;
}
.post-title a:hover {
color: var(--kira-red);
text-shadow: 0 0 10px rgba(204, 0, 0, 0.5);
transform: translateX(5px);
}
/* Content Areas - Card-based design from cv-app */
body#post,
body#collection,
body#subpage {
color: var(--kira-white);
max-width: 700px;
margin: 0 auto;
padding: 3rem 2rem;
background: var(--kira-dark);
border-radius: 20px;
border-top: 3px solid var(--kira-red);
border-bottom: 3px solid var(--kira-red);
margin-top: 2rem;
margin-bottom: 2rem;
position: relative;
box-shadow: 0 0 40px rgba(204, 0, 0, 0.15);
transition: var(--kira-transition);
}
body#post:hover,
body#collection:hover,
body#subpage:hover {
box-shadow: 0 0 60px rgba(204, 0, 0, 0.25);
}
body#post::before,
body#collection::before,
body#subpage::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--kira-red) 50%, transparent 100%);
}
/* Paragraphs */
body#post p,
body#collection p,
body#subpage p {
margin-bottom: 1.5rem;
color: var(--kira-white);
font-weight: 600;
}
/* Links - Enhanced with cv-app style */
body article p a:not(.hashtag),
body article ul a:not(.hashtag),
body article table a:not(.hashtag),
p a {
color: var(--kira-red);
text-decoration: none;
border-bottom: 2px solid transparent;
transition: var(--kira-transition);
font-weight: 700;
position: relative;
padding-bottom: 2px;
}
body article p a:not(.hashtag):hover,
body article ul a:not(.hashtag):hover,
body article table a:not(.hashtag):hover,
p a:hover {
color: var(--kira-red-light);
border-bottom-color: var(--kira-red-light);
text-shadow: 0 0 8px rgba(204, 0, 0, 0.5);
}
body article p a:not(.hashtag):active,
body article ul a:not(.hashtag):active,
body article table a:not(.hashtag):active,
p a:active {
transform: scale(0.95);
}
/* Timestamps and Meta */
body#post article time.dt-published,
body#collection article time.dt-published,
body#subpage article time.dt-published,
#collection #wrapper time,
#subpage #wrapper time {
color: var(--kira-light-gray);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.8;
}
/* Blockquotes - Card-style from cv-app */
body#post blockquote,
body#collection blockquote,
body#subpage blockquote {
color: var(--kira-light-gray);
border-left: 4px solid var(--kira-red);
padding: 1.5rem 2rem;
margin: 2.5rem 0;
font-style: italic;
background: rgba(204, 0, 0, 0.08);
border-radius: 12px;
position: relative;
box-shadow: inset 0 0 20px rgba(204, 0, 0, 0.05);
transition: var(--kira-transition);
}
body#post blockquote:hover,
body#collection blockquote:hover,
body#subpage blockquote:hover {
background: rgba(204, 0, 0, 0.12);
box-shadow: inset 0 0 30px rgba(204, 0, 0, 0.1);
}
body#post blockquote::before,
body#collection blockquote::before,
body#subpage blockquote::before {
font-size: 3.5rem;
color: var(--kira-red);
position: absolute;
top: -0.5rem;
left: 0.5rem;
font-family: 'DeathNote', Georgia, serif;
opacity: 0.3;
}
/* Code - Enhanced styling */
body#post pre,
body#post code,
body#collection pre,
body#collection code,
body#subpage pre,
body#subpage code {
background: rgba(204, 0, 0, 0.1);
color: var(--kira-red-light);
font-family: 'Courier New', monospace;
font-size: 14px;
border: 1px solid rgba(204, 0, 0, 0.3);
border-radius: 8px;
font-weight: 600;
}
body#post pre,
body#collection pre,
body#subpage pre {
padding: 1.5rem;
border-radius: 12px;
overflow-x: auto;
border-left: 4px solid var(--kira-red);
background: rgba(204, 0, 0, 0.08);
transition: var(--kira-transition);
}
body#post pre:hover,
body#collection pre:hover,
body#subpage pre:hover {
background: rgba(204, 0, 0, 0.12);
box-shadow: 0 0 20px rgba(204, 0, 0, 0.1);
}
/* Hashtags */
a.hashtag span:first-child {
color: var(--kira-light-gray);
}
a.hashtag span,
span.p-category {
color: var(--kira-red);
font-weight: 700;
}
/* Forms - cv-app inspired */
input {
font-family: 'DeathNote', sans-serif;
border: 2px solid var(--kira-red);
border-radius: 12px;
padding: 0.75rem 1rem;
background: rgba(204, 0, 0, 0.05);
color: var(--kira-white);
transition: var(--kira-transition);
letter-spacing: 0.05em;
font-weight: 600;
}
input:focus {
border-color: var(--kira-red-light);
outline: none;
box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.2);
background: rgba(204, 0, 0, 0.1);
transform: scale(1.02);
}
input[type=email] {
border: 2px solid var(--kira-red);
}
#subscribe-btn {
border: 2px solid var(--kira-red);
background: var(--kira-red);
color: var(--kira-black);
border-radius: 12px;
padding: 0.75rem 1.5rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: var(--kira-transition);
cursor: pointer;
font-size: 13px;
font-family: 'DeathNote', sans-serif;
}
#subscribe-btn:hover {
background: var(--kira-red-light);
border-color: var(--kira-red-light);
box-shadow: 0 0 20px rgba(204, 0, 0, 0.5);
transform: translateY(-2px);
}
#subscribe-btn:active {
transform: scale(0.9);
}
/* Horizontal Rules */
hr {
background: none;
height: 2px;
border: none;
margin: 3rem 0;
background: linear-gradient(90deg, transparent 0%, var(--kira-red) 50%, transparent 100%);
border-radius: 1px;
}
/* Footer */
body footer a.home:link,
body footer a.home:visited {
color: var(--kira-red);
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: var(--kira-transition);
font-weight: 700;
}
body footer a.home:hover {
color: var(--kira-red-light);
text-shadow: 0 0 8px rgba(204, 0, 0, 0.5);
}
/* Manage and Dropdown Navigation */
body #manage a,
body .dropdown-nav a,
body #manage ul a {
color: var(--kira-white);
transition: var(--kira-transition);
}
body #manage ul,
body .dropdown-nav ul,
body #manage ul ul {
background: var(--kira-dark);
border: 2px solid var(--kira-red);
border-radius: 12px;
}
body #manage ul li:hover,
body .dropdown-nav ul li:hover,
body #manage ul ul li:hover {
background: rgba(204, 0, 0, 0.1);
}
body #manage ul li a,
body .dropdown-nav ul li a,
body #manage ul ul li a {
color: var(--kira-white);
font-weight: 600;
}
/* Death Note aesthetic - Enhanced animations */
@keyframes deathNoteGlow {
0% {
text-shadow: 0 0 0 rgba(204, 0, 0, 0);
}
50% {
text-shadow: 0 0 15px rgba(204, 0, 0, 0.6);
}
100% {
text-shadow: 0 0 0 rgba(204, 0, 0, 0);
}
}
@keyframes deathNotePulse {
0%, 100% {
box-shadow: 0 0 40px rgba(204, 0, 0, 0.1);
}
50% {
box-shadow: 0 0 60px rgba(204, 0, 0, 0.25);
}
}
body#post article h2#title:hover {
animation: deathNoteGlow 1s ease-in-out;
}
body#post:hover {
animation: deathNotePulse 2s ease-in-out infinite;
}
/* Light mode override for system preference */
@media (prefers-color-scheme: light) {
:root {
--kira-black: #f5f5f5;
--kira-dark: #fafafa;
--kira-charcoal: #ffffff;
--kira-darker-gray: #f0f0f0;
--kira-gray: #e0e0e0;
--kira-light-gray: #808080;
--kira-white: #0a0a0a;
--kira-cream: #f0f0f0;
--kira-red: #cc0000;
--kira-red-dark: #990000;
--kira-red-light: #ff3333;
}
body {
background-color: var(--kira-black);
}
body#post,
body#collection,
body#subpage {
background: var(--kira-dark);
}
body#post blockquote,
body#collection blockquote,
body#subpage blockquote {
background: rgba(204, 0, 0, 0.05);
}
input {
background: rgba(204, 0, 0, 0.05);
}
input:focus {
background: rgba(204, 0, 0, 0.1);
}
}
/* Responsive Design */
@media (max-width: 768px) {
body#post,
body#collection,
body#subpage {
padding: 2rem 1.5rem;
margin: 1rem 0.5rem;
}
body#post article h2#title {
font-size: 2rem;
}
.post-title {
font-size: 1.5rem;
}
body header nav a,
#post nav a:not(.home) {
padding: 0.4rem 0.8rem;
font-size: 12px;
}
}
@media (max-width: 480px) {
body {
font-size: 14px;
}
body#post article h2#title {
font-size: 1.5rem;
}
.post-title {
font-size: 1.2rem;
}
body#post,
body#collection,
body#subpage {
padding: 1.5rem 1rem;
border-radius: 12px;
}
}