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

Change navbar colour in image groups

Browse source
This commit is contained in:
Michał Gdula 2023-04-02 21:15:51 +00:00
parent 45c5a0f682
commit c7e38dfcfb
5 changed files with 78 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

70
gallery/themes/default/components/banner.sass
View file

@ -1,32 +1,43 @@
.banner
width: 100%
height: 50vh
height: 30rem
position: relative
background-color: RGB($bg-300)
color: RGB($fg-white)
overflow: hidden
transition: opacity 0.3s ease-in-out
&::after
content: ''
width: $rad
height: calc(#{$rad} * 2)
position: absolute
bottom: calc(#{$rad} * -2)
left: 0
background-color: RGB($bg-bright)
border-radius: $rad 0 0 0
box-shadow: 0 calc(#{$rad} * -1) 0 0 RGB($bg-100)
img
position: absolute
top: 0
left: 0
inset: 0
width: 100%
height: 100%
background-color: RGB($bg-300)
background-color: inherit
object-fit: cover
object-position: center center
.banner-filter
position: absolute
top: 0
left: 0
inset: 0
width: 100%
height: 100%
@ -39,9 +50,10 @@
padding: 1rem
width: 100%
height: inherit
height: 100%
position: relative
position: absolute
inset: 0
display: flex
flex-direction: column
@ -49,24 +61,26 @@
z-index: +2
h1
h1, p
margin: 0
padding: 0
width: 100%
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
text-align: left
h1
font-size: 6.9rem
font-weight: 800
text-align: left
color: RGB($primary)
p
margin: 0
padding: 0
font-size: 1rem
font-weight: 600
line-height: 1
text-align: left
&.small
height: 3.5rem
@ -81,18 +95,21 @@
gap: 1rem
h1
width: auto
padding-bottom: 0.25rem
font-size: 1.5rem
text-align: left
p
width: auto
font-size: 0.9rem
text-align: left
@media (max-width: $breakpoint)
.banner
width: 100vw
height: 25vh
width: 100%
height: 17rem
&::after
display: none
.banner-content
padding: 0.5rem
@ -109,11 +126,12 @@
font-size: 1.1rem
text-align: center
&.small .banner-content
justify-content: center
&.small
.banner-content
justify-content: center
h1
text-align: center
h1
text-align: center
p
display: none
p
display: none