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

@ -34,7 +34,7 @@
<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

@ -37,7 +37,7 @@
<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

@ -35,7 +35,7 @@
<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" -->