Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 11:36:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update banner structure and styling

Browse source
This commit is contained in:
Michał Gdula 2023-04-04 19:36:24 +00:00
parent 7e12de02bf
commit 95bc745b03
6 changed files with 227 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

159
gallery/static/sass/components/banner.sass
View file

@ -1,14 +1,9 @@
.banner
.banner,
.banner-small
width: 100%
height: 30rem
position: relative
background-color: RGB($bg-300)
color: RGB($fg-white)
transition: opacity 0.3s ease-in-out
&::after
content: ''
@ -23,6 +18,10 @@
border-radius: $rad 0 0 0
box-shadow: 0 calc(#{$rad} * -1) 0 0 RGB($bg-100)
.banner
height: 30rem
background-color: RGB($bg-300)
img
position: absolute
inset: 0
@ -47,7 +46,61 @@
z-index: +1
.banner-content
padding: 1rem
padding: 0.5rem
width: 100%
height: auto
position: absolute
left: 0
bottom: 0
display: grid
grid-template-columns: 1fr auto
grid-template-rows: 1fr auto auto
grid-template-areas: 'info info' 'header header' 'subtitle options'
gap: 0.5rem
z-index: +2
.banner-header,
.banner-info,
.banner-subtitle
margin: 0
padding: 0
width: 100%
.banner-header
grid-area: header
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
text-align: left
font-size: 6.9rem
font-weight: 800
color: RGB($primary)
.banner-info
grid-area: info
font-size: 1rem
font-weight: 600
.banner-subtitle
grid-area: subtitle
font-size: 1rem
font-weight: 600
.pill-row
margin-top: auto
grid-area: options
.banner-small
height: 3.5rem
background-color: RGB($bg-100)
.banner-content
padding: 0.5rem
width: 100%
height: 100%
@ -55,83 +108,83 @@
position: absolute
inset: 0
display: flex
flex-direction: column
justify-content: flex-end
display: grid
grid-template-columns: auto 1fr auto
gap: 1rem
z-index: +2
h1, p
margin: 0
.banner-header,
.banner-info
margin: auto 0
padding: 0
width: auto
height: auto
justify-self: flex-start
width: 100%
.banner-header
padding-bottom: 0.25rem
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
text-align: left
h1
font-size: 6.9rem
font-weight: 800
font-size: 1.5rem
color: RGB($primary)
p
font-size: 1rem
.banner-info
font-size: 0.9rem
font-weight: 600
&.small
height: 3.5rem
background-color: RGB($bg-100)
.banner-content
padding: 0.5rem
flex-direction: row
justify-content: flex-start
align-items: center
gap: 1rem
h1
width: auto
padding-bottom: 0.25rem
font-size: 1.5rem
p
width: auto
font-size: 0.9rem
.pill-row
width: auto
justify-self: flex-end
display: inline-flex
@media (max-width: $breakpoint)
.banner
width: 100%
height: 17rem
.banner,
.banner-small
&::after
display: none
.banner
min-height: 17rem
height: auto
.banner-content
padding: 0.5rem
height: 100%
display: flex
flex-direction: column
justify-content: center
align-items: center
gap: 0.25rem
h1
.banner-header
font-size: 3rem
text-align: center
p
.banner-info,
.banner-subtitle
font-size: 1.1rem
text-align: center
&.small
.banner-content
justify-content: center
h1
text-align: center
.pill-row
margin-top: 1rem
p
display: none
.banner-small
.banner-content
display: flex
flex-direction: row
justify-content: space-between
gap: 0
.banner-header
margin: auto 1rem
text-align: center
.banner-info
display: none