diff --git a/src/assets/icons/github.png b/src/assets/icons/github.png deleted file mode 100644 index 6c408df..0000000 Binary files a/src/assets/icons/github.png and /dev/null differ diff --git a/src/components/App.css b/src/components/App.css index cfd88f0..6f0836a 100644 --- a/src/components/App.css +++ b/src/components/App.css @@ -5,20 +5,26 @@ padding:5px 5px 5px 35px; font-family:segoe ui; } - .logo{ height:30px; width:30px; - margin-right:10px; + margin-right:10px; +} +a { + color:inherit; +} +a i:hover{ + color:#f2f2f2; } - - footer{ height:40px; text-align: center; background-color:#ffffff; - margin-top:40px; padding:10px; font-size: 14px; border-top:1px solid #cccccc; +} + +@media screen and (max-width:600px){ + footer{margin-top:40px;} } \ No newline at end of file diff --git a/src/components/ChevronDown.js b/src/components/ChevronDown.js new file mode 100644 index 0000000..d71c236 --- /dev/null +++ b/src/components/ChevronDown.js @@ -0,0 +1,12 @@ +import React from 'react'; +import './ConfigCover.css'; + +const ChevronDown = () => { + return ( + + + + ); +} +export default ChevronDown; + diff --git a/src/components/ConfigCover.css b/src/components/ConfigCover.css index 2ebdd8f..2289121 100644 --- a/src/components/ConfigCover.css +++ b/src/components/ConfigCover.css @@ -3,8 +3,8 @@ body { } .main-container { - /* width: auto;*/ - /* justify-content: center; + /* width: auto; + justify-content: center; align-items: center; */ display: flex; flex-direction: row; @@ -18,34 +18,94 @@ body { flex-direction: column; align-items: center; padding:35px; - - } -.inputdata::-webkit-scrollbar { +.card{ + border-radius: 8px; + text-align: center; + color:#676683; + margin:10px 10px 10px 20px; + /* border:1px solid #676683; */ +} + +details{ + font-size: 1rem; + box-shadow: 0 10px 15px -5px #f2f2f2; + width: 100%; + background: #ffffff; + border-radius: 5px; + position: relative; + max-width: 400px; + padding:5px; + border: 2px solid #f2f2f2; + margin:4px; + justify-content: center; + align-items: center; + +} + +summary{ + align-items: center; + justify-content: center; + +} +summary:focus{ + outline:none; +} +summary::-webkit-details-marker { display: none; - } +} + +summary:hover { + cursor: pointer; +} +.bi-chevron-down { + pointer-events: none; + position: absolute; + top:1em; + right:0.5em; + background: #ffffff; + opacity:0.5; +} +.bi-chevron-down:hover{ + opacity:1; +} + +svg { + display: block; + } +.icon{ + width:20px; + height:20px; + left:1em; + position:absolute; + top:0.7em; +} + .blog-cover { display: flex; flex-direction: column; align-items: center; - margin:30px; -} -label { + margin:60px; + } +label{ margin: 5px; } input { margin: 4px; + text-align: center; } -input[type=number]{ - width:40px; +.custom-range{ + max-width:170px; + vertical-align: middle; + margin-left:15px; } - .custom-range::-webkit-slider-thumb{ background-color: #00cc7a; } .input-sm{ - width:80px; + width:120px; + margin:auto; } .input-md{ width:120px; @@ -70,6 +130,6 @@ input[type=number]{ flex-direction: column; } .blog-cover{margin:0px;} - + .card{margin:10px;} } diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js index efa4c9b..1e16e13 100644 --- a/src/components/ConfigCover.js +++ b/src/components/ConfigCover.js @@ -2,6 +2,7 @@ import React from "react"; import "./ConfigCover.css"; import CoverImage from "./CoverImage"; import ComponentToImg from "./ComponentToImg"; +import ChevronDown from './ChevronDown'; const defaultSettings = { title: "How I built my first project with react", @@ -18,6 +19,7 @@ const defaultSettings = { icon: 'react' }; + class ConfigCover extends React.Component { state = defaultSettings; @@ -30,7 +32,7 @@ class ConfigCover extends React.Component {

CoverView

-

🛠 Create awesome cover images for your blog posts quickly

+

🛠 Creating cover images for your blogs is now super easy

this.setState({ author: e.target.value })} > -
- - this.setState({ bgColor: e.target.value })} /> +
+ + + + + - - this.setState({ borderColor: e.target.value })} /> + + + +
+ + this.setState({ bgColor: e.target.value })} /> -
+ + this.setState({ borderColor: e.target.value })} /> +
-
- +
+ + this.setState({ foregroundColor: e.target.value })} + /> + + + this.setState({ textColor: e.target.value })} /> +
+ + this.setState({ foregroundColor: e.target.value })} - /> - - this.setState({ textColor: e.target.value })} /> -
+ type="range" + min="0" + max="1" + step="0.1" + value={this.state.opacity} + className="custom-range" + onChange={(e) => this.setState({ opacity: e.target.value })} + > - - this.setState({ opacity: e.target.value })} - > + -
- - this.setState({ borderSize: e.target.value })} /> +
+ + + + + + + - - this.setState({ borderSize: e.target.value })} /> +
+ +
+ + +
+
+ + +
+ + + + + + + + + -
+ - - +
+ + + + + + + + - - +
+
@@ -156,6 +203,7 @@ class ConfigCover extends React.Component { Reset
+
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css index a291b98..646097c 100644 --- a/src/components/CoverImage.css +++ b/src/components/CoverImage.css @@ -25,14 +25,6 @@ vertical-align: middle; } -.card{ - - border-radius: 8px; - text-align: center; - color:#676683; - margin:10px; - /* border:1px solid #676683; */ -} i{ font-size: 32px; float:left; @@ -49,8 +41,7 @@ i{ height:42px; padding :4px; font-weight: 500; - vertical-align: middle; - + vertical-align: middle; } h1{ @@ -69,19 +60,16 @@ button{ box-shadow: 4px 4px #cccccc; } - @media screen and (max-width:600px){ .cover{ width:100vw; height:auto; padding:8vh; - } .title-card{ padding:2.5vw 3vw 2.5vw 3vw; font-size: 1.2rem; } - .meta{ height:5vh; font-size: 2vh; diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js index 3261d23..d1d3fac 100644 --- a/src/components/CoverImage.js +++ b/src/components/CoverImage.js @@ -17,7 +17,7 @@ class CoverImage extends React.Component { } render() { - const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity, author,icon } = this.props; + const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity, author, icon } = this.props; const styleToApply = { borderTop: `${borderSize}px ${borderType} ${borderColor}`, backgroundColor: `${this.hexToRgbA(foregroundColor, opacity)}`, @@ -34,7 +34,7 @@ class CoverImage extends React.Component {
- + A blog by âš¡ {author}
); diff --git a/src/components/Navbar.js b/src/components/Navbar.js index 69ab7b9..32815c5 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -1,7 +1,6 @@ import React from 'react'; import './App.css'; import logo from '../assets/icons/favicon.png'; -import githubIcon from '../assets/icons/github.png'; const Navbar = () => { return ( @@ -9,7 +8,7 @@ const Navbar = () => {

logoCoverView

- giticon + );