Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Used semantic tags for the blog

This commit is contained in:
Helen Chong 2023-08-14 11:55:43 +08:00
parent 972edcc63c
commit a23073ff97
7 changed files with 91 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
blog/archive.html
View File

@ -24,13 +24,13 @@
<title>Blog Archive | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="header">...</div>
<div id="content">
<main class="blog-container" id="container">
<header class="blog-header" id="header">...</header>
<article class="blog-content" id="content">
<h1>Blog Archive</h1>
<div id="postlistdiv"></div>
</div> <!-- end of div id="content" -->
<div id="footer"></div>
</div> <!-- end of div id="container" -->
<section class="blog-post-list" id="postlistdiv"></section>
</article> <!-- end of article id="content" -->
<footer class="blog-footer" id="footer"></footer>
</main> <!-- end of main id="container" -->
</body>
</html>

45
blog/css/style-blog.css
View File

@ -88,8 +88,8 @@ hr {
border-color: #a3bdc4;
}
/*#CONTAINER is the rectangle that has contains everything but the background!*/
#container {
/* The rectangle that has contains everything but the background */
.blog-container {
margin: 3em auto;
width: 90%;
max-width: 68.75rem;
@ -101,18 +101,17 @@ hr {
outline-offset: 0;
}
#content {
.blog-content {
padding: 0.5rem 5% 1rem 5%;
}
/* HEADER STYLE */
#header {
.blog-header {
background-color: black;
padding: 0 5%;
}
#header ul {
.blog-header ul {
display: inline-block;
list-style-type: none;
padding: 0;
@ -120,7 +119,7 @@ hr {
margin-top: 1em;
}
#header li {
.blog-header li {
font-size: 1.2em;
display: inline-block;
margin-right: 0.2em;
@ -128,7 +127,7 @@ hr {
margin-top: 0.8em;
}
#header li a {
.blog-header li a {
color: #443;
background-color: #b6b59e;
border-width: 0.3em;
@ -139,28 +138,38 @@ hr {
font-weight: 900;
}
#header li a:hover {
.blog-header li a:hover {
background-color: #ceccaa;
border-color: #98987d;
}
#header li a:active {
.blog-header li a:active {
background-color: #8e8d74;
border-color: #71715c;
color: black;
}
/* POST TITLE STYLE */
.blog-post__title {
font-size: 1.75em;
}
/* POST DATE STYLE */
.blog-post__date {
font-size: 1.1em;
}
/* POST LIST STYLE */
#postlistdiv ul {
font-size: 1.2em;
.blog-post-list ul,
.blog-recent-post-list ul {
font-size: 1.1em;
padding: 0;
list-style-type: none;
}
#recentpostlistdiv ul {
font-size: 1.1em;
padding: 0;
list-style-type: none;
.blog-post-list ul li,
.blog-recent-post-list ul li {
margin-bottom: 0.5em;
}
.moreposts {
@ -169,7 +178,7 @@ hr {
}
/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
.blog-nextprev {
text-align: center;
margin-top: 1.4em;
}
@ -180,7 +189,7 @@ hr {
}
/* FOOTER STYLE */
#footer {
.blog-footer {
font-size: 0.8em;
padding: 0 5% 0.5rem 5%;
}

14
blog/index.html
View File

@ -24,18 +24,18 @@
<title>Blog | Leilukin's Hub</title>
</head>
<body>
<div id="container">
<div id="header">This site requires JavaScript!</div>
<div id="content">
<main class="blog-container" id="container">
<header class="blog-header" id="header">This site requires JavaScript!</header>
<article class="blog-content" id="content">
<h1>Welcome to Leilukin's Hub Blog!</h1>
<p>This is my blog that is hosted on my own personal website. Hope you enjoy your time here!</p>
<div id="recentpostlistdiv"></div>
<section class="blog-recent-post-list" id="recentpostlistdiv"></section>
</div> <!-- end of div id="content" -->
<div id="footer"></div>
</div> <!-- end of div id="container" -->
</article> <!-- end of article id="content" -->
<footer id="footer"></footer>
</main> <!-- end of main id="container" -->
</body>
</html>

18
blog/posts/2020-11-10-Post-Template.html
View File

@ -24,17 +24,17 @@
<title>Blog Post</title> <!-- If you leave title as "Blog Post", it will automatically be updated to the post title -->
</head>
<body>
<div id="container">
<div id="header">...</div>
<div id="content">
<h1 id="postTitleH1"></h1>
<h4 id="postDate"></h4>
<main class="blog-container" id="container">
<header class="blog-header" id="header">...</header>
<article class="blog-content" id="content">
<h1 class="blog-post__title" id="postTitleH1"></h1>
<h2 class="blog-post__date" id="postDate"></h2>
<p>Ready to write? Replace this text with your first paragraph!</p>
<div id="nextprev"></div>
</div> <!-- end of div id="content" -->
<div id="footer"></div>
</div> <!-- end of div id="container" -->
<section class="blog-nextprev" id="nextprev"></section>
</article> <!-- end of div id="content" -->
<footer class="blog-footer" id="footer"></footer>
</main> <!-- end of div id="container" -->
</body>
</html>

18
blog/posts/2023-01-28-Leilukins-Hub-Now-Has-a-Blog.html
View File

@ -24,11 +24,11 @@
<title>Blog Post</title> <!-- If you leave title as "Blog Post", it will automatically be updated to the post title -->
</head>
<body>
<div id="container">
<div id="header">...</div>
<div id="content">
<h1 id="postTitleH1"></h1>
<h4 id="postDate"></h4>
<main class="blog-container" id="container">
<header class="blog-header" id="header">...</header>
<article class="blog-content" id="content">
<h1 class="blog-post__title" id="postTitleH1"></h1>
<h2 class="blog-post__date" id="postDate"></h2>
<p>I finally built a blog on my own website!</p>
@ -38,9 +38,9 @@
<p>Welcome to my blog! Hope you enjoy your stay on this blog and my website!</p>
<div id="nextprev"></div>
</div> <!-- end of div id="content" -->
<div id="footer"></div>
</div> <!-- end of div id="container" -->
<section class="blog-nextprev" id="nextprev"></section>
</article> <!-- end of div id="content" -->
<footer class="blog-footer" id="footer"></footer>
</main> <!-- end of div id="container" -->
</body>
</html>

18
blog/posts/2023-05-09-Onboard-the-Dracula-Daily-Hype-Train.html
View File

@ -24,11 +24,11 @@
<title>Blog Post</title> <!-- If you leave title as "Blog Post", it will automatically be updated to the post title -->
</head>
<body>
<div id="container">
<div id="header">...</div>
<div id="content">
<h1 id="postTitleH1"></h1>
<h4 id="postDate"></h4>
<main class="blog-container" id="container">
<header class="blog-header" id="header">...</header>
<article class="blog-content" id="content">
<h1 class="blog-post__title" id="postTitleH1"></h1>
<h2 class="blog-post__date" id="postDate"></h2>
<p><a href="https://draculadaily.com/" target="_blank"><cite>Dracula Daily</cite></a>, the free subscription newsletter that sends Bram Stoker's 1897 novel <cite>Dracula</cite> to subscribers via email, became an internet sensation, especially on Tumblr. Some of my Tumblr mutuals were also on the hype train, though I missed it.</p>
@ -36,9 +36,9 @@
<p>Confession: This is actually my first time reading <cite>Dracula</cite>, so I am looking forward to this serialised way of reading the novel!</p>
<div id="nextprev"></div>
</div> <!-- end of div id="content" -->
<div id="footer"></div>
</div> <!-- end of div id="container" -->
<section class="blog-nextprev" id="nextprev"></section>
</article> <!-- end of article id="content" -->
<footer class="blog-footer" id="footer"></footer>
</main> <!-- end of main id="container" -->
</body>
</html>

18
blog/posts/2023-07-28-My-First-Birthday-After-the-Launch-of-Leilukins-Hub.html
View File

@ -24,11 +24,11 @@
<title>Blog Post</title> <!-- If you leave title as "Blog Post", it will automatically be updated to the post title -->
</head>
<body>
<div id="container">
<div id="header">...</div>
<div id="content">
<h1 id="postTitleH1"></h1>
<h4 id="postDate"></h4>
<main class="blog-container" id="container">
<header class="blog-header" id="header">...</header>
<article class="blog-content" id="content">
<h1 class="blog-post__title" id="postTitleH1"></h1>
<h2 class="blog-post__date" id="postDate"></h2>
<p>July 28th is my birthday, and in 2023, it also marks my first birthday after the launch of this personal website. I have had a nice birthday this year.</p>
@ -40,9 +40,9 @@
<p>Happy Birthday to me!</p>
<div id="nextprev"></div>
</div> <!-- end of div id="content" -->
<div id="footer"></div>
</div> <!-- end of div id="container" -->
<section class="blog-nextprev" id="nextprev"></section>
</article> <!-- end of article id="content" -->
<footer class="blog-footer" id="footer"></footer>
</main> <!-- end of main id="container" -->
</body>
</html>