Dodanie prowadnic pokazujących, jak wygladają cięcia
thumbnaili. Trochę zbugowane, ale jest krok do przodu
This commit is contained in:
parent
db6ab4fc19
commit
e5adf4449d
|
|
@ -10,24 +10,26 @@
|
|||
}
|
||||
|
||||
* {
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
font-family: "Noto Sans", sans-serif;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
font-family: Poppins;
|
||||
}
|
||||
|
||||
#container.overflow {
|
||||
display: grid !important;
|
||||
grid-template-columns:
|
||||
1fr calc(
|
||||
(
|
||||
var(--width) / var(--height) * var(--overflow-height) - 2 *
|
||||
var(--padding)
|
||||
) * var(--scale)
|
||||
)
|
||||
1fr;
|
||||
width: calc(var(--scale) * var(--overflow-width)) !important;
|
||||
--ratio: calc(var(--width-int) / var(--height-int));
|
||||
--thumbnail-width: calc(
|
||||
(var(--ratio) * var(--overflow-height)) * var(--scale)
|
||||
);
|
||||
--full-width: calc(var(--scale) * var(--overflow-width));
|
||||
--margin: calc((var(--full-width) - var(--thumbnail-width)) / 2);
|
||||
grid-template-columns: var(--margin) var(--thumbnail-width) var(
|
||||
--margin
|
||||
);
|
||||
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;
|
||||
grid-template-rows: 1fr 10fr;
|
||||
background-color: var(--yellow);
|
||||
|
|
@ -35,24 +37,59 @@
|
|||
|
||||
#container.overflow #text_box {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#container.overflow #image_box {
|
||||
grid-column: 1/4;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
#text_box {
|
||||
background-color: var(--yellow);
|
||||
color: #fff;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: 1fr min-content;
|
||||
}
|
||||
|
||||
#text_target {
|
||||
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>
|
||||
</head>
|
||||
<body
|
||||
|
|
@ -63,9 +100,10 @@
|
|||
--width: 100px;
|
||||
--height: 100px;
|
||||
--overflow-width: 150px;
|
||||
--overflow--height: 150px;
|
||||
--overflow-height: 150px;
|
||||
display: flex;
|
||||
"
|
||||
class="guides"
|
||||
>
|
||||
<section style="margin-right: 20px">
|
||||
<h1>Generator kart na social media</h1>
|
||||
|
|
@ -86,6 +124,11 @@ Treść komunikatu</textarea
|
|||
>
|
||||
Tryb overflow
|
||||
</label>
|
||||
<input type="checkbox" id="guides" onchange="reguides()" checked /><label
|
||||
for="guides"
|
||||
>
|
||||
Pokaż prowadnice
|
||||
</label>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Twitter</h2>
|
||||
|
|
@ -93,8 +136,6 @@ Treść komunikatu</textarea
|
|||
id="container"
|
||||
style="
|
||||
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;
|
||||
flex-flow: column;
|
||||
width: calc(var(--scale) * var(--width));
|
||||
|
|
@ -104,7 +145,10 @@ Treść komunikatu</textarea
|
|||
<div id="text_box">
|
||||
<p
|
||||
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
|
||||
</p>
|
||||
|
|
@ -148,6 +192,13 @@ Treść komunikatu</textarea
|
|||
"
|
||||
></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>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -205,6 +256,8 @@ Treść komunikatu</textarea
|
|||
const [overflow_width, overflow_height] = sizes[size.value].overflow_size;
|
||||
body.style.setProperty("--width", width + "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-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();
|
||||
refreshImage();
|
||||
resize();
|
||||
rescale();
|
||||
reoverflow();
|
||||
reguides();
|
||||
|
||||
text.oninput = refreshText;
|
||||
file.onchange = refreshImage;
|
||||
|
|
|
|||
Loading…
Reference in New Issue