Horhik/personal-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add blog page

Browse source
This commit is contained in:
horhik 2020-05-25 11:57:36 +03:00
parent d602ed7490
commit 1d5b7d3519
10 changed files with 292 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

165
.idea/workspace.xml
View file

@ -11,17 +11,16 @@
</component>
<component name="ChangeListManager">
<list default="true" id="4b1db503-490b-4f06-812d-6b9b94d2764a" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/public/app-page.svg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/css/elements/blog-post-preview.scss" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/svg/stopwatch.svg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/svg/watch.svg" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/public/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/public/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/public/logo192.png" beforeDir="false" afterPath="$PROJECT_DIR$/public/logo192.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/navigation/page-links.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/navigation/page-links.jsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/pages/portfolio.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/portfolio.jsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/constants/routes.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/constants/routes.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/css/elements/portfolio-project.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/elements/portfolio-project.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/svg/app-page.svg" beforeDir="false" afterPath="$PROJECT_DIR$/src/svg/app-page.svg" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/pages/blog.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/blog.jsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/css/basic.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/css/basic.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/img/░█░█░░░░█▀▄ ░█▀█░░░░█░█ ░▀░▀░▀░░▀▀░.png" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/reducers/site-content-reducer.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/reducers/site-content-reducer.js" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -85,7 +84,7 @@
<workItem from="1589583447607" duration="5148000" />
<workItem from="1590125952856" duration="14140000" />
<workItem from="1590359928462" duration="4688000" />
<workItem from="1590372993882" duration="13297000" />
<workItem from="1590372993882" duration="18882000" />
</task>
<servers />
</component>
@ -144,10 +143,150 @@
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="391" y="182" key="SettingsEditor/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590389869850" />
<state x="568" y="130" width="774" height="774" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser" timestamp="1590390024291">
<state x="538" y="-170" width="774" height="774" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser" timestamp="1590396787684">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="568" y="130" width="774" height="774" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590390024291" />
<state x="538" y="-170" width="774" height="774" key="com.intellij.openapi.editor.actions.MultiplePasteAction$ClipboardContentChooser/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590396787684" />
<state x="1710" y="11" width="99" height="1060" key="dock-window-1" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1710" y="11" width="99" height="1060" key="dock-window-1/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="934" y="11" width="58" height="1060" key="dock-window-10" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="934" y="11" width="58" height="1060" key="dock-window-10/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1252" y="11" width="48" height="1060" key="dock-window-11" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1252" y="11" width="48" height="1060" key="dock-window-11/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1124" y="11" width="72" height="1060" key="dock-window-12" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1124" y="11" width="72" height="1060" key="dock-window-12/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1604" y="11" width="307" height="1060" key="dock-window-13" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1604" y="11" width="307" height="1060" key="dock-window-13/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1650" y="11" width="261" height="1060" key="dock-window-14" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1650" y="11" width="261" height="1060" key="dock-window-14/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1343" y="11" width="75" height="1060" key="dock-window-15" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1343" y="11" width="75" height="1060" key="dock-window-15/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1402" y="11" width="79" height="1060" key="dock-window-16" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1402" y="11" width="79" height="1060" key="dock-window-16/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1594" y="11" width="47" height="1060" key="dock-window-17" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1594" y="11" width="47" height="1060" key="dock-window-17/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1469" y="11" width="83" height="1060" key="dock-window-18" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1469" y="11" width="83" height="1060" key="dock-window-18/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1540" y="11" width="88" height="1060" key="dock-window-19" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1540" y="11" width="88" height="1060" key="dock-window-19/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1811" y="11" width="100" height="1060" key="dock-window-2" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1811" y="11" width="100" height="1060" key="dock-window-2/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="112" y="11" width="46" height="1060" key="dock-window-20" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="112" y="11" width="46" height="1060" key="dock-window-20/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1284" y="11" width="627" height="1060" key="dock-window-21" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1284" y="11" width="627" height="1060" key="dock-window-21/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1124" y="11" width="152" height="1060" key="dock-window-22" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1124" y="11" width="152" height="1060" key="dock-window-22/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1444" y="11" width="467" height="1060" key="dock-window-23" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1444" y="11" width="467" height="1060" key="dock-window-23/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="874" y="11" width="167" height="1060" key="dock-window-24" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="874" y="11" width="167" height="1060" key="dock-window-24/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="964" y="11" width="184" height="1060" key="dock-window-25" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="964" y="11" width="184" height="1060" key="dock-window-25/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1540" y="11" width="371" height="1060" key="dock-window-26" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1540" y="11" width="371" height="1060" key="dock-window-26/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1284" y="11" width="120" height="1060" key="dock-window-27" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1284" y="11" width="120" height="1060" key="dock-window-27/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1072" y="11" width="205" height="1060" key="dock-window-28" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1072" y="11" width="205" height="1060" key="dock-window-28/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1204" y="11" width="232" height="1060" key="dock-window-29" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1204" y="11" width="232" height="1060" key="dock-window-29/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1621" y="11" width="93" height="1060" key="dock-window-3" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1621" y="11" width="93" height="1060" key="dock-window-3/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="904" y="11" width="52" height="1060" key="dock-window-30" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="904" y="11" width="52" height="1060" key="dock-window-30/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1001" y="11" width="63" height="1060" key="dock-window-31" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1001" y="11" width="63" height="1060" key="dock-window-31/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1036" y="11" width="66" height="1060" key="dock-window-32" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1036" y="11" width="66" height="1060" key="dock-window-32/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1077" y="11" width="69" height="1060" key="dock-window-33" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1077" y="11" width="69" height="1060" key="dock-window-33/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="958" y="11" width="61" height="1060" key="dock-window-34" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="958" y="11" width="61" height="1060" key="dock-window-34/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="769" y="11" width="47" height="1060" key="dock-window-35" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="769" y="11" width="47" height="1060" key="dock-window-35/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="964" y="11" width="947" height="1060" key="dock-window-4" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="964" y="11" width="947" height="1060" key="dock-window-4/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1184" y="11" width="140" height="1060" key="dock-window-5" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1184" y="11" width="140" height="1060" key="dock-window-5/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1239" y="11" width="129" height="1060" key="dock-window-6" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1239" y="11" width="129" height="1060" key="dock-window-6/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="1204" y="11" width="112" height="1060" key="dock-window-7" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="1204" y="11" width="112" height="1060" key="dock-window-7/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="870" y="11" width="54" height="1060" key="dock-window-8" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="870" y="11" width="54" height="1060" key="dock-window-8/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="900" y="11" width="56" height="1060" key="dock-window-9" timestamp="1590395037402">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="900" y="11" width="56" height="1060" key="dock-window-9/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395037402" />
<state x="653" y="275" width="614" height="512" key="find.popup" timestamp="1590385200980">
<screen x="0" y="0" width="1920" height="1080" />
</state>
@ -156,9 +295,9 @@
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="622" y="249" key="run.anything.popup/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590363963127" />
<state x="623" y="240" width="672" height="678" key="search.everywhere.popup" timestamp="1589453965331">
<state x="623" y="240" width="672" height="678" key="search.everywhere.popup" timestamp="1590395597621">
<screen x="0" y="0" width="1920" height="1080" />
</state>
<state x="623" y="240" width="672" height="678" key="search.everywhere.popup/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1589453965331" />
<state x="623" y="240" width="672" height="678" key="search.everywhere.popup/0.0.1920.1080/1920.0.1280.1024@0.0.1920.1080" timestamp="1590395597621" />
</component>
</project>

1
public/index.html
View file

@ -9,6 +9,7 @@
name="description"
content="O. George's portfolio and blog"
/>
<link href="https://fonts.googleapis.com/css2?family=Cuprum:ital,wght@0,400;1,400;1,700&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a

1
src/App.js
View file

@ -20,7 +20,6 @@ function App(props) {
pages.map(page => {
return(
<Route exact path={page.src} component={page.page} key={page.src}/>
)
})
}

43
src/components/pages/blog.jsx
View file

@ -1,8 +1,45 @@
import React from "react";
import { connect } from "react-redux";
import Contacts from "../elements/contacts";
const BlogPage = (props) => {
return <div>Blog</div>;
const BlogArticlePreview = (props) => {
return (
<div className={ `blog-posts__item--${props.pos}`}>
<h2 className={"blog-post__header"}>
<a href={"#article"} className={"link"}>
{props.post.name}
</a>
</h2>
<p>{props.post.description}</p>
<ul className={"blog-info__list"}>
<li className={"blog-info__item blog-info__item--created"}>{props.post.created}</li>
<li className={"blog-info__item blog-info__item--reading-time"}>{props.post.readingTime}</li>
</ul>
</div>
);
};
export default connect()(BlogPage);
const BlogPage = (props) => {
return (
<div>
<ul className={"blog-posts"}>
{props.posts.map((post, index) => {
const pos = index % 2 === 0 ? "left" : "right";
return (
<li
className={`recent-block recent-block--${pos} blog-posts__item `}
key={post.description}
>
<BlogArticlePreview post={post} pos={pos}/>
</li>
);
})}
</ul>
<Contacts />
</div>
);
};
export default connect((state) => ({
posts: state.content.blogPageContent,
}))(BlogPage);

4
src/css/basic.scss
View file

@ -16,6 +16,7 @@ body {
}
a, .link{
transition: 0.3s;
color: $link-color;
text-decoration: none;
&:hover, &:focus{
@ -39,4 +40,5 @@ a, .link{
@import "elements/page-links";
@import "elements/recent-list";
@import "elements/contacts";
@import "elements/portfolio-project";
@import "elements/portfolio-project";
@import "elements/blog-post-preview";

58
src/css/elements/blog-post-preview.scss Normal file
View file

@ -0,0 +1,58 @@
.blog-posts{
list-style: none;
padding: 0;
font-family: 'Cuprum', sans-serif;
transition: 0.5s;
}
.blog-posts__item{
font-family: 'Cuprum', sans-serif;
color: var(--foreground);
&::before, &::after{
content: '' !important;
}
&--right{
& p{
text-align: right;
}
& ul{
flex-direction: row-reverse;
}
}
&--left{
text-align: left;
}
}
.blog-post__header{
color: $header-color;
& a{
color: $header-color;
}
}
.blog-info__list{
list-style: none;
padding: 0;
display: flex;
}
.blog-info__item{
margin-right: 20px;
color: var(--orange);
display: flex;
align-items: center;
&--created{
&::before{
content: url("../../svg/watch.svg");
margin-right: 10px;
}
}
&--reading-time{
&::before{
content: url("../../svg/stopwatch.svg");
margin-right: 10px;
}
}
}

BIN
src/img/░█░█░░░░█▀▄ ░█▀█░░░░█░█ ░▀░▀░▀░░▀▀░.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 412 B

23
src/reducers/site-content-reducer.js
View file

@ -49,6 +49,29 @@ const initialState = {
]
}
],
blogPageContent:[
{
name: 'The point of life by Linus Torvalds',
description: 'Some about OpenSource philosophy and “just for fun” by Linus Torvalds',
created: '02.04.2021',
readingTime: '8min read',
src: 'https://horhik.dev'
},
{
name: 'Haskell on Back-end, how it is?',
description: 'This site’s back-end written on haskell, let’s talks about privileges of haskell on backend',
created: '11.03.2020',
readingTime: '11min read',
src: 'https://horhik.dev'
},
{
name: 'ArchLinux and a lot of tiling window managers',
description: 'Did you try something another than floating windows, like in windows?',
created: '01.09.2020',
readingTime: '4min read',
src: 'https://horhik.dev'
}
]
}

11
src/svg/stopwatch.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="24" height="24" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M7.43744 5.24994H6.56244L6.56288 8.0561L8.44019 9.93386L9.05885 9.31521L7.43788 7.6938L7.43744 5.24994Z" fill="#6272A4"/>
<path d="M13.125 4.01271L10.8623 1.75001L10.0445 2.56775C9.26589 2.11926 8.38107 1.83919 7.43652 1.77211L7.43715 0.875004H8.74997V0H5.24999V0.875004H6.56218L6.56155 1.77221C5.61776 1.83954 4.73356 2.11955 3.95545 2.56775L3.13771 1.75001L0.875 4.01271L1.69275 4.83046C1.1755 5.72849 0.875 6.76636 0.875 7.875C0.875 11.2524 3.62261 14 7 14C10.3774 14 13.125 11.2524 13.125 7.875C13.125 6.76636 12.8245 5.72846 12.3072 4.83046C12.3072 4.83046 13.125 4.01268 13.125 4.01271ZM7 13.125C4.10499 13.125 1.75 10.77 1.75 7.87504C1.75 4.98003 4.10499 2.62504 7 2.62504C9.895 2.62504 12.25 4.98003 12.25 7.87504C12.25 10.77 9.895 13.125 7 13.125Z" fill="#6272A4"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="14" height="14" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

4
src/svg/watch.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 0C3.14027 0 0 3.14027 0 7C0 10.8597 3.14027 14 7 14C10.8597 14 14 10.8597 14 7C14 3.14027 10.8597 0 7 0ZM7 13.125C3.62262 13.125 0.875004 10.3774 0.875004 7C0.875004 3.62262 3.62262 0.875004 7 0.875004C10.3774 0.875004 13.125 3.62262 13.125 7C13.125 10.3774 10.3774 13.125 7 13.125Z" fill="#6272A4"/>
<path d="M7.43744 2.625H6.56244V7.18114L9.3156 9.93431L9.93425 9.31566L7.43744 6.81883V2.625Z" fill="#6272A4"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 536 B