Ty Clifford
3e7cea4491
Changed: [themes/neon/assets/app.js](/Users/tyemeclifford/Documents/GH/blog/themes/neon/assets/app.js) Scans each single post’s .markdown content. Collects images, native videos, shortcode/video iframes, and direct image/video links. Opens media in a lightbox with Previous/Next, count, caption, Escape close, and arrow-key navigation. Clicking a displayed image advances to the next item. [themes/neon/assets/style.css](/Users/tyemeclifford/Documents/GH/blog/themes/neon/assets/style.css) Added clickable media styling, embed “View” buttons, and responsive lightbox layout. Works in dark and light modes. [CHANGELOG.md](/Users/tyemeclifford/Documents/GH/blog/CHANGELOG.md) Added the feature note.
798 lines
15 KiB
CSS
798 lines
15 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
--bg: #07080d;
|
|
--bg-soft: #10131b;
|
|
--surface: #141823;
|
|
--surface-strong: #1b2130;
|
|
--text: #edf5ff;
|
|
--muted: #9aa8b7;
|
|
--line: rgba(255, 255, 255, 0.12);
|
|
--accent: #42ff8b;
|
|
--accent-2: #35c9ff;
|
|
--accent-3: #ff4f8f;
|
|
--warning: #ff9f43;
|
|
--danger: #ff4d5f;
|
|
--shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
|
|
--radius: 8px;
|
|
}
|
|
|
|
:root[data-accent="green"] { --accent: #42ff8b; --accent-2: #35c9ff; }
|
|
:root[data-accent="blue"] { --accent: #35c9ff; --accent-2: #a084ff; }
|
|
:root[data-accent="red"] { --accent: #ff4d5f; --accent-2: #ff9f43; }
|
|
:root[data-accent="pink"] { --accent: #ff4fbd; --accent-2: #35c9ff; }
|
|
:root[data-accent="purple"] { --accent: #a084ff; --accent-2: #42ff8b; }
|
|
:root[data-accent="orange"] { --accent: #ff9f43; --accent-2: #ff4d5f; }
|
|
|
|
:root[data-mode="light"] {
|
|
color-scheme: light;
|
|
--bg: #f7f9fc;
|
|
--bg-soft: #eef3f8;
|
|
--surface: #ffffff;
|
|
--surface-strong: #e8eef6;
|
|
--text: #111827;
|
|
--muted: #5f6d7a;
|
|
--line: rgba(17, 24, 39, 0.13);
|
|
--shadow: 0 20px 60px rgba(58, 75, 95, 0.16);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
min-height: 100%;
|
|
margin: 0;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.65;
|
|
color: var(--text);
|
|
background:
|
|
linear-gradient(90deg, rgba(66, 255, 139, 0.05) 1px, transparent 1px),
|
|
linear-gradient(0deg, rgba(53, 201, 255, 0.04) 1px, transparent 1px),
|
|
linear-gradient(180deg, var(--bg), var(--bg-soft));
|
|
background-size: 54px 54px, 54px 54px, auto;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent);
|
|
text-underline-offset: 0.18em;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
color: var(--text);
|
|
background: color-mix(in srgb, var(--surface) 86%, transparent);
|
|
}
|
|
|
|
button {
|
|
min-height: 42px;
|
|
padding: 0.65rem 0.9rem;
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
}
|
|
|
|
button:hover {
|
|
border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
|
|
}
|
|
|
|
input,
|
|
textarea {
|
|
width: 100%;
|
|
padding: 0.72rem 0.82rem;
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
}
|
|
|
|
.site-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 1fr) auto minmax(180px, 260px) auto;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
padding: 1rem clamp(1rem, 4vw, 3rem);
|
|
border-bottom: 1px solid var(--line);
|
|
background: color-mix(in srgb, var(--bg) 86%, transparent);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.brand {
|
|
display: inline-flex;
|
|
gap: 0.8rem;
|
|
align-items: center;
|
|
min-width: 0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.brand__mark {
|
|
width: 38px;
|
|
height: 38px;
|
|
flex: 0 0 auto;
|
|
border: 1px solid color-mix(in srgb, var(--accent) 60%, white);
|
|
border-radius: 8px;
|
|
background:
|
|
linear-gradient(135deg, transparent 0 38%, var(--accent) 39% 45%, transparent 46%),
|
|
linear-gradient(45deg, var(--accent-2), var(--accent-3));
|
|
box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 36%, transparent);
|
|
}
|
|
|
|
.brand strong,
|
|
.brand small {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.brand strong {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.brand small {
|
|
color: var(--muted);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.main-nav,
|
|
.theme-tools,
|
|
.social-list,
|
|
.tag-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.55rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.main-nav a,
|
|
.social-list a,
|
|
.tag-row a {
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
padding: 0.34rem 0.68rem;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
background: color-mix(in srgb, var(--surface) 72%, transparent);
|
|
}
|
|
|
|
.main-nav a:hover,
|
|
.social-list a:hover,
|
|
.tag-row a:hover {
|
|
color: var(--text);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.search-form {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 0.45rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.search-form button,
|
|
.wide-search button,
|
|
.comment-form button {
|
|
color: #06100b;
|
|
border-color: color-mix(in srgb, var(--accent) 70%, white);
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
|
}
|
|
|
|
.theme-tools {
|
|
justify-content: end;
|
|
}
|
|
|
|
.mode-toggle {
|
|
min-width: 72px;
|
|
}
|
|
|
|
.swatch {
|
|
width: 30px;
|
|
height: 30px;
|
|
min-height: 30px;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.swatch--green { background: #42ff8b; }
|
|
.swatch--blue { background: #35c9ff; }
|
|
.swatch--red { background: #ff4d5f; }
|
|
.swatch--pink { background: #ff4fbd; }
|
|
.swatch--purple { background: #a084ff; }
|
|
.swatch--orange { background: #ff9f43; }
|
|
|
|
.site-shell {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 280px;
|
|
gap: clamp(1.5rem, 4vw, 3rem);
|
|
width: min(1180px, calc(100% - 2rem));
|
|
margin: 2rem auto 0;
|
|
}
|
|
|
|
.content-lane {
|
|
min-width: 0;
|
|
}
|
|
|
|
.page-heading,
|
|
.article__header,
|
|
.error-view {
|
|
margin-bottom: 1.4rem;
|
|
}
|
|
|
|
.page-heading p,
|
|
.article__header p {
|
|
max-width: 760px;
|
|
margin: 0 0 0.45rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
line-height: 1.16;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
h1 {
|
|
max-width: 820px;
|
|
margin: 0;
|
|
font-size: 4rem;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.post-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.post-card,
|
|
.comment {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background:
|
|
linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-strong) 88%, transparent));
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.post-card {
|
|
display: grid;
|
|
align-content: start;
|
|
min-height: 260px;
|
|
padding: 1.1rem;
|
|
}
|
|
|
|
.post-card__meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.55rem;
|
|
align-items: center;
|
|
margin-bottom: 0.85rem;
|
|
color: var(--muted);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.post-card__meta a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.post-card h2 {
|
|
margin: 0 0 0.65rem;
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.post-card p {
|
|
margin: 0 0 1rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.wide-search {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 0.65rem;
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
.article,
|
|
.comments {
|
|
max-width: 820px;
|
|
}
|
|
|
|
.article {
|
|
padding-bottom: 2rem;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.article__header h1 {
|
|
font-size: 3.4rem;
|
|
}
|
|
|
|
.markdown {
|
|
color: color-mix(in srgb, var(--text) 92%, var(--muted));
|
|
}
|
|
|
|
.markdown > * {
|
|
max-width: 760px;
|
|
}
|
|
|
|
.markdown img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
.markdown video {
|
|
max-width: 100%;
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--line);
|
|
background: #020403;
|
|
}
|
|
|
|
.tcms-lightboxable {
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
.tcms-lightboxable:focus-visible,
|
|
.tcms-lightbox-trigger:focus-visible {
|
|
outline: 3px solid color-mix(in srgb, var(--accent) 70%, white);
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
.markdown pre {
|
|
overflow: auto;
|
|
padding: 1rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: #05070a;
|
|
}
|
|
|
|
:root[data-mode="light"] .markdown pre {
|
|
background: #edf2f8;
|
|
}
|
|
|
|
.markdown code {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.markdown blockquote {
|
|
margin-left: 0;
|
|
padding-left: 1rem;
|
|
border-left: 3px solid var(--accent);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.article-tags {
|
|
margin-top: 1.4rem;
|
|
}
|
|
|
|
.comments {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.comment {
|
|
margin-bottom: 0.85rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.comment header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.6rem;
|
|
justify-content: space-between;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.comment p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.comment-form {
|
|
display: grid;
|
|
gap: 0.85rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.comment-form label {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
color: var(--muted);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.85rem;
|
|
}
|
|
|
|
.honey-field {
|
|
position: absolute;
|
|
left: -10000px;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.notice,
|
|
.empty-state {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
padding: 0.85rem 1rem;
|
|
background: color-mix(in srgb, var(--surface) 86%, transparent);
|
|
}
|
|
|
|
.notice--success {
|
|
border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
|
|
}
|
|
|
|
.notice--error {
|
|
border-color: color-mix(in srgb, var(--danger) 70%, var(--line));
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.45rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 1.5rem 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.pager {
|
|
min-width: 44px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
padding: 0.6rem 0.9rem;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.pager:first-child,
|
|
.pager:nth-last-child(2) {
|
|
min-width: 104px;
|
|
}
|
|
|
|
.pager--current {
|
|
color: #06100b;
|
|
border-color: color-mix(in srgb, var(--accent) 70%, white);
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
|
}
|
|
|
|
.pager--disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.48;
|
|
}
|
|
|
|
.pagination__summary {
|
|
flex-basis: 100%;
|
|
margin-top: 0.25rem;
|
|
text-align: center;
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.shortcode-embed {
|
|
display: block;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
margin: 1.5rem 0;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: #020403;
|
|
box-shadow: var(--shadow);
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.shortcode-embed iframe {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
.tcms-lightbox-host {
|
|
position: relative;
|
|
}
|
|
|
|
.tcms-lightbox-trigger {
|
|
min-height: 0;
|
|
margin: 0.45rem 0 1rem;
|
|
padding: 0.42rem 0.7rem;
|
|
border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
|
|
color: var(--text);
|
|
background: color-mix(in srgb, var(--bg) 84%, transparent);
|
|
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.tcms-lightbox-host .tcms-lightbox-trigger {
|
|
position: absolute;
|
|
top: 0.7rem;
|
|
right: 0.7rem;
|
|
z-index: 2;
|
|
margin: 0;
|
|
}
|
|
|
|
body.tcms-lightbox-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tcms-lightbox[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.tcms-lightbox {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: clamp(0.75rem, 3vw, 2rem);
|
|
}
|
|
|
|
.tcms-lightbox__backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
min-height: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: rgba(0, 0, 0, 0.82);
|
|
cursor: zoom-out;
|
|
}
|
|
|
|
.tcms-lightbox__dialog {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
gap: 0.75rem;
|
|
width: min(1120px, 100%);
|
|
max-height: min(860px, 96vh);
|
|
border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
|
|
border-radius: var(--radius);
|
|
padding: 0.8rem;
|
|
background: color-mix(in srgb, var(--bg) 94%, black);
|
|
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.56);
|
|
}
|
|
|
|
:root[data-mode="light"] .tcms-lightbox__dialog {
|
|
background: color-mix(in srgb, var(--surface) 96%, white);
|
|
}
|
|
|
|
.tcms-lightbox__bar {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
gap: 0.7rem;
|
|
align-items: center;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.tcms-lightbox__title {
|
|
overflow: hidden;
|
|
color: var(--text);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tcms-lightbox__count {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tcms-lightbox__close,
|
|
.tcms-lightbox__nav {
|
|
min-height: 38px;
|
|
padding: 0.48rem 0.72rem;
|
|
}
|
|
|
|
.tcms-lightbox__stage {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
min-height: 0;
|
|
}
|
|
|
|
.tcms-lightbox__media {
|
|
display: grid;
|
|
place-items: center;
|
|
min-width: 0;
|
|
min-height: min(62vh, 620px);
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: #020403;
|
|
}
|
|
|
|
.tcms-lightbox__media img,
|
|
.tcms-lightbox__media video {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: min(72vh, 680px);
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.tcms-lightbox__media img {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tcms-lightbox__media video {
|
|
width: 100%;
|
|
}
|
|
|
|
.tcms-lightbox__media iframe {
|
|
display: block;
|
|
width: min(100%, 1040px);
|
|
height: min(68vh, 585px);
|
|
border: 0;
|
|
}
|
|
|
|
.tcms-lightbox__caption {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.side-rail {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 1.8rem;
|
|
min-width: 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.side-rail section {
|
|
border-top: 1px solid var(--line);
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.side-rail h2 {
|
|
margin-bottom: 0.7rem;
|
|
color: var(--text);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.link-list {
|
|
display: grid;
|
|
gap: 0.45rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.link-list li {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.link-list span {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.site-footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.8rem;
|
|
justify-content: space-between;
|
|
width: min(1180px, calc(100% - 2rem));
|
|
margin: 3rem auto 1.5rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--line);
|
|
color: var(--muted);
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.site-header {
|
|
grid-template-columns: 1fr;
|
|
align-items: start;
|
|
}
|
|
|
|
.theme-tools {
|
|
justify-content: start;
|
|
}
|
|
|
|
.site-shell {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.post-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.article__header h1 {
|
|
font-size: 2.8rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.site-header {
|
|
position: static;
|
|
}
|
|
|
|
.main-nav,
|
|
.theme-tools {
|
|
width: 100%;
|
|
}
|
|
|
|
.search-form,
|
|
.wide-search,
|
|
.form-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
h1,
|
|
.article__header h1 {
|
|
font-size: 2.25rem;
|
|
}
|
|
|
|
.tcms-lightbox__dialog {
|
|
padding: 0.6rem;
|
|
}
|
|
|
|
.tcms-lightbox__bar {
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
|
|
.tcms-lightbox__count {
|
|
grid-column: 1 / -1;
|
|
order: 3;
|
|
}
|
|
|
|
.tcms-lightbox__stage {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.tcms-lightbox__media {
|
|
grid-column: 1 / -1;
|
|
grid-row: 1;
|
|
min-height: 50vh;
|
|
}
|
|
|
|
.tcms-lightbox__nav {
|
|
grid-row: 2;
|
|
width: 100%;
|
|
}
|
|
|
|
.tcms-lightbox__nav--previous {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.tcms-lightbox__nav--next {
|
|
grid-column: 2;
|
|
}
|
|
}
|