Fluffy/WebsiteArchive
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/Fluffys-website.git synced 2025-05-28 14:23:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make page not look shit

Browse source
This commit is contained in:
Michał Gdula 2023-02-05 14:19:21 +00:00
parent c1559307b6
commit c32d7e3246
33 changed files with 716 additions and 715 deletions
Download patch file Download diff file Expand all files Collapse all files

300
static/css/style.sass Normal file
View file

@ -0,0 +1,300 @@
$black: #101010
$dark: #151515
$grey: #808080
$white: #e8e3e3
$primary: #8C977D
@font-face
font-family: 'jetbrains_monoitalic'
src: url('../fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff2') format('woff2'), url('../fonts/jetbrainsmono-italic-variablefont_wght-webfont.woff') format('woff')
font-weight: normal
font-style: normal
font-display: swap
@font-face
font-family: 'jetbrains_monoregular'
src: url('../fonts/jetbrainsmono-variablefont_wght-webfont.woff2') format('woff2'), url('../fonts/jetbrainsmono-variablefont_wght-webfont.woff') format('woff')
font-weight: normal
font-style: normal
font-display: swap
html
margin: 0
padding: 0
body
margin: 0
padding: 3rem 1rem 1rem
width: 100vw
min-height: 100vh
background-color: $black
font-family: 'jetbrains_monoregular', sans-serif
display: flex
justify-content: center
align-items: center
overflow-x: hidden
box-sizing: border-box
*
box-sizing: border-box
nav
margin: 0
padding: 0.5rem 1rem
width: 100vw
height: 3rem
position: fixed
top: 0
left: 0
display: flex
justify-content: center
align-items: center
gap: 1rem
z-index: 1
color: $white
a
margin: 0
padding: 0
width: auto
height: 2rem
position: relative
display: flex
justify-content: center
align-items: center
font-size: 1.1rem
font-weight: 400
line-height: 1
text-align: left
text-decoration: none
text-transform: uppercase
color: $grey
&:hover
color: $white
a.selected
color: $primary
&:hover
color: $white
span
margin: 0 0 0.2rem 0
padding: 0
width: 2px
height: 1.25rem
position: relative
display: flex
justify-content: center
align-items: center
background-color: $grey
.wrapper
margin: 0 auto
padding: 1rem
width: 100%
max-width: 621px
min-height: auto
position: relative
display: flex
flex-direction: column
gap: 1rem
background: $dark
color: $white
border-radius: 2px
z-index: 2
box-sizing: border-box
overflow: hidden
h1
margin: 0 // 0 1rem 0
padding: 0
font-size: 2.25rem
font-weight: 600
line-height: 1
text-align: left
text-transform: uppercase
white-space: break-spaces
h2
margin: 0
padding: 0
font-size: 1.5rem
font-weight: 600
line-height: 1
text-align: left
text-transform: uppercase
h3
margin: 0
padding: 0
font-size: 1.25rem
font-weight: 600
line-height: 1
text-align: left
text-transform: uppercase
p
margin: 0
padding: 0
font-size: 1.1rem
font-weight: 400
line-height: 1.2
text-align: left
color: $grey
a
margin: 0
padding: 0
font-size: 1.1rem
font-weight: 400
line-height: 1.2
text-align: left
color: $primary
&:hover
color: $white
img
margin: 0 auto
padding: 0
width: auto
max-width: 100%
position: relative
display: block
border-radius: 2px
object-fit: cover
z-index: 1
p.subtitle
color: $white
text-transform: uppercase
.content
display: flex
flex-direction: column
justify-content: space-between
gap: 0.5rem
overflow: hidden
.music
display: flex
flex-direction: row
gap: 1rem
overflow: hidden
.music-image
width: 5rem
height: 5rem
border-radius: 2px
background-color: $black
img
margin: 0
padding: 0
width: 5rem
height: 5rem
display: block
float: left
border-radius: 2px
background-color: $dark
object-fit: cover
.music-info
display: flex
flex-direction: column
//justify-content: space-between
gap: 0.5rem
overflow: hidden
a
margin: 0
padding: 0
font-size: 1.1rem
font-weight: 600
line-height: 1.2
text-align: left
text-decoration: none
color: $white
&:hover
color: $primary
p.music-nowplaying
color: $primary
@import "buttons"
@import "toast"
@media (max-width: 669px)
.wrapper
max-width: 100%
border-radius: 0
h1
font-size: 2rem
text-align: center
p.subtitle
text-align: center
.music
padding-left: 0.5rem
border-left: 2px solid $primary
span, img
display: none