st-marcel-d-urfe.fr/assets/styles/main.sass

123 lines
2.2 KiB
Sass

@import "./variables"
// @import "./reset"
// @import "./html"
// @import "./menu"
@import "./spectre.css/spectre"
// @import "./header"
@import "../fonts/source-sans-pro"
@import "./header"
@import "./index"
/* Make images easier to work with */
img
max-width: 100%
display: block
&.round
border-radius: 100%
.maire
img
margin: 2rem auto
.person
text-align: center
width: 250px
margin: 0 auto 2rem
body
font-family: 'Source Sans Pro', sans-serif
background-color: #f7f4f1
.card
border: 0
box-shadow: 0 .25rem 1rem rgba(48,55,66,.15)
.hero.hero-lg
padding: 12rem 0
h1
font-size: 3rem
font-weight: 500
line-height: 1
text-align: center
.cover
width: 100%
height: 40vh
object-fit: cover
z-index: 2
position: relative
.contenu
background: white
margin: 2rem auto
padding: 2rem
z-index: 3
position: relative
&.contenu-image
margin-top: -4rem
.btn.jaune
color: $jaune
&:hover, &.active, &.focus
color: darken($jaune, 10%)
&.btn-primary
background-color: $jaune
border-color: $jaune
color: black
&:hover, &.active, &.focus
background-color: darken($jaune, 10%)
border-color: $jaune
.btn.rouge
color: $rouge
&:hover, &.active, &.focus
color: darken($rouge, 10%)
&.btn-primary
background-color: $rouge
border-color: $rouge
color: white
&:hover, &.active, &.focus
background-color: darken($rouge, 10%)
border-color: $rouge
.btn.vert
color: $vert
&:hover
color: darken($vert, 10%)
&:active
color: darken($vert, 10%)
&:focus
color: darken($vert, 10%)
&.btn-primary
background-color: $vert
border-color: $vert
color: white
&:hover, &.active, &.focus
background-color: darken($vert, 10%)
border-color: $vert
.btn.bleu
color: $bleu
&:hover
&.active
&.focus
color: darken($bleu, 10%)
&.btn-primary
background-color: $bleu
border-color: $bleu
color: white
&:hover, &.active, &.focus
background-color: darken($bleu, 10%)
border-color: $bleu
.footer
margin: 2rem
.card
margin: 0 2rem
button
overflow-wrap: anywhere
word-break: break-all
white-space: normal
user-select: inherit