main
HerrHase 6 days ago
parent 87852330b7
commit e00f81cc23

Binary file not shown.

@ -9,14 +9,17 @@
"author": "Björn Hase",
"license": "GPLv3",
"dependencies": {
"cash-dom": "^8.1.5",
"reflex-grid": "^2.0.8",
"riot": "^9.4.4"
"riot": "^9.4.4",
"smooth-scroll": "^16.1.3",
"throttle-debounce": "^5.0.2"
},
"devDependencies": {
"@tiny-components/webpack": "^0.5.2"
},
"scripts": {
"build-dev": "bun webpack --mode development --config webpack.config.js",
"build": "bun webpack --mode production --config webpack.config.js"
"build-dev": "bun webpack --mode development --config webpack.config.js",
"build": "bun webpack --mode production --config webpack.config.js"
}
}

@ -1,677 +0,0 @@
/*!*******************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/scss/styles.scss ***!
\*******************************************************************************************************************************************/
:root {
--reflex-columns: 12;
--reflex-grid-spacing: 15px;
--reflex-xs: 576px;
--reflex-sm: 768px;
--reflex-md: 992px;
--reflex-lg: 1200px;
--reflex-xlg: 1600px;
--reflex-xxs-max: 575px;
--reflex-xs-max: 767px;
--reflex-sm-max: 991px;
--reflex-md-max: 1199px;
--reflex-lg-max: 1599px;
}
.container,
.container-full {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 30px;
padding-left: 30px;
}
.container .grid,
.container-full .grid {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 576px) {
.container {
max-width: 576px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 992px) {
.container {
max-width: 992px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1200px;
}
}
@media (min-width: 1600px) {
.container {
max-width: 1600px;
}
}
.grid {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0;
margin: 0 auto;
position: relative;
letter-spacing: -0.31em;
*letter-spacing: normal;
word-spacing: -0.43em;
list-style-type: none;
}
.grid::before, .grid::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
}
[class*=col-] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
position: relative;
width: 100%;
vertical-align: top;
padding: 15px;
display: inline-block;
*display: inline;
zoom: 1;
}
[class*=col-]::before, [class*=col-]::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
letter-spacing: normal;
word-spacing: normal;
white-space: normal;
}
[class*=col-] .grid {
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
margin: -15px;
}
.col-12 {
width: 100%;
*width: 99.9%;
}
.col-10 {
width: 83.3333333333%;
*width: 83.2333333333%;
}
.col-9 {
width: 75%;
*width: 74.9%;
}
.col-7 {
width: 58.3333333333%;
*width: 58.2333333333%;
}
.col-6 {
width: 50%;
*width: 49.9%;
}
.col-4 {
width: 33.3333333333%;
*width: 33.2333333333%;
}
.col-3 {
width: 25%;
*width: 24.9%;
}
@media (min-width: 576px) {
.col-xs-12 {
width: 100%;
*width: 99.9%;
}
.col-xs-10 {
width: 83.3333333333%;
*width: 83.2333333333%;
}
.col-xs-8 {
width: 66.6666666667%;
*width: 66.5666666667%;
}
.col-xs-6 {
width: 50%;
*width: 49.9%;
}
.col-xs-4 {
width: 33.3333333333%;
*width: 33.2333333333%;
}
.col-xs-2 {
width: 16.6666666667%;
*width: 16.5666666667%;
}
}
@media (min-width: 768px) {
.col-sm-12 {
width: 100%;
*width: 99.9%;
}
.col-sm-6 {
width: 50%;
*width: 49.9%;
}
.col-sm-4 {
width: 33.3333333333%;
*width: 33.2333333333%;
}
}
@media (min-width: 992px) {
.col-md-8 {
width: 66.6666666667%;
*width: 66.5666666667%;
}
.col-md-7 {
width: 58.3333333333%;
*width: 58.2333333333%;
}
.col-md-6 {
width: 50%;
*width: 49.9%;
}
.col-md-4 {
width: 33.3333333333%;
*width: 33.2333333333%;
}
.col-md-3 {
width: 25%;
*width: 24.9%;
}
}
@media (min-width: 1200px) {
.col-lg-8 {
width: 66.6666666667%;
*width: 66.5666666667%;
}
.col-lg-4 {
width: 33.3333333333%;
*width: 33.2333333333%;
}
}
@media (min-width: 1600px) {
.col-xlg-12 {
width: 100%;
*width: 99.9%;
}
.col-xlg-8 {
width: 66.6666666667%;
*width: 66.5666666667%;
}
.col-xlg-4 {
width: 33.3333333333%;
*width: 33.2333333333%;
}
}
.col-auto {
-ms-flex: 1 0 0px;
-webkit-flex: 1 0 0px;
flex: 1 0 0px;
width: auto;
}
@media (min-width: 768px) {
.col-sm-auto {
-ms-flex: 1 0 0px;
-webkit-flex: 1 0 0px;
flex: 1 0 0px;
width: auto;
}
}
@media (min-width: 992px) {
.col-md-auto {
-ms-flex: 1 0 0px;
-webkit-flex: 1 0 0px;
flex: 1 0 0px;
width: auto;
}
}
@media (min-width: 1200px) {
.col-lg-auto {
-ms-flex: 1 0 0px;
-webkit-flex: 1 0 0px;
flex: 1 0 0px;
width: auto;
}
}
@media (min-width: 1600px) {
.col-xlg-auto {
-ms-flex: 1 0 0px;
-webkit-flex: 1 0 0px;
flex: 1 0 0px;
width: auto;
}
}
.order-3 {
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
.order-2 {
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.order-1 {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
@media (min-width: 992px) {
.order-md-3 {
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
.order-md-2 {
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.order-md-1 {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
}
.offset-3 {
margin-left: 25%;
*margin-left: 24.9%;
}
@media (min-width: 992px) {
.offset-md-2 {
margin-left: 16.6666666667%;
*margin-left: 16.5666666667%;
}
}
@media (min-width: 1200px) {
.offset-lg-1 {
margin-left: 8.3333333333%;
*margin-left: 8.2333333333%;
}
}
.wrap {
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.no-wrap {
-ms-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.no-wrap [class*=col-] {
-ms-flex-negative: 1;
-webkit-flex-shrink: 1;
flex-shrink: 1;
}
.wrap-reverse {
-ms-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.direction-row {
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.direction-row-reverse {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.direction-column {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.direction-column-reverse {
-ms-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.align-start {
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.align-end {
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end;
}
.align-end [class*=col-] {
vertical-align: bottom;
}
.align-center {
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.align-center [class*=col-] {
vertical-align: middle;
}
.align-baseline {
-ms-flex-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
}
.align-content-start {
-ms-flex-line-pack: start;
-webkit-align-content: flex-start;
align-content: flex-start;
}
.align-content-end {
-ms-flex-line-pack: end;
-webkit-align-content: flex-end;
align-content: flex-end;
}
.align-content-end [class*=col-] {
vertical-align: bottom;
}
.align-content-center {
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
}
.align-content-space-between {
-ms-flex-line-pack: justify;
-webkit-align-content: space-between;
align-content: space-between;
}
.align-content-space-around {
-ms-flex-line-pack: distribute;
-webkit-align-content: space-around;
align-content: space-around;
}
.align-self-stretch {
-ms-flex-item-align: stretch;
-webkit-align-self: stretch;
align-self: stretch;
}
.align-self-start {
-ms-flex-item-align: start;
-webkit-align-self: flex-start;
align-self: flex-start;
}
.align-self-end {
-ms-flex-item-align: end;
-webkit-align-self: flex-end;
align-self: flex-end;
vertical-align: bottom;
}
.align-self-center {
-ms-flex-item-align: center;
-webkit-align-self: center;
align-self: center;
vertical-align: middle;
}
.justify-end {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.justify-end.grid {
text-align: right;
-moz-text-align-last: right;
text-align-last: right;
}
.justify-end.grid [class*=col-] {
text-align: left;
text-align: start;
-moz-text-align-last: left;
-moz-text-align-last: start;
text-align-last: left;
text-align-last: start;
}
.justify-center {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.justify-center.grid {
text-align: center;
-moz-text-align-last: center;
text-align-last: center;
}
.justify-center.grid [class*=col-] {
text-align: left;
text-align: start;
-moz-text-align-last: left;
-moz-text-align-last: start;
text-align-last: left;
text-align-last: start;
}
.justify-space-between {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.justify-space-between.grid {
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
}
.justify-space-between.grid [class*=col-] {
text-align: left;
text-align: start;
-moz-text-align-last: left;
-moz-text-align-last: start;
text-align-last: left;
text-align-last: start;
}
.justify-space-around {
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.justify-space-around.grid {
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
}
.justify-space-around.grid [class*=col-] {
text-align: left;
text-align: start;
-moz-text-align-last: left;
-moz-text-align-last: start;
text-align-last: left;
text-align-last: start;
}
.grid-bleed [class*=col-] {
padding: 0;
}
.col-grid {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.col-grid.direction-row {
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.col-bleed {
padding: 0;
}
.col-bleed-x {
padding: 15px 0;
}
.col-bleed-y {
padding: 0 15px;
}
.flex-img {
display: block;
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
max-width: 100%;
height: auto;
width: 100%;
*width: auto;
}
.flex-footer {
width: 100%;
margin-top: auto;
margin-bottom: 0;
}
.flex-footer > :last-child {
margin-bottom: 0;
}
@media (min-width: 0px) and (max-width: 575px) {
.hidden-xxs {
display: none;
}
}
@media (min-width: 576px) {
.hidden-xs-up {
display: none;
}
}
@media (max-width: 767px) {
.hidden-xs-down {
display: none;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.hidden-xs {
display: none;
}
}
@media (min-width: 768px) {
.hidden-sm-up {
display: none;
}
}
@media (max-width: 991px) {
.hidden-sm-down {
display: none;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none;
}
}
@media (min-width: 992px) {
.hidden-md-up {
display: none;
}
}
@media (max-width: 1199px) {
.hidden-md-down {
display: none;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none;
}
}
@media (min-width: 1200px) {
.hidden-lg-up {
display: none;
}
}
@media (max-width: 1599px) {
.hidden-lg-down {
display: none;
}
}
@media (min-width: 1200px) and (max-width: 1599px) {
.hidden-lg {
display: none;
}
}
@media (min-width: 1600px) {
.hidden-xlg {
display: none;
}
}
/*# sourceMappingURL=styles.css.map */

@ -1 +0,0 @@
(self.webpackChunk_spd_minden_sozi_ui=self.webpackChunk_spd_minden_sozi_ui||[]).push([["spritemap"],{"?4e0c":()=>{eval("\n\n//# sourceURL=webpack://@spd-minden/sozi-ui/spritemap-dummy-module?")}}]);

@ -0,0 +1,14 @@
<?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">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg height="800px" width="800px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" xml:space="preserve">
<style type="text/css">
.st0{fill:#000000;}
</style>
<g>
<polygon class="st0" points="512,52.535 459.467,0.002 256.002,203.462 52.538,0.002 0,52.535 203.47,256.005 0,459.465
52.533,511.998 256.002,308.527 459.467,511.998 512,459.475 308.536,256.005 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 688 B

@ -0,0 +1,15 @@
<?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">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" xml:space="preserve">
<style type="text/css">
.st0{fill:#000000;}
</style>
<g>
<rect y="16" class="st0" width="512" height="96"/>
<rect y="208" class="st0" width="512" height="96"/>
<rect y="400" class="st0" width="512" height="96"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 617 B

@ -0,0 +1,117 @@
import $ from 'cash-dom'
// adding smooth scroll for panel achnor
import SmoothScroll from 'smooth-scroll'
import { throttle, debounce } from 'throttle-debounce'
$(function () {
// create scroll
const scroll = new SmoothScroll('.sozi-ui__menu-list a[href*="#"]')
/**
* adding toggle for mobile navigation
*
*/
const button = $('#mobile-button')
const navigation = $('.sozi-ui__menu-list')
const navigationOpenClass = 'sozi-ui__menu-list--open'
const buttonClass = 'button--open'
// open sidebar and button
const handleOpen = function() {
navigation.addClass(navigationOpenClass)
button.addClass(buttonClass)
}
// close sidebar and button
const handleClose = function() {
navigation.removeClass(navigationOpenClass)
button.removeClass(buttonClass)
}
button.on('click', (event) => {
event.preventDefault()
if (navigation.hasClass(navigationOpenClass)) {
handleClose()
} else {
handleOpen()
}
})
// if scrolling stop close sidebar
document.addEventListener('scrollStop', () => {
handleClose()
}, false);
/**
* adding scrolling and change navigation
*
*
*/
// get elements
const elements = $('.sozi-ui__menu-list a[href*="#"]')
const offset = 25
// add current to navigation
const handleCurrent = function(hash) {
$(".sozi-ui__menu-list a[href$='" + hash + "']").first().addClass('sozi-ui__menu-item--current')
}
//
const handleScroll = function() {
// if found
let hasFound = false
// get result
let result = undefined
if (window.pageYOffset > offset) {
$('body').addClass('has-scrolled')
} else {
$('body').removeClass('has-scrolled')
}
elements.each((index, element) => {
// getting target
const target = $(element.hash).first()
if (!target[0]) {
return
}
const offsetTop = target[0].getBoundingClientRect().top + window.pageYOffset
let next = undefined
// check for next element
if (elements[index + 1]) {
next = $(elements[index + 1].hash)
}
// check if element is visible
if (offsetTop - (window.innerHeight / 2) <= (window.pageYOffset + offset)) {
result = target
}
})
if (result) {
elements.removeClass('sozi-ui__menu-item--current')
handleCurrent(result[0].id)
}
}
window.addEventListener('scroll', throttle(300, handleScroll), false)
// if hash is in url, if not get first element
if (window.location.hash.substr(1)) {
handleCurrent(window.location.hash.substr(1))
} else {
handleCurrent($('.sozi-ui__menu-list a[href*="#"]').first()[0].hash)
}
})

@ -4,8 +4,17 @@
*
*/
.sozi-button {
.sozi-ui__button {
border-radius: 2.5rem;
height: auto;
padding: .625rem 1.875rem;
&:hover {
cursor: pointer;
}
&--transparent {
background: transparent;
border: 0;
}
}

@ -3,6 +3,20 @@
*
*/
body {
padding-top: 86px;
}
.site-header {
position: fixed;
top: 0;
height: 86px;
left: 0;
width: 100%;
z-index: 1;
background: white;
}
.sozi-ui__header {
position: relative;

@ -0,0 +1,22 @@
/**
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
.sozi-ui__icon {
width: 1em;
height: 1em;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
overflow: hidden;
font-size: 1.4rem;
fill: var(--text);
}

@ -4,7 +4,13 @@
justify-content: space-between;
&-start {
.sozi-ui__icon {
font-size: 2.75em;
}
.sozi-ui__button--menu {
padding: 0;
}
}
&-logo {
@ -14,7 +20,7 @@
&-item {
color: var(--text);
font-weight: bold;
padding: 0.25em 0 0.25em;
padding: 0.26em 0 0.26em;
margin-top: -0.25em;
margin-left: 1em;
border-bottom: 2px solid transparent;
@ -23,5 +29,41 @@
color: var(--active);
border-color: var(--active);
}
@media only screen and (max-width: $grid__md - 1) {
margin-top: 0;
}
}
&-list {
@media only screen and (max-width: $grid__md - 1) {
overflow: hidden;
position: absolute;
max-height: 0;
height: 100%;
top: 86px;
left: 0;
background: white;
width: calc(100% + 2.2em);
z-index: 1;
margin: 0 -1.1em 0;
display: block;
transition: max-height 0.1s ease-in;
}
@media only screen and (max-width: $grid__md - 1) {
a {
display: block;
font-size: 1.2rem;
padding-left: 1.6em;
padding-right: 1.6em;
margin-left: 0;
}
}
&--open {
max-height: 100%;
}
}
}

@ -132,3 +132,7 @@ $opacity-steps: 10;
.overflow-hidden {
overflow: hidden;
}
.hidden {
display: none;
}

@ -18,7 +18,9 @@
"helpers/visibility",
"helpers/fonts",
"components/icon",
"components/event",
"components/button",
"components/header",
"components/panel",
"components/menu",

File diff suppressed because one or more lines are too long

@ -13,23 +13,35 @@
<body>
<header class="header">
<header class="site-header">
<div class="container">
<div class="grid">
<div class="col-12">
<div class="sozi-ui__menu">
<div class="sozi-ui__menu-start">
<a href="/">
<img src="/images/logo.svg" class="sozi-ui__menu-logo" />
<img src="/images/logo.svg" alt="SPD - Sozial Politik für dich" class="sozi-ui__menu-logo" />
</a>
</div>
<div class="sozi-ui__menu-start">
<a class="sozi-ui__menu-item" href="#ziele">
Ziele
</a>
<a class="sozi-ui__menu-item" href="#social-media">
Social Media
</a>
<button id="mobile-button" type="button" class="sozi-ui__button sozi-ui__button--menu sozi-ui__button--transparent hidden-md-up p-0">
<svg class="sozi-ui__icon" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-menu"></use>
</svg>
<svg class="sozi-ui__icon hidden" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-close"></use>
</svg>
</button>
<nav class="sozi-ui__menu-list hidden-sm-down">
<a class="sozi-ui__menu-item" href="#meine-ziele">
Ziele
</a>
<a class="sozi-ui__menu-item" href="#social-media">
Social Media
</a>
</nav>
</div>
</div>
</div>
@ -55,6 +67,12 @@
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<h3 id="meine-ziele">
Meine Ziele
</h3>
<h3 id="social-media">
Meine Ziele
</h3>
</div>
</div>
</div>
@ -63,6 +81,8 @@
<footer class="">
</footer>
<script async src="/js/menu.js"></script>
</body>
</html>

File diff suppressed because one or more lines are too long

@ -1 +1 @@
(self.webpackChunk_spd_minden_sozi_ui=self.webpackChunk_spd_minden_sozi_ui||[]).push([["spritemap"],{"?4e0c":()=>{eval("\n\n//# sourceURL=webpack://@spd-minden/sozi-ui/spritemap-dummy-module?")}}]);
(self.webpackChunk_spd_minden_sozi_ui=self.webpackChunk_spd_minden_sozi_ui||[]).push([[654],{874:()=>{}}]);

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-close" viewBox="0 0 512 512"><title>close</title><path d="M512 52.535 459.467.002l-203.465 203.46L52.538.002 0 52.535l203.47 203.47L0 459.465l52.533 52.533 203.469-203.471 203.465 203.471L512 459.475l-203.464-203.47z"/></symbol><symbol id="icon-menu" viewBox="0 0 512 512"><title>menu</title><path class="st0" d="M0 16h512v96H0zm0 192h512v96H0zm0 192h512v96H0z"/></symbol></svg>

After

Width:  |  Height:  |  Size: 435 B

@ -24,12 +24,22 @@
</a>
</div>
<div class="sozi-ui__menu-start">
<a class="sozi-ui__menu-item" href="#ziele">
Soluta
</a>
<a class="sozi-ui__menu-item" href="#social-media">
Doming
</a>
<button id="mobile-button" type="button" class="button button--transparent">
<svg class="icon" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-menu"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
</div>
</div>

@ -1,17 +1,16 @@
const tinyComponentsWebpack = require('@tiny-components/webpack')
const riotRules = require('@tiny-components/webpack/rules/riot')
const path = require('path')
module.exports = tinyComponentsWebpack({
menu: [ './src/js/menu.js'],
styles: [ './src/scss/styles.scss' ],
}, {
destination: path.resolve(process.cwd(), 'templates'),
svg: {
src: [
'./icons/*.svg'
'./resources/icons/*.svg'
]
},
rules: [ riotRules ],
purge: {
src: path.join(__dirname, './**'),
safelist: {

Loading…
Cancel
Save