<t:style t:include="resource:extra/webapps/wiki/wiki.css" />
- <div id="left">
-
+ <nav>
<t:if t:value="contents">
-
- <t:script t:include="resource:extra/webapps/wiki/wiki.js" />
-
- <div class="contents">
- <t:bind t:name="contents">
- <h2>
- <t:a t:href="$wiki/view" t:rest="title">
- <t:label t:name="title" />
- </t:a>
- </h2>
-
- <t:farkup t:name="content" t:no-follow="true" />
- </t:bind>
- </div>
+ <img id="menu" onclick="toggleSidebar()" src="data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 width=%2724%27 height=%2724%27 viewBox=%270 0 100 100%27 fill=%27rgb(0,0,0)%27%3E%3Crect x=%2710%27 y=%2720%27 width=%2780%27 height=%2712%27 rx=%276%27 /%3E%3Crect x=%2710%27 y=%2744%27 width=%2780%27 height=%2712%27 rx=%276%27 /%3E%3Crect x=%2710%27 y=%2768%27 width=%2780%27 height=%2712%27 rx=%276%27 /%3E%3C/svg>" />
</t:if>
- </div>
+ <t:a t:href="$wiki">Front Page</t:a>
+ <t:a t:href="$wiki/articles">All Articles</t:a>
+ <t:a t:href="$wiki/changes">Recent Changes</t:a>
+ <t:a t:href="$wiki/random">Random Article</t:a>
- <div id="right">
+ <t:if t:code="furnace.auth:logged-in?">
- <nav>
- <t:if t:value="contents">
- <img id="menu" onclick="toggleSidebar()" src="data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 width=%2724%27 height=%2724%27 viewBox=%270 0 100 100%27 fill=%27rgb(0,0,0)%27%3E%3Crect x=%2710%27 y=%2720%27 width=%2780%27 height=%2712%27 rx=%276%27 /%3E%3Crect x=%2710%27 y=%2744%27 width=%2780%27 height=%2712%27 rx=%276%27 /%3E%3Crect x=%2710%27 y=%2768%27 width=%2780%27 height=%2712%27 rx=%276%27 /%3E%3C/svg>" />
+ <t:if t:code="furnace.auth.features.edit-profile:allow-edit-profile?">
+ <t:a t:href="$realm/edit-profile" t:aside="begin">Edit Profile</t:a>
</t:if>
- <t:a t:href="$wiki">Front Page</t:a>
- <t:a t:href="$wiki/articles">All Articles</t:a>
- <t:a t:href="$wiki/changes">Recent Changes</t:a>
- <t:a t:href="$wiki/random">Random Article</t:a>
+ <t:button t:action="$login-realm/logout" t:aside="begin" class="link-button link">Logout</t:button>
- <t:if t:code="furnace.auth:logged-in?">
+ </t:if>
+ </nav>
+
+ <div class="page">
+ <div id="left">
+ <t:if t:value="contents">
- <t:if t:code="furnace.auth.features.edit-profile:allow-edit-profile?">
- <t:a t:href="$realm/edit-profile" t:aside="begin">Edit Profile</t:a>
- </t:if>
+ <t:script t:include="resource:extra/webapps/wiki/wiki.js" />
- <t:button t:action="$login-realm/logout" t:aside="begin" class="link-button link">Logout</t:button>
+ <div class="contents">
+ <t:bind t:name="contents">
+ <h2>
+ <t:a t:href="$wiki/view" t:rest="title">
+ <t:label t:name="title" />
+ </t:a>
+ </h2>
+ <t:farkup t:name="content" t:no-follow="true" />
+ </t:bind>
+ </div>
</t:if>
- </nav>
+ </div>
- <div class="page">
+ <div id="right">
<h1 class="title"><t:write-title /></h1>
-
<t:call-next-template />
-
</div>
<t:if t:value="footer">
</t:bind>
</footer>
</t:if>
-
</div>
<span style="display:none"></span>
.contents {
font-size: 90%;
margin: 0;
- padding: 0;
- padding-left: 10px;
- padding-right: 10px;
+ padding: 15px;
+ padding-top: 0px;
line-height: 130%;
}
}
.page {
- padding-left: 15px;
- padding-right: 15px;
- padding-bottom: 15px;
+ padding: 15px;
+ padding-top: 0px;
+ width: calc(100vw - 200px);
max-width: 800px;
}
.page nav {
- margin-left: -15px;
- margin-right: -15px;
- margin-bottom: -15px;
- border-top: 1px solid #ccc;
+ margin: -15px;
+ margin-top: 0px;
+ border-top: 1px dashed #ccc;
+ border-bottom: 1px dashed #ccc;
+ width: calc(100vw - 200px);
+ max-width: 800px;
+ background: none;
}
.page img {
}
#left {
- float: left;
+ position: absolute;
+ top: 0;
+ left: calc(min(100vw - 200px, 800px));
width: 200px;
z-index: 99;
- border-right: 1px solid #ccc;
- background: #f3f2ea;
+ border: none;
+ border-left: 1px dashed #ccc;
}
#right {
- margin-left: 200px;
- width: calc(100% - 200px);
-}
-
-nav {
- padding-left: 15px;
+ width: 100%;
+ max-width: calc(min(100vw - 230px, 770px));
}
nav img {
- margin: -15px;
- margin-top: -19px;
- margin-right: 0px;
- padding: 15px;
- padding-top: 13px;
- padding-bottom: 11px;
vertical-align: middle;
display: none;
}
-.page {
+.page nav {
+ width: calc(100vw - 200px);
max-width: 800px;
left: 0;
+ border-top: 1px dashed #ccc;
+ border-bottom: 1px dashed #ccc;
}
-.page nav {
- position: relative;
- width: calc(100vw - 200px);
- left: 0;
+.page footer {
+ padding-left: 0;
+ padding-right: 0;
}
@media screen and (max-width: 600px) {
#left {
position: absolute;
- margin-top: 32px;
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 {
- margin-left: 0;
- width: 100vw;
+ 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 {
}
#left {
- background-color: #373e48;
- border-right: 1px solid #666;
+ 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;
+ }
}
var m = document.getElementById("menu");
if (l.style.display === "") {
l.style.display = "inline";
- var darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
- if (!darkMode) {
- m.style.backgroundColor = "#f3f2ea";
- }
+ m.src = "data:image/svg+xml;utf8,%3Csvg version=%271.1%27 xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 width=%2724%27 height=%2716%27 viewBox=%270 0 460.775 460.775%27%3E%3Cpath d=%27M285.08,230.397L456.218,59.27c6.076-6.077,6.076-15.911,0-21.986L423.511,4.565c-2.913-2.911-6.866-4.55-10.992-4.55 c-4.127,0-8.08,1.639-10.993,4.55l-171.138,171.14L59.25,4.565c-2.913-2.911-6.866-4.55-10.993-4.55 c-4.126,0-8.08,1.639-10.992,4.55L4.558,37.284c-6.077,6.075-6.077,15.909,0,21.986l171.138,171.128L4.575,401.505 c-6.074,6.077-6.074,15.911,0,21.986l32.709,32.719c2.911,2.911,6.865,4.55,10.992,4.55c4.127,0,8.08-1.639,10.994-4.55 l171.117-171.12l171.118,171.12c2.913,2.911,6.866,4.55,10.993,4.55c4.128,0,8.081-1.639,10.992-4.55l32.709-32.719 c6.074-6.075,6.074-15.909,0-21.986L285.08,230.397z%27/%3E%3C/svg%3E";
} else {
l.style.display = "";
- m.style.backgroundColor = "";
+ m.src = "data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 width=%2724%27 height=%2716%27 viewBox=%270 0 120 100%27 fill=%27rgb(0,0,0)%27%3E%3Crect y=%270%27 width=%27120%27 height=%2720%27 rx=%2710%27 /%3E%3Crect y=%2740%27 width=%27120%27 height=%2720%27 rx=%2710%27 /%3E%3Crect y=%2780%27 width=%27120%27 height=%2720%27 rx=%2710%27 /%3E%3C/svg%3E";
}
}
color: #8ab4f8;
}
- .page nav {
- border-top: 1px solid #666;
- }
-
nav {
background-color: #373e48;
border-bottom: 1px solid #666;
}
+
+ .page nav {
+ border-top: 1px solid #666;
+ background-color: transparent;
+ }
}
projects / factor.git / commitdiff