split css from html

This commit is contained in:
Merith-TK 2025-02-06 17:44:46 +00:00
parent 7799ddb34f
commit ca260d66cc
2 changed files with 73 additions and 74 deletions

72
main.css Normal file
View file

@ -0,0 +1,72 @@
/* Light Mode: Coffee Theme */
.light-mode {
--background-color: #e7ddca;
--text-color: #5b4636;
--header-color: #8b6e4b;
--link-color: #a47551;
--link-hover-color: #d2a679;
}
/* Dark Mode: Monokai Dimmed Theme */
@media (prefers-color-scheme: dark) {
:root {
--background-color: #1e1e1e;
--text-color: #d4d4d4;
--header-color: #DACB1C;
--link-color: #ffdd00;
--link-hover-color: #dcdcaa;
}
}
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--header-color);
}
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
color: var(--link-hover-color);
}
div {
max-width: 800px;
margin: 0 auto;
}
/* Centering images and ensuring they fit within the body */
img {
display: block;
max-width: 100%;
height: auto;
margin: 20px auto;
}
/* Markdown Assist */
pre {
background-color: #282c34;
color: #abb2bf;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
}
code {
font-family: monospace;
}

75
md.html
View file

@ -5,83 +5,10 @@
<head>
<title>Markdown</title>
<link rel="stylesheet" href="/assets/main.css">
<link rel="stylesheet" href="/assets/github-markdown.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<style>
/* Light Mode: Coffee Theme */
.light-mode {
--background-color: #e7ddca;
--text-color: #5b4636;
--header-color: #8b6e4b;
--link-color: #a47551;
--link-hover-color: #d2a679;
}
/* Dark Mode: Monokai Dimmed Theme */
@media (prefers-color-scheme: dark) {
:root {
--background-color: #1e1e1e;
--text-color: #d4d4d4;
--header-color: #DACB1C;
--link-color: #ffdd00;
--link-hover-color: #dcdcaa;
}
}
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--header-color);
}
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
color: var(--link-hover-color);
}
div {
max-width: 800px;
margin: 0 auto;
}
/* Centering images and ensuring they fit within the body */
img {
display: block;
max-width: 100%;
height: auto;
margin: 20px auto;
}
/* Markdown Assist */
pre {
background-color: #282c34;
color: #abb2bf;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
}
code {
font-family: monospace;
}
</style>
</head>
<body>