icd/social-media-cards
2
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

Redesign, add poppins font

Browse Source
This commit is contained in:
Arkadiusz Wieczorek 2022-01-04 19:56:44 +01:00
parent 6d2e3034fe
commit 214a01a05a
2 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
generator.html
View File

@ -4,8 +4,17 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Generator kart na social media</title> <title>Generator kart na social media</title>
<style> <style>
@font-face {
font-family: Poppins;
src: url(./poppins.ttf);
}
* { * {
font-family: sans-serif; font-family: 'Noto Sans', sans-serif;
}
p {
font-family: Poppins;
} }
#container.overflow { #container.overflow {
@ -33,9 +42,17 @@
} }
#text_box { #text_box {
background-color: white; background-color: var(--yellow);
padding-top: var(--padding); color: #fff;
display: grid;
grid-template-columns: 1fr 1fr;
} }
#text_target {
background-color: #000;
}
</style> </style>
</head> </head>
<body <body
@ -77,6 +94,7 @@ Treść komunikatu</textarea
style=" style="
box-sizing: border-box; box-sizing: border-box;
border: calc(var(--padding) * var(--scale)) solid var(--yellow); border: calc(var(--padding) * var(--scale)) solid var(--yellow);
border-top: calc(var(--padding) * var(--scale)/3) solid var(--yellow);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
width: calc(var(--scale) * var(--width)); width: calc(var(--scale) * var(--width));
@ -84,24 +102,23 @@ Treść komunikatu</textarea
" "
> >
<div id="text_box"> <div id="text_box">
<p
id="text_target"
style="font-size: calc(var(--scale) * 16px); padding: var(--padding);"
>
Treść komunikatu
</p>
<img <img
src="./logo.png" src="./logo.png"
width="80" width="80"
height="80" height="80"
style=" style="
float: left;
height: calc(var(--scale) * 80px); height: calc(var(--scale) * 80px);
width: calc(var(--scale) * 80px); width: calc(var(--scale) * 80px);
padding-right: var(--padding); padding-left: var(--padding);
margin-top: calc(-1 * var(--padding)); justify-self: flex-end;
" "
/> />
<p
id="text_target"
style="margin: 0; font-size: calc(var(--scale) * 16px)"
>
Treść komunikatu
</p>
</div> </div>
<div <div
id="image_box" id="image_box"

BIN
poppins.ttf Normal file
View File

Binary file not shown.