§2023-04-19
Most of my files re written in markdown style, then using a web sever such as NGINX to render it in brownser as html. Could you help me to design a CSS styhlesheet so it will render more elegantly. Requiremens are
The screen will be split in two parts, just as your chatGPT layout. Coulfd you help me to write the CSS stylesheet?
<!DOCTYPE html>
<html>
<head>
<title>H2Nas01NginxMarkdown</title>
<style type="text/css">
/* Style for the two columns */
body {
background-color: #121212;
color: ##f5f5f5;
}
.container {
display: flex;
flex-direction: row;
align-items: stretch;
}
.left-column {
flex-basis: 20%;
padding: 10px;
background-coor: #2e2e2e;
color: #f5f5f5;
position: relative; /* required to position the footer element */
}
.left-column a {
color: #c8d6e5;
}
.left-column footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
font-size: 12px;
color: #999999;
}
.right-column a {
color: #c8d6e5;
}
.right-column {
flex-basis: 80%;
padding: 10px;
background-color: #333333;
color: #f5f5f5;
}
.right-column img {
max-width: 80%;
height: auto;
}
.left-column,
.right-column {
max-width: 80%;
}
.right-column p {
max-width: 80%;
}
/* Style for the markdown content */
.markdown {
font-size: 16px;
line-height: 1.5;
color: #333;
}
/* Style for the headings */
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
color: #333;
}
h1 {
font-size: 32px;
margin-bottom: 16px;
}
h2 {
font-size: 28px;
margin-bottom: 12px;
}
h3 {
font-size: 24px;
margin-bottom: 8px;
}
h4 {
font-size: 20px;
margin-bottom: 4px;
}
h5 {
font-size: 16px;
margin-bottom: 4px;
}
h6 {
font-size: 14px;
margin-bottom: 4px;
}
/* Style for the paragraphs */
p {
margin: 0 0 16px 0;
max-width: 80%;
}
</style>
</head>
<body>
<div class="container">
<div class="left-column">
<!-- Your markdown content goes here -->
<a href="https://munetaka.me:43888/munetakaJupyterHub/%E9%80%B1%E5%88%8A%E6%96%87%E6%98%A5/">h2Nas01.yushei.net:43888</a>
<hr><br>
<div class="markdown">
<!-- Markdown content goes here -->
<a class="link-secondary" href="https://munetaka.me:43888/munetakaJupyterHub/%E9%80%B1%E5%88%8A%E6%96%87%E6%98%A5/">週刊文春</a>
<br>
<a class="link-secondary" href="https://munetaka.me:43888/munetakaJupyterHub/%E6%97%85%E8%A1%8C/">旅行</a>
<ul><li>
<a class="link-secondary" href="https://munetaka.me:43888/munetakaJupyterHub/%E6%97%85%E8%A1%8C/%E5%8C%97%E6%B5%B7%E9%81%93/%E5%87%BD%E9%A4%A8//">函館 </a>
</li></ul>
<br>
</div>
<div class="left-column">
<!-- your content goes here -->
<footer class="copyright">
© 2023 munetaka.me
</footer>
</div>
</div>
<div class="right-column">
<!-- Add any additional content you want to display on the right column here -->
{{content}}
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>H2Nas01NginxMarkdown</title>
<style type="text/css">
/* Define a wrapper for the entire page */
.page-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* Define the left column */
.left-column {
flex: 0 0 25%; /* Set the width of the left column to 25% of the page width */
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px;
box-sizing: border-box;
}
/* Define the upper part of the left column */
.left-column .title {
font-size: 2em;
font-weight: bold;
text-align: center;
}
/* Define the middle part of the left column */
.left-column .menu {
flex-grow: 1;
text-align: left;
padding-top: 20px;
}
/* Define the bottom part of the left column */
.left-column .copyright {
font-size: 0.8em;
text-align: center;
padding-bottom: 20px;
}
/* Define the right column */
.right-column {
flex: 0 0 75%; /* Set the width of the right column to 75% of the page width */
display: flex;
flex-direction: column;
padding: 10px;
box-sizing: border-box;
}
/* Define the image and its caption */
.right-column img {
width: 100%;
height: auto;
margin-bottom: 10px;
}
.right-column .caption {
font-size: 0.8em;
text-align: center;
}
</style>
</head>
<body>
<div class="page-wrapper">
<div class="left-column">
<div class="title">Title Goes Here</div>
<div class="menu">
Menu items go here
</div>
<div class="copyright">
Copyright text goes here
</div>
</div>
<div class="right-column">
<img src="path/to/image.jpg" alt="Image Description">
<div class="caption">Image caption goes here</div>
<p>Text description of the image goes here</p>
{{content}}
</div>
</div>
</body>
</html>