Ajout icone de son custom avec un sprite SVG
This commit is contained in:
parent
348b6642ce
commit
5cf74a1962
GPG Key ID:
F85D93686A3A9063
|
|
@ -1,7 +1,9 @@
|
||||||
FROM nginx:alpine
|
FROM nginx:alpine
|
||||||
RUN sed -i 's/#gzip/gzip/g' /etc/nginx/nginx.conf && \
|
RUN sed -i 's/#gzip/gzip/g' /etc/nginx/nginx.conf && \
|
||||||
sed -i '/gzip *on/ a gzip_types text/css application/javascript image/svg+xml;' /etc/nginx/nginx.conf && \
|
sed -i '/gzip *on/ a gzip_types text/css application/javascript image/svg+xml;' /etc/nginx/nginx.conf && \
|
||||||
apk add --no-cache sassc
|
apk add --no-cache sassc nodejs && \
|
||||||
|
npm install -g svg-sprite-generator
|
||||||
COPY . /usr/share/nginx/html
|
COPY . /usr/share/nginx/html
|
||||||
WORKDIR /usr/share/nginx/html
|
WORKDIR /usr/share/nginx/html
|
||||||
RUN sassc -m -t compressed /usr/share/nginx/html/scss/creative.scss /usr/share/nginx/html/css/creative.css
|
RUN sassc -m -t compressed scss/creative.scss css/creative.css && \
|
||||||
|
svg-sprite-generate -d vector/ -o vector/sprite.svg
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,9 @@
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a id="video-sound" class="btn btn-default">
|
<a id="video-sound" class="btn btn-default">
|
||||||
<i class="fa fa-volume-off fa-2x" aria-hidden="true"></i>
|
<svg class="icone icone-son" aria-hidden="true">
|
||||||
|
<use xlink:href="/vector/sprite.svg#sound-off"></use>
|
||||||
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a id="youtube-link" class="btn btn-default" href="https://youtube.com">
|
<a id="youtube-link" class="btn btn-default" href="https://youtube.com">
|
||||||
|
|
@ -196,10 +198,10 @@
|
||||||
video_button.onclick = function () {
|
video_button.onclick = function () {
|
||||||
if (masthead_video.muted) {
|
if (masthead_video.muted) {
|
||||||
masthead_video.muted = false;
|
masthead_video.muted = false;
|
||||||
video_button.children[0].className = 'fa fa-volume-up fa-2x';
|
video_button.children[0].children[0].setAttribute("xlink:href", "/vector/sprite.svg#sound-on");
|
||||||
} else {
|
} else {
|
||||||
masthead_video.muted = true;
|
masthead_video.muted = true;
|
||||||
video_button.children[0].className = 'fa fa-volume-off fa-2x';
|
video_button.children[0].children[0].setAttribute("xlink:href", "/vector/sprite.svg#sound-off");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
.icone {
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
@ -8,3 +8,4 @@
|
||||||
@import "cta.scss";
|
@import "cta.scss";
|
||||||
@import "bootstrap-overrides.scss";
|
@import "bootstrap-overrides.scss";
|
||||||
@import "_about.scss";
|
@import "_about.scss";
|
||||||
|
@import "_icones.scss";
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
docker build -t site-max .
|
||||||
|
|
||||||
|
docker stop some-nginx
|
||||||
|
docker rm some-nginx
|
||||||
|
|
||||||
|
docker run --name some-nginx -d -p 80:80 site-max
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 1024 768" style="enable-background:new 0 0 1024 768;" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path d="M302.8,252.3c4.3,3.7,8.3,7.2,12.4,10.7c65.8,56.9,131.7,113.8,197.5,170.7c1.8,1.6,2.7,3.3,2.7,5.8
|
||||||
|
c0,58.1,0,116.2,0,174.2c0,11.4-0.1,22.7-0.2,34.1c-0.1,8.4-0.9,16.6-3.8,24.5c-0.8,2.1-1.7,4.2-2.8,6.1
|
||||||
|
c-5.8,10.1-16.2,14.1-27.3,10.5c-5.9-1.9-11.1-5-15.8-9c-5.5-4.7-10.7-9.6-15.8-14.7c-24.4-23.8-48.7-47.7-73-71.5
|
||||||
|
C360.4,578,344.2,562,328,546.1c-14.5-14.3-29.1-28.6-43.6-42.9c-4.2-4.1-9.3-5.7-15.1-5.6c-27.4,0.1-54.9,0.2-82.3,0.2
|
||||||
|
c-3.4,0-6.9-0.4-10.2-1.1c-11.4-2.3-18.6-9.7-20.5-21.3c-0.6-3.8-1-7.6-1-11.4c-0.1-36.9-0.1-73.8-0.1-110.6
|
||||||
|
c0-15.6,0-31.2,0.1-46.8c0-3.6,0.6-7.2,1.5-10.7c2.8-10.7,10.1-16.8,20.8-18.7c3.5-0.6,7.1-1,10.7-1c25.4-0.1,50.9,0,76.3,0
|
||||||
|
c1.9,0,3.8,0.1,5.8,0c5.7-0.1,10.5-2.3,14.6-6.3c5.1-5.2,10.3-10.2,15.5-15.4C301.2,253.8,301.9,253.1,302.8,252.3z"/>
|
||||||
|
<path d="M162,97.8c0.1-21.8,15.2-38.4,34.9-40.3c11.1-1.1,20.9,2.1,29.3,9.3c42.5,36.5,84.9,73.1,127.3,109.6
|
||||||
|
c61.4,52.9,122.8,105.7,184.2,158.6c59.7,51.4,119.3,102.7,179,154.1c51.8,44.6,103.6,89.1,155.3,133.7
|
||||||
|
c9.2,7.9,13.9,18.1,13.7,30.2c-0.2,19.5-15,35.6-34.4,37.8c-11.1,1.2-20.9-1.8-29.4-9c-13.5-11.4-26.8-23-40.2-34.6
|
||||||
|
c-61.4-52.9-122.8-105.7-184.2-158.6c-59.7-51.4-119.3-102.7-179-154.1C343.1,269.7,267.8,204.9,192.4,140
|
||||||
|
c-5.6-4.9-11.3-9.7-16.9-14.6C166.6,117.6,162.2,107.7,162,97.8z"/>
|
||||||
|
<path d="M820.8,562.8c-14.3-12.3-28.4-24.5-42.6-36.7c0.6-0.9,1-1.6,1.5-2.4c17.1-25.7,29.1-53.6,35.4-83.9
|
||||||
|
c2.4-11.6,3.8-23.3,4.6-35.2c0.8-12.2,0.7-24.5-0.2-36.7c-4-56.7-24.6-106.3-63.3-148.1c-12.5-13.5-26.2-25.6-40.9-36.5
|
||||||
|
c-7.4-5.5-15.4-10-23.4-14.5c-3.1-1.8-6.2-3.6-9.3-5.5c-4.8-3-8.6-6.9-11.2-12c-5.7-11.1-3.6-23.6,5.8-32.2
|
||||||
|
c8-7.4,17.3-9.3,27.6-5.8c2.3,0.8,4.6,1.9,6.8,3C751,137.4,785,165,812.2,200.6c22.3,29.3,39.2,61.4,49.9,96.7
|
||||||
|
c4.5,14.7,7.4,29.8,9.5,45c2.4,17.4,3.7,34.8,4,52.4c0.2,11.9-1,23.8-2.6,35.6c-2.4,18.3-6.4,36.2-12.1,53.7
|
||||||
|
c-8.8,27.3-21.5,52.6-38.1,76.1C822.2,560.9,821.6,561.7,820.8,562.8z"/>
|
||||||
|
<path d="M739.1,492.5c-14.6-12.6-29.2-25.1-43.8-37.7c0.4-1,0.8-1.9,1.2-2.9c6.8-16.1,11-32.9,12.6-50.3
|
||||||
|
c2.8-30.9-2.8-60.4-16.4-88.2c-14.3-29.2-35.3-52.3-63.1-69.3c-5.1-3.1-9.7-6.9-14.1-11.1c-7.4-7.1-9-15.5-6.3-25.1
|
||||||
|
c3.6-12.7,15.9-20.8,29-19.3c2.4,0.3,4.8,1.1,7.1,2c11.7,4.8,22.2,11.6,32.2,19.3c23.8,18.7,43.7,40.7,58.4,67.3
|
||||||
|
c11.2,20.1,18.7,41.5,23.3,63.9c3.7,18.2,5.6,36.7,5.7,55.3c0.1,16.2-2.3,32.2-6.3,47.9c-4.1,16-10,31.2-17.8,45.7
|
||||||
|
c-0.3,0.6-0.7,1.3-1.1,1.9C739.6,492.1,739.4,492.2,739.1,492.5z"/>
|
||||||
|
<path d="M515.1,299.6c-46.2-39.8-92.4-79.5-138.8-119.4c0.6-0.6,1-1.2,1.5-1.7c25.2-24.7,50.4-49.4,75.6-74c3.9-3.8,8-7.7,12.3-11
|
||||||
|
c3.4-2.7,7.3-4.9,11.2-6.9c5.5-2.8,11.3-3.9,17.5-2.5c7.4,1.7,12.8,5.9,16.4,12.6c2.3,4.2,3.6,8.8,3.9,13.5
|
||||||
|
c0.4,5.6,0.8,11.2,0.8,16.8c0.1,56.5,0,113.1,0,169.6c0,0.9,0,1.9,0,2.8C515.4,299.5,515.3,299.6,515.1,299.6z"/>
|
||||||
|
<path d="M650,415.7c-0.8-0.7-1.5-1.2-2.2-1.8c-16.9-14.5-33.7-29-50.6-43.5c-1-0.9-1.7-1.8-2.2-3.1c-6.3-15.7-17.2-26.6-33.2-32.5
|
||||||
|
c-3.6-1.3-7.1-3-10.5-4.7c-3.4-1.7-6.3-4.2-8.7-7.1c-4.7-5.7-6.2-12.5-5.6-19.8c0.9-11.5,9.7-21.3,23-23.4
|
||||||
|
c4.7-0.7,9.3-0.4,13.8,0.9c30.7,9.1,53.2,28.1,68.1,56.3c6.3,12,9.7,25,11.2,38.4c1.3,12.7,0.6,25.2-2.4,37.6
|
||||||
|
C650.5,413.9,650.3,414.6,650,415.7z"/>
|
||||||
|
<path d="M703.3,598.5c14.3,12.4,28.4,24.6,42.6,37c-0.7,0.6-1.1,1.1-1.7,1.5c-10.9,7.6-22.2,14.6-33.8,20.9
|
||||||
|
c-6.8,3.7-13.9,5.1-21.5,3.2c-10.3-2.5-18.6-11.7-20-22.2c-1.5-11.5,2.4-20.9,12.2-27.3C688.2,606.9,695.8,602.9,703.3,598.5z"/>
|
||||||
|
<path d="M625.5,531.2c14.6,12.6,28.9,25,43.4,37.6c-0.9,0.7-1.6,1.4-2.4,1.9c-4.9,3.1-9.8,6.3-14.8,9.4c-5.2,3.2-10.8,4.8-16.9,4.7
|
||||||
|
c-13-0.4-25-11-26-24.3c-0.8-9.5,2.2-17.3,9.4-23.5C620.4,534.9,622.9,533.2,625.5,531.2z"/>
|
||||||
|
<path d="M539.3,456.7c13.4,11.5,26.4,22.9,39.8,34.4c-3.5,1.4-6.8,2.3-10.3,2.9c-16.9,3-32.5-10.7-31.8-27.8
|
||||||
|
C537.1,463.1,537.6,459.9,539.3,456.7z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.1 KiB |
|
|
@ -0,0 +1,22 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 1024 768" style="enable-background:new 0 0 1024 768;" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path d="M513.7,382.1c0,87.7,0.1,175.5-0.2,263.2c0,8.8-1.2,17.9-4,26.2c-5.6,16.3-20.5,22-35.7,14c-6.7-3.5-12.9-8.6-18.3-14
|
||||||
|
c-57.7-56.4-115.3-112.9-172.8-169.6c-4-3.9-8-5.5-13.6-5.5c-27.7,0.3-55.4,0.2-83.1,0.1c-21.6,0-32.3-10.9-32.3-32.6
|
||||||
|
c0-52.3,0-104.6,0-157c0-21.1,10.9-32,32.2-32c27.7-0.1,55.4-0.2,83.1,0.1c5.6,0.1,9.6-1.6,13.6-5.5
|
||||||
|
C340.1,212.8,397.8,156,455.8,99.5C461.4,94,468,89,475,85.6c16.4-8,32.8,0.2,37,17.9c1.3,5.6,1.6,11.6,1.6,17.4
|
||||||
|
C513.7,208,513.7,295,513.7,382.1z"/>
|
||||||
|
<path d="M874.1,399.9c-4.8,106.3-58.1,197.5-164.6,256.4c-10.4,5.8-21,6.3-31.1-0.8c-9.9-7-13.1-16.8-10.7-28.4
|
||||||
|
c2-9.8,8.9-15.7,17.3-20.1c27.5-14.4,51.6-33.2,72-56.7c37.5-43.2,58.9-93.4,61.4-150.6c3.9-90.9-31.9-163.4-104.7-217.6
|
||||||
|
c-9.7-7.2-20.7-12.8-31.2-19c-18.4-11-21.1-33.4-5.1-46.3c9.9-8,20.9-7.4,31.6-1.8c56.5,29.5,99.9,72.4,129.9,128.6
|
||||||
|
C862.3,287.9,873.6,335.4,874.1,399.9z"/>
|
||||||
|
<path d="M763,399.8c-3,70.3-39.5,135.2-112.5,178.7c-12.3,7.3-23.9,6.5-34-1.5c-8.2-6.5-11.6-17.9-8.4-28.6c2.6-9,9.3-14.2,17-18.7
|
||||||
|
c42.1-25.1,68.7-61.5,79.3-109.4c15.3-68.8-16.7-141.6-77.2-177.6c-6.4-3.8-12.6-9-17.1-15c-6.2-8.2-4.4-22.1,2.3-30.2
|
||||||
|
c7.1-8.6,19.2-12.5,29.1-8.6c20.4,8.1,37.3,21.6,52.9,36.5C738.6,267.5,763,324.9,763,399.8z"/>
|
||||||
|
<path d="M652,385.8c0.2,53.7-38.4,97.2-84.7,107.1c-12.8,2.7-25.3-4.8-30.1-17.3c-4.6-12.2-0.1-25.7,11.2-32.2
|
||||||
|
c3.8-2.2,8-3.9,12.1-5.4c22-8,36.7-29.1,36.6-52.5c-0.1-23.1-14.7-44.1-36.6-51.6c-12-4.1-21.9-10-24.6-23.3
|
||||||
|
c-4.2-21,15.3-37,36.9-30.7C619.8,293.7,652,336.7,652,385.8z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
Loading…
Reference in New Issue