adrian/coding-precarity
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Use flex for modal

Browse source
This commit is contained in:
Adrian Heine 2020-09-22 11:48:35 +02:00
parent 4255b002b9
commit f80f8d748b
3 changed files with 12 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -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
View file

@ -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, document.body.firstChild)
display = new Display(dispatch, target)
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
View file

@ -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; font-size: 1.2em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 20em;
max-height: 100%; max-height: 100%;
max-width: 30em; max-width: 75vh;
overflow: auto;
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;