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

Dodanie prowadnic pokazujących, jak wygladają cięcia

Browse Source 
thumbnaili. Trochę zbugowane, ale jest krok do przodu
This commit is contained in:
Kuba Orlik 2022-01-15 21:54:40 +01:00
parent db6ab4fc19
commit e5adf4449d
1 changed files with 79 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
generator.html
View File

@ -10,7 +10,7 @@
} }
* { * {
font-family: 'Noto Sans', sans-serif; font-family: "Noto Sans", sans-serif;
} }
p { p {
@ -19,15 +19,17 @@
#container.overflow { #container.overflow {
display: grid !important; display: grid !important;
grid-template-columns: --ratio: calc(var(--width-int) / var(--height-int));
1fr calc( --thumbnail-width: calc(
( (var(--ratio) * var(--overflow-height)) * var(--scale)
var(--width) / var(--height) * var(--overflow-height) - 2 * );
var(--padding) --full-width: calc(var(--scale) * var(--overflow-width));
) * var(--scale) --margin: calc((var(--full-width) - var(--thumbnail-width)) / 2);
) grid-template-columns: var(--margin) var(--thumbnail-width) var(
1fr; --margin
width: calc(var(--scale) * var(--overflow-width)) !important; );
grid-template-areas: "margin-left thumbnail margin-right" "margin-left thumbnail margin-right";
width: var(--full-width) !important;
height: calc(var(--scale) * var(--overflow-height)) !important; height: calc(var(--scale) * var(--overflow-height)) !important;
grid-template-rows: 1fr 10fr; grid-template-rows: 1fr 10fr;
background-color: var(--yellow); background-color: var(--yellow);
@ -35,24 +37,59 @@
#container.overflow #text_box { #container.overflow #text_box {
grid-column: 2; grid-column: 2;
grid-row: 1;
} }
#container.overflow #image_box { #container.overflow #image_box {
grid-column: 1/4; grid-column: 1/4;
grid-row: 2;
} }
#text_box { #text_box {
background-color: var(--yellow); background-color: var(--yellow);
color: #fff; color: #fff;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr min-content;
} }
#text_target { #text_target {
background-color: #000; background-color: #000;
} }
.overlay {
border: 1px solid red;
z-index: 1;
text-align: center;
opacity: 60%;
display: none;
}
.guides .overlay {
display: block;
}
.overlay--margin {
background-image: repeating-linear-gradient(
45deg,
#ccc,
#ccc 30px,
#dbdbdb 30px,
#dbdbdb 60px
);
}
.overlay--margin-right {
grid-area: margin-right;
}
.overlay--margin-left {
grid-area: margin-left;
}
.overlay--thumbnail {
grid-area: thumbnail;
color: blue;
}
</style> </style>
</head> </head>
<body <body
@ -63,9 +100,10 @@
--width: 100px; --width: 100px;
--height: 100px; --height: 100px;
--overflow-width: 150px; --overflow-width: 150px;
--overflow--height: 150px; --overflow-height: 150px;
display: flex; display: flex;
" "
class="guides"
> >
<section style="margin-right: 20px"> <section style="margin-right: 20px">
<h1>Generator kart na social media</h1> <h1>Generator kart na social media</h1>
@ -86,6 +124,11 @@ Treść komunikatu</textarea
> >
Tryb overflow Tryb overflow
</label> </label>
<input type="checkbox" id="guides" onchange="reguides()" checked /><label
for="guides"
>
Pokaż prowadnice
</label>
</section> </section>
<section> <section>
<h2>Twitter</h2> <h2>Twitter</h2>
@ -93,8 +136,6 @@ Treść komunikatu</textarea
id="container" id="container"
style=" style="
box-sizing: border-box; box-sizing: border-box;
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));
@ -104,7 +145,10 @@ Treść komunikatu</textarea
<div id="text_box"> <div id="text_box">
<p <p
id="text_target" id="text_target"
style="font-size: calc(var(--scale) * 16px); padding: var(--padding);" style="
font-size: calc(var(--scale) * 16px);
padding: var(--padding);
"
> >
Treść komunikatu Treść komunikatu
</p> </p>
@ -148,6 +192,13 @@ Treść komunikatu</textarea
" "
></div> ></div>
</div> </div>
<div class="overlay overlay--margin overlay--margin-left">
ucięte z lewej
</div>
<div class="overlay overlay--margin overlay--margin-right">
ucięte z prawej
</div>
<div class="overlay overlay--thumbnail">widoczne na miniaturce</div>
</div> </div>
</section> </section>
</body> </body>
@ -205,6 +256,8 @@ Treść komunikatu</textarea
const [overflow_width, overflow_height] = sizes[size.value].overflow_size; const [overflow_width, overflow_height] = sizes[size.value].overflow_size;
body.style.setProperty("--width", width + "px"); body.style.setProperty("--width", width + "px");
body.style.setProperty("--height", height + "px"); body.style.setProperty("--height", height + "px");
body.style.setProperty("--width-int", width);
body.style.setProperty("--height-int", height);
body.style.setProperty("--overflow-width", overflow_width + "px"); body.style.setProperty("--overflow-width", overflow_width + "px");
body.style.setProperty("--overflow-height", overflow_height + "px"); body.style.setProperty("--overflow-height", overflow_height + "px");
}; };
@ -225,11 +278,21 @@ Treść komunikatu</textarea
} }
} }
function reguides() {
const should_guides = guides.checked;
if (should_guides) {
body.classList.add("guides");
} else {
body.classList.remove("guides");
}
}
refreshText(); refreshText();
refreshImage(); refreshImage();
resize(); resize();
rescale(); rescale();
reoverflow(); reoverflow();
reguides();
text.oninput = refreshText; text.oninput = refreshText;
file.onchange = refreshImage; file.onchange = refreshImage;