CC/octomode
12
0
Fork 0
Code Issues 18 Pull Requests Projects Releases Wiki Activity

small interface tweak, to keep octomode on screens smaller than 1290px

Browse Source
This commit is contained in:
mb 2022-10-30 23:29:03 +01:00
parent 0a7526411f
commit 6ba8e1cc47
2 changed files with 42 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
static/main.css
View File

@ -1,3 +1,5 @@
@charset "utf-8";
body{ body{
min-width: 900px; min-width: 900px;
} }
@ -29,9 +31,43 @@ div#nav{
margin: 0.5em 15px; margin: 0.5em 15px;
float: right; float: right;
} }
div#nav span.info{
font-size: 16px;
line-height: 0;
vertical-align: middle;
cursor: pointer;
}
div#nav span.info:hover{
opacity: 0.75;
}
div#nav div.hidden{
position: absolute;
right: 1.5em;
margin-top: 8px;
}
div#nav input{ div#nav input{
min-width: 300px; min-width: 300px;
} }
/* click logic (CSS only) */
span#click_md {
cursor: pointer;
}
div#show_md{
display: none;
}
span#click_md:focus + div#show_md{
display: block;
}
span#click_css {
cursor: pointer;
}
div#show_css{
display: none;
}
span#click_css:focus + div#show_css{
display: block;
}
/* iframe rules */ /* iframe rules */
iframe{ iframe{
width: 100%; width: 100%;
@ -47,21 +83,6 @@ div#wrapper{
height: calc(100vh - 50px - 25px); height: calc(100vh - 50px - 25px);
} }
/*div#logger-wrapper{
position: fixed;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
overflow-y: auto;
padding: 0 1em;
background-color: lightyellow;
display: flex;
flex-direction: column-reverse;
white-space: pre;
}*/
/* start page */ /* start page */
body.start-page *{ body.start-page *{
font-family: serif; font-family: serif;
@ -70,7 +91,6 @@ body.start-page *{
} }
/* Z-INDEX */ /* Z-INDEX */
div#wrapper, div#wrapper,
div.pagedjs_pages{ div.pagedjs_pages{
z-index: 1; z-index: 1;

10
templates/base.html
View File

@ -24,11 +24,13 @@ window.addEventListener('load', function () {
<h1>{{ name }} <a href="/"><em class="octomode">in octomode</em></a></h1> <h1>{{ name }} <a href="/"><em class="octomode">in octomode</em></a></h1>
<div id="buttons"> <div id="buttons">
<a href="/{{ name }}/pad"><button>pad</button></a>: <a href="/{{ name }}/pad"><button>pad</button></a>
<input type="text" name="pad" value="{{ pad_url }}/{{ name }}.md"> <span id="click_md" class="info" tabindex="1">🌐</span>
<div id="show_md" class="hidden"><input type="text" name="pad" value="{{ pad_url }}/{{ name }}.md"></div>
<a href="/{{ name }}/stylesheet"><button>stylesheet</button></a>: <a href="/{{ name }}/stylesheet"><button>stylesheet</button></a>
<input type="text" name="pad" value="{{ pad_url }}/{{ name }}.css"> <span id="click_css" class="info" tabindex="1">🌐</span>
<div id="show_css" class="hidden"><input type="text" name="pad" value="{{ pad_url }}/{{ name }}.css"></div>
<a href="/{{ name }}/html"><button>html</button></a> <a href="/{{ name }}/html"><button>html</button></a>