-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
123 lines (123 loc) · 6.87 KB
/
index.html
File metadata and controls
123 lines (123 loc) · 6.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!doctype html><html lang=en>
<head>
<meta name=generator content="Hugo 0.88.1">
<title>Jasper Chen</title>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1">
<link rel=apple-touch-icon sizes=180x180 href=/favicon/apple-touch-icon.png>
<link rel=icon type=image/png sizes=32x32 href=/favicon/favicon-32x32.png>
<link rel=icon type=image/png sizes=16x16 href=/favicon/favicon-16x16.png>
<link rel=manifest href=/favicon/site.webmanifest>
<link rel=mask-icon href=/favicon/safari-pinned-tab.svg color=#5bbad5>
<link rel="shortcut icon" href=/favicon/favicon.ico>
<meta name=theme-color content="#ffffff">
<meta property="og:title" content="Jasper Chen">
<link rel=stylesheet href="https://example.com/css/styles.min.95ed6e751dbcd597daff2fd86cd454269087b86746384176a8ee3587a22bca9c.css">
<link href=/css/blonde.min.css rel=stylesheet type=text/css media=print onload="this.media='all'">
<meta name=description content="Blonde theme for Hugo.">
<meta property="og:site_name" content="Jasper Chen">
<meta property="og:description" content="Blonde theme for Hugo.">
<meta property="og:url" content="https://example.com/">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta name=twitter:card content="summary_large_image">
<meta name=twitter:site content>
<link rel=canonical href=https://example.com/>
<meta name=twitter:description content="Blonde theme for Hugo.">
<meta property="article:published_time" content="2021-10-10T23:53:49+08:00">
<meta property="article:updated_time" content="2021-10-10T23:53:49+08:00">
<meta property="og:image" content="https://example.com">
<meta property="og:image:url" content="https://example.com">
<link rel=stylesheet href=/css/custom.css>
<i class="dark hidden"></i>
</head>
<body class=font-sans>
<div class="min-h-screen flex flex-col bg-gray-100 dark:bg-warmgray-800"><div class=bg-gray-800>
<div class="container max-w-screen-xl mr-auto ml-auto">
<nav class="flex items-center justify-between flex-wrap bg-gray-800 p-6">
<div class="flex items-center flex-no-shrink bg-gray-800 text-white mr-6">
<a href=https://example.com><span class="font-semibold text-2xl tracking-tight">Jasper Chen</span></a>
</div>
<div class="flex md:hidden">
<div class=py-2>
<button onclick=toggleDarkMode() class="focus:outline-none mr-1" aria-label="Darkmode Toggle Button"><i id=icon class="icon-moon inline-flex align-middle leading-normal text-lg text-white"></i></button>
<span class=text-white>|</span>
</div>
<button id=hamburgerbtn class="flex items-center px-3 py-1 text-white hover:opacity-50" aria-label="Hamburger Button">
<span class="icon-menu text-2xl"></span>
</button>
</div>
<div class="hidden w-full md:flex md:flex-row sm:items-center md:w-auto" id=mobileMenu>
<div class="text-sm lg:flex-grow">
</div>
<div class=navmenu>
</div>
<div class="text-white invisible md:visible">
<span>|</span>
<button onclick=toggleDarkMode() class=focus:outline-none aria-label="Darkmode Toggle Button"><i id=icon2 class="icon-moon hover:opacity-50 duration-200 inline-flex align-middle leading-normal text-lg ml-2"></i></button>
</div>
</div>
</nav>
</div>
</div>
<style>.active{display:block}</style>
<script>let hamburger=document.getElementById('hamburgerbtn'),mobileMenu=document.getElementById('mobileMenu');hamburger.addEventListener('click',function(){mobileMenu.classList.toggle('active')})</script>
<div class="container max-w-screen-xl mx-auto mt-4 flex-grow px-5 lg:px-0" id=content>
<div class=lg:mx-5>
<div class="grid grid-cols-3 gap-4">
<div class="col-span-3 lg:col-span-2 mb-3">
<h2 class="text-4xl dark:text-white"></h2>
<a href=/posts/my-first-post/>
<div class="bg-white w-full p-3 lg:max-w-full lg:flex mt-5 transform hover:-translate-y-1 hover:shadow-md duration-500 dark:bg-warmgray-900">
<img alt=thumbnail id=thumb class="lg:w-auto lg:h-44" src=/img/ReactTrelloClone.JPG>
<div class="relative pl-4 p-2 justify-between leading-normal max-w-full w-full">
<div class="text-gray-900 font-bold text-xl mb-2 dark:text-white">My First Post</div>
<p class="text-gray-700 text-base pb-5 dark:text-gray-300">...</p>
<p class="text-sm text-gray-600 absolute items-center right-0 bottom-0 dark:text-gray-400">
<time><span class="icon-access_time mr-1"></span>2021/10/10</time>
</p>
</div>
</div>
</a>
</div>
<div class="hidden lg:block lg:col-span-1">
<div class=mb-3>
<form class=widget-search__form role=search method=get action=https://google.com/search>
<label>
<input class="w-full p-3 focus:outline-none dark:bg-warmgray-900 dark:text-white placeholder-gray-700 dark:placeholder-gray-300" type=search placeholder=Search... name=q aria-label=Search>
</label>
<input class=hidden type=submit value=Search>
<input type=hidden name=sitesearch value=https://example.com>
</form>
</div>
<div class="bg-white panel mb-3 pb-5 dark:bg-warmgray-900">
<p class="text-xl text-center text-gray-700 py-3 px-3 dark:text-gray-300">Archives</p>
</div>
<div class="bg-white panel mb-3 pb-5 dark:bg-warmgray-900">
<p class="text-xl text-center text-gray-700 py-5 dark:text-gray-300">Recent Posts</p>
<div class=mx-6>
<a href=/posts/my-first-post/>
<div class="w-full block mt-3 bg-white hover:bg-gray-100 duration-200 dark:bg-warmgray-900 dark:text-gray-200 dark:hover:bg-warmgray-800">
<div class=px-2>
<div class="text-gray-900 font-bold text-xl dark:text-white">My First Post</div>
<p class="text-sm text-gray-600 flex items-center pb-1 dark:text-gray-400">
<time><span class="icon-access_time mr-1"></span>2021/10/10</time>
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div><footer class="bg-gray-800 text-white p-6">
<div class="container max-w-screen-xl mr-auto ml-auto">
<p>© 2021 <a href=https://example.com class="duration-200 hover:opacity-50">Jasper Chen</a></p>
<p>Powered by <a href=https://gohugo.io/ class="duration-200 hover:opacity-50">Hugo</a>, Theme <a href=https://github.com/opera7133/Blonde class="duration-200 hover:opacity-50">Blonde</a>.</p>
</div>
<script>var icon=document.getElementById("icon"),icon2=document.getElementById("icon2");document.documentElement.classList.contains("dark")||localStorage.theme==='dark'||!('theme'in localStorage)&&window.matchMedia('(prefers-color-scheme: dark)').matches?(icon.classList.remove("icon-moon"),icon.classList.add("icon-sun"),icon2.classList.remove("icon-moon"),icon2.classList.add("icon-sun"),document.documentElement.classList.add('dark')):document.documentElement.classList.remove('dark');function toggleDarkMode(){document.documentElement.classList.contains('dark')?(icon.classList.remove("icon-sun"),icon.classList.add("icon-moon"),icon2.classList.remove("icon-sun"),icon2.classList.add("icon-moon"),document.documentElement.classList.remove('dark'),localStorage.theme='light'):(icon.classList.remove("icon-moon"),icon.classList.add("icon-sun"),icon2.classList.remove("icon-moon"),icon2.classList.add("icon-sun"),document.documentElement.classList.add('dark'),localStorage.theme='dark')}</script>
</footer>
</div>
</body>
</html>