summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--style.css45
-rw-r--r--templates/note.mdwn5
-rw-r--r--templates/popup.mdwn5
3 files changed, 51 insertions, 4 deletions
diff --git a/style.css b/style.css
index 4c48e5c..fe1eb90 100644
--- a/style.css
+++ b/style.css
@@ -548,3 +548,48 @@ a.openid_large_btn:focus {
.trailsep {
display: none;
}
+
+/* mobile/small-screen-friendly layout */
+@media (max-width: 600px) {
+ .sidebar {
+ width: auto;
+ float: none;
+ margin-top: 0;
+ border: none;
+ }
+
+ /* if the mobile browser is new enough, use flex layout to shuffle
+ * the sidebar to the end */
+ .page {
+ display: -webkit-box;
+ display: -webkit-flexbox;
+ display: -webkit-flex;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-flex-direction: tb;
+ -webkit-flex-direction: column;
+ -webkit-flex-flow: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ }
+ #pageheader {
+ -webkit-box-ordinal-group: -1;
+ -webkit-order: -1;
+ -ms-box-ordinal-group: -1;
+ -ms-flex-order: -1;
+ order: -1;
+ }
+ .sidebar, #footer {
+ -webkit-box-ordinal-group: 1;
+ -webkit-order: 1;
+ -ms-box-ordinal-group: 1;
+ -ms-flex-order: 1;
+ order: 1;
+ }
+
+ .blogform, #blogform {
+ padding: 4px 4px;
+ }
+}
diff --git a/templates/note.mdwn b/templates/note.mdwn
index 9ef5ad9..8de7374 100644
--- a/templates/note.mdwn
+++ b/templates/note.mdwn
@@ -1,11 +1,12 @@
+[[!templatebody <<ENDBODY
<div class="notebox">
<TMPL_VAR text>
</div>
-<TMPL_UNLESS text>
+ENDBODY]]
+
Use this template to insert a note into a page. The note will be styled to
float to the right of other text on the page. This template has one
parameter:
<ul>
<li>`text` - the text to display in the note
</ul>
-</TMPL_UNLESS>
diff --git a/templates/popup.mdwn b/templates/popup.mdwn
index 92455eb..b721a95 100644
--- a/templates/popup.mdwn
+++ b/templates/popup.mdwn
@@ -1,4 +1,3 @@
-<TMPL_UNLESS mouseover>
Use this template to create a popup window that is displayed when the mouse
is over part of the page. This template has two parameters:
<ul>
@@ -10,7 +9,9 @@ large for good usability.
</ul>
Note that browsers that do not support the CSS will display the popup
inline in the page, inside square brackets.
-</TMPL_UNLESS>
+
+[[templatebody <<ENDBODY
<span class="popup"><TMPL_VAR mouseover>
<span class="paren">[</span><span class="balloon"><TMPL_VAR popup></span><span class="paren">]</span>
</span>
+ENDBODY]]