Browse Source

Use flex for modal

master
Adrian Heine 4 years ago
parent
commit
f80f8d748b
  1. 1
      index.html
  2. 4
      src/index.js
  3. 20
      style.css

1
index.html

@ -4,6 +4,7 @@
<script src=/diffDOM.js></script> <script src=/diffDOM.js></script>
<script src=/springy.js></script> <script src=/springy.js></script>
<script src=/src/index.js type=module></script> <script src=/src/index.js type=module></script>
<div></div>
<aside> <aside>
<a href="https://git.adrianheine.de/adrian/coding-precarity">git</a> <a href="https://git.adrianheine.de/adrian/coding-precarity">git</a>
</aside> </aside>

4
src/index.js

@ -49,9 +49,7 @@ const dispatch = target => {
window.onpopstate = e => { window.onpopstate = e => {
dispatch(document.location.search) dispatch(document.location.search)
} }
const target = document.createElement('div')
display = new Display(dispatch, target)
display = new Display(dispatch, document.body.firstChild)
if (document.location.search) dispatch(document.location.search) if (document.location.search) dispatch(document.location.search)
else display.renderIntro(intro) else display.renderIntro(intro)
document.body.appendChild(target)

20
style.css

@ -75,19 +75,19 @@ body {
left: 0; left: 0;
top: 0; top: 0;
background-color: #e1eef280; background-color: #e1eef280;
padding: 1em;
box-sizing: border-box; box-sizing: border-box;
cursor: default; cursor: default;
display: flex;
align-items: center;
justify-content: center;
}
a.fullview {
text-decoration: none;
} }
.fullview > div { .fullview > div {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 20em;
font-size: 1.2em;
max-height: 100%; max-height: 100%;
max-width: 30em;
overflow: auto;
max-width: 75vh;
background-color: #006680; background-color: #006680;
padding: 1em; padding: 1em;
color: white; color: white;
@ -96,7 +96,6 @@ body {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: 1.2em;
} }
.fullview > div img { .fullview > div img {
float: right; float: right;
@ -118,6 +117,7 @@ h1, .desc {
border: 3px solid #1a1c1c; border: 3px solid #1a1c1c;
color: #1a1c1c; color: #1a1c1c;
padding: 0 0.5em; padding: 0 0.5em;
overflow: auto;
} }
.fulltext p { .fulltext p {
@ -130,7 +130,7 @@ blockquote {
padding: .5em; padding: .5em;
quotes: "\201C""\201D""\2018""\2019"; quotes: "\201C""\201D""\2018""\2019";
/* Otherwise the :before is larger than the blockquote and creates a scrollbar in the parent */ /* Otherwise the :before is larger than the blockquote and creates a scrollbar in the parent */
min-height: 3em;
min-height: 4em;
} }
blockquote:before { blockquote:before {
color: #1a1c1c66; color: #1a1c1c66;

Loading…
Cancel
Save