markdown css done.

This commit is contained in:
wangbudui 2020-01-06 15:03:33 +08:00
parent c26b1436cc
commit 4b02dd9cc9
6 changed files with 53 additions and 45 deletions

View File

@ -4,6 +4,9 @@ title = "My New Hugo Site"
theme = "hugo-w2ng" theme = "hugo-w2ng"
pygmentsStyle="github" pygmentsStyle="github"
[params]
Footer = "© 2019 王不对 - **[CC BY-NC 4.0](https://creativecommons.org/licenses/by-nc/4.0/)** - **[RSS](/index.xml)**"
[[menu.main]] [[menu.main]]
name = "博客" name = "博客"
url = "/blog/" url = "/blog/"

View File

@ -7,62 +7,60 @@
/* Tailwind's utility classes - generated based on config file */ /* Tailwind's utility classes - generated based on config file */
@import "node_modules/tailwindcss/utilities"; @import "node_modules/tailwindcss/utilities";
h1 { .markdown h1 {
@apply text-4xl; @apply text-4xl my-12;
} }
h2 { .markdown h2 {
@apply text-2xl; @apply text-2xl my-8;
} }
h3 { .markdown h3 {
@apply text-lg; @apply text-lg my-4;
} }
h1, .markdown h4 {
h2, @apply my-2;
h3, }
h4 { .markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
@apply font-bold leading-loose; @apply font-bold leading-loose;
} }
.markdown blockquote {
blockquote {
@apply bg-gray-100 p-3 mx-3 my-2 border-l-4 border-gray-400; @apply bg-gray-100 p-3 mx-3 my-2 border-l-4 border-gray-400;
} }
.markdown table {
table {
@apply m-auto border-t border-b border-gray-800 border-solid; @apply m-auto border-t border-b border-gray-800 border-solid;
} }
table thead th { .markdown table thead th {
@apply border-b border-solid border-gray-700 @apply border-b border-solid border-gray-700;
} }
th, .markdown th,
td { .markdown td {
@apply p-1; @apply p-1;
} }
thead, .markdown thead,
tfoot, .markdown tfoot,
tr:nth-child(even) { .markdown tr:nth-child(even) {
@apply bg-gray-200; @apply bg-gray-200;
} }
.markdown pre {
pre { @apply overflow-x-auto shadow-md p-4 border-2 border-solid border-gray-100;
box-shadow: 5px 5px 5px #eee;
@apply overflow-x-auto p-4 border-2 border-solid border-gray-100;
} }
code { .markdown code {
@apply bg-gray-200; @apply bg-gray-200;
} }
pre code { .markdown pre code {
@apply bg-transparent; @apply bg-transparent;
} }
.markdown ul {
ul {
@apply text-base pl-8 list-disc; @apply text-base pl-8 list-disc;
} }
.markdown ol {
ol {
@apply text-base pl-8 list-decimal; @apply text-base pl-8 list-decimal;
} }
.markdown kbd {
kbd {
@apply text-xs inline-block bg-gray-100 rounded border p-1 align-middle font-normal font-mono shadow; @apply text-xs inline-block bg-gray-100 rounded border p-1 align-middle font-normal font-mono shadow;
} }
.markdown hr {
@apply block my-6 mx-auto max-w-md h-px border-t border-black;
}

View File

@ -2,10 +2,12 @@
<html> <html>
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body> <body class="">
<div class="flex flex-col md:flex-row md:w-4/5 mx-auto py-5"> <div class="flex flex-wrap flex-col md:flex-row md:w-4/5 mx-auto py-5 min-h-screen">
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
{{- block "main" . }}{{- end }} <main class="flex-1 p-4 md:border-l-2 md:border-black">
{{- block "main" . }}{{- end }}
</main>
</div> </div>
{{- partial "footer.html" . -}} {{- partial "footer.html" . -}}
</body> </body>

View File

@ -1,8 +1,6 @@
{{ define "main" }} {{ define "main" }}
<main class="flex-1 p-4 md:border-l-2 md:border-black"> <article class="max-w-3xl mx-auto leading-relaxed markdown">
<article class="max-w-3xl mx-auto "> <h1 class="text-center">{{ .Title }}</h1>
<h1 class="">{{ .Title }}</h1> {{ .Content }}
{{ .Content }} </article>
</article>
</main>
{{ end }} {{ end }}

View File

@ -0,0 +1,7 @@
<footer class="flex justify-center">
<div class="copyright mx-auto my-8">
<p>
{{ .Page.Site.Params.Footer | markdownify }}
</p>
</div>
</footer>

View File

@ -1,8 +1,8 @@
<header class="flex flex-col w-full md:w-1/5 md:text-right md:pr-8 bg-white text-center"> <header class="flex flex-col w-full md:w-1/5 md:text-right md:pr-8 bg-white text-center">
<h1 class="font-medium mt-4 md:mb-12"><a href="#">Wrong.Wang</a></h1> <h1 class="text-4xl my-12 font-medium mt-4 md:mb-12"><a href="#">Wrong.Wang</a></h1>
<p class="font-thin italic">前进</p> <p class="font-thin italic">前进</p>
<input type="checkbox" class="hidden" id="expand-toggle" /> <input type="checkbox" class="hidden" id="expand-toggle" />
<div class="block absolute right-0 lg:hidden"> <div class="block absolute right-0 md:hidden">
<label for="expand-toggle" id="expand-btn" class="flex items-center px-3 py-2 border rounded"> <label for="expand-toggle" id="expand-btn" class="flex items-center px-3 py-2 border rounded">
<svg class="h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <svg class="h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title> <title>Menu</title>