dm1sh/dmitriy.icu
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added gallery pagination, finished footer, some little improvments

Browse Source
This commit is contained in:
Dmitriy Shishkov 2020-03-30 20:58:42 +05:00
parent 266a46446a
commit 021dea9dfe
21 changed files with 326 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env Normal file
View File

@ -0,0 +1 @@
REACT_APP_API_URL=http://localhost:8000

110
dmitriy.ovpn Normal file
View File

@ -0,0 +1,110 @@
client
dev tun
proto udp
sndbuf 0
rcvbuf 0
remote 45.9.73.5 1407
resolv-retry infinite
nobind
persist-key
persist-tun
remote-cert-tls server
auth SHA512
cipher AES-256-CBC
setenv opt block-outside-dns
key-direction 1
verb 3
<ca>
-----BEGIN CERTIFICATE-----
MIIDQjCCAiqgAwIBAgIUTnm+AQYOQsbZx6HLtrSxeTQVgJwwDQYJKoZIhvcNAQEL
BQAwEzERMA8GA1UEAwwIQ2hhbmdlTWUwHhcNMTkwNzEyMDU0NDM2WhcNMjkwNzA5
MDU0NDM2WjATMREwDwYDVQQDDAhDaGFuZ2VNZTCCASIwDQYJKoZIhvcNAQEBBQAD
ggEPADCCAQoCggEBAMGu1pA/ERmMlDmhAYsTWOVxL22In1/s/xqKVgY6Yo4GzdQv
xml29EK8/Q8ifVFipAli5NM3sgI7qxoFOYzix7CmOW76EXsUkPSD/NFXbh1Alsah
g1B0nk1gJx2oF/n8qC1Y4KQn/Aj+ZlYLGuBUeXHRsna6mBBj73OvjWysKyqY7Bn6
xZPH31z6cL1XXU9SvX7Os0GOD4AMX/sdS69q0tBOHMiEfe46gtXj0rxl/Pe7k8vL
/EuRR8ydRUYxjHSoYbuMGr1dGNWwH34BFH/bDtJov/dZFrGqEYzufANSm7o+mXlp
j7I/bwQ+owI++zlcD6JiJW6zIxJiVVv+N5Zw3KkCAwEAAaOBjTCBijAdBgNVHQ4E
FgQUUxoBdi/9D7ADf+oYxckDGEaJ6xQwTgYDVR0jBEcwRYAUUxoBdi/9D7ADf+oY
xckDGEaJ6xShF6QVMBMxETAPBgNVBAMMCENoYW5nZU1lghROeb4BBg5CxtnHocu2
tLF5NBWAnDAMBgNVHRMEBTADAQH/MAsGA1UdDwQEAwIBBjANBgkqhkiG9w0BAQsF
AAOCAQEAJA6V8c/lUkq9tm6qvdEZLEvft3NkGb+E763iOAFI/0YteUEGfmjHXPOX
XrS1T3eD6OqujipJ3dLeoyi5BqqE+Lh08HTfZjrabqP8zL/z+Z1VD/rJK8+XSM06
Q5bHCPhHB62LOk+dtUIpi/vH6CcPPnxJnFqW4JXIJBuoKrq44sX/4ueLCJHX+dBs
WKj30TMs7XMyGjiWBSS7HCqwvFzaJEnwP68s8WsDMsUBNPS7FL8ROwd1WiXZ0d0G
spIzM31oIyd0qZz2MA2vWLj1w83grvxppSwsyiR+ANJFTH/+LJz4eBtjB2cl2ZQt
IWW9Pmw4fZwQah2+5FPHjvKDql0UfA==
-----END CERTIFICATE-----
</ca>
<cert>
-----BEGIN CERTIFICATE-----
MIIDTzCCAjegAwIBAgIQTvoE7dpCm6CmagfHDJT7nDANBgkqhkiG9w0BAQsFADAT
MREwDwYDVQQDDAhDaGFuZ2VNZTAeFw0xOTA3MTIwNTQ0MzdaFw0yOTA3MDkwNTQ0
MzdaMBIxEDAOBgNVBAMMB2RtaXRyaXkwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAw
ggEKAoIBAQC2sZshbO58a2st46LPnNI+PixW47dBkzdNMe/4ItGizd9UTILZOR7a
HPh98V8XdgDby26x6eWXV9ynALqqHg0BlYHrRq4C9oby0OnWGb2S0yEvggxy4WZB
uqflDKcm7ZJYbY/8mz2NCKm755M1zf3cFp9Hd5wTlw3zQ059LJuJX+F/Teyv220s
lNHIFGqYPoL4SqB+Enu46AVmlqy9te6TPfcB6ipmyyg9pbyN82RfzWcko3jceBve
uKdIo9g+ARUb6Xp/sIbWZaIHZSLQQ620WCoEifvkE5IuFSyjItpUsvcM0/wFchyd
EWxGe/NPO0QUfGGQceovhGOyRuGAu48NAgMBAAGjgZ8wgZwwCQYDVR0TBAIwADAd
BgNVHQ4EFgQU3LySrwe8jP7GmQvCrmilFYf+SIowTgYDVR0jBEcwRYAUUxoBdi/9
D7ADf+oYxckDGEaJ6xShF6QVMBMxETAPBgNVBAMMCENoYW5nZU1lghROeb4BBg5C
xtnHocu2tLF5NBWAnDATBgNVHSUEDDAKBggrBgEFBQcDAjALBgNVHQ8EBAMCB4Aw
DQYJKoZIhvcNAQELBQADggEBAFAezO4lvjVKaZ2KxIbIMqovx/EK/LJJP5vSHIP8
N2szHfxXQ4CbrYZxIWlC5GU6LHfOk+BDin0Vf4CFfA3eJADdWVgEQI2lY9NCI9Ez
BcjK9QzY0XSyRbaWaXp02N9JrAe6u73q76r1uUMBCbo3ge+xb49gNx0Y0F/3RIph
6LJTbAd2jJIYGvktiMQDAF3T4tU7t7dAetaic7FxSF7UkZstiUrimafwfP9JTjFt
M3vqeQlL76KBl4BuZp/UVEJaoteJyOuB1lKHInmSuD3W9os+/KZYaJKZlLvGNf71
vC8C5q1BACYTdyUqwzV7YqaxKCz/1aVmusg0HsbtEHrjwsw=
-----END CERTIFICATE-----
</cert>
<key>
-----BEGIN PRIVATE KEY-----
MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQC2sZshbO58a2st
46LPnNI+PixW47dBkzdNMe/4ItGizd9UTILZOR7aHPh98V8XdgDby26x6eWXV9yn
ALqqHg0BlYHrRq4C9oby0OnWGb2S0yEvggxy4WZBuqflDKcm7ZJYbY/8mz2NCKm7
55M1zf3cFp9Hd5wTlw3zQ059LJuJX+F/Teyv220slNHIFGqYPoL4SqB+Enu46AVm
lqy9te6TPfcB6ipmyyg9pbyN82RfzWcko3jceBveuKdIo9g+ARUb6Xp/sIbWZaIH
ZSLQQ620WCoEifvkE5IuFSyjItpUsvcM0/wFchydEWxGe/NPO0QUfGGQceovhGOy
RuGAu48NAgMBAAECggEAFIrJ36tI8ZJ+fa1v3BpNBZSmFasLKwNrn3FzAxqfKcgu
SWNE/znN/0ZspnSidZfeJtir/LNJDohhliGd24z/d2MhNZw/6rNfnyPgdyNzznOQ
8q+TyMMRZWiggj+298iUwP6oxwWJmTcVJry2L8GWvs2IYVfQo99DQUwbIjYG0x5U
9DT009+WdmMZOaYhLczjy37P8WuhEkJoBbrzt9iSXDz5W8yJDaitIAnpYkcXm0oK
RfJu2kP3b2swoY7WCQNVZHshQKqpnrOa6D+9wF8QA5pUe0CMwK4eEvaxl+AowIu4
RG8XCK6QLqX3ga7iFgpPvxcR94AHSc02hWqeDZjXHQKBgQDux3drJhqapRxWEZoJ
OPsbINDTAuOcEy+aIzb8fWcude66fc6UjhI1Vc0Pnt08Hbg5c17U7q+stFPVSDSW
nXaUCwA45D0+vyv88TAiHOjD9eEwC6832SDiXjm/kPhy26Rj+4hGZ5/Ylr1wzSin
2l7RhL4i45yoPfjc9XGFejF65wKBgQDD3qVQEvZYYj6Vve9SVQM4TceSEUZ61dqG
JbTj85dih/weBahJuWVw6wGneSCVVDHRziW6hTiwoyndVfLU04bXpRgqKipr7gzg
4SvL7StOQkHAbBYi8d7BJPp/xq8W9Jx1rAzz2A9PEJI7MxE6H7MCi52NaUN+0GuW
xAUTew+76wKBgCsIUbJCzLqgFQpB49PTrBWIhXnx5FlFb+fEfu1kIEtUP7DmaWuG
ayuniexNwitKY+AetbGETq6+VPl0KN4YBL3Leb/HCm6bf273fKg5M43Vaz8AbBSR
kgaZ2qh2lQAGK4tFUpr1o+4hxIRmxPPzO/Fgje+1u47qlEYmCc53ZiFzAoGAWOL4
KF+Cldd3yWKZccaMoIeDksDuOB5Gfewsq+nGgHtvqXwtw88zvsuXQ5YPeFTuCuU/
b+a3NEnHXN99RKH9pm0Qi0n5WGN+SqtEwdWOeoRM7HLglNkomoQafdP/by5wtmHu
utYJFHtTsTPalIMALJ6JUDw92hXhTVkFaLLHECMCgYB6gMxiFNwMuz0qZ21Dexo4
VcYNJmB0+fjEjjhFIg6JZRGNbL93Vy2/OoSRExToFQrAzFmL8itp5wPkYnVW8zZ/
aDvn385WtlsmTtaVPrynJg8W2ltytDKRg5lp2JiPN1WGwLO0SPeUL+u6wgLiySs0
Euizbi6jFIK3Gi+EhmpCDg==
-----END PRIVATE KEY-----
</key>
<tls-auth>
-----BEGIN OpenVPN Static key V1-----
bcd89a0eed275b70415deef12d11fad0
02d94fa400ac20b85f2e37fe7107eea0
b3b9fc60e2dc9736238ed48b5c582b7c
db597e9e6ac45cab2ffc5a8aad272e3a
70c11279e8a530efcb8dfb1c5664330a
d955015eecea5ad16b257e4c42a8a5ce
f41960fb918b6b5d5adfbe10398c9f4d
f87f4ae187d03c199766ce770310c802
4b87129d63f9cb3c05eefaa5be634bcb
a0a75fa413ef8c35c5499254e4b01a96
511eaeba803b1b525eae77de073328c6
ac5f52a70a65dbaf2e49a257216cd667
b06c41dc351ab3fe22a70b94583311e4
fcc0d81ff469f6d65f861c6b5ea45a0f
5ed7bedbfb366dd34820a01250c7a8ce
7f28f9561346d1ad5c6d50d4c8922733
-----END OpenVPN Static key V1-----
</tls-auth>

1
package.json
View File

@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"node-sass": "^4.13.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",

2
src/App.js
View File

@ -9,7 +9,7 @@ import {
Home,
Gallery,
Footer,
} from './components'
} from './components';
import './app.scss';
const App = () => {

2
src/app.scss
View File

@ -1,6 +1,6 @@
@import url('https://fonts.googleapis.com/css?family=Assistant|Kaushan+Script&display=swap');
a, p, span {
a, p, span, button {
font-family: 'Assistant', sans-serif;
font-size: 3vh;
font-weight: 300;

13
src/components/Footer.js
View File

@ -1,11 +1,20 @@
import React from 'react'
import './footer.scss'
import { ReactComponent as Telegram} from './telegram.svg'
import { ReactComponent as Telegram } from './telegram.svg'
import { ReactComponent as Instagram } from './instagram.svg'
import { ReactComponent as Vk } from './vk.svg'
import { ReactComponent as LastFM } from './lastfm.svg'
const Footer = () => {
return (
<footer>
<Telegram className="telegram" />
<div className="social" >
<a href="https://ttttt.me/dsh147"><Telegram /></a>
<a href="https://instagram.com/i.have.no.camera"><Instagram /></a>
<a href="https://vk.com/dsh147"><Vk /></a>
<a href="https://last.fm/user/Dm1tr1y1"><LastFM /></a>
</div>
<p>Shishkov Dmitriy <span role="img" aria-label="Coll">👌</span> — 2020</p>
</footer>
);
}

36
src/components/Gallery.js
View File

@ -15,20 +15,44 @@ const GalleryList = (json) => {
const Gallery = props => {
const [galleryData, setGalleryData] = useState([]);
const [pagesAmount, setPagesAmount] = useState(1);
const [currentPage, setCurrentPage] = useState(1);
const [hasError, setHasError] = useState(false);
const size = (props.type === "galleryList") ? 4 : 9;
useEffect( () => {
async function fetchData() {
const res = await fetch(`http://localhost:8000/?size=${size}`);
const json = await res.json();
setGalleryData(json.list);
const fetchData = async () => {
try {
const res = await fetch(`${process.env.REACT_APP_API_URL}/?size=${size}&page=${currentPage}`);
if (!res.ok) {
throw Error(res.statusText);
}
const json = await res.json();
setPagesAmount(json.pagesAmount);
setGalleryData(g => [...g, ...json.list] );
} catch (error) {
setHasError(true);
console.log(error);
}
}
fetchData();
}, [size]);
}, [size, currentPage]);
return (
<div className={props.type}>
{GalleryList(galleryData)}
{ GalleryList(galleryData) }
{ ( props.type === "galleryGrid" &&
currentPage < pagesAmount || hasError ) &&
<button onClick={ () => {
setCurrentPage(currentPage + 1);
setHasError(false);
}
}>
{ hasError ? "Error, press to try again" : "Show more" }
</button>}
</div>
);
}

4
src/components/GalleryItem.js
View File

@ -7,8 +7,8 @@ const GalleryItem = props => {
const src = 'http://localhost:8000/' + props.src;
return (
<div className="galleryItem" onClick={ () => setShowViewbox(true) }>
<img alt="My shots" src={src} />
<div className="galleryItem" >
<img alt="My shots" src={src} onClick={ () => setShowViewbox(true) } />
{showViewBox && <ViewBox src={src} click={setShowViewbox} /> }
</div>

4
src/components/GalleryItem.scss
View File

@ -1,14 +1,12 @@
.galleryItem {
margin-bottom: 3vh;
& > img {
z-index: 5;
max-width: 100%;
max-height: 75vh;
cursor: pointer;
&:hover {
filter: contrast(75%) brightness(120%);
filter: var(--image-hover-color);
}
}
}

33
src/components/footer.scss
View File

@ -2,9 +2,36 @@ footer {
width: 100vw;
min-height: 25vh;
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--background-second-color);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 2px rgba(0,0,0,0.24);
padding: 10vmin;
.telegram {
fill: #2a9fd9;
height: 10vh;
.social {
svg {
height: 6vh;
width: 6vh;
margin: 0 2vh;
}
}
p {
line-height: 6vh;
}
}
@media (orientation: portrait) {
footer {
flex-direction: column;
.social {
display: flex;
justify-content: space-between;
width: 100%;
svg {
margin: 0;
}
}
}
}

56
src/components/gallery.scss
View File

@ -3,15 +3,71 @@
grid-template-columns: repeat(3, 1fr);
grid-gap: 3vh;
padding: 10vh 10vw;
align-items: end;
}
.galleryList {
width: 100%;
.galleryItem {
max-width: 50vw;
margin-bottom: 3vh;
&:nth-child(2n) {
float: right;
}
& > img {
max-height: 75vh;
}
}
}
button {
background-color: var(--background-color);
color: var(--text-color);
border: none;
width: 10vw;
height: 5vh;
box-shadow: var(--box-shadow);
border-radius: 5vh;
margin: 0 auto;
grid-column: span 3;
cursor: pointer;
transition: all 0.2s;
&:hover {
background-color: var(--background-second-color);
}
&:active {
background-color: var(--background-touched-color);
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
}
@media (orientation: portrait) {
.galleryGrid {
grid-template-columns: 1fr;
button {
width: 50vw;
grid-column: 1;
}
}
.galleryList {
.galleryItem {
max-width: none;
width: 100%;
}
}
}
@media (prefers-color-scheme: dark) {
.galleryGrid {
button {
background-color: var(--background-second-color);
}
}
}

4
src/components/galleryView.scss
View File

@ -4,8 +4,8 @@
font-family: 'Kaushan Script', cursive;
font-size: 10vh;
text-align: center;
padding-top: 10vh;
padding-bottom: 7vh;
margin-top: 10vh;
padding: 7vh 0;
color: var(--text-color);
}
}

2
src/components/home.scss
View File

@ -9,7 +9,7 @@ header {
background-size: cover;
background-position: bottom;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
box-shadow: var(--box-shadow);
h1 {
font-family: 'Kaushan Script', cursive;

1
src/components/instagram.svg Normal file
View File

@ -0,0 +1 @@
<svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="SVGID_1_" gradientTransform="matrix(0 -1.982 -1.844 0 -132.522 -51.077)" gradientUnits="userSpaceOnUse" x1="-37.106" x2="-26.555" y1="-72.705" y2="-84.047"><stop offset="0" stop-color="#fd5"/><stop offset=".5" stop-color="#ff543e"/><stop offset="1" stop-color="#c837ab"/></linearGradient><path d="m1.5 1.633c-1.886 1.959-1.5 4.04-1.5 10.362 0 5.25-.916 10.513 3.878 11.752 1.497.385 14.761.385 16.256-.002 1.996-.515 3.62-2.134 3.842-4.957.031-.394.031-13.185-.001-13.587-.236-3.007-2.087-4.74-4.526-5.091-.559-.081-.671-.105-3.539-.11-10.173.005-12.403-.448-14.41 1.633z" fill="url(#SVGID_1_)"/><path d="m11.998 3.139c-3.631 0-7.079-.323-8.396 3.057-.544 1.396-.465 3.209-.465 5.805 0 2.278-.073 4.419.465 5.804 1.314 3.382 4.79 3.058 8.394 3.058 3.477 0 7.062.362 8.395-3.058.545-1.41.465-3.196.465-5.804 0-3.462.191-5.697-1.488-7.375-1.7-1.7-3.999-1.487-7.374-1.487zm-.794 1.597c7.574-.012 8.538-.854 8.006 10.843-.189 4.137-3.339 3.683-7.211 3.683-7.06 0-7.263-.202-7.263-7.265 0-7.145.56-7.257 6.468-7.263zm5.524 1.471c-.587 0-1.063.476-1.063 1.063s.476 1.063 1.063 1.063 1.063-.476 1.063-1.063-.476-1.063-1.063-1.063zm-4.73 1.243c-2.513 0-4.55 2.038-4.55 4.551s2.037 4.55 4.55 4.55 4.549-2.037 4.549-4.55-2.036-4.551-4.549-4.551zm0 1.597c3.905 0 3.91 5.908 0 5.908-3.904 0-3.91-5.908 0-5.908z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

53
src/components/lastfm.svg Normal file
View File

@ -0,0 +1,53 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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 112.195 112.195" style="enable-background:new 0 0 112.195 112.195;" xml:space="preserve">
<g>
<path id="XMLID_59_" style="fill:#D31F27;" d="M112.195,56.097c0,30.983-25.114,56.099-56.097,56.099
C25.115,112.195,0,87.08,0,56.097C0,25.117,25.115,0,56.099,0C87.081,0,112.195,25.117,112.195,56.097z"/>
<g id="lastfm">
<g>
<path style="fill:#FFFFFF;" d="M80.487,52.141c-6.203-1.849-8.412-2.874-8.412-4.922c0-3.416,4.937-4.702,5.497-4.79
c3.139-0.465,7.072,1.173,8.34,4.99l8.44-2.553c-2.65-8.385-10.487-12.099-18.099-10.975
c-7.788,1.146-12.782,6.786-12.782,13.327c0,8.8,8.244,11.332,14.43,13.181c6.509,1.944,8.401,2.637,8.401,5.023
c0,2.016-1.196,3.895-4.374,4.735c-6.32,1.664-14.586-0.672-16.887-4.523c-1.351-2.261-2.733-5.203-4.001-8.53
c-3.766-9.866-8.926-23.371-23.764-23.371c-7.731,0-21.851,3.743-21.851,24.868c0,8.744,7.481,19.613,21.578,19.613
c11.829,0,13.888-4.32,14.358-5.085l-3.861-7.555c-0.098,0.138-3.692,4.936-10.497,4.936c-11.107,0-12.735-11.776-12.735-11.909
c0-10.967,4.687-16.238,13.008-16.238c8.094,0,11.382,7.04,15.48,17.759c1.397,3.683,2.922,6.966,4.65,9.865
c3.657,6.116,11.55,8.091,19.473,8.091c2.418,0,5.2,0.137,7.351-0.432c7.093-1.878,10.905-6.178,10.905-12.224
C95.137,56.218,86.852,54.044,80.487,52.141z"/>
</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>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

10
src/components/navbar.scss
View File

@ -3,13 +3,13 @@ nav {
top: 0;
height: 10vh;
display: flex;
padding: 2vh 4vw;
padding: 2vh 4vmax;
width: 100vw;
background-color: var(--background-color);
background-color: var(--background-navbar-color);
z-index: 100;
&.showShadow {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
& {
box-shadow: var(--box-shadow);
}
.logo {
@ -24,7 +24,7 @@ nav {
a {
line-height: 6vh;
padding: 0 1vw;
padding: 0 1vmax;
}
.galactikka {
background-image: url('./galactikka_bg.jpg');

2
src/components/telegram.svg
View File

@ -1 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path id="telegram-4" d="M12,0c-6.626,0 -12,5.372 -12,12c0,6.627 5.374,12 12,12c6.627,0 12,-5.373 12,-12c0,-6.628 -5.373,-12 -12,-12Zm3.224,17.871c0.188,0.133 0.43,0.166 0.646,0.085c0.215,-0.082 0.374,-0.267 0.422,-0.491c0.507,-2.382 1.737,-8.412 2.198,-10.578c0.035,-0.164 -0.023,-0.334 -0.151,-0.443c-0.129,-0.109 -0.307,-0.14 -0.465,-0.082c-2.446,0.906 -9.979,3.732 -13.058,4.871c-0.195,0.073 -0.322,0.26 -0.316,0.467c0.007,0.206 0.146,0.385 0.346,0.445c1.381,0.413 3.193,0.988 3.193,0.988c0,0 0.847,2.558 1.288,3.858c0.056,0.164 0.184,0.292 0.352,0.336c0.169,0.044 0.348,-0.002 0.474,-0.121c0.709,-0.669 1.805,-1.704 1.805,-1.704c0,0 2.084,1.527 3.266,2.369Zm-6.423,-5.062l0.98,3.231l0.218,-2.046c0,0 3.783,-3.413 5.941,-5.358c0.063,-0.057 0.071,-0.153 0.019,-0.22c-0.052,-0.067 -0.148,-0.083 -0.219,-0.037c-2.5,1.596 -6.939,4.43 -6.939,4.43Z"/></svg>
<svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" fill="#039be5" r="12"/><path d="m5.491 11.74 11.57-4.461c.537-.194 1.006.131.832.943l.001-.001-1.97 9.281c-.146.658-.537.818-1.084.508l-3-2.211-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.121l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953z" fill="#fff"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 452 B

6
src/components/viewBox.scss
View File

@ -4,6 +4,7 @@
bottom: 0;
left: 0;
right: 0;
width: 100vw;
background-color: var(--background-color);
cursor: pointer;
display: flex;
@ -13,4 +14,9 @@
img {
object-fit: contain;
}
}
@media (orientation: portrait) {
.viewBox img {
width: 100vw;
}
}

1
src/components/vk.svg Normal file
View File

@ -0,0 +1 @@
<svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m19.915 13.028c-.388-.49-.277-.708 0-1.146.005-.005 3.208-4.431 3.538-5.932l.002-.001c.164-.547 0-.949-.793-.949h-2.624c-.668 0-.976.345-1.141.731 0 0-1.336 3.198-3.226 5.271-.61.599-.892.791-1.225.791-.164 0-.419-.192-.419-.739v-5.105c0-.656-.187-.949-.74-.949h-4.126c-.419 0-.668.306-.668.591 0 .622.945.765 1.043 2.515v3.797c0 .832-.151.985-.486.985-.892 0-3.057-3.211-4.34-6.886-.259-.713-.512-1.001-1.185-1.001h-2.625c-.749 0-.9.345-.9.731 0 .682.892 4.073 4.148 8.553 2.17 3.058 5.226 4.715 8.006 4.715 1.671 0 1.875-.368 1.875-1.001 0-2.922-.151-3.198.686-3.198.388 0 1.056.192 2.616 1.667 1.783 1.749 2.076 2.532 3.074 2.532h2.624c.748 0 1.127-.368.909-1.094-.499-1.527-3.871-4.668-4.023-4.878z" fill="#4b729f"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 854 B

13
src/index.scss
View File

@ -1,7 +1,12 @@
:root {
color-scheme: light dark;
--background-color: #ffffff;
--text-color: #282627;
--background-navbar-color: #ffffff;
--background-second-color: #ebebeb;
--background-touched-color: #dedede;
--text-color: #121212;
--box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
--image-hover-color: contrast(75%) brightness(120%);
}
* {
@ -36,7 +41,11 @@ code {
@media (prefers-color-scheme: dark) {
:root {
color-scheme: light dark;
--background-color: #1c1c1e;
--background-color: #121212;
--background-second-color: #1f1f1f;
--background-navbar-color: #1f1f1f;
--background-touched-color: #373737;
--text-color: #ffffff;
--image-hover-color: contrast(90%) brightness(90%);
}
}

2
yarn.lock
View File

@ -3617,7 +3617,7 @@ dotenv-expand@5.1.0:
resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
dotenv@8.2.0:
dotenv@8.2.0, dotenv@^8.2.0:
version "8.2.0"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==