diff --git a/.idea/workspace.xml b/.idea/workspace.xml index e075ca6..a81bd52 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -11,9 +11,14 @@ + + + + + + - @@ -90,6 +95,7 @@ + @@ -109,7 +115,7 @@ - + @@ -168,10 +174,10 @@ - + - + diff --git a/src/components/elements/homepage/recent-block.jsx b/src/components/elements/homepage/recent-block.jsx new file mode 100644 index 0000000..b87e26f --- /dev/null +++ b/src/components/elements/homepage/recent-block.jsx @@ -0,0 +1,21 @@ +import React from 'react' +import {connect} from 'react-redux' + +/* +* props: { +* header, +* pos, +* link +* +* } +* */ + +const RecentBlock = props => { + return( + + {props.header || 'no content loaded...'} + + ) +} + +export default connect()(RecentBlock) \ No newline at end of file diff --git a/src/components/elements/homepage/recent-list.jsx b/src/components/elements/homepage/recent-list.jsx new file mode 100644 index 0000000..5cef0a2 --- /dev/null +++ b/src/components/elements/homepage/recent-list.jsx @@ -0,0 +1,20 @@ +import React from 'react' +import {connect} from 'react-redux' +import RecentBlock from "./recent-block"; + +const Recent = props => { + return ( +
+

+ Recent +

+
    +
  • + +
  • +
+
+ ) +} + +export default connect()(Recent) \ No newline at end of file diff --git a/src/components/elements/recent-block.jsx b/src/components/elements/recent-block.jsx deleted file mode 100644 index b45dfaa..0000000 --- a/src/components/elements/recent-block.jsx +++ /dev/null @@ -1 +0,0 @@ -import React from 'react' diff --git a/src/components/pages/homepage.jsx b/src/components/pages/homepage.jsx index dc3f90e..19a88ec 100644 --- a/src/components/pages/homepage.jsx +++ b/src/components/pages/homepage.jsx @@ -1,12 +1,14 @@ import React from 'react' import Logo from "../elements/logo"; import PageLinks from "../elements/page-links"; +import Recent from "../elements/homepage/recent-list"; const HomePage = () => { return (
+
) } diff --git a/src/css/basic.scss b/src/css/basic.scss index fc2171d..861a558 100644 --- a/src/css/basic.scss +++ b/src/css/basic.scss @@ -7,11 +7,17 @@ body { padding: 0; background-color: var(--background); color: var(--foreground); + font-family: 'Ubuntu', sans-serif; } +.h1{ + font-family: 'Mononoki Bold', 'Fira Code SemiBold' ; + font-size: 2em; +} .App { } @import "logo"; -@import "elements/page-links"; \ No newline at end of file +@import "elements/page-links"; +@import "elements/recent-list"; \ No newline at end of file diff --git a/src/css/elements/recent-list.scss b/src/css/elements/recent-list.scss new file mode 100644 index 0000000..6cdb81c --- /dev/null +++ b/src/css/elements/recent-list.scss @@ -0,0 +1,74 @@ +.recent{ + margin: 0 auto; +} +.recent-header{ + text-align: center; +} + +.recent-list{ + list-style: none; + margin: 0; + padding: 0; + +} + +.recent-block{ + + text-decoration: none; + font-family: Mononoki, monospace; + font-size: 1.3em; + + box-shadow: 4px 4px 32px rgba(0, 0, 0, 0.34); + background: var(--background); + border-radius: 10px; + + display: flex; + align-items: center; + align-content: center; + width: max-content; + + margin: 20px 0; + padding:10px 20px; + color: var(--cyan); + + transition: 0.2s; + + &--left{ + border-bottom-left-radius: 0; + border-top-left-radius: 0; + &::before { + content: '📜'; + margin: 5px; + display: flex; + align-items: center; + align-content: center; + } margin-right: auto; + &:hover, &:focus{ + padding-left: 40px; + } + &:active{ + padding-left: 0; + } + } + + &--right{ + &::after { + content: url("../../../src/svg/github-icon.svg"); + margin: 5px; + display: flex; + align-items: center; + align-content: center; + + } + border-bottom-right-radius: 0; + border-top-right-radius: 0; + margin-left: auto; + &:hover, &:focus{ + padding-right: 40px; + } + &:active{ + padding-right: 0; + } + } +} + diff --git a/src/svg/github-icon.svg b/src/svg/github-icon.svg new file mode 100644 index 0000000..bae4071 --- /dev/null +++ b/src/svg/github-icon.svg @@ -0,0 +1,3 @@ + + +