Used semantic tags for the blog
This commit is contained in:
Helen Chong
parent
972edcc63c
commit
a23073ff97
|
|
@ -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>
|
||||
|
|
@ -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 {
|
||||
/* HEADER STYLE */
|
||||
.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 LIST STYLE*/
|
||||
#postlistdiv ul {
|
||||
font-size: 1.2em;
|
||||
/* POST TITLE STYLE */
|
||||
.blog-post__title {
|
||||
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;
|
||||
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,18 +178,18 @@ hr {
|
|||
}
|
||||
|
||||
/*NEXT AND PREVIOUS LINKS STYLE*/
|
||||
#nextprev {
|
||||
.blog-nextprev {
|
||||
text-align: center;
|
||||
margin-top: 1.4em;
|
||||
}
|
||||
|
||||
/*DISQUS STYLE*/
|
||||
/* DISQUS STYLE */
|
||||
#disqus_thread {
|
||||
margin-top: 1.6em;
|
||||
}
|
||||
|
||||
/*FOOTER STYLE*/
|
||||
#footer {
|
||||
/* FOOTER STYLE */
|
||||
.blog-footer {
|
||||
font-size: 0.8em;
|
||||
padding: 0 5% 0.5rem 5%;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
<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" -->
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
|
@ -24,23 +24,23 @@
|
|||
<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>
|
||||
|
||||
<p>I finally built a blog on my own website!</p>
|
||||
<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>
|
||||
|
||||
<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>Welcome to my blog! Hope you enjoy your stay on this blog and my 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>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>
|
||||
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue