Permalink
Browse files

Improved view on small screens

  • Loading branch information...
davidmerfield committed Jan 10, 2019
1 parent c539b7f commit e845f7815921ec5e9077810d1f37747dae9a9b6a
Showing with 31 additions and 2 deletions.
  1. +1 −1 app/templates/photos/entry.html
  2. +30 −1 app/templates/photos/style.css
@@ -18,7 +18,7 @@
{{> navigation}}
{{/entry.page}}

<div class="yield" style="display:flex;">
<div class="yield flex">

{{^entry.page}}
<div class="edge left">
@@ -80,6 +80,10 @@ body {
min-height: 100%
}

.yield.flex {
display: flex;
}

.yield {
flex-grow: 1;
}
@@ -225,6 +229,8 @@ font-feature-settings: 'tnum';
box-sizing: border-box;
}



@media screen and (max-width: 500px) {
.navigation>* {
width: 100%;
@@ -235,6 +241,9 @@ font-feature-settings: 'tnum';

.shift-margin {padding-left: 0}
.align-right, .align-center {text-align: left;}

.yield.flex {display: block}

}


@@ -243,6 +252,7 @@ font-feature-settings: 'tnum';
text-decoration: none;
}



.navigation a[href] {
color: inherit;
@@ -282,19 +292,36 @@ font-feature-settings: 'tnum';
padding-left: 1.5rem;
}



.edge .arrow {
flex-grow: 1;
display: flex;
padding: 1.5rem;
align-items: center;
}

@media screen and (max-width: 500px) {
.edge.left {text-align: left;}
.edge .arrow {display: none;}

}

.edge a[title="Close"] {
position: fixed;
top: 1.5rem;
right: 1.5em;
}
.entry.page {
padding-top: 3rem;
margin-top: 0;
margin-left: 25%;
}

@media screen and (max-width: 500px) {
.entry.page {margin-left: 0}
}

.entry .body {
flex-grow: 1;
text-align: center;
@@ -517,7 +544,9 @@ the absolutely positioned stuff is off the viewport.
}
}


@media screen and (max-width: 500px) {
.inside, .margin {width: 100%}
}



0 comments on commit e845f78

Please sign in to comment.