mirror of
https://github.com/woodchen-ink/CoverView.git
synced 2025-07-18 05:51:56 +08:00
style: update blog cover styling
This commit is contained in:
rutik wankhade
parent
1bad75ffaf
commit
f1a99caa25
@ -1,3 +1,5 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
|
||||
@ -1,87 +1,110 @@
|
||||
|
||||
.cover{
|
||||
background-color: #00ff99;
|
||||
text-align: center;
|
||||
.cover {
|
||||
background-color: #00ff99;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height:380px;
|
||||
width:800px;
|
||||
padding:90px;
|
||||
border-radius:2px;
|
||||
height: 420px;
|
||||
width: 800px;
|
||||
border-radius: 2px;
|
||||
overflow-y: hidden;
|
||||
padding: 40px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.title-card{
|
||||
border-radius: 2px 2px 20px 20px;
|
||||
background-color: #ffffff;
|
||||
text-align: 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;
|
||||
.flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 32px;
|
||||
float:left;
|
||||
margin-left:2vw;
|
||||
.title-card {
|
||||
border-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
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;
|
||||
color:#ffffff;
|
||||
height:42px;
|
||||
padding :4px;
|
||||
color: #ffffff;
|
||||
padding: 20px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between
|
||||
justify-content: space-between
|
||||
}
|
||||
|
||||
h1{
|
||||
height:auto;
|
||||
h1 {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
button{
|
||||
background-color: #634f7d;
|
||||
font-weight: 600;
|
||||
color:#ffffff;
|
||||
border:none;
|
||||
border-radius:4px;
|
||||
padding:10px;
|
||||
width:150px;
|
||||
margin-top:20px;
|
||||
button {
|
||||
background-color: #634f7d;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
width: 150px;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
box-shadow: 4px 4px #cccccc;
|
||||
|
||||
}
|
||||
button:hover{
|
||||
background-color: #54466b;
|
||||
|
||||
button:hover {
|
||||
background-color: #54466b;
|
||||
}
|
||||
|
||||
@media screen and (max-width:600px){
|
||||
.cover{
|
||||
width:100vw;
|
||||
height:auto;
|
||||
padding:8vh;
|
||||
@media screen and (max-width:600px) {
|
||||
.cover {
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
padding: 8vh;
|
||||
}
|
||||
.title-card{
|
||||
padding:2.5vw 3vw 2.5vw 3vw;
|
||||
|
||||
.title-card {
|
||||
padding: 2.5vw 3vw 2.5vw 3vw;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.meta{
|
||||
height:5vh;
|
||||
|
||||
.meta {
|
||||
height: 5vh;
|
||||
font-size: 2vh;
|
||||
}
|
||||
i{font-size:3.5vh;}
|
||||
|
||||
|
||||
i {
|
||||
font-size: 3.5vh;
|
||||
}
|
||||
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user