Tweaked the code of blog layout

This commit is contained in:
Helen Chong 2023-07-03 12:27:18 +08:00
parent 7a0b0117c4
commit 061a961d8d
5 changed files with 20 additions and 20 deletions

View File

@ -23,13 +23,13 @@
<title>Blog Archive | Leilukin's Hub</title> <title>Blog Archive | Leilukin's Hub</title>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<div id="header">...</div> <div id="header">...</div>
<div id="content"> <div id="content">
<h1>Blog Archive</h1> <h1>Blog Archive</h1>
<div id="postlistdiv"></div> <div id="postlistdiv"></div>
</div> <!-- end of div id="content" --> </div> <!-- end of div id="content" -->
<div id="footer"></div> <div id="footer"></div>
</div> <!-- end of div id="container" --> </div> <!-- end of div id="container" -->
</body> </body>
</html> </html>

View File

@ -20,7 +20,7 @@ body {
background-position: top; background-position: top;
background-repeat: repeat-x; background-repeat: repeat-x;
background-attachment: fixed; background-attachment: fixed;
font-size: 1.125rem; /* 18px */ font-size: 1.3rem;
font-family: 'Nunito', Arial, sans-serif; font-family: 'Nunito', Arial, sans-serif;
margin: 0; margin: 0;
} }
@ -57,7 +57,7 @@ img {
text-align: center; text-align: center;
} }
@media only screen and (min-width: 600px) { @media only screen and (min-width: 37.5rem) {
.small { .small {
max-width: 60%; max-width: 60%;
height: auto; height: auto;
@ -92,12 +92,12 @@ hr {
#container { #container {
margin: 3em auto; margin: 3em auto;
width: 90%; width: 90%;
max-width: 1100px; max-width: 68.75rem;
background-color: black; background-color: black;
color: #dddddd; color: #dddddd;
outline-color: #425e74; outline-color: #425e74;
outline-style: ridge; outline-style: ridge;
outline-width: 8px; outline-width: 0.5rem;
outline-offset: 0; outline-offset: 0;
} }
@ -158,7 +158,7 @@ hr {
} }
#recentpostlistdiv ul { #recentpostlistdiv ul {
font-size: 1.2em; font-size: 1.1em;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
} }

View File

@ -26,15 +26,15 @@
<div id="container"> <div id="container">
<div id="header">This site requires JavaScript!</div> <div id="header">This site requires JavaScript!</div>
<div id="content"> <div id="content">
<h1>Welcome to my blog!</h1> <h1>Welcome to my blog!</h1>
<p>This is a blog that is hosted on my own website. I hope you enjoy your time here!</p> <p>This is a blog that is hosted on my own website. I hope you enjoy your time here!</p>
<div id="recentpostlistdiv"></div> <div id="recentpostlistdiv"></div>
</div> <!-- end of div id="content" --> </div> <!-- end of div id="content" -->
<div id="footer"></div> <div id="footer"></div>
</div> <!-- end of div id="container" --> </div> <!-- end of div id="container" -->
</body> </body>
</html> </html>

View File

@ -36,8 +36,8 @@
<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> <div id="nextprev"></div>
</div> <!-- end of div id="content" --> </div> <!-- end of div id="content" -->
<div id="footer"></div> <div id="footer"></div>
</div> <!-- end of div id="container" --> </div> <!-- end of div id="container" -->

View File

@ -34,8 +34,8 @@
<p>Fortunately, <cite>Dracula Daily</cite> returns in 2023, so I decided to sign up to subscribe to the newsletter and join the hype. This year, <a href="https://redracula.live/" target="_blank"><cite>Re: Dracula</cite></a>, the audio drama podcast adaptation of <cite>Dracula</cite>, also debuts. Like <cite>Dracula Daily</cite>, <cite>Re: Dracula</cite> releases new entries in as close to real time as it happens, meaning you can now enjoy <cite>Dracula Daily</cite> in audio form as well, with excellent voice acting and sound design to enhance the experience.</p> <p>Fortunately, <cite>Dracula Daily</cite> returns in 2023, so I decided to sign up to subscribe to the newsletter and join the hype. This year, <a href="https://redracula.live/" target="_blank"><cite>Re: Dracula</cite></a>, the audio drama podcast adaptation of <cite>Dracula</cite>, also debuts. Like <cite>Dracula Daily</cite>, <cite>Re: Dracula</cite> releases new entries in as close to real time as it happens, meaning you can now enjoy <cite>Dracula Daily</cite> in audio form as well, with excellent voice acting and sound design to enhance the experience.</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> <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 id="nextprev"></div>
</div> <!-- end of div id="content" --> </div> <!-- end of div id="content" -->
<div id="footer"></div> <div id="footer"></div>
</div> <!-- end of div id="container" --> </div> <!-- end of div id="container" -->