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"
pygmentsStyle="github"
[params]
Footer = "© 2019 王不对 - **[CC BY-NC 4.0](https://creativecommons.org/licenses/by-nc/4.0/)** - **[RSS](/index.xml)**"
[[menu.main]]
name = "博客"
url = "/blog/"

View File

@ -7,62 +7,60 @@
/* Tailwind's utility classes - generated based on config file */
@import "node_modules/tailwindcss/utilities";
h1 {
@apply text-4xl;
.markdown h1 {
@apply text-4xl my-12;
}
h2 {
@apply text-2xl;
.markdown h2 {
@apply text-2xl my-8;
}
h3 {
@apply text-lg;
.markdown h3 {
@apply text-lg my-4;
}
h1,
h2,
h3,
h4 {
.markdown h4 {
@apply my-2;
}
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
@apply font-bold leading-loose;
}
blockquote {
.markdown blockquote {
@apply bg-gray-100 p-3 mx-3 my-2 border-l-4 border-gray-400;
}
table {
.markdown table {
@apply m-auto border-t border-b border-gray-800 border-solid;
}
table thead th {
@apply border-b border-solid border-gray-700
.markdown table thead th {
@apply border-b border-solid border-gray-700;
}
th,
td {
.markdown th,
.markdown td {
@apply p-1;
}
thead,
tfoot,
tr:nth-child(even) {
.markdown thead,
.markdown tfoot,
.markdown tr:nth-child(even) {
@apply bg-gray-200;
}
pre {
box-shadow: 5px 5px 5px #eee;
@apply overflow-x-auto p-4 border-2 border-solid border-gray-100;
.markdown pre {
@apply overflow-x-auto shadow-md p-4 border-2 border-solid border-gray-100;
}
code {
.markdown code {
@apply bg-gray-200;
}
pre code {
.markdown pre code {
@apply bg-transparent;
}
ul {
.markdown ul {
@apply text-base pl-8 list-disc;
}
ol {
.markdown ol {
@apply text-base pl-8 list-decimal;
}
kbd {
.markdown kbd {
@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>
{{- partial "head.html" . -}}
<body>
<div class="flex flex-col md:flex-row md:w-4/5 mx-auto py-5">
<body class="">
<div class="flex flex-wrap flex-col md:flex-row md:w-4/5 mx-auto py-5 min-h-screen">
{{- partial "header.html" . -}}
{{- block "main" . }}{{- end }}
<main class="flex-1 p-4 md:border-l-2 md:border-black">
{{- block "main" . }}{{- end }}
</main>
</div>
{{- partial "footer.html" . -}}
</body>

View File

@ -1,8 +1,6 @@
{{ define "main" }}
<main class="flex-1 p-4 md:border-l-2 md:border-black">
<article class="max-w-3xl mx-auto ">
<h1 class="">{{ .Title }}</h1>
{{ .Content }}
</article>
</main>
<article class="max-w-3xl mx-auto leading-relaxed markdown">
<h1 class="text-center">{{ .Title }}</h1>
{{ .Content }}
</article>
{{ 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">
<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>
<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">
<svg class="h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>