ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Remove logo.svg / Remove html example markup / Update scss instructions

Browse Source
This commit is contained in:
Lucas Vallenet
2022-05-25 17:13:35 +02:00
parent da66f89d7f
commit b162c62930
6 changed files with 31 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
assets/images/sprite/.gitkeep Normal file
View File

4
assets/images/sprite/logo.svg
View File

@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 84">
<rect fill="var(--svg-logo-bg, transparent)" width="41" height="84"/>
<path fill="var(--svg-logo-icon, currentColor)" d="M39,44V43l-3.08-.33V40.79h2.94v0h0V39.18h-3V35.4h.93a2.11,2.11,0,0,0,.85-.23,1.85,1.85,0,0,0,.68-.56A2.56,2.56,0,0,0,39,32.87a2.86,2.86,0,0,0-.66-1.81,1.88,1.88,0,0,0-.65-.54,1.85,1.85,0,0,0-.83-.2H35.9V25.86h3v-1.6h-3V19.91h3V18.28h-3V13.13l3-.15v-1.8l-3-.15V6.23h3V2H37.51V4.61H35.9V2.89H34.55V4.61H21.16V2.87H19.81V4.61H6.29V2.89H4.94V4.61H3.46V2H2.11V6.23H4.94V9.46H4.87L2.11,9.32V11l2.83.11v1.94l-2.83.11v1.71l2.83-.15v3.54H2.11V19.9H4.94v4.36H3.46V22.51H2.11V27.6H3.46V25.86H4.94V30.3H4.15a2.15,2.15,0,0,0-.86.22,2.29,2.29,0,0,0-.68.56A2.7,2.7,0,0,0,2,32.87a2.87,2.87,0,0,0,.67,1.81,1.9,1.9,0,0,0,1.48.72h.79v3.77H2.11v1.62h0l2.83.26v4.82l-2.83.26h0v1.62H4.94v3.86H4.15a2.15,2.15,0,0,0-.86.22,2.29,2.29,0,0,0-.68.56A2.67,2.67,0,0,0,2,54.18,2.87,2.87,0,0,0,2.67,56a1.91,1.91,0,0,0,1.48.73h.79v3.47H4.15a2.15,2.15,0,0,0-.86.22,2.29,2.29,0,0,0-.68.56A2.65,2.65,0,0,0,2,62.72a2.87,2.87,0,0,0,.67,1.81,1.71,1.71,0,0,0,.66.53,1.77,1.77,0,0,0,.82.19h.79v4H4.15a2.07,2.07,0,0,0-.85.23,2.05,2.05,0,0,0-.69.55A2.69,2.69,0,0,0,2,71.83a2.87,2.87,0,0,0,.67,1.81,1.9,1.9,0,0,0,1.48.72h.79v4.79H2.11v1.61H4.94V82H6.29V80.76H34.55V82H35.9V80.76h3V76.54H37.51v2.61H35.9V74.36h.92a2.15,2.15,0,0,0,.86-.22,2.17,2.17,0,0,0,.68-.56,2.63,2.63,0,0,0,.6-1.75A2.86,2.86,0,0,0,38.3,70a2.11,2.11,0,0,0-.65-.54,2.15,2.15,0,0,0-.83-.2H35.9v-4h.92a2.15,2.15,0,0,0,.86-.22,2.17,2.17,0,0,0,.68-.56,2.61,2.61,0,0,0,.6-1.75,2.86,2.86,0,0,0-.66-1.81,2,2,0,0,0-.66-.53,1.9,1.9,0,0,0-.82-.19H36v1.62h.78a.71.71,0,0,1,.32.07.69.69,0,0,1,.24.21,1,1,0,0,1,.24.65,1,1,0,0,1-.24.65.58.58,0,0,1-.24.2.72.72,0,0,1-.32.08H35.9v-7h.92a2,2,0,0,0,.86-.22,2,2,0,0,0,.68-.55A2.69,2.69,0,0,0,39,54.18a2.81,2.81,0,0,0-.67-1.81,1.8,1.8,0,0,0-.65-.54,1.84,1.84,0,0,0-.82-.2h-.93V47.77h3V46.14h-3V44.36ZM4.94,72.75H4.15a.79.79,0,0,1-.31-.08.64.64,0,0,1-.25-.21.94.94,0,0,1-.24-.63,1,1,0,0,1,.24-.65.62.62,0,0,1,.25-.2.65.65,0,0,1,.31-.08l.79,0Zm0-9.09H4.15a.65.65,0,0,1-.31-.08.64.64,0,0,1-.25-.21.94.94,0,0,1-.24-.64,1,1,0,0,1,.24-.65.78.78,0,0,1,.24-.2.72.72,0,0,1,.32-.08h.79Zm0-8.53H4.15a.65.65,0,0,1-.31-.08.62.62,0,0,1-.25-.2,1,1,0,0,1,0-1.3.64.64,0,0,1,.25-.21.79.79,0,0,1,.31-.08l.79,0ZM6.35,14.65l28.21-1.46v5.07H6.29V14.65ZM6.29,13V11.18h.06L27.19,12v.11Zm28.27,6.87v4.38H6.29V19.91Zm0,6v4.44H6.29V25.86Zm0,6.08v1.86H6.29V31.92Zm1.34,0h.93a.88.88,0,0,1,.32.07.69.69,0,0,1,.24.21,1,1,0,0,1,.23.67,1,1,0,0,1-.23.63.6.6,0,0,1-.25.2.68.68,0,0,1-.31.08H35.9ZM6.28,6.23H34.54l0,4.73h-.07L6.28,9.53ZM4.15,33.78a.65.65,0,0,1-.31-.08.55.55,0,0,1-.25-.2,1,1,0,0,1,0-1.3.68.68,0,0,1,.56-.28H5v1.86ZM6.3,35.4H34.56v3.77H6.3Zm28.26,5.39v1.69h-.07l-15-1.69ZM30.9,43.41v.12L6.28,45.76V41.21h.07Zm3.65,35.74H6.29V74.36H34.55Zm0-6.4H6.29V70.88H34.55Zm0-3.5H6.29v-4H34.55Zm0-5.6H6.29V56.72H34.55Zm0-8.52H6.29V53.26l28.26,0Zm2.27,15.75a.72.72,0,0,1,.32.08.58.58,0,0,1,.24.2,1,1,0,0,1,.24.65.92.92,0,0,1-.24.65.64.64,0,0,1-.25.21.79.79,0,0,1-.31.08H35.9V70.88Zm0-17.64a.79.79,0,0,1,.31.08.64.64,0,0,1,.25.21,1,1,0,0,1,.24.65,1,1,0,0,1-.23.65.82.82,0,0,1-.25.2.68.68,0,0,1-.31.08H35.9V53.24Zm-2.26-1.61H6.29V47.77H34.56Zm-15-5.48,15-1.65v1.65Z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 KiB

48
assets/styles/objects/_icons.scss
View File

@@ -3,6 +3,27 @@
// ==========================================================================
// Markup
//
// 1. If icon is accessible and has a title
// 2. If icon is decorative
//
// <i class="o-icon ${modifier}">
// <svg
// class="svg-${icon-name}"
// xmlns="http://www.w3.org/2000/svg"
// role="img" [1]
// aria-hidden="true" [2]
// focusable="false" [2]
// aria-labelledby="${id}" [1]
// >
// <title id="${id}"> [1]
// Locomotive
// </title>
// <use xlink:href="assets/images/sprite.svg#${icon-name}" xmlns:xlink="http://www.w3.org/1999/xlink"/>
// </svg>
// </i>
// Global styles for icones
// ==========================================================================
@@ -24,23 +45,14 @@
// SVG sizes
// ==========================================================================
// Logo
.svg-logo {
--icon-width: #{rem(100px)};
--icon-ratio: 41/84; // width/height based on svg viewBox
// // Logo
// .svg-logo {
// --icon-width: #{rem(100px)};
// --icon-ratio: 20/30; // width/height based on svg viewBox
--svg-logo-bg : transparent;
--svg-logo-icon : #000;
// Sizes
.o-icon.-big & {
--icon-width: #{rem(200px)};
}
// Colors
&.-invert {
--svg-logo-bg : #000;
--svg-logo-icon : #fff;
}
}
// // Sizes
// .o-icon.-big & {
// --icon-width: #{rem(200px)};
// }
// }

16
www/assets/styles/main.css
View File

@@ -684,22 +684,6 @@ a:focus, a:hover {
fill: currentColor;
}
.svg-logo {
--icon-width: 6.25rem;
--icon-ratio: 41/84;
--svg-logo-bg: transparent;
--svg-logo-icon: #000;
}
.o-icon.-big .svg-logo {
--icon-width: 12.5rem;
}
.svg-logo.-invert {
--svg-logo-bg: #000;
--svg-logo-icon: #fff;
}
.o-layout {
margin: 0;
padding: 0;

2
www/assets/styles/main.css.map
View File

File diff suppressed because one or more lines are too long

47
www/index.html
View File

@@ -51,53 +51,6 @@
<main data-scroll-section>
<div class="o-container">
<h1 class="c-heading -h1">Hello</h1>
<!--
-- ICONS
-->
<!-- Icon with accessible label -->
<i class="o-icon">
<svg
class="svg-logo"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-labelledby="icon-logo-label"
>
<title id="icon-logo-label">
Locomotive
</title>
<use xlink:href="assets/images/sprite.svg#logo" xmlns:xlink="http://www.w3.org/1999/xlink"/>
</svg>
</i>
<!-- Icon with custom colors -->
<i class="o-icon">
<svg
class="svg-logo -invert"
xmlns="http://www.w3.org/2000/svg"
role="img"
>
<use xlink:href="assets/images/sprite.svg#logo" xmlns:xlink="http://www.w3.org/1999/xlink"/>
</svg>
</i>
<!-- Icon with size -->
<i class="o-icon -big">
<svg
class="svg-logo"
xmlns="http://www.w3.org/2000/svg"
role="img"
>
<use xlink:href="assets/images/sprite.svg#logo" xmlns:xlink="http://www.w3.org/1999/xlink"/>
</svg>
</i>
<br><br>
<!--
-- ./ICONS
-->
</div>
</main>