studio-variable/index-main
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

add title to share modal
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-06 15:26:52 +01:00
parent b9cefffdfa
commit 4262be067d
4 changed files with 50 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

23
assets/css/components/_modal-share.scss
View file

@ -2,12 +2,28 @@
width: 240px; width: 240px;
padding-bottom: var(--padding-inner); padding-bottom: var(--padding-inner);
background-color: var(--color-bg); background-color: var(--color-bg);
.title {
font-size: var(--fs-xsmall);
line-height: 1.2;
padding: var(--padding-inner);
padding-bottom: 0px;
@include clamp(2);
font-style: italic;
&::before{
content: "« ";
}
&::after{
content: " »";
}
}
.socials{ .socials{
display: block; display: block;
list-style: none; list-style: none;
li{ li{
font-size: var(--fs-normal); font-size: var(--fs-xsmall);
border-bottom: var(--border-light); border-bottom: var(--border-light);
&:first-of-type{ &:first-of-type{
border-top: var(--border-light); border-top: var(--border-light);
@ -18,6 +34,7 @@
align-items: center; align-items: center;
gap: 2ch; gap: 2ch;
text-decoration: none; text-decoration: none;
font-size: var(--fs-xsmall);
} }
.icon { .icon {
width: 16px; width: 16px;
@ -69,7 +86,7 @@
width: 12px; width: 12px;
} }
input{ input{
font-size: var(--fs-small); font-size: var(--fs-xsmall);
font-family: var(--font); font-family: var(--font);
background: none; background: none;
border: none; border: none;
@ -96,7 +113,7 @@
color: var(--color-bg); color: var(--color-bg);
border-radius: var(--radius-btn); border-radius: var(--radius-btn);
padding: 0 1ch; padding: 0 1ch;
font-size: var(--fs-small); font-size: var(--fs-xsmall);
padding-top: 2px; padding-top: 2px;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;

24
assets/css/style.css
View file

@ -907,12 +907,29 @@ button.sort[data-sort-type=up] .arrow {
padding-bottom: var(--padding-inner); padding-bottom: var(--padding-inner);
background-color: var(--color-bg); background-color: var(--color-bg);
} }
.modal--share .title {
font-size: var(--fs-xsmall);
line-height: 1.2;
padding: var(--padding-inner);
padding-bottom: 0px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-style: italic;
}
.modal--share .title::before {
content: "« ";
}
.modal--share .title::after {
content: " »";
}
.modal--share .socials { .modal--share .socials {
display: block; display: block;
list-style: none; list-style: none;
} }
.modal--share .socials li { .modal--share .socials li {
font-size: var(--fs-normal); font-size: var(--fs-xsmall);
border-bottom: var(--border-light); border-bottom: var(--border-light);
} }
.modal--share .socials li:first-of-type { .modal--share .socials li:first-of-type {
@ -923,6 +940,7 @@ button.sort[data-sort-type=up] .arrow {
align-items: center; align-items: center;
gap: 2ch; gap: 2ch;
text-decoration: none; text-decoration: none;
font-size: var(--fs-xsmall);
} }
.modal--share .socials li .icon { .modal--share .socials li .icon {
width: 16px; width: 16px;
@ -962,7 +980,7 @@ button.sort[data-sort-type=up] .arrow {
width: 12px; width: 12px;
} }
.modal--share .copy-link input { .modal--share .copy-link input {
font-size: var(--fs-small); font-size: var(--fs-xsmall);
font-family: var(--font); font-family: var(--font);
background: none; background: none;
border: none; border: none;
@ -988,7 +1006,7 @@ button.sort[data-sort-type=up] .arrow {
color: var(--color-bg); color: var(--color-bg);
border-radius: var(--radius-btn); border-radius: var(--radius-btn);
padding: 0 1ch; padding: 0 1ch;
font-size: var(--fs-small); font-size: var(--fs-xsmall);
padding-top: 2px; padding-top: 2px;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

8
site/snippets/modal-share.php
View file

@ -1,6 +1,14 @@
<div class="modal--share"> <div class="modal--share">
<p class="title"><?= $page->title()->esc() ?>
<?php if ($page->subtitle()->isNotEmpty()): ?>
<?= $page->subtitle()->esc() ?>
<?php endif ?>
</p>
<ul class="socials"> <ul class="socials">
<li class="socials__x"> <li class="socials__x">
<a href="https://x.com/index_ngo" target="_blank" rel="noopener noreferrer"> <a href="https://x.com/index_ngo" target="_blank" rel="noopener noreferrer">