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

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

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

14
blog/index.html
View File

@ -24,18 +24,18 @@
<title>Blog | Leilukin's Hub</title> <title>Blog | Leilukin's Hub</title>
</head> </head>
<body> <body>
<div id="container"> <main class="blog-container" id="container">
<div id="header">This site requires JavaScript!</div> <header class="blog-header" id="header">This site requires JavaScript!</header>
<div id="content"> <article class="blog-content" id="content">
<h1>Welcome to Leilukin's Hub Blog!</h1> <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> <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" --> </article> <!-- end of article id="content" -->
<div id="footer"></div> <footer id="footer"></footer>
</div> <!-- end of div id="container" --> </main> <!-- end of main id="container" -->
</body> </body>
</html> </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 --> <title>Blog Post</title> <!-- If you leave title as "Blog Post", it will automatically be updated to the post title -->
</head> </head>
<body> <body>
<div id="container"> <main class="blog-container" id="container">
<div id="header">...</div> <header class="blog-header" id="header">...</header>
<div id="content"> <article class="blog-content" id="content">
<h1 id="postTitleH1"></h1> <h1 class="blog-post__title" id="postTitleH1"></h1>
<h4 id="postDate"></h4> <h2 class="blog-post__date" id="postDate"></h2>
<p>Ready to write? Replace this text with your first paragraph!</p> <p>Ready to write? Replace this text with your first paragraph!</p>
<div id="nextprev"></div> <section class="blog-nextprev" id="nextprev"></section>
</div> <!-- end of div id="content" --> </article> <!-- end of div id="content" -->
<div id="footer"></div> <footer class="blog-footer" id="footer"></footer>
</div> <!-- end of div id="container" --> </main> <!-- end of div id="container" -->
</body> </body>
</html> </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 --> <title>Blog Post</title> <!-- If you leave title as "Blog Post", it will automatically be updated to the post title -->
</head> </head>
<body> <body>
<div id="container"> <main class="blog-container" id="container">
<div id="header">...</div> <header class="blog-header" id="header">...</header>
<div id="content"> <article class="blog-content" id="content">
<h1 id="postTitleH1"></h1> <h1 class="blog-post__title" id="postTitleH1"></h1>
<h4 id="postDate"></h4> <h2 class="blog-post__date" id="postDate"></h2>
<p>I finally built a blog on my own website!</p> <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> <p>Welcome to my blog! Hope you enjoy your stay on this blog and my website!</p>
<div id="nextprev"></div> <section class="blog-nextprev" id="nextprev"></section>
</div> <!-- end of div id="content" --> </article> <!-- end of div id="content" -->
<div id="footer"></div> <footer class="blog-footer" id="footer"></footer>
</div> <!-- end of div id="container" --> </main> <!-- end of div id="container" -->
</body> </body>
</html> </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 --> <title>Blog Post</title> <!-- If you leave title as "Blog Post", it will automatically be updated to the post title -->
</head> </head>
<body> <body>
<div id="container"> <main class="blog-container" id="container">
<div id="header">...</div> <header class="blog-header" id="header">...</header>
<div id="content"> <article class="blog-content" id="content">
<h1 id="postTitleH1"></h1> <h1 class="blog-post__title" id="postTitleH1"></h1>
<h4 id="postDate"></h4> <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> <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> <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> <section class="blog-nextprev" id="nextprev"></section>
</div> <!-- end of div id="content" --> </article> <!-- end of article id="content" -->
<div id="footer"></div> <footer class="blog-footer" id="footer"></footer>
</div> <!-- end of div id="container" --> </main> <!-- end of main id="container" -->
</body> </body>
</html> </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 --> <title>Blog Post</title> <!-- If you leave title as "Blog Post", it will automatically be updated to the post title -->
</head> </head>
<body> <body>
<div id="container"> <main class="blog-container" id="container">
<div id="header">...</div> <header class="blog-header" id="header">...</header>
<div id="content"> <article class="blog-content" id="content">
<h1 id="postTitleH1"></h1> <h1 class="blog-post__title" id="postTitleH1"></h1>
<h4 id="postDate"></h4> <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> <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> <p>Happy Birthday to me!</p>
<div id="nextprev"></div> <section class="blog-nextprev" id="nextprev"></section>
</div> <!-- end of div id="content" --> </article> <!-- end of article id="content" -->
<div id="footer"></div> <footer class="blog-footer" id="footer"></footer>
</div> <!-- end of div id="container" --> </main> <!-- end of main id="container" -->
</body> </body>
</html> </html>