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>

53
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*/ .blog-header {
#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 LIST STYLE*/ /* POST TITLE STYLE */
#postlistdiv ul { .blog-post__title {
font-size: 1.2em; font-size: 1.75em;
}
/* POST DATE STYLE */
.blog-post__date {
font-size: 1.1em;
}
/* POST LIST STYLE */
.blog-post-list ul,
.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,18 +178,18 @@ 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;
} }
/*DISQUS STYLE*/ /* DISQUS STYLE */
#disqus_thread { #disqus_thread {
margin-top: 1.6em; margin-top: 1.6em;
} }
/*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>

20
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>

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

@ -24,23 +24,23 @@
<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>
<p>After launching this site in September 2022, I had been considering setting up a blog here, as I want a blog that is hosted on my own site, but it was not until I discovered <a href="https://zonelets.net/" target="_blank">Zonelets</a>, a HTML blogging engine created with Neocities in mind, and it was exactly what I was looking for to build a blog on my own Neocities site: it is simple enough for beginners to use, yet also open for more customisation and flexibility for users who have enough knowledge about HTML, CSS and JavaScript.</p> <p>After launching this site in September 2022, I had been considering setting up a blog here, as I want a blog that is hosted on my own site, but it was not until I discovered <a href="https://zonelets.net/" target="_blank">Zonelets</a>, a HTML blogging engine created with Neocities in mind, and it was exactly what I was looking for to build a blog on my own Neocities site: it is simple enough for beginners to use, yet also open for more customisation and flexibility for users who have enough knowledge about HTML, CSS and JavaScript.</p>
<p>My site does have an <a href="/articles" target="_blank">articles</a> section, but what makes this blog different from the articles is that the articles are meant to be timeless, sort of like my public statements for certain topics, while posts from this blog are more like journals or reactions to a timely subject.</p> <p>My site does have an <a href="/articles" target="_blank">articles</a> section, but what makes this blog different from the articles is that the articles are meant to be timeless, sort of like my public statements for certain topics, while posts from this blog are more like journals or reactions to a timely subject.</p>
<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>