wood/CoverView
1
0
Fork 0
mirror of https://github.com/woodchen-ink/CoverView.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: update blog cover styling

Browse Source
This commit is contained in:
rutik wankhade 2022-01-07 15:32:46 +05:30
parent 1bad75ffaf
commit f1a99caa25
3 changed files with 106 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/App.css
View File

@ -1,3 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
html, html,
body, body,
#root { #root {

137
src/components/CoverImage.css
View File

@ -1,87 +1,110 @@
.cover {
.cover{ background-color: #00ff99;
background-color: #00ff99; display: flex;
text-align: center;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height:380px; height: 420px;
width:800px; width: 800px;
padding:90px; border-radius: 2px;
border-radius:2px;
overflow-y: hidden; overflow-y: hidden;
padding: 40px;
} }
.title-card{ .flex-row {
border-radius: 2px 2px 20px 20px; display: flex;
background-color: #ffffff; flex-direction: row;
text-align: center; align-items: center;
color:#676683;
justify-content: center;
align-items: center;
vertical-align: middle;
padding:40px;
font-size:35px;
font-weight: 600;
border:none;
vertical-align: middle;
} }
i{ .title-card {
font-size: 32px; border-radius: 10px;
float:left; background-color: #ffffff;
margin-left:2vw; text-align: left;
color: #676683;
justify-content: center;
align-items: center;
vertical-align: middle;
width: 90%;
border: none;
padding: 40px;
font-family: inter;
margin: auto;
box-shadow: 13px 10px 36px 2px rgba(0,0,0,0.22);
} }
.author{
margin-right:3vw; .title {
font-size: 40px;
font-weight: 700;
} }
.meta{
float:bottom; i {
font-size: 110px;
margin: 2vw;
}
.author-text {
font-size: 22px;
font-weight: 600;
margin-top: 20px;
}
.meta {
float: bottom;
background-color: #676683; background-color: #676683;
color:#ffffff; color: #ffffff;
height:42px; padding: 20px;
padding :4px;
font-weight: 500; font-weight: 500;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between justify-content: space-between
} }
h1{ h1 {
height:auto; height: auto;
} }
button{ button {
background-color: #634f7d; background-color: #634f7d;
font-weight: 600; font-weight: 600;
color:#ffffff; color: #ffffff;
border:none; border: none;
border-radius:4px; border-radius: 4px;
padding:10px; padding: 10px;
width:150px; width: 150px;
margin-top:20px; margin-top: 20px;
text-align: center; text-align: center;
box-shadow: 4px 4px #cccccc; box-shadow: 4px 4px #cccccc;
} }
button:hover{
background-color: #54466b; button:hover {
background-color: #54466b;
} }
@media screen and (max-width:600px){ @media screen and (max-width:600px) {
.cover{ .cover {
width:100vw; width: 100vw;
height:auto; height: auto;
padding:8vh; padding: 8vh;
} }
.title-card{
padding:2.5vw 3vw 2.5vw 3vw; .title-card {
padding: 2.5vw 3vw 2.5vw 3vw;
font-size: 1.2rem; font-size: 1.2rem;
} }
.meta{
height:5vh; .meta {
height: 5vh;
font-size: 2vh; font-size: 2vh;
} }
i{font-size:3.5vh;}
i {
font-size: 3.5vh;
}
} }

47
src/components/CoverImage.js
View File

@ -3,39 +3,40 @@ import "./CoverImage.css";
import "../assets/css/patterns.css"; import "../assets/css/patterns.css";
class CoverImage extends React.Component { class CoverImage extends React.Component {
hexToRgbA(hex, opacity) { // hexToRgbA(hex, opacity) {
var c; // var c;
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) { // if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
c = hex.substring(1).split(""); // c = hex.substring(1).split("");
if (c.length === 3) { // if (c.length === 3) {
c = [c[0], c[0], c[1], c[1], c[2], c[2]]; // c = [c[0], c[0], c[1], c[1], c[2], c[2]];
} // }
c = "0x" + c.join(""); // c = "0x" + c.join("");
return "rgba(" + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(",") + `,${opacity})`; // return "rgba(" + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(",") + `,${opacity})`;
} // }
throw new Error("Bad Hex"); // throw new Error("Bad Hex");
} // }
render() { render() {
const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity, author, icon } = this.props; const { title, bgColor, pattern, author, icon } = this.props;
const styleToApply = {
borderTop: `${borderSize}px ${borderType} ${borderColor}`,
backgroundColor: `${this.hexToRgbA(foregroundColor, opacity)}`,
color: `${textColor}`,
};
return ( return (
<div> <div>
<div className={` cover ${pattern} `} style={{ backgroundColor: bgColor }}> <div className={` cover ${pattern} `} style={{ backgroundColor: bgColor }}>
<div className={`${pattern}`}> <div className={`${pattern}`}>
<div className="title-card" style={styleToApply}>
<p>{title}</p> <div className="title-card">
<div className="flex-row">
<i className={`devicon-${icon.value}-plain dev-icon `}></i>
<div>
<h1 className="title">{title}</h1>
<h2 className="author-text"> {author}</h2>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div className="meta" style={{ backgroundColor: borderColor }}>
<i className={`devicon-${icon.value}-plain dev-icon`}></i>
<span className="author">A blog by <span role="img" aria-label="bolt">⚡</span> {author}</span></div>
</div> </div>
); );
} }