mirror of
https://github.com/acemod/ACE3.git
synced 2024-08-30 18:23:18 +00:00
Documentation - Improve svg handling (#9575)
* fix tabs in xm157 * use rollup, remove grunt, fix scss build * add svg bundler. rework to use svg element instead of images
This commit is contained in:
Jo David
GitHub
parent
697a4b75ca
commit
9641fe490b
@ -15,13 +15,25 @@
|
||||
<h2>Social Media</h2>
|
||||
<div class="social-icons">
|
||||
<a class="social-icons__icon" href="https://twitter.com/ACE3Mod" target="_blank" rel="noopener" aria-label="ACE3 on X (Twitter)">
|
||||
<img class="icon" src="{{ site.baseurl }}/img/icons/twitter.svg" alt="ACE3 on X (Twitter)" width="32" height="32">
|
||||
<i class="icon icon--2x" aria-hidden="true">
|
||||
<svg>
|
||||
<use href="/dist/icons.svg#twitter" />
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
<a class="social-icons__icon" href="https://facebook.com/ACE3Mod" target="_blank" rel="noopener" aria-label="ACE3 on Facebook">
|
||||
<img class="icon" src="{{ site.baseurl }}/img/icons/facebook.svg" alt="ACE3 on Facebook" width="32" height="32">
|
||||
<i class="icon icon--2x" aria-hidden="true">
|
||||
<svg>
|
||||
<use href="/dist/icons.svg#facebook" />
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
<a class="social-icons__icon" href="https://youtube.com/c/ACE3Mod" target="_blank" rel="noopener" aria-label="ACE3 on YouTube">
|
||||
<img class="icon" src="{{ site.baseurl }}/img/icons/youtube.svg" alt="ACE3 on YouTube" width="32" height="32">
|
||||
<i class="icon icon--2x" aria-hidden="true">
|
||||
<svg>
|
||||
<use href="/dist/icons.svg#youtube" />
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,8 +7,13 @@ layout: compress
|
||||
<main>
|
||||
<div class="row">
|
||||
<div class="medium-8 columns">
|
||||
<a href="{{site.baseUrl}}/news.html" class="button tiny">
|
||||
<img class="icon" src="{{ site.baseurl }}/img/icons/chevronleftwhite.svg" alt="Back" width="16" height="16" aria-hidden="true"> Back
|
||||
<a href="{{site.baseUrl}}/news.html" class="button button--icon tiny">
|
||||
<i class="icon icon--white" aria-hidden="true">
|
||||
<svg>
|
||||
<use href="/dist/icons.svg#chevronleft" />
|
||||
</svg>
|
||||
</i>
|
||||
<span>Back</span>
|
||||
</a>
|
||||
<br/>
|
||||
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
|
||||
|
||||
@ -47,8 +47,13 @@ layout: compress
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<p>
|
||||
<a href="./">
|
||||
<img class="icon" src="{{ site.baseurl }}/img/icons/chevronleft.svg" alt="Back" width="16" height="16" aria-hidden="true"> Back to overview
|
||||
<a href="./" class="flex gap-1 leading-none items-center">
|
||||
<i class="icon icon--red" aria-hidden="true">
|
||||
<svg>
|
||||
<use href="/dist/icons.svg#chevronleft" />
|
||||
</svg>
|
||||
</i>
|
||||
<span>Back to overview</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
2
docs/dist/bundle.css
vendored
2
docs/dist/bundle.css
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/bundle.css.map
vendored
2
docs/dist/bundle.css.map
vendored
File diff suppressed because one or more lines are too long
1
docs/dist/icons.svg
vendored
Normal file
1
docs/dist/icons.svg
vendored
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs/><symbol id="chevronleft" viewBox="0 0 32 32"><path d="M10 16L20 6l1.4 1.4l-8.6 8.6l8.6 8.6L20 26z"/></symbol><symbol id="chevronright" viewBox="0 0 32 32"><path d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"/></symbol><symbol id="download" viewBox="0 0 32 32"><path d="M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10l10-10z"/></symbol><symbol id="facebook" viewBox="0 0 24 24"><path d="M15.402 21v-6.966h2.333l.349-2.708h-2.682V9.598c0-.784.218-1.319 1.342-1.319h1.434V5.857a19.19 19.19 0 0 0-2.09-.107c-2.067 0-3.482 1.262-3.482 3.58v1.996h-2.338v2.708h2.338V21H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4.598Z"/></symbol><symbol id="search" viewBox="0 0 32 32"><path d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"/></symbol><symbol id="twitter" viewBox="0 0 24 24"><path d="M8 2H1l8.26 11.014L1.45 22H4.1l6.388-7.349L16 22h7l-8.608-11.478L21.8 2h-2.65l-5.986 6.886L8 2Zm9 18L5 4h2l12 16h-2Z"/></symbol><symbol id="youtube" viewBox="0 0 24 24"><path d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476h.489ZM9.999 8.5v7l6-3.5l-6-3.5Z"/></symbol></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@ -43,9 +43,13 @@ sitemap:
|
||||
<h2 class="subheader">{{ page.browserTitle }}</h2>
|
||||
</div>
|
||||
<div class="large-5 columns">
|
||||
<a class="button" target="_blank" href="{{site.ace.githubUrl}}/releases/latest" rel="noopener">
|
||||
Get ACE3 v{{site.ace.version.major}}.{{site.ace.version.minor}}.{{site.ace.version.patch}}
|
||||
<img class="icon" src="{{ site.baseurl }}/img/icons/download.svg" alt="Download ACE3" width="24" height="24" aria-hidden="true">
|
||||
<a class="button button--icon" target="_blank" href="{{site.ace.githubUrl}}/releases/latest" rel="noopener">
|
||||
<span>Get ACE3 v{{site.ace.version.major}}.{{site.ace.version.minor}}.{{site.ace.version.patch}}</span>
|
||||
<i class="icon icon--white icon--1-5x" aria-hidden="true">
|
||||
<svg>
|
||||
<use href="/dist/icons.svg#download" />
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
<br>
|
||||
<a href="{{site.baseurl}}/wiki/user/installation-guide.html">Installation Guide</a>
|
||||
|
||||
@ -2,35 +2,35 @@
|
||||
"name": "ACE3MOD",
|
||||
"short_name": "ACE3",
|
||||
"icons": [{
|
||||
"src": "/img/icons/icon-48x48.png",
|
||||
"src": "/img/logo/icon-48x48.png",
|
||||
"sizes": "48x48",
|
||||
"type": "image/png"
|
||||
}, {
|
||||
"src": "/img/icons/icon-96x96.png",
|
||||
"src": "/img/logo/icon-96x96.png",
|
||||
"sizes": "96x96",
|
||||
"type": "image/png"
|
||||
}, {
|
||||
"src": "/img/icons/icon-128x128.png",
|
||||
"src": "/img/logo/icon-128x128.png",
|
||||
"sizes": "128x128",
|
||||
"type": "image/png"
|
||||
}, {
|
||||
"src": "/img/icons/icon-144x144.png",
|
||||
"src": "/img/logo/icon-144x144.png",
|
||||
"sizes": "144x144",
|
||||
"type": "image/png"
|
||||
}, {
|
||||
"src": "/img/icons/icon-192x192.png",
|
||||
"src": "/img/logo/icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
}, {
|
||||
"src": "/img/icons/icon-256x256.png",
|
||||
"src": "/img/logo/icon-256x256.png",
|
||||
"sizes": "256x256",
|
||||
"type": "image/png"
|
||||
}, {
|
||||
"src": "/img/icons/icon-384x384.png",
|
||||
"src": "/img/logo/icon-384x384.png",
|
||||
"sizes": "384x384",
|
||||
"type": "image/png"
|
||||
}, {
|
||||
"src": "/img/icons/icon-512x512.png",
|
||||
"src": "/img/logo/icon-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}],
|
||||
@ -39,4 +39,4 @@
|
||||
"background_color": "#FFFFFF",
|
||||
"theme_color": "#951e14",
|
||||
"lang": "en-US"
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,8 +28,13 @@ parent:
|
||||
</header>
|
||||
{{ post.excerpt }}
|
||||
<footer>
|
||||
<a class="button small" href="{{ post.url }}">
|
||||
Read more <img class="icon" src="{{ site.baseurl }}/img/icons/chevronrightwhite.svg" alt="Back" width="16" height="16" aria-hidden="true">
|
||||
<a class="button button--icon small" href="{{ post.url }}">
|
||||
<span>Read more</span>
|
||||
<i class="icon icon--white" aria-hidden="true">
|
||||
<svg>
|
||||
<use href="/dist/icons.svg#chevronright" />
|
||||
</svg>
|
||||
</i>
|
||||
</a>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
6
docs/package-lock.json
generated
6
docs/package-lock.json
generated
@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "docs",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
1
docs/src/icons/chevronleft.svg
Normal file
1
docs/src/icons/chevronleft.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M10 16L20 6l1.4 1.4l-8.6 8.6l8.6 8.6L20 26z"/></svg>
|
||||
|
After Width: | Height: | Size: 145 B |
1
docs/src/icons/chevronright.svg
Normal file
1
docs/src/icons/chevronright.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"/></svg>
|
||||
|
After Width: | Height: | Size: 146 B |
1
docs/src/icons/download.svg
Normal file
1
docs/src/icons/download.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M26 24v4H6v-4H4v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2v-4zm0-10l-1.41-1.41L17 20.17V2h-2v18.17l-7.59-7.58L6 14l10 10l10-10z"/></svg>
|
||||
|
After Width: | Height: | Size: 219 B |
1
docs/src/icons/facebook.svg
Normal file
1
docs/src/icons/facebook.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M15.402 21v-6.966h2.333l.349-2.708h-2.682V9.598c0-.784.218-1.319 1.342-1.319h1.434V5.857a19.19 19.19 0 0 0-2.09-.107c-2.067 0-3.482 1.262-3.482 3.58v1.996h-2.338v2.708h2.338V21H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4.598Z"/></svg>
|
||||
|
After Width: | Height: | Size: 352 B |
1
docs/src/icons/search.svg
Normal file
1
docs/src/icons/search.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"/></svg>
|
||||
|
After Width: | Height: | Size: 208 B |
1
docs/src/icons/twitter.svg
Normal file
1
docs/src/icons/twitter.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M8 2H1l8.26 11.014L1.45 22H4.1l6.388-7.349L16 22h7l-8.608-11.478L21.8 2h-2.65l-5.986 6.886L8 2Zm9 18L5 4h2l12 16h-2Z"/></svg>
|
||||
|
After Width: | Height: | Size: 218 B |
1
docs/src/icons/youtube.svg
Normal file
1
docs/src/icons/youtube.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M12.244 4c.534.003 1.87.016 3.29.073l.504.022c1.429.067 2.857.183 3.566.38c.945.266 1.687 1.04 1.938 2.022c.4 1.56.45 4.602.456 5.339l.001.152v.174c-.007.737-.057 3.78-.457 5.339c-.254.985-.997 1.76-1.938 2.022c-.709.197-2.137.313-3.566.38l-.504.023c-1.42.056-2.756.07-3.29.072l-.235.001h-.255c-1.13-.007-5.856-.058-7.36-.476c-.944-.266-1.687-1.04-1.938-2.022c-.4-1.56-.45-4.602-.456-5.339v-.326c.006-.737.056-3.78.456-5.339c.254-.985.997-1.76 1.939-2.021c1.503-.419 6.23-.47 7.36-.476h.489ZM9.999 8.5v7l6-3.5l-6-3.5Z"/></svg>
|
||||
|
After Width: | Height: | Size: 619 B |
2892
docs/src/package-lock.json
generated
2892
docs/src/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -8,6 +8,8 @@
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
"node-sass": "^9.0.0",
|
||||
"rollup": "^4.1.4",
|
||||
"rollup-plugin-scss": "^4.0.0"
|
||||
"rollup-plugin-scss": "^4.0.0",
|
||||
"rollup-plugin-svg-icons": "^2.1.2",
|
||||
"rollup-plugin-svg-sprite-loader": "^0.0.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import terser from "@rollup/plugin-terser";
|
||||
import scss from "rollup-plugin-scss";
|
||||
import svgicons from "rollup-plugin-svg-icons";
|
||||
|
||||
export default {
|
||||
input: "./main.js",
|
||||
@ -20,5 +21,9 @@ export default {
|
||||
sourceMap: true,
|
||||
outputStyle: "compressed",
|
||||
}),
|
||||
svgicons({
|
||||
inputFolder: "./icons",
|
||||
output: "../dist/icons.svg",
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
@ -14,6 +14,6 @@ body > footer {
|
||||
}
|
||||
|
||||
a {
|
||||
color: lighten($primary-color, 28%);
|
||||
color: $primary-color-lighter;
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,3 +27,7 @@ aside {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
@ -120,10 +120,12 @@ $font-weight-bold: 700;
|
||||
// $jet : #222222;
|
||||
// $black : #000000;
|
||||
|
||||
$transition-default: all .15s ease;
|
||||
|
||||
// We use these as default colors throughout
|
||||
// $primary-color: #008CBA;
|
||||
$primary-color: $ace-primary-color;
|
||||
|
||||
$primary-color-lighter: lighten($primary-color, 28%);
|
||||
// $secondary-color: #e7e7e7;
|
||||
// $alert-color: #f04124;
|
||||
// $success-color: #43AC6A;
|
||||
|
||||
@ -5,3 +5,20 @@
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.leading-none {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@ -2,4 +2,17 @@
|
||||
& > img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
&--icon {
|
||||
display: inline-flex;
|
||||
flex-flow: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,40 @@
|
||||
.icon {
|
||||
margin-bottom: 0;
|
||||
&-red {
|
||||
color: $ace-primary-color;
|
||||
display: inline-block;
|
||||
inline-size: 1rem;
|
||||
block-size: 1rem;
|
||||
font-style: unset;
|
||||
|
||||
svg {
|
||||
inline-size: inherit;
|
||||
block-size: inherit;
|
||||
transition: $transition-default;
|
||||
}
|
||||
|
||||
&--1-25x {
|
||||
inline-size: 1.25rem;
|
||||
block-size: 1.25rem;
|
||||
}
|
||||
|
||||
&--1-5x {
|
||||
inline-size: 1.5rem;
|
||||
block-size: 1.5rem;
|
||||
}
|
||||
|
||||
&--2x {
|
||||
inline-size: 2rem;
|
||||
block-size: 2rem;
|
||||
}
|
||||
|
||||
&--white {
|
||||
svg {
|
||||
fill: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
&--red {
|
||||
svg {
|
||||
fill: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,6 +53,6 @@
|
||||
background-color: #000;
|
||||
}
|
||||
&-red {
|
||||
background-color: $ace-primary-color;
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,17 @@
|
||||
.social-icons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
&__icon {
|
||||
|
||||
svg {
|
||||
fill: $primary-color-lighter;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,13 +18,20 @@ parent:
|
||||
<div id="liveSearch" class="contentSearch">
|
||||
<div class="contentSearch-wrapper row small-collapse">
|
||||
<div class="small-12 medium-8 columns">
|
||||
<input type="search" class="liveSearch-field" name="searchTerm" placeholder="Search …"/>
|
||||
<input type="search" class="liveSearch-field" name="searchTerm" />
|
||||
<div class="liveSearch-result">
|
||||
<ul class="liveSearch-result-list hidden"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hide-for-small-only medium-4 columns">
|
||||
<a href="#" class="liveSearch-button button tiny"><i class="fa fa-search"></i> Search</a>
|
||||
<button type="button" class="liveSearch-button button button--icon tiny">
|
||||
<span>Search</span>
|
||||
<i class="icon icon--white" aria-hidden="true">
|
||||
<svg>
|
||||
<use href="/dist/icons.svg#search" />
|
||||
</svg>
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -16,13 +16,9 @@ parent: wiki
|
||||
<div class="small-12 columns">
|
||||
<div id="liveSearch" class="contentSearch">
|
||||
<div class="contentSearch-wrapper row">
|
||||
<!--<div class="small-12 medium-8 columns">-->
|
||||
<div class="small-12 columns">
|
||||
<input type="search" class="contentSearch-field" name="searchTerm" placeholder="Search …"/>
|
||||
</div>
|
||||
<!--<div class="hide-for-small-only medium-4 columns">
|
||||
<a href="#" class="contentSearch-button button tiny"><i class="fa fa-search"></i> Search</a>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
6
package-lock.json
generated
Normal file
6
package-lock.json
generated
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "ACE3",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user