lxhome/assets/styles/web.sass

223 lines
3.4 KiB
Sass

---
---
@font-face
font-family: 'Lato'
src: url('/assets/fonts/Lato-Regular.ttf') format('truetype')
@font-face
font-family: 'Lato Bold'
src: url('/assets/fonts/Lato-Bold.ttf') format('truetype')
$white-ter: #fafafa
$footer-background-color: $white-ter
$purple: #49438B //#4A448C //#433983
$blue: #82C2E5
$family-primary: 'Lato'
$family-secendary: 'Lato Bold'
$background: $white-ter
$primary: $purple
html, body
min-height: 100vh
height: auto
margin: 0
html.light
background: $background
$background: $white-ter
html.dark
background: $purple
$background: $purple
@charset "utf-8"
@import "./bulma.sass"
@import "./code.scss"
body.light
color: $grey-dark
background: $background
with: 100%
height: 100%
a
color: $primary
&:hover
color: lighten($primary, 30%)
a.navlink
border-radius: $radius
color: $grey-dark
&:hover
background: $purple
color: $light
a.home
color: $blue !important
&:hover
text-decoration: underline
body.dark
.para
p, h1, h2, h3, h4, h5, strong
padding-top: 1em
padding-bottom: 0.5em
line-height: 1.5
color: darken($white, 10%)
color: $light
background: $purple
footer.footer
background: $purple
with: 100%
height: 100%
a
color: $white
&:hover
color: darken($white, 30%)
content.post
text-align: justify
blockquote
font-style: italic
h1
@extend .is-size-2
h2
@extend .is-size-3
h3
@extend .is-size-4
h4
@extend .is-size-5
h5
@extend .is-size-6
p, h1, h2, h3, h4, h5, strong
padding-top: 1em
padding-bottom: 0.5em
line-height: 1.5
color: darken($white, 10%)
strong
color: white
p
text-align: justify
ul
list-style: circle
li
margin-left: 1em
a
color: $blue
&:hover
text-decoration: underline
font-size: 1.3rem
.highlight
line-height: 1 !important
pre
code
font-size: 0.8em
code.highlighter-rouge
background: darken($purple, 10%)
color: $light
border-radius: $radius
padding: 0.1em 0.2em
font-size: 0.8em
.highlight
margin-top: 1em
a.post-title-link
color: $light
&:hover
text-decoration: underline
a.navlink
border-radius: $radius
color: $light !important
&:hover
background: $light
color: $grey-dark !important
.share-page
margin-top: 2em
a
color: $light
border-radius: $radius
&:hover
background: $light
color: $grey-dark
.column.is-flex.centered
justify-content: center
.columns.is-flex.centered
justify-content: center
.text-centered
text-align: center
.text-justified
text-align: justify
.cv-button
margin-top: 3rem
.is-size-1
font-family: 'Lato Bold' !important
span.info
padding-right: 10px
ul.details
a
color: $light
border-radius: $radius
&:hover
background: $light
color: $grey-dark
list-decoration: none
li
display: inline
li.category
padding: 0.5em
.pad
padding-right: 5px
.navbar-menu
a.navbar-item
color: $purple
.is-rounded
border-radius: 50%
border: 3px solid darken($purple, 10%)
footer.footer
margin-top: 5em
.right-aligned
justify-content: end
h3.header
margin-bottom: 1em
.avatar
width: 150px
height: 150px