Added gallery pagination, finished footer, some little improvments

.env

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

dmitriy.ovpn

@@ -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>

package.json

@@ -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",

src/App.js

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

src/app.scss

@@ -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;

src/components/Footer.js

@@ -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>
     );
 }

src/components/Gallery.js

@@ -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 fetchData = async () => {
-            const res = await fetch(`http://localhost:8000/?size=${size}`);
+            try {
-            const json = await res.json();
+                const res = await fetch(`${process.env.REACT_APP_API_URL}/?size=${size}&page=${currentPage}`);
-            setGalleryData(json.list);
+
+                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>
     );
 }

src/components/GalleryItem.js

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

src/components/GalleryItem.scss

@@ -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);
         }
     }
 }

src/components/footer.scss

@@ -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 {
+    .social {
-        fill: #2a9fd9;
+        svg {
-        height: 10vh;
+            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;
+            }
+        }
     }
 }

src/components/gallery.scss

@@ -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);
+        }
     }
 }

src/components/galleryView.scss

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

src/components/home.scss

@@ -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;

src/components/instagram.svg

@@ -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>

src/components/lastfm.svg

@@ -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>

src/components/navbar.scss

@@ -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');

src/components/telegram.svg

@@ -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>

src/components/viewBox.scss

@@ -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;
+    }
 }

src/components/vk.svg

@@ -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>

src/index.scss

@@ -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%);
     }
 }

yarn.lock

@@ -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==