-#left {
- width: 0;
-}
-
-#right {
- max-width: 800px;
-}
-
.comparison th {
border-width: 1px;
border-color: #666;
.contents {
font-size: 90%;
margin: 0;
- padding: 0;
- padding-left: 10px;
- padding-right: 10px;
+ padding: 15px;
+ padding-top: 0px;
line-height: 130%;
}
padding-left: 20px;
}
-.page {
- padding-left: 15px;
- padding-right: 15px;
- padding-bottom: 15px;
+.page nav {
+ margin: -15px;
+ margin-top: 0px;
+ background: none;
+}
+
+.page img {
+ max-width: 100%;
}
-.page .navbar {
- margin-left: -15px;
- margin-right: -15px;
- margin-bottom: -15px;
- border-top: 1px solid #ccc;
+.page hr {
+ height: 1px;
}
.description {
border-width: 1px 1px 0 0;
}
-.footer {
- padding-left: 15px;
+#left {
+ position: absolute;
+ top: 0;
+ left: calc(min(100vw - 200px, 800px));
+ width: 200px;
+ z-index: 99;
+ border: none;
+ border-left: 1px dashed #ccc;
+}
+
+#right {
+ width: calc(100vw - 200px);
+ max-width: calc(min(100vw - 230px, 770px));
+}
+
+nav img {
+ margin-right: 5px;
+ display: none;
+}
+
+.page nav {
+ width: calc(100vw - 200px);
+ max-width: 800px;
+ left: 0;
+ border-top: 1px dashed #ccc;
+ border-bottom: 1px dashed #ccc;
+}
+
+.page footer {
+ padding: 15px;
+ padding-left: 0;
+ padding-right: 0;
font-size: smaller;
}
+
+@media screen and (max-width: 600px) {
+ #left {
+ position: absolute;
+ display: none;
+ left: 0;
+ top: 0;
+ background: #f5f5f5;
+ border: none;
+ border-right: 1px solid #ccc;
+ border-bottom: 1px solid #ccc;
+ padding-top: 0px;
+ box-shadow: 5px 5px 10px #aaa;
+ }
+
+ #right {
+ width: 100%;
+ max-width: 100%;
+ }
+
+ nav img {
+ display: inline;
+ }
+
+ .page {
+ width: 100%;
+ }
+
+ .page nav {
+ width: 100vw;
+ }
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+ nav img {
+ filter: invert(80%);
+ }
+
+ #left {
+ border: none;
+ border-left: 1px dashed #666;
+ }
+
+ .description pre {
+ color: black;
+ }
+
+ .page nav {
+ border-top: 1px dashed #666;
+ border-bottom: 1px dashed #666;
+ }
+}
+
+@media screen and (max-width: 600px) and (prefers-color-scheme: dark) {
+
+ #left {
+ background-color: #373e48;
+ border: none;
+ border-right: 1px solid #666;
+ border-bottom: 1px solid #666;
+ box-shadow: 5px 5px 10px #333;
+ }
+}