From ea01e2f53bfa447fe18afa39e31929908c01eada Mon Sep 17 00:00:00 2001 From: horhik Date: Fri, 22 May 2020 12:13:47 +0300 Subject: [PATCH] added links block --- .idea/workspace.xml | 5 ++- src/components/elements/contacts.jsx | 40 +++++++++++++++++++ .../elements/homepage/recent-list.jsx | 2 + src/css/basic.scss | 9 ++++- src/css/elements/contacts.scss | 17 ++++++++ 5 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 src/components/elements/contacts.jsx create mode 100644 src/css/elements/contacts.scss diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 23879ec..866651d 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -11,10 +11,11 @@ + + - diff --git a/src/components/elements/contacts.jsx b/src/components/elements/contacts.jsx new file mode 100644 index 0000000..990530c --- /dev/null +++ b/src/components/elements/contacts.jsx @@ -0,0 +1,40 @@ +import React from 'react' +import asciiWord from "../../functions/ascii-word"; + +const links = [{ + site: 'github', + url: 'https://github.com' +}, + { + site: 'twitter', + url:'https://twitter.com' + }, + { + site: 'telegram', + url: 'https://telegram.org' + }] + +const SocialLink = props => { + return ( + +
+                {asciiWord(props.site, 'Nacyj')}
+                
+
+ ) +} + +const Contacts = props => { +return ( + +) + +} + +export default Contacts \ No newline at end of file diff --git a/src/components/elements/homepage/recent-list.jsx b/src/components/elements/homepage/recent-list.jsx index 1f28a0a..8d6f1e5 100644 --- a/src/components/elements/homepage/recent-list.jsx +++ b/src/components/elements/homepage/recent-list.jsx @@ -1,6 +1,7 @@ import React from 'react' import {connect} from 'react-redux' import RecentBlock from "./recent-block"; +import Contacts from "../contacts"; const Recent = props => { return ( @@ -29,6 +30,7 @@ const Recent = props => { + ) } diff --git a/src/css/basic.scss b/src/css/basic.scss index 9a934c4..0e0af39 100644 --- a/src/css/basic.scss +++ b/src/css/basic.scss @@ -13,7 +13,13 @@ body { box-shadow: 0px -30px 20px rgba(0, 0, 0, 0.34); + } + a{ + &:hover, &:focus{ + color: var(--pink) + } + } @media (min-width: 1000px) { box-shadow: 4px 4px 32px rgba(0, 0, 0, 0.34); @@ -29,4 +35,5 @@ body { @import "logo"; @import "elements/page-links"; -@import "elements/recent-list"; \ No newline at end of file +@import "elements/recent-list"; +@import "elements/contacts"; \ No newline at end of file diff --git a/src/css/elements/contacts.scss b/src/css/elements/contacts.scss new file mode 100644 index 0000000..a2a883f --- /dev/null +++ b/src/css/elements/contacts.scss @@ -0,0 +1,17 @@ +.contacts{ + list-style: none; + padding: 0; + display: flex; + justify-content: space-around; + flex-wrap: wrap; + width: 60vw; + margin: 0 auto; +} + +.contact-link{ + text-decoration: none; + font-size: 0.3em; + color: var(--cyan); + line-height: 0.8em; + +} \ No newline at end of file