feat: Nouveau design

This commit is contained in:
Simon 2020-11-04 23:45:35 +01:00
parent 5c706477b0
commit d93ab68476
21 changed files with 111 additions and 6144 deletions

View File

@ -1,19 +0,0 @@
.footer
margin: 2rem 0 0
padding: 2rem
background: white
display: flex
.card
button
overflow-wrap: anywhere
word-break: break-all
white-space: normal
user-select: inherit
@media screen and (min-width: 840px)
text-align: center
.explain
text-align: center

View File

@ -1,28 +0,0 @@
.container-header
box-shadow: 0 3px 7px 0 rgba(0,0,0,0.1)
background: white
.navbar-main
min-height: 80px
.navbar-submenu
border-top: 1px solid #e5e9eb
justify-content: center
.btn
border-radius: 0
&:first-child
border-left-width: 0
.rouge .navbar-submenu .btn-link
border-left-color: $rouge
.vert .navbar-submenu .btn-link
border-left-color: $vert
.jaune .navbar-submenu .btn-link
border-left-color: $jaune
.bleu .navbar-submenu .btn-link
border-left-color: $bleu

View File

@ -1,59 +0,0 @@
.container-header
border-bottom: 1px solid #e5e9eb
.navbar
min-height: 79px
.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

View File

@ -1,9 +0,0 @@
.hero-image
background-position: center
background-size: cover
color: white
.hero h2
font-size: 3rem
line-height: 3rem
font-weight: 400

View File

@ -1,111 +1,100 @@
@import "./variables"
// @import "./reset"
// @import "./html"
// @import "./menu"
@import "./spectre.css/spectre"
// @import "./header"
@import "../fonts/source-sans-pro"
@import "./header"
@import "./footer"
@import "./index"
// VARIABLE
$font-size: 18px
$vert: #03874b
$color-primary: black
$color-secondary: white
$size-xs: 480px
$size-sm: 600px
$size-md: 840px
$size-lg: 960px
$size-xl: 1280px
@import "./reset"
@import "./html"
/* Make images easier to work with */
img
max-width: 100%
display: block
&.round
border-radius: 100%
.maire
img
margin: 2rem auto
// HEADER
.person
text-align: center
width: 250px
margin: 0 auto 2rem
.header
height: 80vh
position: relative
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
.hero
position: absolute
top: 0
bottom: 0
left: 0
right: 0
z-index: -1
object-fit: cover
z-index: 2
position: relative
min-width: 100%
min-height: 100%
.contenu
background: white
margin: 2rem auto
padding: 2rem
z-index: 3
position: relative
.nav
position: absolute
top: 50px
bottom: 0
left: 0
right: 0
&.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
height: 70px
ol
list-style-type: none
margin: 0 auto
padding: 0
width: $size-xl
display: flex
align-items: center
li
display: inline-block
.logo
$size-border-logo: 20px
position: relative
padding-left: $size-border-logo
z-index: 20
margin-right: 40px
&::after
position: absolute
content: ""
top: -70px
bottom: -$size-border-logo
left: 0
right: -$size-border-logo
background-color: white
z-index: 10
img
position: relative
height: 70px
z-index: 30
.link
display: flex
align-items: center
&:last-child::after
content: none
&::after
content: ""
border-right: 2px white solid
height: 20px
a
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
display: flex
align-items: center
padding: 10px
text-decoration: none
img
padding: 0 10px

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -1,597 +0,0 @@
/*! Spectre.css Icons v0.5.9 | MIT License | github.com/picturepan2/spectre */
.icon {
box-sizing: border-box;
display: inline-block;
font-size: inherit;
font-style: normal;
height: 1em;
position: relative;
text-indent: -9999px;
vertical-align: middle;
width: 1em;
}
.icon::before,
.icon::after {
content: "";
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.icon.icon-2x {
font-size: 1.6rem;
}
.icon.icon-3x {
font-size: 2.4rem;
}
.icon.icon-4x {
font-size: 3.2rem;
}
.accordion .icon,
.btn .icon,
.toast .icon,
.menu .icon {
vertical-align: -10%;
}
.btn-lg .icon {
vertical-align: -15%;
}
.icon-arrow-down::before,
.icon-arrow-left::before,
.icon-arrow-right::before,
.icon-arrow-up::before,
.icon-downward::before,
.icon-back::before,
.icon-forward::before,
.icon-upward::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
height: .65em;
width: .65em;
}
.icon-arrow-down::before {
transform: translate(-50%, -75%) rotate(225deg);
}
.icon-arrow-left::before {
transform: translate(-25%, -50%) rotate(-45deg);
}
.icon-arrow-right::before {
transform: translate(-75%, -50%) rotate(135deg);
}
.icon-arrow-up::before {
transform: translate(-50%, -25%) rotate(45deg);
}
.icon-back::after,
.icon-forward::after {
background: currentColor;
height: .1rem;
width: .8em;
}
.icon-downward::after,
.icon-upward::after {
background: currentColor;
height: .8em;
width: .1rem;
}
.icon-back::after {
left: 55%;
}
.icon-back::before {
transform: translate(-50%, -50%) rotate(-45deg);
}
.icon-downward::after {
top: 45%;
}
.icon-downward::before {
transform: translate(-50%, -50%) rotate(-135deg);
}
.icon-forward::after {
left: 45%;
}
.icon-forward::before {
transform: translate(-50%, -50%) rotate(135deg);
}
.icon-upward::after {
top: 55%;
}
.icon-upward::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.icon-caret::before {
border-left: .3em solid transparent;
border-right: .3em solid transparent;
border-top: .3em solid currentColor;
height: 0;
transform: translate(-50%, -25%);
width: 0;
}
.icon-menu::before {
background: currentColor;
box-shadow: 0 -.35em, 0 .35em;
height: .1rem;
width: 100%;
}
.icon-apps::before {
background: currentColor;
box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
height: 3px;
width: 3px;
}
.icon-resize-horiz::before,
.icon-resize-horiz::after,
.icon-resize-vert::before,
.icon-resize-vert::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
height: .45em;
width: .45em;
}
.icon-resize-horiz::before,
.icon-resize-vert::before {
transform: translate(-50%, -90%) rotate(45deg);
}
.icon-resize-horiz::after,
.icon-resize-vert::after {
transform: translate(-50%, -10%) rotate(225deg);
}
.icon-resize-horiz::before {
transform: translate(-90%, -50%) rotate(-45deg);
}
.icon-resize-horiz::after {
transform: translate(-10%, -50%) rotate(135deg);
}
.icon-more-horiz::before,
.icon-more-vert::before {
background: currentColor;
border-radius: 50%;
box-shadow: -.4em 0, .4em 0;
height: 3px;
width: 3px;
}
.icon-more-vert::before {
box-shadow: 0 -.4em, 0 .4em;
}
.icon-plus::before,
.icon-minus::before,
.icon-cross::before {
background: currentColor;
height: .1rem;
width: 100%;
}
.icon-plus::after,
.icon-cross::after {
background: currentColor;
height: 100%;
width: .1rem;
}
.icon-cross::before {
width: 100%;
}
.icon-cross::after {
height: 100%;
}
.icon-cross::before,
.icon-cross::after {
transform: translate(-50%, -50%) rotate(45deg);
}
.icon-check::before {
border: .1rem solid currentColor;
border-right: 0;
border-top: 0;
height: .5em;
transform: translate(-50%, -75%) rotate(-45deg);
width: .9em;
}
.icon-stop {
border: .1rem solid currentColor;
border-radius: 50%;
}
.icon-stop::before {
background: currentColor;
height: .1rem;
transform: translate(-50%, -50%) rotate(45deg);
width: 1em;
}
.icon-shutdown {
border: .1rem solid currentColor;
border-radius: 50%;
border-top-color: transparent;
}
.icon-shutdown::before {
background: currentColor;
content: "";
height: .5em;
top: .1em;
width: .1rem;
}
.icon-refresh::before {
border: .1rem solid currentColor;
border-radius: 50%;
border-right-color: transparent;
height: 1em;
width: 1em;
}
.icon-refresh::after {
border: .2em solid currentColor;
border-left-color: transparent;
border-top-color: transparent;
height: 0;
left: 80%;
top: 20%;
width: 0;
}
.icon-search::before {
border: .1rem solid currentColor;
border-radius: 50%;
height: .75em;
left: 5%;
top: 5%;
transform: translate(0, 0) rotate(45deg);
width: .75em;
}
.icon-search::after {
background: currentColor;
height: .1rem;
left: 80%;
top: 80%;
transform: translate(-50%, -50%) rotate(45deg);
width: .4em;
}
.icon-edit::before {
border: .1rem solid currentColor;
height: .4em;
transform: translate(-40%, -60%) rotate(-45deg);
width: .85em;
}
.icon-edit::after {
border: .15em solid currentColor;
border-right-color: transparent;
border-top-color: transparent;
height: 0;
left: 5%;
top: 95%;
transform: translate(0, -100%);
width: 0;
}
.icon-delete::before {
border: .1rem solid currentColor;
border-bottom-left-radius: .1rem;
border-bottom-right-radius: .1rem;
border-top: 0;
height: .75em;
top: 60%;
width: .75em;
}
.icon-delete::after {
background: currentColor;
box-shadow: -.25em .2em, .25em .2em;
height: .1rem;
top: .05rem;
width: .5em;
}
.icon-share {
border: .1rem solid currentColor;
border-radius: .1rem;
border-right: 0;
border-top: 0;
}
.icon-share::before {
border: .1rem solid currentColor;
border-left: 0;
border-top: 0;
height: .4em;
left: 100%;
top: .25em;
transform: translate(-125%, -50%) rotate(-45deg);
width: .4em;
}
.icon-share::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-radius: 75% 0;
border-right: 0;
height: .5em;
width: .6em;
}
.icon-flag::before {
background: currentColor;
height: 1em;
left: 15%;
width: .1rem;
}
.icon-flag::after {
border: .1rem solid currentColor;
border-bottom-right-radius: .1rem;
border-left: 0;
border-top-right-radius: .1rem;
height: .65em;
left: 60%;
top: 35%;
width: .8em;
}
.icon-bookmark::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-top-left-radius: .1rem;
border-top-right-radius: .1rem;
height: .9em;
width: .8em;
}
.icon-bookmark::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-left: 0;
border-radius: .1rem;
height: .5em;
transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
width: .5em;
}
.icon-download,
.icon-upload {
border-bottom: .1rem solid currentColor;
}
.icon-download::before,
.icon-upload::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-right: 0;
height: .5em;
transform: translate(-50%, -60%) rotate(-135deg);
width: .5em;
}
.icon-download::after,
.icon-upload::after {
background: currentColor;
height: .6em;
top: 40%;
width: .1rem;
}
.icon-upload::before {
transform: translate(-50%, -60%) rotate(45deg);
}
.icon-upload::after {
top: 50%;
}
.icon-copy::before {
border: .1rem solid currentColor;
border-bottom: 0;
border-radius: .1rem;
border-right: 0;
height: .8em;
left: 40%;
top: 35%;
width: .8em;
}
.icon-copy::after {
border: .1rem solid currentColor;
border-radius: .1rem;
height: .8em;
left: 60%;
top: 60%;
width: .8em;
}
.icon-time {
border: .1rem solid currentColor;
border-radius: 50%;
}
.icon-time::before {
background: currentColor;
height: .4em;
transform: translate(-50%, -75%);
width: .1rem;
}
.icon-time::after {
background: currentColor;
height: .3em;
transform: translate(-50%, -75%) rotate(90deg);
transform-origin: 50% 90%;
width: .1rem;
}
.icon-mail::before {
border: .1rem solid currentColor;
border-radius: .1rem;
height: .8em;
width: 1em;
}
.icon-mail::after {
border: .1rem solid currentColor;
border-right: 0;
border-top: 0;
height: .5em;
transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
width: .5em;
}
.icon-people::before {
border: .1rem solid currentColor;
border-radius: 50%;
height: .45em;
top: 25%;
width: .45em;
}
.icon-people::after {
border: .1rem solid currentColor;
border-radius: 50% 50% 0 0;
height: .4em;
top: 75%;
width: .9em;
}
.icon-message {
border: .1rem solid currentColor;
border-bottom: 0;
border-radius: .1rem;
border-right: 0;
}
.icon-message::before {
border: .1rem solid currentColor;
border-bottom-right-radius: .1rem;
border-left: 0;
border-top: 0;
height: .8em;
left: 65%;
top: 40%;
width: .7em;
}
.icon-message::after {
background: currentColor;
border-radius: .1rem;
height: .3em;
left: 10%;
top: 100%;
transform: translate(0, -90%) rotate(45deg);
width: .1rem;
}
.icon-photo {
border: .1rem solid currentColor;
border-radius: .1rem;
}
.icon-photo::before {
border: .1rem solid currentColor;
border-radius: 50%;
height: .25em;
left: 35%;
top: 35%;
width: .25em;
}
.icon-photo::after {
border: .1rem solid currentColor;
border-bottom: 0;
border-left: 0;
height: .5em;
left: 60%;
transform: translate(-50%, 25%) rotate(-45deg);
width: .5em;
}
.icon-link::before,
.icon-link::after {
border: .1rem solid currentColor;
border-radius: 5em 0 0 5em;
border-right: 0;
height: .5em;
width: .75em;
}
.icon-link::before {
transform: translate(-70%, -45%) rotate(-45deg);
}
.icon-link::after {
transform: translate(-30%, -55%) rotate(135deg);
}
.icon-location::before {
border: .1rem solid currentColor;
border-radius: 50% 50% 50% 0;
height: .8em;
transform: translate(-50%, -60%) rotate(-45deg);
width: .8em;
}
.icon-location::after {
border: .1rem solid currentColor;
border-radius: 50%;
height: .2em;
transform: translate(-50%, -80%);
width: .2em;
}
.icon-emoji {
border: .1rem solid currentColor;
border-radius: 50%;
}
.icon-emoji::before {
border-radius: 50%;
box-shadow: -.17em -.1em, .17em -.1em;
height: .15em;
width: .15em;
}
.icon-emoji::after {
border: .1rem solid currentColor;
border-bottom-color: transparent;
border-radius: 50%;
border-right-color: transparent;
height: .5em;
transform: translate(-50%, -40%) rotate(-135deg);
width: .5em;
}

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -1,291 +0,0 @@
@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: white
padding: 0
margin: 0
.container
width: $content-width
margin: 0 auto
@media screen and (max-width: 800px)
.container
width: inherit
.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

View File

@ -1,14 +0,0 @@
$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

View File

@ -1,10 +1,7 @@
<!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}">
{{ partial "head.html" . }}
<body{{ $currentPage := . }}{{ range .Site.Menus.main }}
{{ if or ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Menus.main.Pre .Pre) }} class="{{ .Pre }}"{{ end }}
{{ if $currentPage.IsHome }} class="home"{{ end }}
{{ end }}>
<body>
{{ partial "header.html" . }}
{{ block "all" . }}
<main role="main" id="content">

View File

@ -1,31 +1,23 @@
<div class="container-header">
<div class="container grid-xl">
<header class="navbar navbar-main">
<section class="navbar-section">
<header class="header">
{{ $headless := .Site.GetPage "/" }}
{{ $image := $headless.Resources.GetMatch "*" }}
{{ $resized := $image.Fill "1400x600 Top"}}
<img class="hero" src="{{ $resized.RelPermalink }}" alt="{{ .Title }}" />
<nav class="nav">
<ol>
<li class="logo">
<a href="/" class="">
<img src="logo.png" alt="Blason de Crémeaux" height="80" />
<img src="/icons/logo.jpg" alt="Blason de Crémeaux" />
</a>
</section>
<section class="navbar-center">
<li>
{{ range .Site.Menus.main }}
<a href="{{ .URL }}" class="m-2 btn btn-primary {{ .Identifier }} {{ .Pre }}">{{ .Name }}</a>
<li class="link">
<a href="{{ .URL }}" class="m-2 btn btn-primary {{ .Pre }}">
<img src="/icons/{{ .Identifier }}.jpg" alt="{{ .Name }}" />
<span>{{ .Name }}</span>
</a>
</li>
{{ end }}
</section>
</header>
</div>
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
{{ if .HasChildren }}
<header class="navbar navbar-submenu">
<section class="navbar-center btn-group btn-group-block">
{{ $color := .Pre }}
{{ range .Children }}
<a class="btn {{if $currentPage.IsMenuCurrent "main" .}}btn-primary{{else}}btn-link{{end}} {{$color}}" href="{{ .URL }}">{{ .Name }}</a>
{{ end }}
</section>
</header>
{{ end }}
{{ end }}
{{ end }}
</div>
</ol>
</nav>
</header>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
static/icons/cadre.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
static/icons/economie.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
static/icons/logo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/icons/municipale.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB