§2023-07-01
In this directory `/usr/local/nginx
$ pwd
/usr/local/nginx
$ ls
conf html logs sbin
<!DOCTYPE html>
<html>
<head>
<title>H2Nas01NginxMarkdown</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<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;
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 */
}
.right-column .caption {
font-size: 0.8em;
text-align: center;
}
.right-column a {
color: #c8d6e5;
}
/* p {
max-width: 80%;
margin: 0 auto;
/* text-align: center; /*
}
*/
.section-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 100%;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
justify-content: center;
background-color: #333333;
}
/*
display: flex;
justify-content: center;
margin: 0 auto;
max-width: 100%; /* 80% */
background-color: #333333;
*/
.return-to-top {
display: none; /* Hide the button by default */
position: fixed; /* Set the button to be fixed position */
bottom: 20px; /* Position the button 20px from the bottom */
right: 20px; /* Position the button 20px from the right */
z-index: 99; /* Set a high z-index value to make sure the button is on top */
font-size: 16px; /* Set the font size of the button */
padding: 10px; /* Add some padding to the button */
border-radius: 50%; /* Round the corners of the button to make it circular */
background-color: #555; /* Set the background color of the button */
color: #fff; /* Set the text color of the button */
text-align: center; /* Center the text of the button */
text-decoration: none; /* Remove the underline from the text */
}
.return-to-top:hover {
background-color: #666; /* Change the background color of the button on hover */
��}
.return-to-top i {
font-size: 24px; /* Increase the size of the icon */
}
</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="section-wrapper">
<div class="right-column">
{{content}}
<a href="#" class="return-to-top">Return to Top</a>
<!-- <a href="#" class="return-to-top"><i class="fas fa-chevron-up"></i></a> -->
</div>
</div>
</div>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.querySelector(".return-to-top").style.display = "block";
} else {
document.querySelector(".return-to-top").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>