Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Development #113

Merged
merged 7 commits into from
Jan 27, 2021
Merged

Development #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8a4e725
Update README.md
shravan20 Dec 5, 2020
53612ea
[FRONTEND] Preview quotes and generate URL (#100)
ShubhKotnala Dec 7, 2020
0f40941
Width refactor in zues layout and change in static quote in frontend
nishantpersonal Dec 7, 2020
364359e
Release/docs/v1.2 (#101)
shravan20 Dec 7, 2020
85e8084
Update README.md (#105)
nishantpersonal Dec 8, 2020
bae1f17
Merge branch 'main' into development
nishantpersonal Dec 8, 2020
0b1022c
[FIX] Layout compatibility with Dark mode (#110)
ShubhKotnala Dec 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Dynamic quote generator for your GitHub readmes

<br>

### Use [User Interface](http://github-readme-quotes.herokuapp.com/), to view designed quotes and copy link and paste it directly
### Use [User Interface](https://github-readme-quotes.herokuapp.com/), to view designed quotes and copy link and paste it directly

<img src="./assets/uiScreen.gif" width=100% align="center"/>

Expand Down
51 changes: 48 additions & 3 deletions frontend/src/util/layouts/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ const layouts = {
? "ccc"
: template.theme.bg_color
};
background: #fff;
display:inline-block;
margin:0;
padding:1em;
Expand Down Expand Up @@ -113,14 +114,19 @@ const layouts = {
return `#ct{
height:auto;
width:600px;
border:1px solid #f1c40f;
margin: 20px 50px 20px 10px;
text-align:center;
position:relative;
color:#${template.theme.quote_color};
padding:15px;
background:#${template.theme.bg_color};
${template.animation.animation};

background: radial-gradient(circle at top left, transparent 15px, #${template.theme.bg_color} 0) top left,
radial-gradient(circle at top right, transparent 15px, #${template.theme.bg_color} 0) top right,
radial-gradient(circle at bottom right, transparent 15px, #${template.theme.bg_color} 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #${template.theme.bg_color} 0) bottom left;
${template.animation.animation};
background-size: 51% 51%;
background-repeat: no-repeat;
}
${template.animation.keyframes}
span{
Expand All @@ -144,23 +150,55 @@ const layouts = {
#left_top{
top:-16px;
left:-16px;
background: transparent;
border-color:transparent transparent #f1c40f transparent;
}
#right_top{
top:-16px;
right:-16px;
background: transparent;
border-color:transparent transparent transparent #f1c40f;
}
#left_bottom{
bottom:-16px;
left:-16px;
background: transparent;
border-color:transparent #f1c40f transparent transparent ;
}
#right_bottom{
bottom:-16px;
right:-16px;
background: transparent;
border-color:#f1c40f transparent transparent transparent;
}
#borderLeft {
border-left: 1px solid #f1c40f;
position: absolute;
top: 15px;
bottom: 15px;
left:-1px;
}
#borderTop {
border-top: 1px solid #f1c40f;
position: absolute;
right: 15px;
left: 15px;
top: -1px;
}
#borderRight {
border-right: 1px solid #f1c40f;
position: absolute;
top: 15px;
bottom: 15px;
right: -1px;
}
#borderBottom {
border-bottom: 1px solid #f1c40f;
position: absolute;
right: 15px;
left: 15px;
bottom: -1px;
}
p{
padding-top:0px;
font-size:17px
Expand All @@ -172,6 +210,10 @@ const layouts = {
<div class="corner" id="left_bottom"></div>
<div class="corner" id="right_top"></div>
<div class="corner" id="right_bottom"></div>
<div id="borderLeft"></div>
<div id="borderRight"></div>
<div id="borderBottom"></div>
<div id="borderTop"></div>
<span>${template.author === "Unknown"
? "Anonymous"
: template.author
Expand Down Expand Up @@ -200,6 +242,9 @@ const layouts = {
margin: 0;
font-size:16px;
padding: 1em;
background: #fff;
-webkit-mask-image: radial-gradient(circle 0 at 0 0, transparent 0, transparent, black);
mask-image: radial-gradient(circle 0 at 0 0, transparent 0, transparent, black);
position: relative;
}
blockquote::before {
Expand Down
Loading