mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 03:26:16 +00:00
Fluffy-Bean
828167f762
Added logging to a .log file Fixed Images loosing colour and rotation on thumbnail generation Added more info to README
108 lines
No EOL
1.9 KiB
Sass
108 lines
No EOL
1.9 KiB
Sass
.banner
|
|
margin: 0
|
|
padding: 0
|
|
|
|
width: calc(100vw - 3.5rem)
|
|
height: 40vh
|
|
|
|
position: relative
|
|
top: 0
|
|
left: 3.5rem
|
|
|
|
background-color: $white
|
|
color: $black
|
|
|
|
background-image: linear-gradient(to right, darken($white, 1%) 15%, darken($white, 10%) 35%, darken($white, 1%) 50%)
|
|
background-size: 1000px 640px
|
|
animation: imgLoading 1.8s linear infinite forwards
|
|
|
|
overflow: hidden
|
|
transition: opacity 0.3s ease-in-out
|
|
|
|
img
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
|
|
width: 100%
|
|
height: 100%
|
|
|
|
background-color: $white
|
|
|
|
object-fit: cover
|
|
object-position: center center
|
|
|
|
span
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
|
|
width: 100%
|
|
height: 100%
|
|
|
|
background: linear-gradient(to right, rgba($primary, 1), rgba($primary, 0))
|
|
|
|
z-index: +1
|
|
|
|
.banner__content
|
|
margin: 0
|
|
padding: 1rem
|
|
|
|
width: 100%
|
|
height: 100%
|
|
|
|
position: relative
|
|
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: flex-end
|
|
gap: 0.5rem
|
|
|
|
z-index: +2
|
|
|
|
h1
|
|
margin: 0
|
|
padding: 0
|
|
|
|
font-size: 6.9rem
|
|
font-weight: 700
|
|
line-height: 1
|
|
text-align: left
|
|
|
|
color: $black
|
|
|
|
p
|
|
margin: 0
|
|
padding: 0
|
|
|
|
font-size: 1rem
|
|
font-weight: 600
|
|
line-height: 1
|
|
text-align: left
|
|
|
|
color: $black
|
|
|
|
@media (max-width: $breakpoint)
|
|
.banner
|
|
width: 100vw
|
|
height: 25vh
|
|
|
|
left: 0
|
|
|
|
span
|
|
background-image: linear-gradient(to bottom, rgba($primary, 1), rgba($primary, 0))
|
|
|
|
.banner__content
|
|
padding: 0.5rem
|
|
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
h1
|
|
font-size: 3.5rem
|
|
text-align: center
|
|
|
|
p
|
|
font-size: 1.1rem
|
|
text-align: center |