Ajout de page et du style principal
This commit is contained in:
53
assets/styles/header.sass
Normal file
53
assets/styles/header.sass
Normal file
@ -0,0 +1,53 @@
|
||||
.header
|
||||
background-color: white
|
||||
margin-bottom: 90px
|
||||
|
||||
.container
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
align-items: end
|
||||
height: 100%
|
||||
position: relative
|
||||
padding-top: 1rem
|
||||
border-bottom: 1px $gris dashed
|
||||
|
||||
&::after
|
||||
content: ""
|
||||
border-top: 1px $gris dashed
|
||||
height: 1px
|
||||
bottom: -40px
|
||||
width: 100%
|
||||
position: absolute
|
||||
|
||||
.title
|
||||
color: $gris
|
||||
text-align: center
|
||||
text-decoration: none
|
||||
|
||||
h1
|
||||
font-size: 4rem
|
||||
font-family: subscriber
|
||||
word-wrap: break-word
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
&::before
|
||||
background: url(/Blason_ville_Cremeaux_42.svg)
|
||||
background-size: contain
|
||||
background-repeat: no-repeat
|
||||
background-position: center
|
||||
width: 100%
|
||||
height: 70px
|
||||
display: block
|
||||
|
||||
|
||||
.home .header
|
||||
margin-bottom: 58px
|
||||
|
||||
@media screen and (min-width: 800px)
|
||||
.home .title::before
|
||||
content: ""
|
||||
|
||||
@media screen and (min-width: 800px)
|
||||
.header button
|
||||
display: none
|
||||
55
assets/styles/html.sass
Normal file
55
assets/styles/html.sass
Normal file
@ -0,0 +1,55 @@
|
||||
/* Box sizing rules */
|
||||
*,*::before,*::after
|
||||
box-sizing: border-box
|
||||
|
||||
html
|
||||
/*-webkit-font-smoothing: antialiased*/
|
||||
/*--moz-osx-font-smoothing: grayscale*/
|
||||
scroll-behavior: smooth
|
||||
/* 18px */
|
||||
font-size: $font-size
|
||||
|
||||
body
|
||||
font-weight: 400
|
||||
line-height: 1.65
|
||||
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
|
||||
color: $color-primary
|
||||
background-color: $color-secondary
|
||||
|
||||
p
|
||||
margin-bottom: 1.15rem
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5
|
||||
margin: 2.75rem 0 1.05rem
|
||||
font-weight: 400
|
||||
line-height: 1.15
|
||||
|
||||
h4,
|
||||
h5
|
||||
margin: 1.375rem 0 0.75rem
|
||||
font-weight: 400
|
||||
line-height: 1.15
|
||||
|
||||
h1
|
||||
margin-top: 0
|
||||
font-size: 4rem
|
||||
|
||||
h2
|
||||
font-size: 3rem
|
||||
|
||||
h3
|
||||
font-size: 3rem
|
||||
|
||||
h4
|
||||
font-size: 2.5rem
|
||||
|
||||
h5
|
||||
font-size: 2rem
|
||||
|
||||
small,
|
||||
.text_small
|
||||
font-size: 0.889em
|
||||
@ -1,18 +1,296 @@
|
||||
@import "./variables"
|
||||
@import "./reset"
|
||||
@import "./html"
|
||||
@import "./header"
|
||||
@import "./menu"
|
||||
|
||||
@font-face
|
||||
font-family: "subscriber"
|
||||
src: url("/fonts/subscriber.woff") format("woff")
|
||||
|
||||
h1, h2
|
||||
font-family: subscriber
|
||||
|
||||
h2
|
||||
text-transform: uppercase
|
||||
text-align: center
|
||||
|
||||
html, body
|
||||
min-height: 100%
|
||||
background-color: #d5d5d5
|
||||
text-align: center
|
||||
background-color: white
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
h1
|
||||
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif
|
||||
font-size: 92px
|
||||
padding: 80px 50px
|
||||
text-align: center
|
||||
text-transform: uppercase
|
||||
text-rendering: optimizeLegibility
|
||||
.container
|
||||
width: $content-width
|
||||
margin: 0 auto
|
||||
|
||||
color: #2c2c2c
|
||||
@media screen and (max-width: 800px)
|
||||
.container
|
||||
width: inherit
|
||||
|
||||
letter-spacing: .05em
|
||||
text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2)
|
||||
word-wrap: break-word
|
||||
.jaune
|
||||
h2
|
||||
color: $jaune
|
||||
.rouge
|
||||
h2
|
||||
color: $rouge
|
||||
.vert
|
||||
h2
|
||||
color: $vert
|
||||
.bleu
|
||||
h2
|
||||
color: $bleu
|
||||
|
||||
@media screen and (max-width: 800px)
|
||||
.header .title
|
||||
z-index: 20000
|
||||
display: block
|
||||
top: 1rem
|
||||
position: absolute
|
||||
left: 0
|
||||
right: 0
|
||||
background: white
|
||||
|
||||
.nav
|
||||
// display: none
|
||||
display: flex
|
||||
position: absolute
|
||||
top: 100px
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
z-index: 1000
|
||||
background-color: white
|
||||
width: 100vw
|
||||
height: calc(100vh - 100px)
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
.menu
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style: none
|
||||
|
||||
> li
|
||||
padding: .5rem 1rem
|
||||
text-align: center
|
||||
|
||||
> a
|
||||
margin: 0 auto
|
||||
padding: .2rem
|
||||
color: red
|
||||
border: 2px solid red
|
||||
width: 200px
|
||||
display: block
|
||||
|
||||
&.vert
|
||||
a
|
||||
color: $vert
|
||||
border-color: $vert
|
||||
background-color: scale-color($vert, $lightness: +50%)
|
||||
|
||||
&.jaune
|
||||
a
|
||||
color: $jaune
|
||||
border-color: $jaune
|
||||
background-color: scale-color($jaune, $lightness: +50%)
|
||||
|
||||
&.rouge
|
||||
a
|
||||
color: $rouge
|
||||
border-color: $rouge
|
||||
background-color: scale-color($rouge, $lightness: +50%)
|
||||
|
||||
&.bleu
|
||||
a
|
||||
color: $bleu
|
||||
border-color: $bleu
|
||||
background-color: scale-color($bleu, $lightness: +50%)
|
||||
|
||||
.sousmenu
|
||||
padding: 0
|
||||
li
|
||||
display: inline
|
||||
a
|
||||
background-color: white!important
|
||||
|
||||
.header button
|
||||
display: block
|
||||
|
||||
@media screen and (min-width: 800px)
|
||||
.nav
|
||||
margin-bottom: 22px
|
||||
|
||||
ul
|
||||
display: flex
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style: none
|
||||
|
||||
ul.menu
|
||||
|
||||
.sousmenu
|
||||
position: absolute
|
||||
display: none
|
||||
padding-top: 20px
|
||||
top: calc(100% - 18px)
|
||||
left: 0
|
||||
right: 0
|
||||
justify-content: space-around
|
||||
background-color: white
|
||||
|
||||
&::before,
|
||||
&::after
|
||||
content: ""
|
||||
border-top: 1px $gris dashed
|
||||
height: 1px
|
||||
width: 100%
|
||||
position: absolute
|
||||
|
||||
&::after
|
||||
bottom: -1px
|
||||
|
||||
&::before
|
||||
top: 18px
|
||||
|
||||
a
|
||||
border: 0
|
||||
color: $gris!important
|
||||
|
||||
.sousmenu.active
|
||||
display: flex
|
||||
|
||||
|
||||
li
|
||||
margin: .2rem
|
||||
|
||||
&:hover ul
|
||||
display: flex
|
||||
z-index: 20
|
||||
|
||||
|
||||
&:last-child
|
||||
margin-right: 0
|
||||
|
||||
a
|
||||
padding: .5rem
|
||||
border: 2px solid white
|
||||
text-decoration: none
|
||||
font-size: 1rem
|
||||
color: white
|
||||
|
||||
&:hover
|
||||
opacity: .8
|
||||
|
||||
.vert
|
||||
a
|
||||
color: $vert
|
||||
border-color: $vert
|
||||
|
||||
.jaune
|
||||
a
|
||||
color: $jaune
|
||||
border-color: $jaune
|
||||
|
||||
.rouge
|
||||
a
|
||||
color: $rouge
|
||||
border-color: $rouge
|
||||
|
||||
.bleu
|
||||
a
|
||||
color: $bleu
|
||||
border-color: $bleu
|
||||
|
||||
.active
|
||||
a
|
||||
background-color: white
|
||||
border-style: dashed
|
||||
border-color: white!important
|
||||
|
||||
&.jaune
|
||||
a
|
||||
color: $jaune
|
||||
border-bottom-color: $jaune
|
||||
|
||||
&.rouge
|
||||
a
|
||||
color: $rouge
|
||||
border-bottom-color: $rouge
|
||||
|
||||
&.vert
|
||||
a
|
||||
color: $vert
|
||||
border-bottom-color: $vert
|
||||
|
||||
&.bleu
|
||||
a
|
||||
color: $bleu
|
||||
border-bottom-color: $bleu
|
||||
|
||||
#content
|
||||
width: 800px
|
||||
margin: 0 auto
|
||||
margin-bottom: 2rem
|
||||
|
||||
.footer
|
||||
background-color: #222
|
||||
color: white
|
||||
|
||||
h4
|
||||
text-align: center
|
||||
|
||||
.container
|
||||
padding: 2rem 0
|
||||
display: flex
|
||||
|
||||
> div
|
||||
margin: 0 10px
|
||||
padding: 10px
|
||||
background-color: scale-color(#222, $lightness: +15%)
|
||||
|
||||
div:first-child
|
||||
margin-left: 0
|
||||
|
||||
div:last-child
|
||||
margin-right: 0
|
||||
|
||||
.title
|
||||
height: 130px
|
||||
display: flex
|
||||
align-items: flex-end
|
||||
justify-content: center
|
||||
|
||||
.conseilmunicipal
|
||||
display: flex
|
||||
margin: 0 auto
|
||||
padding: 0 10px 10px
|
||||
list-style: none
|
||||
flex-wrap: wrap
|
||||
max-width: 1300px
|
||||
justify-content: space-around
|
||||
|
||||
li
|
||||
width: 250px
|
||||
padding: 10px
|
||||
|
||||
figcaption
|
||||
text-align: center
|
||||
|
||||
h3
|
||||
margin: 10px 0
|
||||
font-size: 1em
|
||||
|
||||
p
|
||||
margin: 0
|
||||
font-size: .8em
|
||||
line-height: 1em
|
||||
|
||||
img.round
|
||||
border-radius: 100%
|
||||
|
||||
img.paysage
|
||||
width: 100%
|
||||
height: 600px
|
||||
object-fit: cover
|
||||
|
||||
0
assets/styles/menu.sass
Normal file
0
assets/styles/menu.sass
Normal file
84
assets/styles/print.sass
Normal file
84
assets/styles/print.sass
Normal file
@ -0,0 +1,84 @@
|
||||
/* Print */
|
||||
|
||||
@media print
|
||||
*
|
||||
background: transparent !important
|
||||
box-shadow: none !important
|
||||
text-shadow: none !important
|
||||
|
||||
body
|
||||
width: auto
|
||||
margin: auto
|
||||
font-family: serif
|
||||
font-size: 12pt
|
||||
|
||||
nav,
|
||||
footer
|
||||
display: none
|
||||
|
||||
p,
|
||||
.p-like,
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
h4,
|
||||
.h4-like,
|
||||
h5,
|
||||
.h5-like,
|
||||
h6,
|
||||
.h6-like,
|
||||
blockquote,
|
||||
ul,
|
||||
ol
|
||||
color: #000
|
||||
margin: auto
|
||||
|
||||
img
|
||||
max-width: 100% !important
|
||||
|
||||
.print
|
||||
display: block
|
||||
|
||||
.no-print
|
||||
display: none
|
||||
|
||||
p,
|
||||
.p-like,
|
||||
blockquote
|
||||
orphans: 3
|
||||
widows: 3
|
||||
|
||||
blockquote,
|
||||
ul,
|
||||
ol,
|
||||
img
|
||||
page-break-inside: avoid
|
||||
|
||||
h1,
|
||||
.h1-like
|
||||
page-break-before: always
|
||||
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
caption
|
||||
page-break-after: avoid
|
||||
|
||||
a
|
||||
color: #000
|
||||
|
||||
a[href^="http"]:not([href*="pikselkraft.com"]):after
|
||||
content: " (" attr(href) ")"
|
||||
|
||||
a[href^="javascript:"]::after,
|
||||
a[href^="#"]::after
|
||||
content: ""
|
||||
|
||||
abbr[title]:after
|
||||
content: " (" attr(title) ")"
|
||||
57
assets/styles/reset.css
Normal file
57
assets/styles/reset.css
Normal file
@ -0,0 +1,57 @@
|
||||
/*********
|
||||
Reset CSS
|
||||
*********/
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Remove default margin */
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
p,
|
||||
ul[class]
|
||||
ol[class],
|
||||
li,
|
||||
figure,
|
||||
figcaption,
|
||||
blockquote,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Natural flow and rhythm in articles by default */
|
||||
article > * + * {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* Remove all animations and transitions for people that prefer not to see them */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
14
assets/styles/variables.sass
Normal file
14
assets/styles/variables.sass
Normal file
@ -0,0 +1,14 @@
|
||||
$rouge: #de6b52
|
||||
$vert: #4da266
|
||||
$bleu: #78a3dc
|
||||
$jaune: #f0e554
|
||||
$gris: scale-color(#d5d5d5, $lightness: -50%)
|
||||
//$vert: #2b8e50
|
||||
|
||||
$color-primary: black
|
||||
$color-secondary: white
|
||||
$space: 2.75rem
|
||||
$font-size: 112.5%
|
||||
$font-family-monospace: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace
|
||||
$content-width: 800px
|
||||
$active: 600
|
||||
Reference in New Issue
Block a user