DV8/GameExpo23
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/GameExpo23.git synced 2025-06-03 07:53:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial push of DV8 Expo website

Browse source
This commit is contained in:
Michał Gdula 2023-05-13 15:11:06 +01:00
parent dcc9247ba0
commit a86816a322
18 changed files with 1075 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

168
DV8-Expo/website/static/sass/sections.sass Normal file
View file

@ -0,0 +1,168 @@
section
margin: 0 auto 1rem
padding: 1rem
max-width: 75rem
display: flex
flex-direction: column
justify-content: center
text-align: center
> h2
margin: 0 0 1rem
font-size: 2rem
font-weight: bold
> p
margin: 0 0 1rem
font-size: 1rem
&.center
height: 100%
justify-content: center
align-items: center
div.games
margin: 1rem
display: grid
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr))
gap: 2rem
@media (max-width: 24rem)
div.games
margin: 0
display: flex
flex-direction: column
gap: 1rem
div.login
padding: 0.5rem
background-color: $primary
color: $secondary
border-radius: $radius
> p
margin: 0 0 0.5rem
padding: 0.5rem
background-color: $accent
color: $primary
border-radius: calc(calc(#{$radius} - 0.5rem) / 2)
&:first-child
border-top-left-radius: calc(#{$radius} - 0.5rem)
border-top-right-radius: calc(#{$radius} - 0.5rem)
> form
display: flex
flex-direction: row
> input
padding: 0.5rem 1rem
width: 100%
font-size: 1rem
font-family: $monospace-font
background-color: $secondary
color: $primary
border-radius: calc(calc(#{$radius} - 0.5rem) / 2) 0 0 calc(#{$radius} - 0.5rem)
border: none
transition: transform 0.1s ease-in-out, border-radius 0.1s ease-in-out
&:hover, &:focus-visible
outline: none
> button
padding: 0.5rem 1rem
font-size: 1rem
background-color: $primary-button
color: $primary
border-radius: 0 calc(calc(#{$radius} - 0.5rem) / 2) calc(#{$radius} - 0.5rem) 0
border: none
transition: transform 0.1s ease-in-out, border-radius 0.1s ease-in-out
&:hover, &:focus-visible
outline: none
background-color: $secondary-button
.game-box
margin: 0 auto
padding: 0.5rem
width: 100%
height: auto
display: flex
flex-direction: column
font-family: $main-font
background-color: $primary
color: $secondary
border-radius: $radius
box-shadow: 0 0.2rem 1rem 0 $primary
overflow: hidden
transition: box-shadow 0.1s ease-in-out, transform 0.1s ease-in-out
> img
margin: 0 0 0.5rem
width: auto
height: 10rem
object-fit: cover
display: block
border-radius: calc(#{$radius} - 0.5rem) calc(#{$radius} - 0.5rem) calc(calc(#{$radius} - 0.5rem) / 2) calc(calc(#{$radius} - 0.5rem) / 2)
> h2
margin: 0 0 0.5rem
font-size: 1.5rem
font-weight: bold
> p
height: 100%
margin: 0 0 1rem
font-size: 1rem
> .options
display: flex
flex-direction: row
gap: 0.5rem
font-family: $monospace-font
> a
margin: 0
padding: 0.5rem 1rem
height: 2.5rem
display: flex
justify-content: center
align-items: center
font-size: 1rem
text-decoration: none
background-color: $primary-button
color: $primary
border-radius: calc(calc(#{$radius} - 0.5rem) / 2)
transition: transform 0.1s ease-in-out, border-radius 0.1s ease-in-out
> i
font-size: 1.2rem
&:first-child
border-bottom-left-radius: calc(#{$radius} - 0.5rem)
&:last-child
border-bottom-right-radius: calc(#{$radius} - 0.5rem)
&:hover, &:focus-visible
outline: none
transform: translateY(-0.1rem)