Honsely, I don't know what happened here

This commit is contained in:
reverend 2021-03-03 00:49:21 +01:00
parent a0240b2ec8
commit 6f4170af8e
70 changed files with 2415 additions and 372 deletions

View File

@ -0,0 +1,4 @@
@import 'aspectRatio/_aspectRatio'
@import 'focalPoint/_focalPoint'
@import 'shape/_shape'
@import 'truncation/_truncation'

View File

@ -0,0 +1,61 @@
RV-AspectRatio--XtoY(aspectX=1, aspectY=1)
RV-CSSParameter({
aspectX: aspectX,
aspectY: aspectY
})
padding-top 'calc(100% * calc(%s / %s))' % (--aspectY --aspectX)
&:last-child
margin-bottom 'calc(-1 * 100% * calc(%s / %s) + var(--outer-spacing))' % (--aspectY --aspectX)
RV-Utils__ElementAmount(1, @(index, totale){
margin-bottom 0px
})
RV-AspectRatio()
position relative
overflow hidden
height unset
width unset
*
object-fit cover
position absolute
top 0
left 0
bottom 0
right 0
RV-AspectRatio--1to2()
RV-AspectRatio--XtoY(1, 2)
RV-AspectRatio--2to1()
RV-AspectRatio--XtoY(2, 1)
RV-AspectRatio--3to2()
RV-AspectRatio--XtoY(3, 2)
RV-AspectRatio--4to3()
RV-AspectRatio--XtoY(4, 3)
RV-AspectRatio--16to9()
RV-AspectRatio--XtoY(16, 9)
.RV-AspectRatio
RV-AspectRatio()
&--1to2
RV-AspectRatio--1to2()
&--2to1
RV-AspectRatio--2to1()
&--3to2
RV-AspectRatio--3to2()
&--4to3
RV-AspectRatio--4to3()
&--16to9
RV-AspectRatio--16to9()

View File

@ -0,0 +1,45 @@
{
"name": "aspectRatio",
"title": "Aspect Ratio",
"context": {
"modifier_list": [
"RV-AspectRatio--1to2 RV-Dummy--orange",
"RV-AspectRatio--2to1 RV-Dummy--blue",
"RV-AspectRatio--3to2 RV-Dummy--green",
"RV-AspectRatio--4to3 RV-Dummy--red",
"RV-AspectRatio--16to9 RV-Dummy--yellow"
]
},
"variants": [
{
"name": "1 to 2",
"context": {
"modifier": "RV-AspectRatio--1to2"
}
},
{
"name": "2 to 1",
"context": {
"modifier": "RV-AspectRatio--2to1"
}
},
{
"name": "3 to 2",
"context": {
"modifier": "RV-AspectRatio--3to2"
}
},
{
"name": "4 to 3",
"context": {
"modifier": "RV-AspectRatio--4to3"
}
},
{
"name": "16 to 9",
"context": {
"modifier": "RV-AspectRatio--16to9"
}
}
]
}

View File

@ -0,0 +1,12 @@
{{#if modifier}}
<div class="RV-Dummy RV-AspectRatio {{modifier}}"></div>
{{else}}
<div class="RV-FlexGrid RV-FlexGrid--masonry">
{{#each modifier_list}}
<div class="RV-FlexGrid__Item ">
<div class="RV-Dummy RV-AspectRatio {{this}}"></div>
</div>
{{/each}}
</div>
{{/if}}

View File

@ -0,0 +1,48 @@
// FocalPoint in percentage
RV-FocalPoint(focalX=50%, focalY=50%)
RV-CSSParameter({
focalX: focalX,
focalY: focalY
})
height 100%
width 100%
object-fit cover
object-position --focalX --focalY
RV-FocalPoint--upperHalf()
RV-CSSParameter({
focalY: 25%
})
RV-FocalPoint--lowerHalf()
RV-CSSParameter({
focalY: 75%
})
RV-FocalPoint--leftHalf()
RV-CSSParameter({
focalX: 25%
})
RV-FocalPoint--rightHalf()
RV-CSSParameter({
focalX: 75%
})
.RV-FocalPoint
RV-FocalPoint()
&--upperHalf
RV-FocalPoint--upperHalf()
&--lowerHalf
RV-FocalPoint--lowerHalf()
&--leftHalf
RV-FocalPoint--leftHalf()
&--rightHalf
RV-FocalPoint--rightHalf()

View File

@ -0,0 +1,4 @@
{
"name": "focalPoint",
"title": "Focal Point"
}

View File

@ -0,0 +1,22 @@
<div>
<div class="RV-AspectRatio RV-AspectRatio--4to3">
<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 16.66%" src="{{ path '/images/landscape.jpeg'}}"/>
</div>
</div>
<div class="RV-AspectRatio RV-AspectRatio--4to3">
<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 75%" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
</div>
<div class="RV-AspectRatio RV-AspectRatio--4to3">
<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 47%" src="{{ path '/images/hasi01.png'}}"/>
</div>
<div class="RV-AspectRatio RV-AspectRatio--4to3">
<img class="RV-FocalPoint RV-FocalPoint--upperHalf" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
</div>
<div class="RV-AspectRatio RV-AspectRatio--1to2">
<img class="RV-FocalPoint RV-FocalPoint--rightHalf" src="{{ path '/images/landscape.jpeg'}}"/>
</div>

View File

@ -0,0 +1,34 @@
RV-Shape--square()
padding-top 100%
width 100%
position relative
*
position absolute
top 0
left 0
bottom 0
right 0
RV-Shape--circle()
padding-top 100%
width 100%
position relative
&, *
border-radius 50%
*
position absolute
top 0
left 0
bottom 0
right 0
.RV-Shape
&--square
RV-Shape--square()
&--circle
RV-Shape--circle()

View File

@ -0,0 +1,17 @@
{
"name": "Shape",
"variants": [
{
"name": "Square",
"context": {
"modifier": "RV-Shape--square"
}
},
{
"name": "Circle",
"context": {
"modifier": "RV-Shape--circle"
}
}
]
}

View File

@ -0,0 +1,3 @@
<div class="RV-Shape {{#if modifier}}{{modifier}}{{/if}}">
<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 75%" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
</div>

View File

@ -0,0 +1,62 @@
RV-Truncation--fade(background-color=white)
&:after
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
display block
content '###'
color transparent
opacity 1
position absolute
top calc(var(--height) - 60px)
width 100%
height 50px
line-height var(--line-height)
z-index 10
RV-Truncation--ellipsis(background-color=white)
&:after
position absolute
display block
right 0
content '...'
background-color background-color
padding-left 5px
padding-bottom 10px
box-shadow -10px 8px 6px 0px #fff;
line-height var(--line-height)
top calc(var(--height) - 40px)
RV-Truncation(line-height=1.3, height=350px)
RV-CSSParameter({
line-height: line-height,
height: height
})
background-color = white
display block
overflow hidden
position relative
height calc_height()
width calc_width()
*
overflow hidden
display block
position relative
text-overflow ellipsis
background-color background-color
line-height line-height
max-height floor(height / (line-height * 16)) * (line-height * 16)
padding 0
margin 0
.RV-Truncation
RV-Truncation()
&--fade
RV-Truncation--fade()
&--ellipsis
RV-Truncation--ellipsis()

View File

@ -0,0 +1,17 @@
{
"name": "Truncation",
"variants": [
{
"name": "Fade",
"context": {
"modifier": "RV-Truncation--fade"
}
},
{
"name": "Ellipsis",
"context": {
"modifier": "RV-Truncation--ellipsis"
}
}
]
}

View File

@ -0,0 +1,5 @@
<div class="RV-Truncation {{#if modifier}}{{modifier}}{{/if}}">
<p>
You could see there was text coming out of her eyes, text coming out of her wherever. . Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, theyre not sending the best. Theyre not sending you, theyre sending words that have lots of problems and theyre bringing those problems with us. Theyre bringing mistakes. Theyre bringing misspellings. Theyre typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.
</p>
</div>

View File

@ -181,13 +181,13 @@ RV-Block__Modifier--name(name)
RV-Block(block_name) RV-Block(block_name)
& .{block_name} & .{block_name}
{block}
foreach(_block.block_modifiers, @(modifier){
render_block_modifier(modifier)
})
foreach(_block.elements, @(element){ foreach(_block.elements, @(element){
render_element(element) render_element(element)
}) })
foreach(_block.block_modifiers, @(modifier){
render_block_modifier(modifier)
})
{block}
reset_block() reset_block()

View File

@ -41,4 +41,4 @@ RV-CSSParameter(block)
for name, value in block for name, value in block
css-var-name = '--%s' % unquote(name) css-var-name = '--%s' % unquote(name)
add-property(css-var-name, value) add-property(css-var-name, value)
define(name, unquote('var(--%s)' % (unquote(name))), true) define('--'+name, unquote('var(--%s)' % (unquote(name))), true)

View File

@ -1,6 +1,12 @@
RV-Utils__ElementAmount(callback, up-to=20) RV-Utils__ElementAmount(amount, callback)
for i in (1..up-to) if amount == 1
&:only-child
callback(i, amount)
else
*:first-child:nth-last-child({i}), *:first-child:nth-last-child({i}),
*:first-child:nth-last-child({i})~* *:first-child:nth-last-child({i})~*
callback(i, up-to) callback(i, up-to)
RV-Utils__ElementAmount--range(from=1, to=20, callback)
for i in (from..to)
RV-Utils__ElementAmount(i, callback)

View File

@ -1,7 +1,7 @@
@import 'dummy/_dummy'
@import 'contentCrop/_contentCrop' @import 'contentCrop/_contentCrop'
@import 'fullWidthContent/_fullWidthContent' @import 'fullWidthContent/_fullWidthContent'
@import 'flexRow/_flexRow' @import 'flexRow/_flexRow'
@import 'flexGrid/_flexGrid' @import 'flexGrid/_flexGrid'
@import 'fan/_fan' @import 'fan/_fan'
@import 'alignment/_alignment' @import 'alignment/_alignment'
@import 'dummy/_dummy'

View File

@ -60,7 +60,7 @@ RV-ContentCrop--XtoY(x=1, y=1)
+RV-Block__Modifier--name('XtoY') +RV-Block__Modifier--name('XtoY')
width 100% width 100%
padding-top 100% * (y / x) padding-top 100% * (--y / --x)
position relative position relative
.RV-Image * .RV-Image *
@ -96,12 +96,13 @@ RV-ContentCrop__Text--fade(background-color=white)
&:after &:after
background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color) background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
display block display block
content ' ' content '###'
opacity 0.8 color transparent
opacity 1
position relative position relative
top -25% top -30px
width 100% width 100%
height 25% height 30px
z-index 10 z-index 10
RV-ContentCrop__Text--ellipsis(background-color=white) RV-ContentCrop__Text--ellipsis(background-color=white)

View File

@ -1,4 +1,49 @@
+RV-Block('RV-Dummy') +RV-Block('RV-Dummy')
background-color #F4A460
&:nth-child(2n)
background-color #6495ED
&:nth-child(3n)
background-color #90EE90
&--oranage
background-color #F4A460
&--blue
background-color #6495ED
&--green
background-color #90EE90
&--red
background-color #ce6d6d
&--yellow
background-color #eae144
+RV-Element('Landscape')
min-width 200px
width 100%
min-height 130px
+RV-Element('Portrait')
min-width 130px
width 100%
min-height 200px
+RV-Element('Square')
min-width 300px
width 100%
min-height 300px
+RV-Element__Modifier('large')
height 500px
width 500px
+RV-Element__Modifier('small')
height 100px
width 100px
+RV-Block__Modifier('square') +RV-Block__Modifier('square')
height 350px height 350px
width 350px width 350px

View File

@ -19,7 +19,7 @@ RV-Fan--horizontal(base-height, base-width)
flex-direction row flex-direction row
+RV-Element('Surface') +RV-Element('Surface')
min-width calc_width(base-width) min-width calc_width('calc(%s * 1.5)' % base-width)
height calc_height(base-height) height calc_height(base-height)
/* /*
@ -35,6 +35,7 @@ RV-Fan--vertical(base-height, base-width)
+RV-Element('Surface') +RV-Element('Surface')
width calc_width(base-width) width calc_width(base-width)
min-width initial
min-height base-height min-height base-height
@ -71,6 +72,7 @@ RV-Fan--fullWidth(base-height, base-width)
+RV-Element('Surface') +RV-Element('Surface')
flex-grow 1 flex-grow 1
min-width calc_width('calc(%s * 1.5)' % base-width)
/* ############### /* ###############
@ -94,14 +96,10 @@ RV-Fan__Surface--fixedWidth(width)
RV-Fan__Surface(base-height, base-width) RV-Fan__Surface(base-height, base-width)
+RV-Element--name('Surface') +RV-Element--name('Surface')
RV-ContentCrop()
RV-ContentCrop__Text()
RV-ContentCrop__Image()
overflow hidden overflow hidden
height calc_height(base-height) height calc_height(base-height)
width calc_width() width calc_width()
min-width calc_width('calc(%s * 1.5)' % base-width)
flex-grow 20 flex-grow 20
flex-shrink 0 flex-shrink 0
@ -113,7 +111,7 @@ RV-Fan__Surface(base-height, base-width)
RV-Fan() RV-Fan()
display flex display flex
position relative position relative
min-width calc(2 * var(--base-width)) min-width min-content
/* ######### /* #########
* CSS-Class * CSS-Class
@ -128,23 +126,23 @@ RV-Fan()
RV-Fan() RV-Fan()
+RV-Element() +RV-Element()
RV-Fan__Surface(base-height, base-width) RV-Fan__Surface(--base-height, --base-width)
+RV-Element__Modifier() +RV-Element__Modifier()
RV-Fan__Surface--fixedWidth(base-width) RV-Fan__Surface--fixedWidth(--base-width)
+RV-Element__Modifier() +RV-Element__Modifier()
RV-Fan__Surface--fixedHeight(base-height) RV-Fan__Surface--fixedHeight(--base-height)
+RV-Element() +RV-Element()
RV-Fan__Base(base-height, base-width) RV-Fan__Base(--base-height, --base-width)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-Fan--fullWidth(base-height, base-width) RV-Fan--fullWidth(--base-height, --base-width)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-Fan--vertical(base-height, base-width) RV-Fan--vertical(--base-height, --base-width)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-Fan--horizontal(base-height, base-width) RV-Fan--horizontal(--base-height, --base-width)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-Fan--auto(base-height, base-width) RV-Fan--auto(--base-height, --base-width)

View File

@ -1,4 +1,12 @@
<div class="RV-Fan RV-Fan{{modifier}} RV-BoxShadow RV-BoxShadow--drop RV-Spacing__Outer--large"> <div class="RV-Fan RV-Fan{{modifier}} RV-BoxShadow">
<div class="RV-Fan__Base RV-Dummy"></div>
<div class="RV-Fan__Surface RV-Dummy"></div>
</div>
<br>
<br>
<br>
<br>
<div class="RV-Fan RV-Fan{{modifier}} RV-BoxShadow RV-BoxShadow--drop">
<div class="RV-Fan__Base RV-Spacing__Inner--small"> <div class="RV-Fan__Base RV-Spacing__Inner--small">
<div class="RV-ContentCrop"> <div class="RV-ContentCrop">
<img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/> <img class="RV-Image" src="{{path '/images/landscape.jpeg'}}"/>
@ -18,6 +26,3 @@
</div> </div>
</div> </div>
</div> </div>

View File

@ -20,6 +20,7 @@ RV-FlexGrid--masonry(item-height=300px,item-width=300px)
+RV-Element('Item') +RV-Element('Item')
display inline-block display inline-block
width 100%
height unset height unset
margin-bottom: var(--inner-spacing); margin-bottom: var(--inner-spacing);
& > * { & > * {
@ -64,28 +65,27 @@ RV-FlexGrid(item-height, item-width)
grid-template-columns: repeat(auto-fill, var(--item-width)); grid-template-columns: repeat(auto-fill, var(--item-width));
+RV-Block('RV-FlexGrid') +RV-Block('RV-FlexGrid')
RV-CSSParameter({ RV-CSSParameter({
item-height: 300px, item-height: 300px,
item-width: 300px item-width: 300px
}) })
RV-FlexGrid(item-height, item-width) RV-FlexGrid(--item-height, --item-width)
+RV-Element() +RV-Element()
RV-FlexGrid__Item(item-height, item-width) RV-FlexGrid__Item(--item-height, --item-width)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-FlexGrid--autoWidth(item-height, item-width) RV-FlexGrid--autoWidth(--item-height, --item-width)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-FlexGrid--fixedSize(item-height, item-width) RV-FlexGrid--fixedSize(--item-height, --item-width)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-FlexGrid--masonry(item-height,item-width) RV-FlexGrid--masonry(--item-height, --item-width)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-FlexGrid--verticalMasonry(item-height,item-width) RV-FlexGrid--verticalMasonry(--item-height, --item-width)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-FlexGrid--horizontalMasonry(item-height,item-width) RV-FlexGrid--horizontalMasonry(--item-height, --item-width)

View File

@ -1,3 +1,33 @@
<div class="RV-FlexGrid RV-FlexGrid{{modifier}}">
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Portrait"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Portrait"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Landscape"></div>
</div>
<div class="RV-FlexGrid__Item RV-Dummy">
<div class="RV-Dummy__Portrait"></div>
</div>
</div>
<div class="RV-FlexGrid RV-FlexGrid{{modifier}} RV-Spacing__Inner--medium"> <div class="RV-FlexGrid RV-FlexGrid{{modifier}} RV-Spacing__Inner--medium">
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--{{item-shadow}} RV-Spacing__Inner--medium"> <div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--{{item-shadow}} RV-Spacing__Inner--medium">
<div class="RV-ContentCrop"> <div class="RV-ContentCrop">

View File

@ -23,7 +23,7 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
RV-Reset() RV-Reset()
gap 0px gap 0px
RV-Utils__ElementAmount(@(index, total){ RV-Utils__ElementAmount--range(0, 20, @(index, total){
min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index) min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
} }
) )
@ -144,7 +144,7 @@ RV-FlexRow()
RV-FlexRow__Item--wider() RV-FlexRow__Item--wider()
+RV-Element__Modifier() +RV-Element__Modifier()
RV-FlexRow__Item--fixedSize(width) RV-FlexRow__Item--fixedSize(--width)
+RV-Element__Modifier() +RV-Element__Modifier()
RV-FlexRow__Item--narrower() RV-FlexRow__Item--narrower()
@ -168,7 +168,7 @@ RV-FlexRow()
RV-FlexRow--vertical() RV-FlexRow--vertical()
+RV-Block__Modifier() +RV-Block__Modifier()
RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint) RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-FlexRow--auto() RV-FlexRow--auto()

View File

@ -1 +1,32 @@
{} {
"title": "FlexRow",
"context": {
"item-shadow" : "drop"
},
"variants": [
{
"name": "Horizontal",
"context": {
"modifier": "--horizontal"
}
},
{
"name": "Vertical",
"context": {
"modifier": "--vertical"
}
},
{
"name": "Breakpoint",
"context": {
"modifier": "--breakPoint"
}
},
{
"name": "Auto",
"context": {
"modifier": "--auto"
}
}
]
}

View File

@ -1,38 +1,17 @@
<div class="RV-FlexRow"> <div class="RV-FlexRow RV-FlexRow{{modifier}}">
<div class="red RV-FlexRow__Item">Im normal</div> <div class="RV-FlexRow__Item RV-Dummy">
<div class="green RV-FlexRow__Item RV-FlexRow__Item--right">Right</div> <div class="RV-Dummy__Square--small"></div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--center">Center</div> </div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--left"><span>wrapped content left</span></div> <div class="RV-FlexRow__Item RV-FlexRow__Item--right RV-Dummy">
<div class="red RV-FlexRow__Item RV-FlexRow__Item--fixedSize">Fixed</div> <div class="RV-Dummy__Square--small"></div>
</div> </div>
<br></br> <div class="RV-FlexRow__Item RV-FlexRow__Item--center RV-Dummy">
<div class="RV-FlexRow"> <div class="RV-Dummy__Square--small"></div>
<div class="red RV-FlexRow__Item">Im normal</div> </div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--right RV-FlexRow__Item--fixedSize">Right</div> <div class="RV-FlexRow__Item RV-FlexRow__Item--left RV-Dummy">
</div> <div class="RV-Dummy__Square--small"></div>
<br><br> </div>
<div class="RV-FlexRow RV-FlexRow--multiRow"> <div class="RV-FlexRow__Item RV-FlexRow__Item--fixedSize RV-Dummy">
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">narrower</div> <div class="RV-Dummy__Square--small"></div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">narrow</div> </div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">normal</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">wide</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--wider">wider</div>
</div>
<br><br>
<div class="RV-FlexRow RV-Spacing__Inner--small">
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">.</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">.</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">.</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">.</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--content">content</div>
</div>
<br><br>
<div class="RV-FlexRow RV-FlexRow--breakPoint">
<div class="green RV-FlexRow__Item RV-FlexRow__Item--narrower">sdfkjsakfjsdök</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--narrow">adfasfsd</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--normal">asfsdfasd</div>
<div class="red RV-FlexRow__Item RV-FlexRow__Item--wide">blubbber</div>
<div class="green RV-FlexRow__Item RV-FlexRow__Item--content">content</div>
</div> </div>

View File

@ -1,4 +1,4 @@
@import 'spacing/_spacing' @import 'spacing/_spacing'
@import 'elementList/_elementList'
@import 'boxShadow/_boxShadow' @import 'boxShadow/_boxShadow'
@import 'iconized/_iconized' @import 'iconized/_iconized'

View File

@ -93,19 +93,19 @@ RV-BoxShadow()
RV-BoxShadow() RV-BoxShadow()
+RV-Block__Modifier() +RV-Block__Modifier()
RV-BoxShadow--simple(color) RV-BoxShadow--simple(--color)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-BoxShadow--liftedCorners(color) RV-BoxShadow--liftedCorners(--color)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-BoxShadow--levitating(color) RV-BoxShadow--levitating(--color)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-BoxShadow--stacked(color) RV-BoxShadow--stacked(--color)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-BoxShadow--drop(color) RV-BoxShadow--drop(--color)
+RV-Block__Modifier() +RV-Block__Modifier()
RV-BoxShadow--solid(color) RV-BoxShadow--solid(--color)

View File

@ -0,0 +1,15 @@
RV-ElementList__Item()
+RV-Element--name('Item')
RV-FlexRow__Item()
RV-ElementList(break_width=500px)
RV-FlexRow()
RV-Reset()
list-style-type none
+RV-Block('RV-ElementList')
RV-ElementList()
+RV-Element()
RV-ElementList__Item()

View File

@ -1,5 +1,5 @@
RV-Spacing__Outer--small() RV-Spacing__Outer--small()
+RV-Element__Modifier('small') +RV-Element__Modifier--name('small')
--outer-spacing spacing-small --outer-spacing spacing-small
margin var(--outer-spacing) margin var(--outer-spacing)
* > { * > {
@ -7,7 +7,7 @@ RV-Spacing__Outer--small()
} }
RV-Spacing__Outer--medium() RV-Spacing__Outer--medium()
+RV-Element__Modifier('medium') +RV-Element__Modifier--name('medium')
--outer-spacing spacing-medium --outer-spacing spacing-medium
margin var(--outer-spacing) margin var(--outer-spacing)
* > { * > {
@ -15,14 +15,14 @@ RV-Spacing__Outer--medium()
} }
RV-Spacing__Outer--large() RV-Spacing__Outer--large()
+RV-Element__Modifier('large') +RV-Element__Modifier--name('large')
--outer-spacing spacing-large --outer-spacing spacing-large
margin var(--outer-spacing) margin var(--outer-spacing)
* > { * > {
--outer-spacing 0 --outer-spacing 0
} }
RV-Spacing__Inner--small() RV-Spacing__Inner--small()
+RV-Element__Modifier('small') +RV-Element__Modifier--name('small')
--inner-spacing spacing-small --inner-spacing spacing-small
padding var(--inner-spacing) padding var(--inner-spacing)
gap var(--inner-spacing) gap var(--inner-spacing)
@ -32,7 +32,7 @@ RV-Spacing__Inner--small()
} }
RV-Spacing__Inner--medium() RV-Spacing__Inner--medium()
+RV-Element__Modifier('medium') +RV-Element__Modifier--name('medium')
--inner-spacing spacing-medium --inner-spacing spacing-medium
padding var(--inner-spacing) padding var(--inner-spacing)
gap var(--inner-spacing) gap var(--inner-spacing)
@ -42,7 +42,7 @@ RV-Spacing__Inner--medium()
} }
RV-Spacing__Inner--large() RV-Spacing__Inner--large()
+RV-Element__Modifier('large') +RV-Element__Modifier--name('large')
--inner-spacing spacing-large --inner-spacing spacing-large
padding var(--inner-spacing) padding var(--inner-spacing)
gap var(--inner-spacing) gap var(--inner-spacing)
@ -53,11 +53,17 @@ RV-Spacing__Inner--large()
+RV-Block('RV-Spacing') +RV-Block('RV-Spacing')
+RV-Element('Outer') +RV-Element('Outer')
+RV-Element__Modifier()
RV-Spacing__Outer--small() RV-Spacing__Outer--small()
+RV-Element__Modifier()
RV-Spacing__Outer--medium() RV-Spacing__Outer--medium()
+RV-Element__Modifier()
RV-Spacing__Outer--large() RV-Spacing__Outer--large()
+RV-Element('Inner') +RV-Element('Inner')
+RV-Element__Modifier()
RV-Spacing__Inner--small() RV-Spacing__Inner--small()
+RV-Element__Modifier()
RV-Spacing__Inner--medium() RV-Spacing__Inner--medium()
+RV-Element__Modifier()
RV-Spacing__Inner--large() RV-Spacing__Inner--large()

View File

@ -0,0 +1 @@
@import 'button/_button'

View File

@ -0,0 +1,191 @@
RV-Button--pill()
+RV-Block__Modifier--name('pill')
border-radius calc(var(--size) + var(--line-height) * 16px)
padding-left calc(1.5 * var(--size))
padding-right calc(1.5 * var(--size))
RV-Button--border(color)
+RV-Block__Modifier--name('border')
border 3px solid color
color color
border-radius 0px
&, *
background-color transparent
+RV-Element('Icon')
background-color secondary-color
RV-Button--small()
+RV-Block__Modifier--name('small')
--size spacing-small
+RV-Element('Icon')
.RV-Image
height calc(var(--size) * 1.8)
RV-Button--medium()
+RV-Block__Modifier--name('medium')
--size spacing-medium * .6
RV-Button--large()
+RV-Block__Modifier--name('large')
--size spacing-large * .5
RV-Button--link()
+RV-Block__Modifier--name('link')
border none
border-radius 0px
color primary-color
&, *
background-color transparent
margin 0
+RV-Element('Icon')
padding-right calc(var(--size) / 4)
padding-left calc(var(--size) / 4)
_RV-Button__Icon--shape()
margin-right calc(var(--size) * 1.2)
&, *
z-index 10
position relative
&:after, &:before
content ''
width 50%
height 110%
z-index 5
background-color inherit
position absolute
RV-Button__Icon--inwardsArrow()
+RV-Element__Modifier--name('inwardsArrow')
_RV-Button__Icon--shape()
.RV-Image
left calc(var(--size) * .5)
&:after
transform rotate(-35deg)
left 70%
top 25%
&:before
transform rotate(35deg)
left 70%
top -35%
RV-Button__Icon--outwardsArrow()
+RV-Element__Modifier--name('outwardsArrow')
_RV-Button__Icon--shape()
margin-right calc(var(--size) * 2)
.RV-Image
left calc(var(--size) * .7)
&:after
transform rotate(35deg)
left 70%
top 25%
&:before
transform rotate(-35deg)
left 70%
top -37%
RV-Button__Icon--forwardSlope()
_RV-Button__Icon--shape()
+RV-Element__Modifier--name('forwardSlope')
margin-right calc(var(--size) * 2)
.RV-Image
left calc(var(--size) * .7)
&:after
transform rotate(-15deg)
top 0%
RV-Button__Icon--backwardSlope()
_RV-Button__Icon--shape()
+RV-Element__Modifier--name('backwardSlope')
margin-right calc(var(--size) * 2)
.RV-Image
left calc(var(--size) * .7)
&:after
transform rotate(15deg)
top -10%
RV-Button__Icon()
+RV-Element--name('Icon')
width min-content
background-color primary-color
padding var(--size)
.RV-Image
height calc(var(--size) * 2.5)
RV-Button__Text()
+RV-Element--name('Text')
font-size calc(var(--size) * 1.65)
background-color secondary-color
padding var(--size)
RV-Button()
background-color #f00
line-height 1
overflow hidden
font-family sans-serif
background-color secondary-color
color accent-color
text-decoration none
RV-Alignment--verticalCenter()
display inline-flex
border-radius 6px
+RV-Block('RV-Button')
RV-CSSParameter({
size: spacing-medium
})
RV-Reset()
RV-Button(height)
+RV-Element()
RV-Button__Icon()
+RV-Element__Modifier()
RV-Button__Icon--outwardsArrow()
+RV-Element__Modifier()
RV-Button__Icon--inwardsArrow()
+RV-Element__Modifier()
RV-Button__Icon--forwardSlope()
+RV-Element__Modifier()
RV-Button__Icon--backwardSlope()
+RV-Element()
RV-Button__Text()
+RV-Block__Modifier()
RV-Button--pill()
+RV-Block__Modifier()
RV-Button--link()
+RV-Block__Modifier()
RV-Button--small()
+RV-Block__Modifier()
RV-Button--medium()
+RV-Block__Modifier()
RV-Button--large()
+RV-Block__Modifier()
RV-Button--border(primary-color)

View File

@ -0,0 +1 @@
{}

View File

@ -0,0 +1,39 @@
<button class="RV-Button RV-Button--large RV-Button--border">
<div class="RV-Button__Icon RV-Button__Icon--outwardsArrow">
<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
</div>
<div class="RV-Button__Text">
Button Text
</div>
</button>
<br>
<br>
<br>
<button class="RV-Button RV-Button--medium RV-Button--link">
<div class="RV-Button__Icon RV-Button__Icon--forwardSlope">
<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
</div>
<div class="RV-Button__Text">
Button Text
</div>
</button>
<br>
<br>
<br>
<button class="RV-Button RV-Button--small RV-Button">
<div class="RV-Button__Icon">
<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
</div>
<div class="RV-Button__Text">
Button Text
</div>
</button>
<br>
<br>
<br>
<button class="RV-Button RV-Button--small RV-Button--border">
<div class="RV-Button__Text">
Button Text
</div>
</button>

View File

@ -1,2 +1,3 @@
@import 'elementList/_elementList'
@import 'overlayButton/_overlayButton' @import 'overlayButton/_overlayButton'
@import 'teaser/_teaser'
//@import 'pagination/_pagination'

View File

@ -1,15 +0,0 @@
RV-ElementList__Item()
@include RV-FlexRow__Item
RV-ElementList(break_width=500px, prefix='&')
RV-FlexRow__Container()
RV-FlexRow__Container--shorthands()
RV-Reset()
list-style-type none
{prefix}__Item
RV-ElementList__Item()
.RV-ElementList
RV-ElementList()

View File

@ -0,0 +1,15 @@
RV-Pagination__Item()
+RV-Element--name('Item')
RV-ElementList__Item()
+RV-Block('RV-Pagination')
max-width 600px
RV-ElementList()
RV-FlexRow--horizontal()
justify-content space-between
overflow hidden
height 2em
+RV-Element('Item')
RV-Pagination__Item()

View File

@ -0,0 +1,3 @@
{
"title": "Pagnination"
}

View File

@ -0,0 +1,77 @@
<ul class="RV-Pagination">
<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--first">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Icon">
</div>
<div class="RV-Button__Text">
First
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--disabled RV-Pagination__Item--previous">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Icon">
</div>
<div class="RV-Button__Text">
Prev
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
1
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
2
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
3
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
4
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--neighbor">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
5
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--next">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
Next
</div>
<div class="RV-Button__Icon">
</div>
</a>
</li>
<li class="RV-Pagination__Item RV-Pagination__Item--other RV-Pagination__Item--last">
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Text">
Last
</div>
<div class="RV-Button__Icon">
</div>
</a>
</li>
</ul>

View File

@ -0,0 +1,47 @@
+RV-Block('RV-Teaser')
RV-CSSParameter({
image-height: 300px,
image-width: 300px,
shadow-color: #6b5690
})
RV-Fan()
RV-BoxShadow()
RV-BoxShadow--drop(--shadow-color)
+RV-Element('Image')
RV-Fan__Base(--image-height, --image-width)
+RV-Element('Preview')
RV-Fan__Surface(--image-height, --image-width)
RV-Spacing__Inner--medium()
RV-FlexRow()
RV-FlexRow--vertical()
+RV-Element('Text')
color text-color
flex 1
RV-ContentCrop()
RV-ContentCrop__Text()
RV-ContentCrop__Text--fade()
.RV-Text
height 100%
+RV-Element('Headline')
font-family sans-serif
color primary-color
justify-self center
+RV-Element('Buttons')
RV-FlexRow__Item()
RV-FlexRow__Item--content()
RV-Spacing__Inner--small()
RV-FlexRow()
RV-FlexRow--horizontal()
padding 0
RV-Fan--fullWidth(--image-height, --image-width)

View File

@ -0,0 +1 @@
{}

View File

@ -0,0 +1,46 @@
<div class="RV-Teaser">
<div class="RV-Teaser__Image">
<div class="RV-ContentCrop">
<img class="RV-Image" src="{{ path '/images/landscape.jpeg' }}"/>
</div>
</div>
<div class="RV-Teaser__Preview">
<div class="RV-Teaser__Headline">
<h2>This is a headline for a teaser it is indeed dear reader</h2>
</div>
<div class="RV-Teaser__Text">
<div class="RV-Text">
Qui sequi et et nostrum esse quae. Quasi voluptas aut adipisci ad quo at. Reiciendis sed vitae vero eaque aliquid ea dolorem. Qui consequatur temporibus quod eius natus ut et. Qui at necessitatibus incidunt et pariatur rem vel. Consequatur voluptas saepe odit voluptate magni possimus iure.
Qui sequi et et nostrum esse quae. Quasi voluptas aut adipisci ad quo at. Reiciendis sed vitae vero eaque aliquid ea dolorem. Qui consequatur temporibus quod eius natus ut et. Qui at necessitatibus incidunt et pariatur rem vel. Consequatur voluptas saepe odit voluptate magni possimus iure.
</div>
</div>
<div class="RV-Teaser__Buttons">
<a href="#"class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Icon">
<img class="RV-Image" src="{{path '/icons/plus.svg'}}"/>
</div>
<div class="RV-Button__Text">
More
</div>
</a>
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Icon">
<img class="RV-Image" src="{{path '/icons/favourite.svg'}}"/>
</div>
<div class="RV-Button__Text">
Favorite
</div>
</a>
<a href="#" class="RV-Button RV-Button--small RV-Button--link">
<div class="RV-Button__Icon">
<img class="RV-Image" src="{{path '/icons/information.svg'}}"/>
</div>
<div class="RV-Button__Text">
Details
</div>
</a>
</div>
</div>
</div>

View File

@ -1,8 +1,11 @@
@import '00_Tools/_tools' @import '00_Tools/_tools'
@import '01_Layouts/_layouts' @import '01_Layouts/_layouts'
@import '02_Styles/_styles' @import '02_Styles/_styles'
//@import '03_Atoms/_atoms' @import '03_Atoms/_atoms'
//@import '04_Molecules/_molecules' @import '04_Molecules/_molecules'
@import '00_ContentShape/_contentShape'
//@import '05_Organisms/_organisms' //@import '05_Organisms/_organisms'

View File

@ -41,6 +41,8 @@
</style> </style>
</head> </head>
<body> <body>
<div class="RV-Spacing__Outer--large">
{{{ yield }}} {{{ yield }}}
</div>
</body> </body>
</html> </html>

9
components/colors.styl Normal file
View File

@ -0,0 +1,9 @@
primary-color = #457B9D
secondary-color = #AAC7DA
text-color = #1F271B
accent-color = #FBD974
striking-color = #ED6A5A
background-color = #FFFFFA
text-emphasize-color = primary-color
text-emphasize-interaction-color = accent-color

View File

@ -4,4 +4,5 @@ spacing-small = 10px
spacing-medium = 25px spacing-medium = 25px
spacing-large = 35px spacing-large = 35px
@import './colors'
@import './_components' @import './_components'

44
public/icons/cancel.svg Normal file
View File

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
<g>
<path d="M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717
L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859
c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287
l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285
L284.286,256.002z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/icons/debug.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/icons/error.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -0,0 +1 @@
<svg id="Capa_1" enable-background="new 0 0 512.07 512.07" height="512" viewBox="0 0 512.07 512.07" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m509.759 194.639c-6.152-18.858-22.945-31.043-42.781-31.043h-127.918l-40.282-122.33c-6.192-18.805-22.95-30.926-42.729-30.926-.063 0-.128 0-.191.001-19.86.078-36.611 12.349-42.674 31.262l-39.108 121.993h-128.983c-19.886 0-36.692 12.226-42.814 31.146-6.123 18.92.335 38.674 16.453 50.324l104.361 75.434-40.17 121.991c-6.217 18.88.133 38.662 16.177 50.396 8.058 5.894 17.307 8.842 26.562 8.842 9.171-.001 18.347-2.897 26.365-8.693l104.542-75.563 103.3 75.436c16.026 11.704 36.781 11.76 52.873.147s22.575-31.328 16.518-50.227l-39.218-122.329 103.474-75.563c16.02-11.698 22.396-31.441 16.243-50.298zm-33.935 26.07-120.959 88.332 45.825 142.946c3.085 9.621-3.435 15.247-5.506 16.742s-9.465 5.91-17.625-.05l-120.901-88.289-122.206 88.333c-8.201 5.927-15.576 1.461-17.642-.05-2.065-1.511-8.558-7.187-5.392-16.8l47.033-142.833-122.145-88.287c-8.206-5.932-6.272-14.34-5.484-16.775s4.146-10.382 14.271-10.382h150.87l45.79-142.835c3.087-9.629 11.668-10.41 14.225-10.421h.052c2.62 0 11.113.769 14.255 10.309l47.07 142.947h149.624c10.1 0 13.469 7.92 14.261 10.348s2.74 10.81-5.416 16.765z"/></g></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

1
public/icons/flag.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m512 165v-15h-166v-30c0-33.084-26.916-60-60-60h-196v-60h-90v512h90v-150h136v30c0 33.084 26.916 60 60 60h226v-15c0-37.162-8.647-56.762-16.276-74.055-7.365-16.691-13.724-31.107-13.724-61.945s6.359-45.254 13.724-61.945c7.629-17.293 16.276-36.893 16.276-74.055zm-452 317h-30v-452h30zm30-392h196c16.542 0 30 13.458 30 30v220.072c-8.833-5.123-19.075-8.072-30-8.072h-196zm166 302v-30h30c16.542 0 30 13.458 30 30s-13.458 30-30 30-30-13.458-30-30zm212.276-16.945c6.054 13.723 11.43 25.908 13.15 46.945h-143.498c5.123-8.833 8.072-19.075 8.072-30v-212h135.427c-1.721 21.037-7.097 33.223-13.15 46.945-7.63 17.293-16.277 36.893-16.277 74.055s8.647 56.762 16.276 74.055z"/></g></svg>

After

Width:  |  Height:  |  Size: 816 B

View File

@ -0,0 +1 @@
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"><path d="M 3 7 A 1.0001 1.0001 0 1 0 3 9 L 27 9 A 1.0001 1.0001 0 1 0 27 7 L 3 7 z M 3 14 A 1.0001 1.0001 0 1 0 3 16 L 27 16 A 1.0001 1.0001 0 1 0 27 14 L 3 14 z M 3 21 A 1.0001 1.0001 0 1 0 3 23 L 27 23 A 1.0001 1.0001 0 1 0 27 21 L 3 21 z"/></svg>

After

Width:  |  Height:  |  Size: 351 B

View File

@ -0,0 +1 @@
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 25 2 C 12.309295 2 2 12.309295 2 25 C 2 37.690705 12.309295 48 25 48 C 37.690705 48 48 37.690705 48 25 C 48 12.309295 37.690705 2 25 2 z M 25 4 C 36.609824 4 46 13.390176 46 25 C 46 36.609824 36.609824 46 25 46 C 13.390176 46 4 36.609824 4 25 C 4 13.390176 13.390176 4 25 4 z M 25 11 A 3 3 0 0 0 22 14 A 3 3 0 0 0 25 17 A 3 3 0 0 0 28 14 A 3 3 0 0 0 25 11 z M 21 21 L 21 23 L 22 23 L 23 23 L 23 36 L 22 36 L 21 36 L 21 38 L 22 38 L 23 38 L 27 38 L 28 38 L 29 38 L 29 36 L 28 36 L 27 36 L 27 21 L 26 21 L 22 21 L 21 21 z"/></svg>

After

Width:  |  Height:  |  Size: 641 B

View File

@ -0,0 +1 @@
<svg id="Capa_1" enable-background="new 0 0 511 511" height="512" viewBox="0 0 511 511" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m255.5 59c-91.533 0-166 74.468-166 166s74.467 166 166 166 166-74.468 166-166-74.467-166-166-166zm0 302c-74.991 0-136-61.01-136-136s61.009-136 136-136 136 61.01 136 136-61.009 136-136 136z"/><path d="m415.306 66.193c-42.685-42.685-99.439-66.193-159.806-66.193s-117.121 23.508-159.806 66.193c-42.686 42.687-66.194 99.44-66.194 159.807 0 106.499 74.454 198.443 177.887 220.849l48.113 64.151 48.114-64.152c103.432-22.406 177.886-114.349 177.886-220.848 0-60.367-23.508-117.12-66.194-159.807zm-123.064 352.355-5.716 1.083-31.026 41.369-31.026-41.368-5.716-1.083c-92.28-17.495-159.258-98.474-159.258-192.549 0-108.075 87.925-196 196-196s196 87.925 196 196c0 94.074-66.978 175.053-159.258 192.548z"/></g></svg>

After

Width:  |  Height:  |  Size: 850 B

1
public/icons/message.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:#231f20;}</style></defs><title>Wondicon - UI (Free)</title><path class="cls-1" d="M125,177.86a5,5,0,0,1-4.74-3.42L96,101.76,27.64,77.57a5,5,0,0,1,.2-9.49L169.22,24.53a5,5,0,0,1,6.23,6.3L129.76,174.37a5,5,0,0,1-4.73,3.49ZM45.23,73.19l56.44,20a5,5,0,0,1,3.07,3.13l20.15,60.44L163,36.9Z"/><path class="cls-1" d="M100,102.84a4.94,4.94,0,0,1-3.59-1.52,5,5,0,0,1,.11-7.07L131.86,60a5,5,0,0,1,7,7.18l-35.35,34.26A5,5,0,0,1,100,102.84Z"/><path class="cls-1" d="M75,175.69a5,5,0,0,1-3.19-8.85l25-20.69a5,5,0,0,1,6.38,7.7l-25,20.69A5,5,0,0,1,75,175.69Z"/><path class="cls-1" d="M29.31,175.69a5,5,0,0,1-3.53-8.54l45.68-45.69a5,5,0,0,1,7.08,7.08L32.85,174.22A5,5,0,0,1,29.31,175.69Z"/><path class="cls-1" d="M29.31,130a5,5,0,0,1-3.85-8.19l20.69-25a5,5,0,0,1,7.7,6.38l-20.69,25A5,5,0,0,1,29.31,130Z"/></svg>

After

Width:  |  Height:  |  Size: 914 B

8
public/icons/plus.svg Normal file
View File

@ -0,0 +1,8 @@
<svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
xml:space="preserve">
<g>
<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 488 B

View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
sodipodi:docname="facebook.svg"
xml:space="preserve"
style="enable-background:new 0 0 96.227 96.227;"
viewBox="0 0 96.227 96.227"
height="96.227px"
width="96.227px"
y="0px"
x="0px"
id="Capa_1"
version="1.1"><metadata
id="metadata1183"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs1181" /><sodipodi:namedview
inkscape:current-layer="Capa_1"
inkscape:window-maximized="1"
inkscape:window-y="0"
inkscape:window-x="0"
inkscape:cy="48.113499"
inkscape:cx="48.113499"
inkscape:zoom="8.511125"
showgrid="false"
id="namedview1179"
inkscape:window-height="1016"
inkscape:window-width="1920"
inkscape:pageshadow="2"
inkscape:pageopacity="0"
guidetolerance="10"
gridtolerance="10"
objecttolerance="10"
borderopacity="1"
bordercolor="#666666"
pagecolor="#ffffff" />
<g
style="fill:#f9f9f9;fill-opacity:1"
id="g1176">
<path
style="fill:#f9f9f9;fill-opacity:1"
id="path1174"
d="m 73.099,15.973 -9.058,0.004 c -7.102,0 -8.477,3.375 -8.477,8.328 V 35.226 H 72.502 L 72.496,52.332 H 55.564 V 96.227 H 37.897 V 52.332 H 23.127 V 35.226 h 14.77 V 22.612 C 37.897,7.972 46.84,0 59.9,0 l 13.2,0.021 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
sodipodi:docname="instagram.svg"
xml:space="preserve"
style="enable-background:new 0 0 97.395 97.395;"
viewBox="0 0 97.395 97.395"
height="97.395px"
width="97.395px"
y="0px"
x="0px"
id="Capa_1"
version="1.1"><metadata
id="metadata1237"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs1235" /><sodipodi:namedview
inkscape:current-layer="Capa_1"
inkscape:window-maximized="1"
inkscape:window-y="0"
inkscape:window-x="0"
inkscape:cy="48.697498"
inkscape:cx="48.697498"
inkscape:zoom="8.4090562"
showgrid="false"
id="namedview1233"
inkscape:window-height="1016"
inkscape:window-width="1920"
inkscape:pageshadow="2"
inkscape:pageopacity="0"
guidetolerance="10"
gridtolerance="10"
objecttolerance="10"
borderopacity="1"
bordercolor="#666666"
pagecolor="#ffffff" />
<g
style="fill:#f9f9f9;fill-opacity:1"
id="g1230">
<path
style="fill:#f9f9f9;fill-opacity:1"
id="path1228"
d="m 12.501,0 h 72.393 c 6.875,0 12.5,5.09 12.5,12.5 v 72.395 c 0,7.41 -5.625,12.5 -12.5,12.5 H 12.501 C 5.624,97.395 0,92.305 0,84.895 V 12.5 C 0,5.09 5.624,0 12.501,0 Z m 58.447,10.821 c -2.412,0 -4.383,1.972 -4.383,4.385 v 10.495 c 0,2.412 1.971,4.385 4.383,4.385 h 11.008 c 2.412,0 4.385,-1.973 4.385,-4.385 V 15.206 c 0,-2.413 -1.973,-4.385 -4.385,-4.385 z m 15.439,30.367 h -8.572 c 0.811,2.648 1.25,5.453 1.25,8.355 0,16.2 -13.556,29.332 -30.275,29.332 -16.718,0 -30.272,-13.132 -30.272,-29.332 0,-2.904 0.438,-5.708 1.25,-8.355 h -8.945 v 41.141 c 0,2.129 1.742,3.872 3.872,3.872 h 67.822 c 2.13,0 3.872,-1.742 3.872,-3.872 V 41.188 Z M 48.789,29.533 c -10.802,0 -19.56,8.485 -19.56,18.953 0,10.468 8.758,18.953 19.56,18.953 10.803,0 19.562,-8.485 19.562,-18.953 0,-10.468 -8.758,-18.953 -19.562,-18.953 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1,62 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
sodipodi:docname="mastodon.svg"
xml:space="preserve"
style="enable-background:new 0 0 97.637 97.637;"
viewBox="0 0 417.8 512"
height="97.637px"
width="97.637px"
y="0px"
x="0px"
id="Capa_1"
version="1.1"><metadata
id="metadata1099"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs1097"><filter
height="1.0046383"
y="-0.0023191661"
width="1.0049733"
x="-0.0024866723"
id="filter1101"
style="color-interpolation-filters:sRGB"
inkscape:collect="always"><feGaussianBlur
id="feGaussianBlur1103"
stdDeviation="0.43298031"
inkscape:collect="always" /></filter></defs><sodipodi:namedview
inkscape:current-layer="Capa_1"
inkscape:window-maximized="1"
inkscape:window-y="0"
inkscape:window-x="0"
inkscape:cy="48.818501"
inkscape:cx="48.818501"
inkscape:zoom="8.3882134"
showgrid="false"
id="namedview1095"
inkscape:window-height="1016"
inkscape:window-width="1920"
inkscape:pageshadow="2"
inkscape:pageopacity="0"
guidetolerance="10"
gridtolerance="10"
objecttolerance="10"
borderopacity="1"
bordercolor="#666666"
pagecolor="#ffffff" />
<g
style="opacity:0.992;fill:#f9f9f9;fill-opacity:1;filter:url(#filter1101)"
id="g1092">
<path
style="fill:#f9f9f9;fill-opacity:1"
id="path1090"
d="M 417.8,179.1 C 417.8,81.9 354.1,53.4 354.1,53.4 291.6,24.7 125.6,25 63.7,53.4 63.7,53.4 0,81.9 0,179.1 c 0,115.7 -6.6,259.4 105.6,289.1 40.5,10.7 75.3,13 103.3,11.4 50.8,-2.8 79.3,-18.1 79.3,-18.1 l -1.7,-36.9 c 0,0 -36.3,11.4 -77.1,10.1 -40.4,-1.4 -83,-4.4 -89.6,-54 -0.6,-4.4 -0.9,-9 -0.9,-13.9 85.6,20.9 158.6,9.1 178.7,6.7 56.1,-6.7 105,-41.3 111.2,-72.9 9.8,-49.8 9,-121.5 9,-121.5 z M 342.7,304.3 H 296.1 V 190.1 c 0,-49.7 -64,-51.6 -64,6.9 v 62.5 H 185.8 V 197 c 0,-58.5 -64,-56.6 -64,-6.9 V 304.3 H 75.1 c 0,-122.1 -5.2,-147.9 18.4,-175 25.9,-28.9 79.8,-30.8 103.8,6.1 l 11.6,19.5 11.6,-19.5 c 24.1,-37.1 78.1,-34.8 103.8,-6.1 23.7,27.3 18.4,53 18.4,175 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
sodipodi:docname="twitter.svg"
xml:space="preserve"
style="enable-background:new 0 0 97.637 97.637;"
viewBox="0 0 97.637 97.637"
height="97.637px"
width="97.637px"
y="0px"
x="0px"
id="Capa_1"
version="1.1"><metadata
id="metadata889"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs887" /><sodipodi:namedview
inkscape:current-layer="Capa_1"
inkscape:window-maximized="1"
inkscape:window-y="0"
inkscape:window-x="0"
inkscape:cy="48.818501"
inkscape:cx="48.818501"
inkscape:zoom="8.3882134"
showgrid="false"
id="namedview885"
inkscape:window-height="1016"
inkscape:window-width="1920"
inkscape:pageshadow="2"
inkscape:pageopacity="0"
guidetolerance="10"
gridtolerance="10"
objecttolerance="10"
borderopacity="1"
bordercolor="#666666"
pagecolor="#ffffff" />
<g
style="opacity:0.995;fill:#f9f9f9;fill-opacity:1"
id="g882">
<path
style="fill:#f9f9f9;fill-opacity:1"
id="path880"
d="m 97.523,18.526 c -0.14,-0.165 -0.371,-0.221 -0.568,-0.131 -2.919,1.295 -5.99,2.226 -9.153,2.776 3.358,-2.526 5.86,-6.024 7.143,-10.035 0.062,-0.192 -0.002,-0.402 -0.159,-0.527 -0.158,-0.125 -0.377,-0.141 -0.55,-0.038 -3.782,2.243 -7.878,3.824 -12.18,4.701 -3.812,-3.956 -9.135,-6.219 -14.644,-6.219 -11.204,0 -20.318,9.114 -20.318,20.317 0,1.355 0.131,2.697 0.391,4 C 31.967,32.412 17.457,24.962 7.591,12.861 7.49,12.737 7.337,12.668 7.177,12.684 c -0.159,0.012 -0.301,0.102 -0.381,0.239 -1.8,3.088 -2.751,6.621 -2.751,10.215 0,6.229 2.83,12.053 7.649,15.896 C 9.213,38.736 6.79,37.955 4.605,36.742 4.458,36.659 4.275,36.66 4.128,36.745 c -0.147,0.084 -0.24,0.24 -0.244,0.41 l -0.002,0.26 c 0,8.946 5.895,16.801 14.282,19.409 -2.209,0.356 -4.501,0.332 -6.754,-0.098 -0.166,-0.031 -0.34,0.026 -0.454,0.154 -0.113,0.128 -0.151,0.307 -0.099,0.469 2.515,7.85 9.503,13.355 17.637,14.041 -6.785,4.971 -14.805,7.59 -23.279,7.59 -1.561,0 -3.133,-0.093 -4.673,-0.274 -0.22,-0.025 -0.438,0.106 -0.514,0.317 -0.076,0.213 0.005,0.451 0.195,0.572 9.17,5.881 19.773,8.988 30.664,8.988 35.625,0 56.913,-28.938 56.913,-56.914 0,-0.779 -0.015,-1.554 -0.046,-2.327 3.843,-2.811 7.142,-6.252 9.802,-10.235 0.119,-0.178 0.106,-0.415 -0.033,-0.581 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
sodipodi:docname="vimeo.svg"
xml:space="preserve"
style="enable-background:new 0 0 97.097 97.096;"
viewBox="0 0 97.097 97.096"
height="97.096px"
width="97.097px"
y="0px"
x="0px"
id="Capa_1"
version="1.1"><metadata
id="metadata877"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs875" /><sodipodi:namedview
inkscape:current-layer="Capa_1"
inkscape:window-maximized="1"
inkscape:window-y="0"
inkscape:window-x="0"
inkscape:cy="48.548"
inkscape:cx="48.5485"
inkscape:zoom="8.4349509"
showgrid="false"
id="namedview873"
inkscape:window-height="1016"
inkscape:window-width="1920"
inkscape:pageshadow="2"
inkscape:pageopacity="0"
guidetolerance="10"
gridtolerance="10"
objecttolerance="10"
borderopacity="1"
bordercolor="#666666"
pagecolor="#ffffff" />
<g
style="fill:#f9f9f9;fill-opacity:1"
id="g870">
<path
style="fill:#f9f9f9;fill-opacity:1"
id="path868"
d="M 97.05,25.977 C 96.619,35.43 90.012,48.378 77.244,64.811 64.046,81.975 52.876,90.56 43.734,90.56 38.079,90.56 33.29,85.334 29.377,74.876 26.764,65.291 24.15,55.715 21.539,46.13 18.637,35.678 15.522,30.447 12.187,30.447 c -0.724,0 -3.27,1.531 -7.622,4.577 L 0,29.136 c 4.788,-4.208 9.517,-8.422 14.167,-12.643 6.394,-5.52 11.19,-8.429 14.391,-8.722 7.557,-0.725 12.208,4.446 13.954,15.502 1.886,11.938 3.191,19.361 3.922,22.264 2.176,9.902 4.576,14.849 7.19,14.849 2.034,0 5.091,-3.216 9.159,-9.634 4.065,-6.427 6.244,-11.315 6.537,-14.667 0.58,-5.545 -1.6,-8.324 -6.537,-8.324 -2.328,0 -4.727,0.531 -7.188,1.592 4.77,-15.632 13.887,-23.229 27.348,-22.8 9.98,0.294 14.68,6.769 14.107,19.424 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
sodipodi:docname="vkontakte.svg"
xml:space="preserve"
style="enable-background:new 0 0 96.496 96.496;"
viewBox="0 0 96.496 96.496"
height="96.496px"
width="96.496px"
y="0px"
x="0px"
id="Capa_1"
version="1.1"><metadata
id="metadata937"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs935" /><sodipodi:namedview
inkscape:current-layer="Capa_1"
inkscape:window-maximized="1"
inkscape:window-y="0"
inkscape:window-x="0"
inkscape:cy="48.248001"
inkscape:cx="48.248001"
inkscape:zoom="8.4873982"
showgrid="false"
id="namedview933"
inkscape:window-height="1016"
inkscape:window-width="1920"
inkscape:pageshadow="2"
inkscape:pageopacity="0"
guidetolerance="10"
gridtolerance="10"
objecttolerance="10"
borderopacity="1"
bordercolor="#666666"
pagecolor="#ffffff" />
<g
style="fill:#f9f9f9;fill-opacity:1"
id="g930">
<path
style="fill:#f9f9f9;fill-opacity:1"
id="path928"
d="m 92.499,65.178 c -2.873,-3.446 -6.254,-6.387 -9.453,-9.51 -2.886,-2.815 -3.068,-4.448 -0.748,-7.697 2.532,-3.546 5.255,-6.956 7.81,-10.486 2.385,-3.299 4.823,-6.589 6.078,-10.539 0.796,-2.513 0.092,-3.623 -2.485,-4.063 -0.444,-0.077 -0.903,-0.081 -1.355,-0.081 L 77.057,22.784 c -1.883,-0.028 -2.924,0.793 -3.59,2.462 -0.899,2.256 -1.826,4.51 -2.897,6.687 -2.43,4.936 -5.144,9.707 -8.949,13.747 -0.839,0.891 -1.767,2.017 -3.169,1.553 -1.754,-0.64 -2.271,-3.53 -2.242,-4.507 L 56.195,25.079 c -0.34,-2.521 -0.899,-3.645 -3.402,-4.135 l -15.882,0.003 c -2.12,0 -3.183,0.819 -4.315,2.145 -0.653,0.766 -0.85,1.263 0.492,1.517 2.636,0.5 4.121,2.206 4.515,4.849 0.632,4.223 0.588,8.463 0.224,12.703 -0.107,1.238 -0.32,2.473 -0.811,3.629 -0.768,1.817 -2.008,2.187 -3.637,1.069 -1.475,-1.012 -2.511,-2.44 -3.525,-3.874 C 26.045,37.603 23.006,31.799 20.528,25.7 19.812,23.938 18.577,22.87 16.71,22.841 12.123,22.768 7.535,22.756 2.948,22.845 c -2.76,0.052 -3.583,1.392 -2.459,3.894 4.996,11.113 10.557,21.917 17.816,31.759 3.727,5.051 8.006,9.51 13.534,12.67 6.265,3.582 13.009,4.66 20.112,4.328 3.326,-0.156 4.325,-1.021 4.479,-4.336 0.104,-2.268 0.361,-4.523 1.48,-6.561 1.098,-2 2.761,-2.381 4.678,-1.137 0.959,0.623 1.767,1.416 2.53,2.252 1.872,2.048 3.677,4.158 5.62,6.137 2.437,2.48 5.324,3.945 8.954,3.646 L 93.744,75.5 c 2.264,-0.148 3.438,-2.924 2.138,-5.451 -0.913,-1.77 -2.111,-3.346 -3.383,-4.871 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
sodipodi:docname="wordpress.svg"
xml:space="preserve"
style="enable-background:new 0 0 96.24 96.24;"
viewBox="0 0 96.24 96.24"
height="96.24px"
width="96.24px"
y="0px"
x="0px"
id="Capa_1"
version="1.1"><metadata
id="metadata1045"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs1043" /><sodipodi:namedview
inkscape:current-layer="Capa_1"
inkscape:window-maximized="1"
inkscape:window-y="0"
inkscape:window-x="0"
inkscape:cy="48.119999"
inkscape:cx="48.119999"
inkscape:zoom="8.5099753"
showgrid="false"
id="namedview1041"
inkscape:window-height="1016"
inkscape:window-width="1920"
inkscape:pageshadow="2"
inkscape:pageopacity="0"
guidetolerance="10"
gridtolerance="10"
objecttolerance="10"
borderopacity="1"
bordercolor="#666666"
pagecolor="#ffffff" />
<g
style="fill:#f9f9f9;fill-opacity:1"
id="g1038">
<path
style="fill:#f9f9f9;fill-opacity:1"
id="path1036"
d="M 48.122,0 C 21.587,0 0.001,21.585 0.001,48.118 c 0,26.535 21.587,48.122 48.12,48.122 26.532,0 48.117,-21.587 48.117,-48.122 C 96.239,21.586 74.654,0 48.122,0 Z M 4.857,48.118 c 0,-6.271 1.345,-12.227 3.746,-17.606 L 29.241,87.056 C 14.81,80.042 4.857,65.243 4.857,48.118 Z m 43.265,43.267 c -4.247,0 -8.346,-0.623 -12.222,-1.763 L 48.88,51.903 62.181,88.336 c 0.086,0.215 0.191,0.411 0.308,0.596 -4.497,1.582 -9.329,2.453 -14.367,2.453 z m 5.961,-63.551 c 2.604,-0.137 4.953,-0.412 4.953,-0.412 2.33,-0.276 2.057,-3.701 -0.277,-3.564 0,0 -7.007,0.549 -11.532,0.549 -4.25,0 -11.396,-0.549 -11.396,-0.549 -2.332,-0.137 -2.604,3.427 -0.273,3.564 0,0 2.208,0.275 4.537,0.412 l 6.74,18.469 -9.468,28.395 -15.752,-46.863 c 2.608,-0.136 4.952,-0.412 4.952,-0.412 2.33,-0.275 2.055,-3.702 -0.278,-3.562 0,0 -7.004,0.549 -11.53,0.549 -0.813,0 -1.77,-0.021 -2.784,-0.052 7.734,-11.747 21.033,-19.502 36.147,-19.502 11.265,0 21.519,4.306 29.215,11.357 -0.187,-0.01 -0.368,-0.035 -0.562,-0.035 -4.248,0 -7.264,3.702 -7.264,7.679 0,3.564 2.055,6.582 4.248,10.146 1.647,2.882 3.567,6.585 3.567,11.932 0,3.704 -1.422,8 -3.293,13.986 L 69.718,74.342 Z M 69.871,85.516 83.086,47.308 c 2.471,-6.171 3.29,-11.106 3.29,-15.497 0,-1.591 -0.104,-3.07 -0.292,-4.449 3.38,6.163 5.303,13.236 5.301,20.758 -0.001,15.96 -8.653,29.896 -21.514,37.396 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -0,0 +1,52 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
sodipodi:docname="youtube.svg"
xml:space="preserve"
style="enable-background:new 0 0 96.875 96.875;"
viewBox="0 0 96.875 96.875"
height="96.875px"
width="96.875px"
y="0px"
x="0px"
id="Capa_1"
version="1.1"><metadata
id="metadata991"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs989" /><sodipodi:namedview
inkscape:current-layer="Capa_1"
inkscape:window-maximized="1"
inkscape:window-y="0"
inkscape:window-x="0"
inkscape:cy="48.4375"
inkscape:cx="48.4375"
inkscape:zoom="8.4541935"
showgrid="false"
id="namedview987"
inkscape:window-height="1016"
inkscape:window-width="1920"
inkscape:pageshadow="2"
inkscape:pageopacity="0"
guidetolerance="10"
gridtolerance="10"
objecttolerance="10"
borderopacity="1"
bordercolor="#666666"
pagecolor="#ffffff" />
<g
style="fill:#f9f9f9;fill-opacity:1"
id="g984">
<path
style="fill:#f9f9f9;fill-opacity:1"
id="path982"
d="M 95.201,25.538 C 94.015,20.386 89.801,16.585 84.728,16.018 72.715,14.677 60.556,14.67 48.453,14.677 36.348,14.67 24.187,14.677 12.174,16.018 7.104,16.585 2.893,20.386 1.707,25.538 0.019,32.875 0,40.884 0,48.438 0,55.992 0,64 1.688,71.336 c 1.184,5.151 5.396,8.952 10.469,9.52 12.012,1.342 24.172,1.349 36.277,1.342 12.107,0.007 24.264,0 36.275,-1.342 5.07,-0.567 9.285,-4.368 10.471,-9.52 1.689,-7.337 1.695,-15.345 1.695,-22.898 0,-7.554 0.014,-15.563 -1.674,-22.9 z M 35.936,63.474 c 0,-10.716 0,-21.32 0,-32.037 10.267,5.357 20.466,10.678 30.798,16.068 -10.3,5.342 -20.504,10.631 -30.798,15.969 z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

3
public/icons/success.svg Normal file
View File

@ -0,0 +1,3 @@
<?xml version="1.0" ?><svg style="enable-background:new 0 0 24 24;" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
.st0{display:none;}
</style><g class="st0" id="grid"/><g id="icon"><path d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M12,23C5.935,23,1,18.065,1,12S5.935,1,12,1 s11,4.935,11,11S18.065,23,12,23z"/><path d="M16.801,8.403l-6.132,6.133L7.753,11.62c-0.195-0.195-0.512-0.195-0.707,0s-0.195,0.512,0,0.707l3.27,3.27 c0.094,0.094,0.221,0.146,0.354,0.146s0.26-0.053,0.354-0.146l6.485-6.486c0.195-0.195,0.195-0.512,0-0.707 S16.997,8.208,16.801,8.403z"/></g></svg>

After

Width:  |  Height:  |  Size: 717 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

File diff suppressed because it is too large Load Diff

17
revelogo.svg Normal file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" standalone="no"?>
<svg width="250" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke="white" fill="none" stroke-width="20px">
<rect width="250" height="250" fill="#1c7fdb"/>
<path d="
M 30 40
L 70 40
A 50 50, 0 0, 1 70 140
L 30 140
M 40 140
L 40 155
M 37 148
L 110 215
L 220 40
"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 360 B