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,
body,
#root {

59
src/components/CoverImage.css
View File

@ -1,46 +1,63 @@
.cover {
background-color: #00ff99;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height:380px;
height: 420px;
width: 800px;
padding:90px;
border-radius: 2px;
overflow-y: hidden;
padding: 40px;
}
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
}
.title-card {
border-radius: 2px 2px 20px 20px;
border-radius: 10px;
background-color: #ffffff;
text-align: center;
text-align: left;
color: #676683;
justify-content: center;
align-items: center;
vertical-align: middle;
padding:40px;
font-size:35px;
font-weight: 600;
width: 90%;
border: none;
vertical-align: middle;
padding: 40px;
font-family: inter;
margin: auto;
box-shadow: 13px 10px 36px 2px rgba(0,0,0,0.22);
}
.title {
font-size: 40px;
font-weight: 700;
}
i {
font-size: 32px;
float:left;
margin-left:2vw;
font-size: 110px;
margin: 2vw;
}
.author{
margin-right:3vw;
.author-text {
font-size: 22px;
font-weight: 600;
margin-top: 20px;
}
.meta {
float: bottom;
background-color: #676683;
color: #ffffff;
height:42px;
padding :4px;
padding: 20px;
font-weight: 500;
display: flex;
align-items: center;
@ -64,6 +81,7 @@ font-weight: 600;
box-shadow: 4px 4px #cccccc;
}
button:hover {
background-color: #54466b;
}
@ -74,14 +92,19 @@ button:hover{
height: auto;
padding: 8vh;
}
.title-card {
padding: 2.5vw 3vw 2.5vw 3vw;
font-size: 1.2rem;
}
.meta {
height: 5vh;
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";
class CoverImage extends React.Component {
hexToRgbA(hex, opacity) {
var c;
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
c = hex.substring(1).split("");
if (c.length === 3) {
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c = "0x" + c.join("");
return "rgba(" + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(",") + `,${opacity})`;
}
throw new Error("Bad Hex");
}
// hexToRgbA(hex, opacity) {
// var c;
// if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
// c = hex.substring(1).split("");
// if (c.length === 3) {
// c = [c[0], c[0], c[1], c[1], c[2], c[2]];
// }
// c = "0x" + c.join("");
// return "rgba(" + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(",") + `,${opacity})`;
// }
// throw new Error("Bad Hex");
// }
render() {
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)}`,
color: `${textColor}`,
};
const { title, bgColor, pattern, author, icon } = this.props;
return (
<div>
<div className={` cover ${pattern} `} style={{ backgroundColor: bgColor }}>
<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 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>
);
}