§2023-04-21
<!DOCTYPE html>
<html>
<head>
<title>H2Nas01NginxMarkdown</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
/* Define a wrapper for the entire page */
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.page-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
/* width: 100%; /* Set the width of the page-wrapper to 100% of the viewport */
flex-grow: 1; /* Make the page-wrapper grow to fill the available space */
min-height: 100vh; /* Add this line */
}
/* 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;
background-color: #020700; /* #2e2e2e */
color: #f5f5f5;
}
/* Define the upper part of the left column */
.left-column .title {
font-size: 1em;
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;
}
.left-column a {
color: #c8d6e5;
}
/* Define the right column */
.right-column {
flex: 0 0 75%; /* Set the width of the right column to 75% of the page width */
justify-content: center; /* left; */
display: flex;
flex-direction: column;
padding: 10px;
box-sizing: border-box;
background-color: #333333;
color: #f5f5f5;
position: relative; /* Set the position property to relative */
padding-bottom: 56.25%; /* Set the padding-bottom property to 56.25% (which is 9/16 in decimal form) to maintain a 16:9 aspect ratio */
}
/* Define the image and its caption */
.right-column img {
/* width: 100%;
height: auto;*/
/* max-width: 100%; */
max-width: 800px;
max-height: 600px; /* Set the maximum height of the image to 400 pixels */
margin-bottom: 10px;
margin: 0 auto; /* Set the top and bottom margin to 0 and the left and right margin to "auto" to center the image horizontally */
display: block; /* Set the display property to "block" to remove any default inline spacing */
margin: auto;
/* position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
*/
}
.right-column .caption {
font-size: 0.8em;
text-align: center;
}
.right-column a {
color: #c8d6e5;
}
/* .right-column p {
max-width: 80%;
margin: 0 auto;
text-align: left;
}
*/
.section-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start; /* center; */
height: 100%;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
justify-content: center;
text-align: left;
background-color: #333333;
color: #f5f5f5;
}
/*
display: flex;
justify-content: center;
margin: 0 auto;
max-width: 100%; /* 80% */
background-color: #333333;
*/
</style>
</head>
<body>
<div class="page-wrapper">
<div class="left-column">
<div class="title">
<a href="https://munetaka.me:43888/">Mundetaka JupyterHub</a>
</div>
<div class="menu">
<li><a href="https://munetaka.me:43888/munetakaJupyterHub/%E9%80%B1%E5%88%8A%E6%96%87%E6%98%A5/">週刊文春</a></li>
<li><a 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>
<li><a href="https://munetaka.me:43888/munetakaJupyterHub/%E5%A4%A9%E5%A3%B0%E4%BA%BA%E8%AA%9E/">天声人語・令和五年</a></li>
</div>
<div class="copyright">
©2023 yushei.net
</div>
</div>
<div class="right-column">
<div class="section-wrapper">
{{content}}
</div>
</div>
</div>
</body>
</html>