grimneko/bibliogram
1
0
Fork 0
Code Releases Activity

Add SPA post overlay

Browse Source
This commit is contained in:
Cadence Fish
2020-02-22 01:35:19 +13:00
parent 13e40259b7
commit aac358cd65
9 changed files with 317 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/site/sass/main.sass
View File

@@ -215,95 +215,95 @@ body
@include sized
.post-page
background-color: #6a6b71
background-color: #505156
.post-page-divider
.post-page-divider
display: grid
grid-template-columns: 360px auto
max-width: 1200px
margin: 0 auto
min-height: 100vh
@media screen and (max-width: $layout-a-max)
display: flex
flex-direction: column
.description-section
display: grid
grid-template-columns: 360px auto
max-width: 1200px
margin: 0 auto
min-height: 100vh
align-items: start
align-content: normal
background-color: #eee
position: sticky
top: 0
height: 100vh
overflow-y: auto
box-sizing: border-box
@media screen and (max-width: $layout-a-max)
position: inherit
top: inherit
height: inherit
.user-header
display: flex
flex-direction: column
.description-section
display: grid
align-items: start
align-content: normal
background-color: #eee
position: sticky
top: 0
height: 100vh
overflow-y: auto
box-sizing: border-box
@media screen and (max-width: $layout-a-max)
position: inherit
top: inherit
height: inherit
.user-header
display: flex
align-items: center
justify-content: center
background-color: #b3b3b3
padding: 10px
.pfp
$size: 40px
width: $size
height: $size
margin-right: 10px
background-color: rgba(40, 40, 40, 0.25)
.name
font-size: 20px
color: black
text-decoration: none
&:hover
text-decoration: underline
.description
margin: 12px
white-space: pre-line
overflow-wrap: anywhere
font-size: 20px
line-height: 1.4
@media screen and (max-width: $layout-a-max)
font-size: 18px
.images-gallery
display: flex
flex-direction: column
align-items: center
justify-content: center
background-color: #262728
background-color: #b3b3b3
padding: 10px
.pfp
$size: 40px
width: $size
height: $size
margin-right: 10px
background-color: rgba(40, 40, 40, 0.25)
.name
font-size: 20px
color: black
text-decoration: none
&:hover
text-decoration: underline
.description
margin: 12px
white-space: pre-line
overflow-wrap: anywhere
font-size: 20px
line-height: 1.4
@media screen and (max-width: $layout-a-max)
flex: 1
font-size: 18px
.sized-image, .sized-video
color: #eee
background-color: #3b3c3d
max-height: 94vh
max-width: 100%
.images-gallery
display: flex
flex-direction: column
align-items: center
justify-content: center
background-color: #262728
padding: 10px
&:not(:last-child)
margin-bottom: 10px
@media screen and (max-width: $layout-a-max)
flex: 1
.sized-image
width: auto
height: auto
.sized-image, .sized-video
color: #eee
background-color: #3b3c3d
max-height: 94vh
max-width: 100%
.sized-video
width: 100%
height: 100%
&:not(:last-child)
margin-bottom: 10px
.sized-image
width: auto
height: auto
.sized-video
width: 100%
height: 100%
.error-page
box-sizing: border-box
@@ -490,3 +490,31 @@ body
margin-top: 45px
padding-top: 15px
border-top: 1px solid #714141
.post-overlay
position: fixed
top: 0
left: 0
right: 0
bottom: 0
background: rgba(0, 0, 0, 0.7)
z-index: 10
overflow-y: auto
&:not(.loading) > *
min-height: 100vh
&.loading
display: flex
justify-content: center
align-items: center
.loading-inner
color: white
font-size: 30px
line-height: 1
padding: 26px
border-radius: 20px
border: 2px solid #aaa
font-weight: bold
background-color: #282828