Used semantic tags for the blog
This commit is contained in:
parent
972edcc63c
commit
a23073ff97
|
@ -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>
|
|
@ -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%;
|
||||||
}
|
}
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Loading…
Reference in New Issue