updated styles

This commit is contained in:
liyunze 2024-05-02 15:55:18 +08:00
parent e7de2aee8d
commit f99f73d631
4 changed files with 89 additions and 125 deletions

View file

@ -1,7 +1,7 @@
{
"name": "coworking-guide",
"type": "module",
"version": "2.0.0",
"version": "2.0.1",
"scripts": {
"dev": "astro dev --open",
"start": "astro dev",

View file

@ -33,70 +33,6 @@ const { frontmatter, headings } = Astro.props;
</div>
</div>
</div>
<style is:global>
blockquote {
@apply my-4 border-l-4 border-gray-500 pl-4;
}
a {
@apply inline-block text-blue-400 hover:underline;
}
h1 {
@apply mb-2 text-4xl font-bold;
}
h2 {
@apply mb-2 mt-5 scroll-mt-[calc(20px+var(--header-height))] text-3xl font-bold;
}
h3 {
@apply mb-2 mt-5 scroll-mt-[calc(17px+var(--header-height))] text-2xl font-bold;
}
h4 {
@apply mb-2 mt-5 scroll-mt-[calc(14px+var(--header-height))] text-xl font-bold;
}
p {
@apply mb-2 mt-2 font-[system-ui] leading-6;
}
hr {
@apply my-10 border-gray-500;
}
ul {
@apply list-outside list-disc leading-7;
}
code {
@apply rounded-md bg-[#323232] px-1 py-1 font-[monospace,courier-new] text-sm;
}
ul,
ol {
@apply list-outside leading-7;
}
ul {
@apply list-disc;
}
ul ul,
ol ul {
@apply mb-2 ml-5 list-[circle];
}
ul li,
ol li {
@apply mb-1 ml-5;
}
ol {
@apply ml-5 list-outside list-decimal leading-7;
}
</style>
<script is:inline>
// make all <a> attributes have target="_blank" except for Table of Contents
document.querySelectorAll("a:not(.no-target-blank)").forEach((el) => {

View file

@ -117,65 +117,6 @@ const { title, description } = Astro.props;
a.preview {
text-decoration: none;
}
blockquote {
@apply my-4 border-l-4 border-gray-500 pl-4;
}
a {
@apply inline-block text-blue-400 hover:underline;
}
h1 {
@apply mb-2 text-4xl font-bold;
}
h2 {
@apply mb-2 mt-5 scroll-mt-[calc(20px+var(--header-height))] text-3xl font-bold;
}
h3 {
@apply mb-2 mt-5 scroll-mt-[calc(17px+var(--header-height))] text-2xl font-bold;
}
h4 {
@apply mb-2 mt-5 scroll-mt-[calc(14px+var(--header-height))] text-xl font-bold;
}
p {
@apply mb-2 mt-2 font-[system-ui] leading-6;
}
hr {
@apply my-10 border-gray-500;
}
ul {
@apply list-outside list-disc leading-7;
}
ul,
ol {
@apply list-outside leading-7;
}
ul {
@apply list-disc;
}
ul ul,
ol ul {
@apply mb-2 ml-5 list-[circle];
}
ul li,
ol li {
@apply mb-1 ml-5;
}
ol {
@apply ml-5 list-outside list-decimal leading-7;
}
</style>
</body>
</html>

View file

@ -54,6 +54,15 @@ module.exports = {
"primary-green": "#88D47D",
"primary-blue": "#3F84D8",
},
spacing: {
auto: "auto",
},
fontSize: {
initial: "initial",
},
fontWeight: {
initial: "initial",
},
},
},
variants: {
@ -61,5 +70,83 @@ module.exports = {
backgroundImage: ["responsive", "hover", "focus", "active"],
},
},
plugins: [],
plugins: [
function ({ addBase, config }) {
addBase({
blockquote: {
margin: "1rem 0",
borderLeft: "4px solid #718096",
paddingLeft: "1rem",
},
a: {
display: "inline-block",
color: "#4299e1",
textDecoration: "none",
},
"a:hover": {
textDecoration: "underline",
},
h1: {
marginBottom: "0.5rem",
fontSize: "2.25rem",
fontWeight: "bold",
},
h2: {
marginBottom: "0.5rem",
marginTop: "1.25rem",
fontSize: "1.875rem",
fontWeight: "bold",
},
h3: {
marginBottom: "0.5rem",
marginTop: "1.25rem",
fontSize: "1.5rem",
fontWeight: "bold",
},
h4: {
marginBottom: "0.5rem",
marginTop: "1.25rem",
fontSize: "1.25rem",
fontWeight: "bold",
},
p: {
marginBottom: "0.5rem",
marginTop: "0.5rem",
fontFamily: "system-ui",
lineHeight: "1.75rem",
},
hr: {
margin: "2.5rem 0",
borderColor: "#718096",
},
"ul, ol": {
listStylePosition: "outside",
lineHeight: "1.75rem",
},
ul: {
listStyleType: "disc",
},
"ul ul, ol ul": {
marginBottom: "0.5rem",
marginLeft: "1.25rem",
listStyleType: "circle",
},
"ul li, ol li": {
marginBottom: "0.25rem",
marginLeft: "1.25rem",
},
ol: {
marginLeft: "1.25rem",
listStyleType: "decimal",
},
code: {
borderRadius: "0.375rem",
backgroundColor: "#323232",
padding: "0.25rem 0.5rem",
fontFamily: "monospace, courier-new",
fontSize: "0.875rem",
},
});
},
],
};