/*
Theme Name: Sze-Wing Tang Academic
Theme URI: https://www.swtang.net/
Author: Migration prototype
Description: Responsive WordPress theme retaining the layout and colour identity of the legacy Sze-Wing Tang website.
Version: 1.0.15
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: swtang-academic
*/
:root {
--ink: #292322;
--muted: #68605d;
--paper: #ffffff;
--line: #e4dad5;
--brown: #3a2419;
--brown-dark: #24120c;
--red: #a41418;
--red-dark: #751014;
--orange: #ef7211;
--orange-light: #ff9631;
--content: 910px;
--shadow: 0 10px 30px rgba(48, 24, 18, .10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--ink);
background:
linear-gradient(to bottom, #4a362b 0, #5a463b 170px, #b7aaa2 520px, #ffffff 760px) no-repeat,
#ffffff;
font-family: Verdana, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
font-size: 14px;
line-height: 1.55;
}
a { color: var(--red-dark); text-underline-offset: .18em; }
a:hover { color: var(--orange); }
img { max-width: 100%; height: auto; }
.skip-link {
position: fixed;
left: 1rem;
top: -5rem;
z-index: 1000;
padding: .7rem 1rem;
color: #fff;
background: var(--red-dark);
}
.skip-link:focus { top: 1rem; }
.site-header { color: #fff; }
.header-inner,
.navigation-inner,
.legacy-home-frame,
.site-main,
.footer-inner {
width: min(calc(100% - 2rem), var(--content));
margin-inline: auto;
}
.header-inner {
min-height: 100px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.site-branding { display: flex; flex-direction: column; line-height: 1.15; }
.site-title {
color: #fff;
font-family: Arial, "Noto Sans TC", sans-serif;
font-size: clamp(1.55rem, 4vw, 2.25rem);
font-weight: 800;
letter-spacing: -.02em;
text-decoration: none;
text-transform: uppercase;
}
.site-description { margin-top: .4rem; color: rgba(255,255,255,.72); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.header-contact { display: grid; justify-items: end; gap: .15rem; color: rgba(255,255,255,.92); font-size: .72rem; }
.header-contact span:first-child { color: #fff; }
.header-contact b { color: #ef5c51; font-weight: 500; }
.header-contact a { color: #fff; text-decoration: none; }
.menu-toggle {
display: none;
border: 1px solid rgba(255,255,255,.5);
border-radius: 4px;
padding: .5rem .7rem;
color: #fff;
background: transparent;
font: inherit;
}
.primary-navigation { background: linear-gradient(to bottom, #bd1e1b, #991414); }
.navigation-inner { min-height: 43px; display: flex; align-items: stretch; }
.primary-menu,
.primary-menu ul { margin: 0; padding: 0; list-style: none; }
.primary-menu { width: 100%; display: flex; align-items: stretch; justify-content: space-around; }
.primary-menu li { display: flex; flex: 1 1 auto; }
.primary-menu a {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: .62rem .45rem;
color: #fff;
font-size: .72rem;
font-weight: 650;
text-align: center;
text-decoration: none;
white-space: nowrap;
}
.primary-menu a:hover,
.primary-menu .current-menu-item > a { color: #fff; background: rgba(74, 0, 0, .28); }
.legacy-home-frame { background: #fff; box-shadow: var(--shadow); }
.legacy-banner { line-height: 0; background: #140303; }
.legacy-banner img { width: 100%; display: block; }
.legacy-title-strip {
min-height: 43px;
display: flex;
align-items: center;
gap: .65rem;
padding: .65rem 2rem;
color: #fff;
background: linear-gradient(to bottom, var(--orange-light), var(--orange));
font-family: Arial, "Noto Sans TC", sans-serif;
font-size: 1rem;
font-weight: 800;
}
.legacy-title-strip small { font-size: .78rem; font-weight: 650; }
.site-main { padding: 2.2rem 2.2rem 3.5rem; background: #fff; }
.legacy-home-frame .site-main { width: 100%; }
.home-main { min-height: 460px; }
.profile-content { color: #38312f; }
.profile-content > table,
.profile-content table { max-width: 100%; }
.profile-content > table { width: 100%; }
.profile-content img { border-radius: 0; }
.profile-content img[src*="profilepic2017-mini"] {
display: block;
width: min(100%, 389px);
height: auto;
margin-inline: auto;
}
.profile-content p { margin: 1rem 0; }
.quick-links { margin-top: 3.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.quick-links-heading h2 { margin: 0 0 1rem; color: var(--red-dark); font-family: Arial, "Noto Sans TC", sans-serif; font-size: 1rem; }
.quick-links-heading h2 span { margin-left: .35rem; color: var(--muted); font-size: .78rem; font-weight: 600; }
.section-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.section-card {
display: flex;
align-items: baseline;
gap: .45rem;
min-height: 54px;
padding: .8rem .9rem;
border: 1px solid var(--line);
border-left: 4px solid var(--orange);
color: var(--ink);
background: #fffaf5;
text-decoration: none;
}
.section-card:hover { border-color: #d79b72; color: var(--red); background: #fff4ea; }
.section-card .card-zh { font-weight: 750; }
.section-card .card-en { color: var(--muted); font-size: .74rem; }
.content-shell { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 2rem; align-items: start; }
.entry-card { padding: 0; background: #fff; }
.entry-header { margin-bottom: 1.5rem; padding: .65rem 1.2rem; color: #fff; background: linear-gradient(to bottom, var(--orange-light), var(--orange)); }
.entry-title { margin: 0; font-family: Arial, "Noto Sans TC", sans-serif; font-size: clamp(1.35rem, 3vw, 1.8rem); line-height: 1.2; }
.entry-content { overflow-wrap: anywhere; }
.entry-content h2, .entry-content h3 { margin-top: 2rem; color: var(--red-dark); line-height: 1.25; }
.entry-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.entry-content td, .entry-content th { padding: .5rem .65rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.side-card { padding: 1rem; border: 1px solid var(--line); border-top: 4px solid var(--orange); background: #fffaf5; }
.side-card h2 { margin: 0 0 .7rem; color: var(--red-dark); font-size: .88rem; }
.side-card p { margin: .3rem 0; color: var(--muted); font-size: .75rem; }
.site-footer { width: min(calc(100% - 2rem), var(--content)); margin: 0 auto; color: var(--muted); background: #fff; }
.footer-inner { width: 100%; padding: 1.3rem 2.2rem 1.8rem; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; border-top: 1px solid var(--line); }
.footer-title { color: var(--ink); font-weight: 750; }
.footer-meta { margin-top: .45rem; font-size: .7rem; }
.site-footer a { color: var(--red-dark); }
@media (max-width: 900px) {
body { background: linear-gradient(to bottom, #4a362b 0, #8a7b72 360px, #fff 680px) no-repeat; }
.header-inner { min-height: 84px; }
.header-contact { display: none; }
.menu-toggle { display: inline-flex; }
.primary-navigation { display: none; position: absolute; z-index: 99; left: 1rem; right: 1rem; background: var(--red-dark); box-shadow: var(--shadow); }
.primary-navigation.is-open { display: block; }
.navigation-inner { width: 100%; }
.primary-menu { display: grid; }
.primary-menu li { display: block; }
.primary-menu a { justify-content: flex-start; padding: .75rem 1rem; }
.section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-shell { grid-template-columns: 1fr; }
.side-card { display: none; }
}
@media (max-width: 620px) {
body { font-size: 13px; }
.header-inner, .legacy-home-frame, .site-main, .site-footer { width: min(calc(100% - 1rem), var(--content)); }
.site-title { font-size: 1.35rem; }
.site-description { display: none; }
.legacy-title-strip { padding-inline: 1rem; }
.site-main { padding: 1.3rem 1rem 2.5rem; }
.section-grid { grid-template-columns: 1fr; }
.section-card { min-height: 48px; }
.footer-inner { grid-template-columns: 1fr; padding-inline: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
.section-card { transition: color .18s ease, border-color .18s ease, background .18s ease; }
}
/* Keep the Links page close to the original site's compact list layout. */
.legacy-links-page { max-width: 840px; margin: 0 auto; }
.legacy-links-section { padding: .35rem 0; }
.legacy-links-heading { margin: .5rem 0 .55rem; color: var(--red); }
.legacy-links-heading img {
width: 18px;
height: 10px;
margin-right: .2rem;
vertical-align: middle;
}
.legacy-links-page ul { margin: .25rem 0 1rem; padding-left: 2rem; }
.legacy-links-page li + li { margin-top: .25rem; }
.legacy-links-page a { overflow-wrap: anywhere; }
.legacy-links-page hr { border: 0; border-top: 1px solid #dedede; }
.research-year-list > li + li { margin-top: .7rem; }
/* ===== Research information architecture refresh (v0.7.0) ===== */
/* Research pages now use the same standard canvas width as the other inner
sections, while detail pages keep the sticky left section navigation. */
.swtang-research-page .header-inner,
.swtang-research-page .navigation-inner,
.swtang-research-page .site-main,
.swtang-research-page .site-footer {
width: min(calc(100% - 2rem), var(--content));
}
.research-shell,
.research-shell .entry-card {
width: 100%;
}
.research-shell {
display: block;
}
/* ---------- Research overview (C): grouped directory ---------- */
.research-overview .entry-header {
margin-bottom: 1.25rem;
}
.research-overview-intro {
max-width: 850px;
color: #3b3330;
}
.research-overview-intro p {
margin: .65rem 0;
line-height: 1.68;
}
.research-overview-intro ol {
margin: .7rem 0 0;
padding-left: 1.45rem;
}
.research-overview-intro li {
margin: .32rem 0;
line-height: 1.58;
}
/* The imported research overview has a three-cell Dreamweaver layout:
intro | spacer | duplicated old navigation. JS marks those cells so the
useful intro remains editable in WordPress while the obsolete navigation
is hidden. */
.research-overview-intro .research-home-legacy-layout {
width: 100% !important;
max-width: 100% !important;
display: table;
border-collapse: collapse;
}
.research-overview-intro .research-home-intro-cell {
width: 100% !important;
padding: 0 !important;
border: 0 !important;
}
.research-overview-intro .legacy-research-spacer-cell,
.research-overview-intro .legacy-research-nav-cell {
display: none !important;
}
.research-directory {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.research-directory-group {
min-width: 0;
padding: 1rem 1rem .45rem;
border: 1px solid var(--line);
border-top: 3px solid var(--orange);
background: #fffdfb;
}
.research-directory-group h2 {
margin: 0 0 .55rem;
color: var(--red-dark);
font-family: Arial, "Noto Sans TC", sans-serif;
font-size: .92rem;
line-height: 1.25;
}
.research-directory-list {
margin: 0;
padding: 0;
list-style: none;
}
.research-directory-list li + li {
border-top: 1px solid #eee5e0;
}
.research-directory-list a {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .7rem;
padding: .68rem .1rem;
color: var(--ink);
font-size: .79rem;
font-weight: 650;
line-height: 1.35;
text-decoration: none;
}
.research-directory-list a::after {
content: "→";
flex: 0 0 auto;
color: var(--orange);
font-weight: 800;
}
.research-directory-list a:hover {
color: var(--red);
}
/* ---------- Research detail pages (A): sticky left navigation ---------- */
.research-workspace {
display: grid;
grid-template-columns: 205px minmax(0, 1fr);
gap: 2rem;
align-items: start;
}
.research-sidebar {
position: sticky;
top: 1rem;
align-self: start;
padding: .8rem 0;
border-top: 3px solid var(--orange);
border-bottom: 1px solid var(--line);
background: #fff;
}
.research-sidebar-title {
margin: 0 0 .5rem;
padding: 0 .75rem .55rem;
color: var(--red-dark);
font-family: Arial, "Noto Sans TC", sans-serif;
font-size: .9rem;
font-weight: 800;
border-bottom: 1px solid var(--line);
}
.research-sidebar-list,
.research-mobile-list {
margin: 0;
padding: 0;
list-style: none;
}
.research-sidebar-list a,
.research-mobile-list a {
display: block;
padding: .5rem .75rem;
border-left: 3px solid transparent;
color: #514744;
font-size: .75rem;
font-weight: 620;
line-height: 1.38;
text-decoration: none;
}
.research-sidebar-list a:hover,
.research-mobile-list a:hover {
color: var(--red);
background: #fff8f3;
}
.research-sidebar-list a.is-current,
.research-mobile-list a.is-current {
border-left-color: var(--orange);
color: var(--red-dark);
background: #fff6ef;
font-weight: 760;
}
.research-detail {
min-width: 0;
}
.research-detail .entry-header {
margin-bottom: 1.15rem;
}
/* Mobile disclosure is deliberately separate from the desktop sticky nav. */
.research-mobile-nav {
display: none;
margin: 0 0 1rem;
border: 1px solid var(--line);
background: #fffaf5;
}
.research-mobile-nav summary {
cursor: pointer;
padding: .7rem .8rem;
color: var(--red-dark);
font-weight: 750;
list-style: none;
}
.research-mobile-nav summary::-webkit-details-marker { display: none; }
.research-mobile-nav summary::after {
content: "+";
float: right;
color: var(--orange);
font-size: 1rem;
}
.research-mobile-nav[open] summary::after { content: "−"; }
.research-mobile-list { padding: 0 0 .45rem; border-top: 1px solid var(--line); }
/* ---------- Legacy Research content cleanup ---------- */
.research-detail .entry-content,
.research-overview .entry-content {
overflow-wrap: anywhere;
}
.research-detail .entry-content table,
.research-overview .entry-content table {
width: 100% !important;
max-width: 100% !important;
display: table;
overflow: visible;
border-collapse: collapse;
}
.research-detail .entry-content td,
.research-detail .entry-content th,
.research-overview .entry-content td,
.research-overview .entry-content th {
padding: 0;
border: 0;
}
.research-detail .entry-content div[align="center"],
.research-overview .entry-content div[align="center"] {
max-width: 100%;
}
.research-detail .entry-content ul,
.research-detail .entry-content ol {
margin: .45rem 0 1.1rem;
padding-left: 1.55rem;
}
.research-detail .entry-content li {
margin: .38rem 0;
line-height: 1.62;
}
.research-detail .entry-content li > p {
margin: 0;
}
.research-detail .entry-content p {
margin: .55rem 0;
line-height: 1.62;
}
.research-detail .entry-content hr {
margin: 1.15rem 0;
border: 0;
border-top: 1px solid var(--line);
}
/* The smallest table containing the duplicated old Research navigation is
marked by navigation.js on detail pages only. */
.research-detail .legacy-research-nav {
display: none !important;
}
/* Make legacy year headings easier to scan without changing stored content. */
.research-detail .entry-content p > b > font[color="#990000"]:only-child,
.research-detail .entry-content p > strong:first-child:last-child {
letter-spacing: .01em;
}
/* Old PDFs / DOI / URLs may be long. */
.research-detail .entry-content a,
.research-overview .entry-content a {
overflow-wrap: anywhere;
}
@media (max-width: 900px) {
.swtang-research-page .header-inner,
.swtang-research-page .navigation-inner,
.swtang-research-page .site-main,
.swtang-research-page .site-footer {
width: min(calc(100% - 2rem), var(--content));
}
.research-workspace {
grid-template-columns: 175px minmax(0, 1fr);
gap: 1.35rem;
}
.research-directory {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.research-workspace {
display: block;
}
.research-sidebar {
display: none;
}
.research-mobile-nav {
display: block;
}
}
@media (max-width: 620px) {
.swtang-research-page .header-inner,
.swtang-research-page .site-main,
.swtang-research-page .site-footer {
width: min(calc(100% - 1rem), var(--content));
}
.research-directory {
grid-template-columns: 1fr;
gap: .7rem;
margin-top: 1.35rem;
}
.research-directory-group {
padding: .85rem .85rem .35rem;
}
.research-directory-list a {
padding: .62rem .05rem;
font-size: .78rem;
}
.research-detail .entry-content ul,
.research-detail .entry-content ol {
padding-left: 1.2rem;
}
.research-detail .entry-content p,
.research-detail .entry-content li {
line-height: 1.58;
}
}
/* ---------- v0.7.1: Research overview legacy-layout hardening ----------
Do not rely on JavaScript to remove the duplicated Dreamweaver navigation.
The migrated Research overview has an outer one-cell layout table and an
inner three-cell row: intro | spacer | old navigation. These selectors keep
the editable introduction and hide only the obsolete spacer/navigation. */
.swtang-research-overview .research-overview-intro > table,
.swtang-research-overview .research-overview-intro > table > tbody,
.swtang-research-overview .research-overview-intro > table > tbody > tr,
.swtang-research-overview .research-overview-intro > table > tbody > tr > td,
.swtang-research-overview .research-overview-intro > table > tbody > tr > td > div,
.swtang-research-overview .research-overview-intro > table > tbody > tr > td > div > table,
.swtang-research-overview .research-overview-intro > table > tbody > tr > td > div > table > tbody,
.swtang-research-overview .research-overview-intro > table > tbody > tr > td > div > table > tbody > tr {
width: 100% !important;
max-width: 100% !important;
}
.swtang-research-overview .research-overview-intro > table > tbody > tr > td > div {
text-align: left !important;
}
.swtang-research-overview .research-overview-intro > table > tbody > tr > td > div > table > tbody > tr > td:first-child {
width: 100% !important;
display: table-cell !important;
padding: 0 !important;
border: 0 !important;
}
.swtang-research-overview .research-overview-intro > table > tbody > tr > td > div > table > tbody > tr > td:nth-child(2),
.swtang-research-overview .research-overview-intro > table > tbody > tr > td > div > table > tbody > tr > td:nth-child(3) {
display: none !important;
}
.swtang-research-overview .research-overview-intro {
max-width: 780px;
}
/* Give the directory a little more separation from the biographical text. */
.swtang-research-overview .research-directory {
margin-top: 2.25rem;
padding-top: .15rem;
}
@media (max-width: 900px) {
.swtang-research-overview .research-overview-intro {
max-width: 100%;
}
}
/* ---------- v0.7.4: Research overview aligned with other sections ---------- */
/* Use the same standard content width and two-column rhythm as the site's
other inner pages. The Academic profile card replaces the profile photo. */
.research-overview-shell {
display: grid;
grid-template-columns: minmax(0, 1fr) 220px;
gap: 2rem;
align-items: start;
}
.research-overview-shell .research-overview {
min-width: 0;
}
.research-overview-shell .research-profile-card {
align-self: start;
}
/* The grouped Research directory belongs to the whole page, so it spans
both columns below the introduction and the Academic profile card. */
.research-overview-shell .research-directory {
grid-column: 1 / -1;
width: 100%;
margin-top: .6rem;
}
/* The Research title now occupies only the main column, matching the title
width used on Teaching / Links-style inner pages. */
.research-overview .entry-header {
width: 100%;
}
@media (max-width: 900px) {
.research-overview-shell {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.research-overview-shell .research-profile-card {
display: block;
width: min(100%, 320px);
}
.research-overview-shell .research-directory {
grid-column: 1;
margin-top: .25rem;
}
}
@media (max-width: 620px) {
.research-overview-shell .research-profile-card {
width: 100%;
}
}
/* ---------- v0.7.5: bilingual profile rhythm + cross-page/mobile polish ---------- */
/* Reserve scrollbar space so short pages (such as Links) and long pages do
not shift the entire 910px canvas sideways when the vertical scrollbar
appears/disappears. */
html {
scrollbar-gutter: stable;
}
body {
min-height: 100vh;
overflow-x: hidden;
}
.site-header {
position: relative;
}
/* Keep every inner page on the same canvas. Legacy Links content should fill
its article column rather than introduce a second, narrower centered width. */
.content-shell,
.entry-card,
.legacy-links-page {
width: 100%;
min-width: 0;
}
.legacy-links-page {
max-width: none;
margin-inline: 0;
}
/* Academic profile: Chinese and English are deliberately stacked. This keeps
all English labels on one line at the standard 220px sidebar width and
gives the card a more balanced vertical proportion. */
.academic-profile-card {
padding: 1rem 1.05rem 1.05rem;
}
.academic-profile-title {
margin: 0 0 .75rem;
line-height: 1.2;
}
.academic-profile-title .profile-zh,
.academic-profile-title .profile-en,
.academic-profile-item .profile-zh,
.academic-profile-item .profile-en {
display: block;
}
.academic-profile-title .profile-zh {
color: var(--red-dark);
font-size: .9rem;
font-weight: 800;
}
.academic-profile-title .profile-en {
margin-top: .14rem;
color: var(--red-dark);
font-size: .8rem;
font-weight: 700;
white-space: nowrap;
}
.academic-profile-list {
display: grid;
gap: .55rem;
}
.academic-profile-item {
min-width: 0;
}
.academic-profile-item .profile-zh {
color: #5b4d48;
font-size: .75rem;
font-weight: 650;
line-height: 1.35;
}
.academic-profile-item .profile-en {
margin-top: .08rem;
color: var(--muted);
font-size: .72rem;
line-height: 1.35;
white-space: nowrap;
}
/* General mobile/tablet harmonisation. */
@media (max-width: 900px) {
.site-main {
padding: 1.7rem 1.5rem 2.8rem;
}
/* Research keeps its profile information on tablet/mobile, but turns it
into a full-width compact band instead of a narrow sidebar card. */
.research-overview-shell .research-profile-card {
width: 100%;
max-width: none;
}
.research-profile-card .academic-profile-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .75rem 1rem;
}
.research-profile-card .academic-profile-item .profile-en {
white-space: normal;
}
.legacy-links-page {
width: 100%;
}
}
@media (max-width: 720px) {
.entry-header {
margin-bottom: 1.1rem;
}
.entry-content,
.legacy-links-page {
max-width: 100%;
}
.entry-content img,
.legacy-links-page img {
max-width: 100%;
height: auto;
}
.legacy-links-page ul {
padding-left: 1.35rem;
}
.legacy-links-page li {
line-height: 1.5;
}
}
@media (max-width: 620px) {
.header-inner {
min-height: 72px;
gap: .75rem;
padding-block: .65rem;
}
.site-title {
line-height: 1.08;
}
.menu-toggle {
flex: 0 0 auto;
padding: .45rem .6rem;
font-size: .75rem;
}
.primary-navigation {
left: .5rem;
right: .5rem;
}
.site-main {
padding: 1.15rem .9rem 2.1rem;
}
.entry-header {
padding: .62rem .85rem;
}
.entry-title {
font-size: 1.3rem;
}
.entry-content {
font-size: .8rem;
line-height: 1.58;
}
.research-profile-card .academic-profile-list {
grid-template-columns: 1fr;
gap: .5rem;
}
.academic-profile-card {
padding: .9rem;
}
.academic-profile-title {
margin-bottom: .65rem;
}
.academic-profile-item .profile-en {
white-space: normal;
}
.research-directory-group {
padding-inline: .8rem;
}
.research-directory-list a {
align-items: flex-start;
}
.legacy-links-page ul {
padding-left: 1.15rem;
}
.footer-meta,
.site-footer a {
overflow-wrap: anywhere;
}
}
/* ---------- v0.7.6: Teaching supervision table readability ---------- */
/* The migrated Teaching page contains several legacy supervision tables.
Keep real words intact, give the Year column enough room, and prevent
four-digit years / year ranges from breaking vertically. */
.swtang-teaching-page .entry-content {
overflow-wrap: normal;
}
.swtang-teaching-page .teaching-table-scroll {
width: 100%;
max-width: 100%;
margin: .65rem 0 1.15rem;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.swtang-teaching-page .entry-content .teaching-supervision-table {
display: table;
width: 100% !important;
min-width: 610px;
max-width: none !important;
margin: 0;
table-layout: fixed;
border-collapse: collapse;
overflow: visible;
}
.swtang-teaching-page .teaching-supervision-table td,
.swtang-teaching-page .teaching-supervision-table th {
padding: .58rem .62rem;
vertical-align: top;
word-break: normal;
overflow-wrap: break-word;
hyphens: none;
line-height: 1.48;
}
.swtang-teaching-page .teaching-supervision-table tr:first-child td,
.swtang-teaching-page .teaching-supervision-table tr:first-child th {
vertical-align: middle;
text-align: center;
white-space: nowrap;
}
/* Name | Topic | Degree | Year */
.swtang-teaching-page .teaching-supervision-4col td:nth-child(1),
.swtang-teaching-page .teaching-supervision-4col th:nth-child(1) {
width: 15%;
}
.swtang-teaching-page .teaching-supervision-4col td:nth-child(2),
.swtang-teaching-page .teaching-supervision-4col th:nth-child(2) {
width: 47%;
}
.swtang-teaching-page .teaching-supervision-4col td:nth-child(3),
.swtang-teaching-page .teaching-supervision-4col th:nth-child(3) {
width: 23%;
}
.swtang-teaching-page .teaching-supervision-4col td:nth-child(4),
.swtang-teaching-page .teaching-supervision-4col th:nth-child(4) {
width: 15%;
min-width: 88px;
white-space: nowrap;
text-align: center;
overflow-wrap: normal;
}
/* Name | Topic | Year */
.swtang-teaching-page .teaching-supervision-3col td:nth-child(1),
.swtang-teaching-page .teaching-supervision-3col th:nth-child(1) {
width: 23%;
}
.swtang-teaching-page .teaching-supervision-3col td:nth-child(2),
.swtang-teaching-page .teaching-supervision-3col th:nth-child(2) {
width: 61%;
}
.swtang-teaching-page .teaching-supervision-3col td:nth-child(3),
.swtang-teaching-page .teaching-supervision-3col th:nth-child(3) {
width: 16%;
min-width: 88px;
white-space: nowrap;
text-align: center;
overflow-wrap: normal;
}
@media (max-width: 720px) {
/* On phones, preserve a readable academic table instead of squeezing every
column into a few characters. The table becomes a contained horizontal
scroller while the rest of the page remains fully responsive. */
.swtang-teaching-page .teaching-table-scroll {
margin-inline: 0;
padding-bottom: .2rem;
}
.swtang-teaching-page .entry-content .teaching-supervision-table {
min-width: 680px;
font-size: .78rem;
}
.swtang-teaching-page .teaching-supervision-table td,
.swtang-teaching-page .teaching-supervision-table th {
padding: .5rem .55rem;
}
}
/* ---------- v0.7.7: Teaching full-width layout ---------- */
/* Teaching contains wide legacy supervision tables. Move the academic-profile
information from the narrow right rail into a compact horizontal band so the
actual teaching content receives the full standard inner-page width. */
.teaching-shell {
display: block;
width: 100%;
}
.teaching-page-card {
width: 100%;
}
.teaching-profile-band {
display: grid;
grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr));
align-items: stretch;
width: 100%;
margin: -0.15rem 0 1.6rem;
border: 1px solid var(--line);
border-top: 3px solid var(--orange);
background: #fffaf5;
}
.teaching-profile-heading,
.teaching-profile-item {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: .72rem .9rem;
}
.teaching-profile-item {
border-left: 1px solid #eadfd9;
}
.teaching-profile-band .profile-zh,
.teaching-profile-band .profile-en {
display: block;
}
.teaching-profile-heading .profile-zh {
color: var(--red-dark);
font-weight: 750;
line-height: 1.25;
}
.teaching-profile-heading .profile-en {
margin-top: .1rem;
color: var(--red-dark);
font-size: .76rem;
font-weight: 700;
line-height: 1.25;
}
.teaching-profile-item .profile-zh {
color: #5b4d48;
font-size: .76rem;
font-weight: 700;
line-height: 1.3;
}
.teaching-profile-item .profile-en {
margin-top: .12rem;
color: var(--muted);
font-size: .73rem;
line-height: 1.3;
white-space: nowrap;
}
/* With the sidebar removed, let Teaching tables use all available width. */
.swtang-teaching-page .entry-content {
width: 100%;
max-width: none;
}
.swtang-teaching-page .entry-content .teaching-supervision-table {
min-width: 0;
}
/* Keep year values intact while taking advantage of the wider content canvas. */
.swtang-teaching-page .teaching-supervision-4col td:nth-child(4),
.swtang-teaching-page .teaching-supervision-4col th:nth-child(4),
.swtang-teaching-page .teaching-supervision-3col td:nth-child(3),
.swtang-teaching-page .teaching-supervision-3col th:nth-child(3) {
min-width: 98px;
white-space: nowrap;
}
@media (max-width: 900px) {
.teaching-profile-band {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.teaching-profile-heading {
grid-column: 1 / -1;
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
gap: .55rem;
padding-bottom: .58rem;
border-bottom: 1px solid #eadfd9;
}
.teaching-profile-heading .profile-en {
margin-top: 0;
}
.teaching-profile-item:first-of-type {
border-left: 0;
}
}
@media (max-width: 620px) {
.teaching-profile-band {
grid-template-columns: 1fr;
margin-bottom: 1.2rem;
}
.teaching-profile-heading {
grid-column: auto;
grid-template-columns: 1fr;
gap: .08rem;
}
.teaching-profile-item {
border-left: 0;
border-top: 1px solid #eadfd9;
padding-block: .58rem;
}
.teaching-profile-item .profile-en {
white-space: normal;
}
/* On phones keep horizontal scrolling contained to the table itself; the
page frame and profile band remain fluid and fully visible. */
.swtang-teaching-page .entry-content .teaching-supervision-table {
min-width: 680px;
}
}
/* ---------- v0.7.8: Academic profile in Research detail sidebar ---------- */
/* The detail pages already reserve a stable left rail for Research navigation.
Reuse the otherwise empty space underneath it for the academic profile so
the main publication column remains uncluttered. */
.research-sidebar {
padding: 0;
border-top: 0;
border-bottom: 0;
background: transparent;
}
.research-sidebar-nav {
padding: .8rem 0;
border-top: 3px solid var(--orange);
border-bottom: 1px solid var(--line);
background: #fff;
}
.research-sidebar-profile {
margin-top: 1.35rem;
padding: .9rem .8rem 1rem;
border: 1px solid var(--line);
border-top: 3px solid var(--orange);
background: #fffaf5;
}
.research-sidebar-profile-title {
margin: 0 0 .8rem;
color: var(--red-dark);
font-family: Arial, "Noto Sans TC", sans-serif;
line-height: 1.18;
}
.research-sidebar-profile-title .profile-zh,
.research-sidebar-profile-title .profile-en,
.research-sidebar-profile-item .profile-zh,
.research-sidebar-profile-item .profile-en {
display: block;
}
.research-sidebar-profile-title .profile-zh {
font-size: .82rem;
font-weight: 800;
}
.research-sidebar-profile-title .profile-en {
margin-top: .12rem;
font-size: .72rem;
font-weight: 700;
}
.research-sidebar-profile-list {
display: grid;
gap: .65rem;
}
.research-sidebar-profile-item .profile-zh {
color: #554945;
font-size: .72rem;
font-weight: 680;
line-height: 1.3;
}
.research-sidebar-profile-item .profile-en {
margin-top: .08rem;
color: var(--muted);
font-size: .68rem;
line-height: 1.32;
}
/* A compact equivalent appears below the Research-section disclosure on
narrow screens because the desktop left rail is hidden there. */
.research-detail-profile-mobile {
display: none;
}
@media (max-width: 720px) {
.research-detail-profile-mobile {
display: block;
margin: 0 0 1.15rem;
padding: .78rem .85rem;
border: 1px solid var(--line);
border-top: 3px solid var(--orange);
background: #fffaf5;
}
.research-detail-profile-mobile-heading .profile-zh,
.research-detail-profile-mobile-heading .profile-en,
.research-detail-profile-mobile-list .profile-zh,
.research-detail-profile-mobile-list .profile-en {
display: block;
}
.research-detail-profile-mobile-heading {
margin-bottom: .65rem;
color: var(--red-dark);
line-height: 1.2;
}
.research-detail-profile-mobile-heading .profile-zh {
font-size: .8rem;
font-weight: 800;
}
.research-detail-profile-mobile-heading .profile-en {
margin-top: .08rem;
font-size: .7rem;
font-weight: 700;
}
.research-detail-profile-mobile-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .6rem .8rem;
}
.research-detail-profile-mobile-list .profile-zh {
color: #554945;
font-size: .7rem;
font-weight: 680;
}
.research-detail-profile-mobile-list .profile-en {
margin-top: .06rem;
color: var(--muted);
font-size: .66rem;
line-height: 1.28;
}
}
@media (max-width: 460px) {
.research-detail-profile-mobile-list {
grid-template-columns: 1fr;
gap: .48rem;
}
}
/* ---------- v0.7.9: Teaching profile hierarchy ---------- */
/* "Academic profile / 學術領域" is the parent category. Keep it on its own
top row, with the three research areas presented as equal child items below. */
.teaching-profile-band {
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
}
.teaching-profile-heading {
grid-column: 1 / -1;
display: block;
padding: .62rem .9rem .58rem;
border-bottom: 1px solid #eadfd9;
}
.teaching-profile-heading .profile-zh {
display: block;
font-size: .82rem;
line-height: 1.25;
}
.teaching-profile-heading .profile-en {
display: block;
margin-top: .08rem;
font-size: .72rem;
line-height: 1.2;
}
.teaching-profile-item {
border-left: 1px solid #eadfd9;
padding: .62rem .9rem .68rem;
}
.teaching-profile-item:first-of-type {
border-left: 0;
}
.teaching-profile-item .profile-zh {
font-size: .8rem;
line-height: 1.25;
}
.teaching-profile-item .profile-en {
margin-top: .12rem;
font-size: .74rem;
line-height: 1.28;
white-space: normal;
}
@media (max-width: 900px) {
.teaching-profile-band {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.teaching-profile-heading {
grid-column: 1 / -1;
display: block;
}
.teaching-profile-item:first-of-type {
border-left: 0;
}
}
@media (max-width: 620px) {
.teaching-profile-band {
grid-template-columns: 1fr;
}
.teaching-profile-heading {
grid-column: auto;
}
.teaching-profile-item {
border-left: 0;
border-top: 1px solid #eadfd9;
}
}
/* ---------- v0.8.0: Teaching academic-profile refinement ---------- */
/* Replace the table-like band with a lightweight academic info panel. The
parent label remains visually above the three child research areas, while
each area becomes a soft card rather than a rigid table cell. */
.teaching-profile-band {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .52rem;
margin: 0 0 .72rem;
padding: .72rem .78rem .78rem;
border: 0;
border-top: 3px solid var(--orange);
border-radius: 0 0 7px 7px;
background: linear-gradient(180deg, #fffaf6 0%, #fffdfb 100%);
}
.teaching-profile-heading {
grid-column: 1 / -1;
position: relative;
display: block;
padding: 0 0 .28rem .68rem;
border: 0;
}
.teaching-profile-heading::before {
content: "";
position: absolute;
left: 0;
top: .12rem;
bottom: .3rem;
width: 3px;
border-radius: 2px;
background: var(--orange);
}
.teaching-profile-heading .profile-zh {
color: var(--red-dark);
font-size: .84rem;
font-weight: 800;
line-height: 1.2;
}
.teaching-profile-heading .profile-en {
margin-top: .06rem;
color: #8a5d50;
font-size: .7rem;
font-weight: 650;
line-height: 1.2;
}
.teaching-profile-item,
.teaching-profile-item:first-of-type {
min-width: 0;
padding: .58rem .7rem .62rem;
border: 1px solid #eee1da;
border-radius: 6px;
background: rgba(255,255,255,.9);
box-shadow: 0 1px 2px rgba(76, 38, 26, .03);
}
.teaching-profile-item .profile-zh {
color: #4f403b;
font-size: .78rem;
font-weight: 750;
line-height: 1.25;
}
.teaching-profile-item .profile-en {
margin-top: .12rem;
color: var(--muted);
font-size: .71rem;
line-height: 1.28;
white-space: normal;
}
/* Legacy Teaching HTML begins with several presentational
elements.
Suppress only the leading breaks that create an artificial visual chasm
between the profile panel and the first supervision section. */
.swtang-teaching-page .teaching-profile-band + .entry-content {
margin-top: 0;
}
.swtang-teaching-page .entry-content div[align="center"] > br:first-child,
.swtang-teaching-page .entry-content p > b:first-child > br:first-child,
.swtang-teaching-page .entry-content p > strong:first-child > br:first-child {
display: none;
}
.swtang-teaching-page .entry-content > table:first-child {
margin-top: 0 !important;
}
@media (max-width: 720px) {
.teaching-profile-band {
gap: .45rem;
margin-bottom: .68rem;
padding: .62rem .65rem .68rem;
}
.teaching-profile-heading {
grid-column: 1 / -1;
padding-left: .62rem;
}
}
@media (max-width: 620px) {
.teaching-profile-band {
grid-template-columns: 1fr;
}
.teaching-profile-item,
.teaching-profile-item:first-of-type {
padding: .56rem .65rem;
}
}
/* ---------- v0.8.1: site-wide legacy line-break audit and cleanup ---------- */
/*
The imported public site was audited page by page. Most visible bad wraps
came from two separate legacy behaviours: (1) end-of-item
pairs in
long Research lists and (2) a narrow Research detail column combined with
permissive anywhere wrapping. Teaching also contained a handful of manual
line breaks inside Latin personal names. The rules below keep meaningful
bilingual/metadata breaks but remove layout-only breaks.
*/
/* Give long Research bibliographies a little more usable line length without
changing the site's 910px outer canvas. */
.swtang-research-page .site-main {
padding-left: 1.55rem;
padding-right: 1.55rem;
}
.research-workspace {
grid-template-columns: 185px minmax(0, 1fr);
gap: 1.55rem;
}
/* Do not allow normal prose, publication titles, journal names, or Chinese /
English words to break arbitrarily. Only genuinely URL-like anchors receive
the aggressive wrapping class added by navigation.js. */
.research-detail .entry-content,
.research-detail .entry-content a,
.research-detail .entry-content b,
.research-detail .entry-content strong,
.research-detail .entry-content em,
.research-detail .entry-content i {
overflow-wrap: normal;
word-break: normal;
hyphens: manual;
}
.research-detail .entry-content a.is-url-text {
overflow-wrap: anywhere;
word-break: break-word;
}
/* The legacy Papers / Conference / Seminar lists usually end each with
one or two
tags. They are spacing, not content. Use CSS margins instead
so entries have a consistent rhythm and never acquire phantom blank lines. */
.research-detail .entry-content li > br {
display: none !important;
}
.research-detail .entry-content li {
margin: .48rem 0 .7rem;
line-height: 1.58;
}
/* Year-only paragraphs on Conference / Seminar pages should read as headings,
not as a paragraph followed by an extra line break. JS adds this class. */
.research-detail .entry-content .research-year-heading {
margin: 1.15rem 0 .42rem;
color: var(--red-dark);
font-weight: 800;
line-height: 1.2;
}
.research-detail .entry-content .research-year-heading br {
display: none !important;
}
/* Legacy empty bold wrappers containing only
are removed by JS. Keep a
defensive CSS fallback for browsers before the script runs. */
.research-detail .entry-content b.legacy-empty-break,
.research-detail .entry-content strong.legacy-empty-break {
display: none !important;
}
/* Teaching: semantic bilingual breaks are kept (Chinese ↔ English and name ↔
Chinese name), while JS joins Latin-name fragments that were manually split
in Dreamweaver (for example "Cherie Cheuk-lam / WONG"). */
.swtang-teaching-page .teaching-supervision-table td,
.swtang-teaching-page .teaching-supervision-table th {
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
.swtang-teaching-page .teaching-supervision-table td:first-child {
line-height: 1.45;
}
/* Keep compact labels and years intact everywhere they function as tokens. */
.swtang-teaching-page .teaching-supervision-table tr:first-child > *,
.swtang-teaching-page .teaching-supervision-table tr > *:last-child {
white-space: nowrap;
}
@media (max-width: 900px) {
.research-workspace {
grid-template-columns: 165px minmax(0, 1fr);
gap: 1.15rem;
}
}
@media (max-width: 720px) {
.swtang-research-page .site-main {
padding-left: 1rem;
padding-right: 1rem;
}
.research-detail .entry-content,
.research-detail .entry-content a,
.research-detail .entry-content b,
.research-detail .entry-content strong {
overflow-wrap: normal;
word-break: normal;
}
.research-detail .entry-content a.is-url-text {
overflow-wrap: anywhere;
word-break: break-word;
}
}
/* ---------- v0.8.3: deterministic legacy HTML rendering ---------- */
/*
Legacy Research/Teaching content is now rendered from the stored HTML
without WordPress wpautop. Source-code newlines therefore collapse as
ordinary whitespace instead of being converted to forced
elements.
Papers are rendered as a clean bibliography UL on the server, so there are
no Dreamweaver layout tables to influence line width.
*/
.research-paper-clean,
.research-paper-clean .research-year-list,
.research-paper-clean .research-year-list > li {
width: 100%;
max-width: none;
min-width: 0;
box-sizing: border-box;
}
.research-paper-clean .research-year-list {
margin: .15rem 0 1rem;
padding-left: 1.45rem;
}
.research-paper-clean .research-year-list > li {
margin: 0 0 .7rem;
line-height: 1.58;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
hyphens: manual;
}
.research-paper-clean .research-year-list > li a,
.research-paper-clean .research-year-list > li b,
.research-paper-clean .research-year-list > li strong,
.research-paper-clean .research-year-list > li em,
.research-paper-clean .research-year-list > li i,
.research-paper-clean .research-year-list > li span,
.research-paper-clean .research-year-list > li font {
white-space: normal;
overflow-wrap: normal;
word-break: normal;
}
.research-paper-clean .research-year-list > li a.is-url-text {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Research detail HTML that still uses old layout tables keeps table semantics,
but every layout layer receives the full available article width. */
.research-detail .entry-content table,
.research-detail .entry-content tbody,
.research-detail .entry-content tr,
.research-detail .entry-content td {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
}
.research-detail .entry-content table {
table-layout: auto;
}
.research-detail .entry-content td {
padding-left: 0 !important;
padding-right: 0 !important;
border: 0 !important;
}
/* The server strips the obsolete detail-page Research navigation. This is a
fallback for an old cached page only. */
.research-detail .legacy-research-nav {
display: none !important;
}
/* Normal prose should wrap only at normal typographic opportunities. */
.research-detail .entry-content,
.research-detail .entry-content p,
.research-detail .entry-content li,
.research-detail .entry-content a,
.research-detail .entry-content strong,
.research-detail .entry-content b,
.research-detail .entry-content em,
.research-detail .entry-content i {
white-space: normal;
overflow-wrap: normal;
word-break: normal;
}
.research-detail .entry-content a.is-url-text {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Teaching has one decorative legacy HR at the end; it is not content. */
.swtang-teaching-page .entry-content hr,
.swtang-teaching-page .entry-content .legacy-trailing-rule {
display: none !important;
}
@media (max-width: 620px) {
.research-paper-clean .research-year-list {
padding-left: 1.18rem;
}
.research-paper-clean .research-year-list > li {
line-height: 1.55;
}
}
/* ---------- v0.8.4: replace fragile legacy heading bitmaps ---------- */
.legacy-heading-marker {
display: inline-block;
width: .5rem;
height: .5rem;
margin-right: .42rem;
border-top: 2px solid var(--orange);
border-right: 2px solid var(--orange);
transform: rotate(45deg);
vertical-align: .04em;
box-sizing: border-box;
}
/* Keep the marker visually quiet beside compact legacy section headings. */
.research-detail .entry-content .legacy-heading-marker,
.legacy-links-heading .legacy-heading-marker {
flex: 0 0 auto;
}
/* ---------- v0.8.5: Links split layout ----------
Keep the first link group beside the Academic profile, then let the
remaining link groups use the full content width below both columns. */
.links-shell {
grid-template-columns: minmax(0, 1fr) 220px;
gap: 1.6rem 2rem;
}
.links-primary-card,
.links-profile-card {
align-self: start;
}
.links-primary-section .legacy-links-section,
.links-wide-area .legacy-links-section {
padding-top: .15rem;
padding-bottom: .35rem;
}
.links-wide-area {
grid-column: 1 / -1;
width: 100%;
max-width: none;
margin: -.2rem 0 0;
padding: .1rem 0 0;
border-top: 1px solid var(--line);
}
.links-wide-area .legacy-links-heading {
margin-top: .9rem;
}
.links-wide-area ul {
width: 100%;
margin-bottom: .45rem;
padding-left: 1.8rem;
}
.links-wide-area li {
max-width: none;
}
.links-wide-area a {
overflow-wrap: normal;
word-break: normal;
}
@media (max-width: 900px) {
.links-shell {
grid-template-columns: 1fr;
}
.links-profile-card {
display: none;
}
.links-wide-area {
grid-column: 1;
margin-top: 0;
}
}
@media (max-width: 620px) {
.links-wide-area ul,
.links-primary-section ul {
padding-left: 1.35rem;
}
.links-wide-area a,
.links-primary-section a {
overflow-wrap: anywhere;
}
}
/* ---------- v0.8.6: legacy media URL resolution + Teaching tail cleanup ---------- */
/*
Research / Teaching legacy HTML is rendered directly to avoid wpautop.
Therefore the migration plugin's the_content filter does not run on those
pages. functions.php now resolves {{SWTANG_SITE}} / {{SWTANG_UPLOADS}}
before output so PDFs and other legacy media links remain valid.
*/
/* Old Dreamweaver layout tables around the real Teaching data tables should
never draw row separators. Keep separators only on the actual supervision
tables identified by navigation.js. This removes the stacked rules near the
bottom of Teaching without flattening the useful student-table rows. */
.swtang-teaching-page .entry-content table:not(.teaching-supervision-table) > tbody > tr > td,
.swtang-teaching-page .entry-content table:not(.teaching-supervision-table) > tbody > tr > th,
.swtang-teaching-page .entry-content table:not(.teaching-supervision-table) > tr > td,
.swtang-teaching-page .entry-content table:not(.teaching-supervision-table) > tr > th {
border-bottom: 0 !important;
}
/* The outer legacy layout cells are structural only. Remove their inherited
padding so they cannot create phantom blank bands before the footer. */
.swtang-teaching-page .entry-content > table > tbody > tr > td,
.swtang-teaching-page .entry-content > table > tr > td {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ---------- v0.8.7: mobile-first layout audit ---------- */
/*
The legacy site was authored for a fixed 910px desktop canvas. On phones,
the old wrapper tables must not establish an off-screen intrinsic width.
Real Teaching data tables are converted into labelled record cards rather
than squeezed or left as a page-wide horizontal scroller.
*/
.site-main,
.content-shell,
.entry-card,
.entry-content,
.research-workspace,
.research-detail,
.teaching-page-card,
.links-primary-card,
.links-wide-area {
min-width: 0;
}
@media (max-width: 720px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: clip;
}
.header-inner,
.navigation-inner,
.legacy-home-frame,
.site-main,
.site-footer,
.swtang-research-page .header-inner,
.swtang-research-page .navigation-inner,
.swtang-research-page .site-main,
.swtang-research-page .site-footer {
width: 100%;
max-width: 100%;
margin-inline: 0;
}
.header-inner {
min-height: 68px;
padding: .6rem .75rem;
gap: .55rem;
}
.site-branding {
flex: 1 1 auto;
min-width: 0;
}
.site-title {
display: block;
max-width: 100%;
font-size: clamp(1.05rem, 5.3vw, 1.28rem);
line-height: 1.08;
overflow-wrap: normal;
white-space: normal;
}
.menu-toggle {
flex: 0 0 auto;
padding: .43rem .56rem;
font-size: .72rem;
white-space: nowrap;
}
.primary-navigation {
top: 100%;
left: .5rem;
right: .5rem;
}
.site-main {
padding: 1rem .75rem 1.8rem;
}
.content-shell,
.research-overview-shell,
.research-shell,
.teaching-shell,
.links-shell {
width: 100%;
max-width: 100%;
min-width: 0;
}
.entry-header {
margin-bottom: .9rem;
padding: .58rem .72rem;
}
.entry-title {
font-size: clamp(1.15rem, 6vw, 1.35rem);
line-height: 1.18;
overflow-wrap: normal;
word-break: normal;
}
.entry-content {
width: 100%;
max-width: 100%;
min-width: 0;
font-size: .82rem;
line-height: 1.58;
}
.entry-content p,
.entry-content li,
.entry-content a,
.entry-content strong,
.entry-content b,
.entry-content em,
.entry-content i {
max-width: 100%;
overflow-wrap: normal;
word-break: normal;
}
.entry-content a.is-url-text,
.legacy-links-page a {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Home: flatten only the fixed-width Dreamweaver layout wrappers. */
.home .profile-content > table,
.home .profile-content > table > tbody,
.home .profile-content > table > tbody > tr,
.home .profile-content > table > tbody > tr > td,
.home .profile-content > table > tbody > tr > td > div,
.home .profile-content > table > tbody > tr > td > div > table,
.home .profile-content > table > tbody > tr > td > div > table > tbody,
.home .profile-content > table > tbody > tr > td > div > table > tbody > tr,
.home .profile-content > table > tbody > tr > td > div > table > tbody > tr > td {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
}
.home .profile-content div[align="center"],
.home .profile-content div[align="right"] {
text-align: left !important;
}
.home .profile-content img[src*="profilepic2017-mini"] {
width: min(100%, 300px);
margin: 0 auto 1rem;
}
.home .profile-content p {
margin: .75rem 0;
line-height: 1.65;
}
/* Research detail pages: their remaining tables are structural wrappers,
not tabular data. Flatten them on small screens so every paragraph gets
the full viewport width. */
.research-detail .entry-content table,
.research-detail .entry-content tbody,
.research-detail .entry-content tr,
.research-detail .entry-content td,
.research-detail .entry-content th {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
overflow: visible !important;
}
.research-detail .entry-content div[align="center"],
.research-detail .entry-content div[align="right"] {
text-align: left !important;
}
.research-mobile-nav {
margin-bottom: .65rem;
border-radius: 5px;
overflow: hidden;
}
.research-mobile-nav summary {
padding: .66rem .72rem;
}
.research-detail-profile-mobile {
margin-bottom: .85rem;
padding: .62rem .7rem .68rem;
border-radius: 0 0 5px 5px;
}
.research-detail-profile-mobile-heading {
margin-bottom: .5rem;
}
.research-detail-profile-mobile-list {
grid-template-columns: 1fr;
gap: .34rem;
}
.research-detail-profile-mobile-list > div {
display: grid;
grid-template-columns: 5.2rem minmax(0, 1fr);
gap: .45rem;
align-items: baseline;
}
.research-detail-profile-mobile-list .profile-en {
margin-top: 0;
}
.research-paper-clean .research-year-list,
.research-detail .entry-content ul,
.research-detail .entry-content ol {
padding-left: 1.12rem;
}
.research-paper-clean .research-year-list > li,
.research-detail .entry-content li {
line-height: 1.55;
}
/* Teaching: make fixed-width legacy wrapper tables fluid. These selectors
deliberately stop before the real supervision tables, which are handled
as mobile cards below. */
.swtang-teaching-page .entry-content > table,
.swtang-teaching-page .entry-content > table > tbody,
.swtang-teaching-page .entry-content > table > tbody > tr,
.swtang-teaching-page .entry-content > table > tbody > tr > td,
.swtang-teaching-page .entry-content > table > tbody > tr > td > div,
.swtang-teaching-page .entry-content > table > tbody > tr > td > div > table:not(.teaching-supervision-table),
.swtang-teaching-page .entry-content > table > tbody > tr > td > div > table:not(.teaching-supervision-table) > tbody,
.swtang-teaching-page .entry-content > table > tbody > tr > td > div > table:not(.teaching-supervision-table) > tbody > tr,
.swtang-teaching-page .entry-content > table > tbody > tr > td > div > table:not(.teaching-supervision-table) > tbody > tr > td {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
overflow: visible !important;
}
.swtang-teaching-page .entry-content div[align="center"],
.swtang-teaching-page .entry-content div[align="right"] {
text-align: left !important;
}
.swtang-teaching-page .entry-content p {
margin: .8rem 0 .48rem;
}
.swtang-teaching-page .entry-content p > b,
.swtang-teaching-page .entry-content p > strong {
display: block;
line-height: 1.42;
}
/* Compact Academic profile on phones: parent heading first, then three
bilingual rows. It remains informative without consuming half a screen. */
.teaching-profile-band {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin: 0 0 .8rem;
padding: .52rem .58rem .56rem;
border-radius: 0 0 5px 5px;
}
.teaching-profile-heading {
padding: 0 0 .42rem .58rem;
}
.teaching-profile-item,
.teaching-profile-item:first-of-type {
display: grid;
grid-template-columns: 5.2rem minmax(0, 1fr);
gap: .45rem;
align-items: baseline;
padding: .42rem .5rem;
border: 0;
border-top: 1px solid #eee4de;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.teaching-profile-item .profile-en {
margin-top: 0;
}
/* Real Teaching supervision tables become labelled records. No page-level
horizontal scrolling, no clipped left edge, and Year/Degree remain intact. */
.swtang-teaching-page .teaching-table-scroll {
width: 100%;
max-width: 100%;
margin: .45rem 0 1rem;
padding: 0;
overflow: visible;
}
.swtang-teaching-page .entry-content .teaching-supervision-table {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
table-layout: auto;
background: transparent !important;
}
.swtang-teaching-page .teaching-supervision-table > tbody {
display: block !important;
width: 100% !important;
}
.swtang-teaching-page .teaching-supervision-table tr {
display: block !important;
width: 100% !important;
}
.swtang-teaching-page .teaching-supervision-table tr.teaching-header-row,
.swtang-teaching-page .teaching-supervision-table tr:first-child {
display: none !important;
}
.swtang-teaching-page .teaching-supervision-table tr.teaching-card-row {
margin: 0 0 .72rem;
padding: .55rem .62rem .6rem;
border: 1px solid var(--line);
border-left: 3px solid var(--orange);
border-radius: 5px;
background: #fffdfb;
}
.swtang-teaching-page .teaching-supervision-table td,
.swtang-teaching-page .teaching-supervision-table th {
display: grid !important;
grid-template-columns: 4.4rem minmax(0, 1fr);
gap: .5rem;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
padding: .32rem 0 !important;
border: 0 !important;
text-align: left !important;
white-space: normal !important;
overflow-wrap: normal;
word-break: normal;
line-height: 1.5;
}
.swtang-teaching-page .teaching-supervision-table td + td,
.swtang-teaching-page .teaching-supervision-table th + th {
border-top: 1px solid #f0e7e2 !important;
}
.swtang-teaching-page .teaching-supervision-table td::before,
.swtang-teaching-page .teaching-supervision-table th::before {
content: attr(data-mobile-label);
color: var(--red-dark);
font-size: .69rem;
font-weight: 750;
line-height: 1.45;
}
.swtang-teaching-page .teaching-supervision-table td:last-child,
.swtang-teaching-page .teaching-supervision-table th:last-child {
white-space: normal !important;
text-align: left !important;
}
.swtang-teaching-page .teaching-supervision-table td:last-child > div,
.swtang-teaching-page .teaching-supervision-table th:last-child > div {
text-align: left !important;
}
/* Links */
.links-profile-card {
display: none !important;
}
.links-wide-area {
margin-top: .25rem;
border-top: 0;
}
.legacy-links-heading {
line-height: 1.35;
}
.legacy-links-page ul,
.links-wide-area ul,
.links-primary-section ul {
margin-top: .35rem;
padding-left: 1.15rem;
}
.legacy-links-page li,
.links-wide-area li {
line-height: 1.48;
}
/* Footer */
.footer-inner {
width: 100%;
grid-template-columns: 1fr;
gap: .75rem;
padding: 1rem .75rem 1.35rem;
align-items: start;
}
.footer-meta,
.footer-meta a {
max-width: 100%;
overflow-wrap: anywhere;
}
}
@media (max-width: 420px) {
.site-title {
font-size: 1.04rem;
}
.menu-toggle {
font-size: .68rem;
}
.site-main {
padding-inline: .62rem;
}
.entry-header {
padding-inline: .65rem;
}
.teaching-profile-item,
.teaching-profile-item:first-of-type,
.research-detail-profile-mobile-list > div {
grid-template-columns: 4.8rem minmax(0, 1fr);
}
.swtang-teaching-page .teaching-supervision-table td,
.swtang-teaching-page .teaching-supervision-table th {
grid-template-columns: 4rem minmax(0, 1fr);
gap: .42rem;
}
}
/* Hide only the final ornamental rule from migrated Research detail pages. */
.research-detail .entry-content hr.legacy-detail-trailing-rule { display: none !important; }
/* ---------- v0.8.8: mobile-first Teaching supervision cards ---------- */
/*
Desktop keeps the original academic table. On phones, the same semantic
table is presented as a vertical record: Topic first and full width, then
Name, Degree (when present), and Year underneath. This is intentionally a
different information hierarchy from desktop because the narrow viewport
should prioritise the thesis/project title rather than reproduce columns.
*/
@media (max-width: 620px) {
.swtang-teaching-page .teaching-table-scroll {
margin: .55rem 0 1.15rem;
}
.swtang-teaching-page .teaching-supervision-table tr.teaching-card-row {
display: flex !important;
flex-direction: column;
gap: 0;
margin: 0 0 .82rem;
padding: 0;
overflow: hidden;
border: 1px solid var(--line);
border-left: 3px solid var(--orange);
border-radius: 7px;
background: #fff;
box-shadow: 0 1px 3px rgba(58, 36, 25, .045);
}
.swtang-teaching-page .teaching-supervision-table td,
.swtang-teaching-page .teaching-supervision-table th {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
padding: .58rem .68rem !important;
border: 0 !important;
border-top: 1px solid #f0e7e2 !important;
text-align: left !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
line-height: 1.55;
}
.swtang-teaching-page .teaching-supervision-table td::before,
.swtang-teaching-page .teaching-supervision-table th::before {
display: block;
margin: 0 0 .22rem;
color: var(--red-dark);
font-size: .67rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: .01em;
}
/* Topic is the primary information on mobile. */
.swtang-teaching-page .teaching-supervision-table td:nth-child(2),
.swtang-teaching-page .teaching-supervision-table th:nth-child(2) {
order: 1;
padding: .7rem .68rem .72rem !important;
border-top: 0 !important;
background: #fffaf6;
font-size: .82rem;
line-height: 1.58;
}
.swtang-teaching-page .teaching-supervision-table td:nth-child(1),
.swtang-teaching-page .teaching-supervision-table th:nth-child(1) {
order: 2;
}
/* Degree exists only in the four-column postgraduate table. */
.swtang-teaching-page .teaching-supervision-4col td:nth-child(3),
.swtang-teaching-page .teaching-supervision-4col th:nth-child(3) {
order: 3;
}
.swtang-teaching-page .teaching-supervision-4col td:nth-child(4),
.swtang-teaching-page .teaching-supervision-4col th:nth-child(4),
.swtang-teaching-page .teaching-supervision-3col td:nth-child(3),
.swtang-teaching-page .teaching-supervision-3col th:nth-child(3) {
order: 4;
}
/* Legacy wrappers inside cells must not keep old fixed widths/alignment. */
.swtang-teaching-page .teaching-supervision-table td > div,
.swtang-teaching-page .teaching-supervision-table td > p,
.swtang-teaching-page .teaching-supervision-table td > font,
.swtang-teaching-page .teaching-supervision-table th > div,
.swtang-teaching-page .teaching-supervision-table th > p {
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
margin-top: 0;
margin-bottom: 0;
text-align: left !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
.swtang-teaching-page .teaching-supervision-table td:nth-child(2) a {
font-weight: 650;
}
.swtang-teaching-page .teaching-supervision-table td:last-child,
.swtang-teaching-page .teaching-supervision-table th:last-child {
white-space: normal !important;
}
.swtang-teaching-page .teaching-supervision-table td br + br {
display: none;
}
}
/* ---------- v0.9.6: curated Links + equal academic-profile rhythm ---------- */
/* The Links page now contains only the four maintained CUHK/research-base
destinations. The list spans the usable content width beneath the title and
profile card so long institutional names wrap less often. */
.links-curated-list {
grid-column: 1 / -1;
width: 100%;
max-width: none;
margin: -.15rem 0 0;
padding: .72rem 0 .25rem;
border-top: 1px solid var(--line);
}
.links-curated-list .legacy-links-heading {
margin: 0 0 .72rem;
}
.links-curated-list ul {
margin: 0;
padding-left: 1.85rem;
}
.links-curated-list li {
margin: 0;
line-height: 1.48;
}
.links-curated-list li + li {
margin-top: .5rem;
}
.links-curated-list a {
overflow-wrap: normal;
word-break: normal;
}
/* Use the middle Academic-profile item as the visual rhythm for all three:
identical block spacing and identical bilingual spacing on every page. */
.academic-profile-list {
gap: .55rem;
}
.academic-profile-item {
margin: 0;
padding: 0;
}
.academic-profile-item .profile-zh {
margin: 0;
}
.academic-profile-item .profile-en {
margin: .08rem 0 0;
}
.teaching-profile-item,
.teaching-profile-item:first-of-type {
margin: 0;
padding: .58rem .7rem .62rem;
}
.teaching-profile-item .profile-zh {
margin: 0;
}
.teaching-profile-item .profile-en {
margin: .12rem 0 0;
}
@media (max-width: 620px) {
.links-curated-list {
grid-column: 1;
padding-top: .55rem;
}
.links-curated-list ul {
padding-left: 1.35rem;
}
.links-curated-list a {
overflow-wrap: anywhere;
}
}
/* ---------- v0.9.7: Links identity hotfix + Research overview rhythm ---------- */
/* Research overview: the first legacy paragraph contains source-code line
breaks that WordPress may turn into BR tags. Hide only those BRs so the
introductory paragraph wraps naturally, while preserving the intentional
ORCID / ResearcherID / AIMS line breaks in the second paragraph. */
.swtang-research-overview .research-overview-intro p:first-of-type br {
display: none;
}
.swtang-research-overview .research-overview-intro p,
.swtang-research-overview .research-overview-intro ol,
.swtang-research-overview .research-overview-intro li {
line-height: 1.5;
}
.swtang-research-overview .research-overview-intro p {
margin: .48rem 0;
}
.swtang-research-overview .research-overview-intro ol {
margin: .48rem 0 0;
}
.swtang-research-overview .research-overview-intro li {
margin: .2rem 0;
}
/* ---------- v0.9.8: Links full-width profile band + Research text rhythm ---------- */
/* Links has no wide body content beside the Academic profile. Reuse the same
horizontal hierarchy as Teaching so the page does not leave a dead right
rail. The heading is the parent concept; the three fields are children. */
.links-shell {
display: block;
width: 100%;
}
.links-primary-card {
width: 100%;
}
.links-profile-band {
display: grid;
grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr));
align-items: stretch;
width: 100%;
margin: -.15rem 0 1.05rem;
border: 1px solid var(--line);
border-top: 3px solid var(--orange);
background: #fffaf5;
}
.links-profile-heading,
.links-profile-item {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: .68rem .85rem;
}
.links-profile-item {
border-left: 1px solid #eadfd9;
}
.links-profile-heading .profile-zh {
color: var(--red-dark);
font-weight: 750;
line-height: 1.25;
}
.links-profile-heading .profile-en {
margin-top: .08rem;
color: var(--red-dark);
font-size: .76rem;
font-weight: 700;
line-height: 1.25;
}
.links-profile-item .profile-zh {
color: #5b4d48;
font-size: .76rem;
font-weight: 700;
line-height: 1.3;
}
.links-profile-item .profile-en {
margin-top: .1rem;
color: var(--muted);
font-size: .73rem;
line-height: 1.3;
}
.links-curated-list,
.links-wide-area {
width: 100%;
margin: 0;
padding-top: .75rem;
border-top: 1px solid var(--line);
}
/* Research overview: use one consistent line rhythm within each logical
section, then create the visible separation between sections with paragraph
margins. The ORCID block keeps its intentional BRs. */
.swtang-research-overview .research-overview-intro p,
.swtang-research-overview .research-overview-intro ol,
.swtang-research-overview .research-overview-intro li {
line-height: 1.42;
}
.swtang-research-overview .research-overview-intro p {
margin: 0 0 .82rem;
}
.swtang-research-overview .research-overview-intro p:first-of-type br {
display: none;
}
.swtang-research-overview .research-overview-intro p:nth-of-type(2) br {
display: inline;
}
.swtang-research-overview .research-overview-intro p:nth-of-type(3) {
margin-bottom: .34rem;
}
.swtang-research-overview .research-overview-intro ol {
margin: 0;
padding-left: 1.45rem;
}
.swtang-research-overview .research-overview-intro li {
margin: .16rem 0;
}
@media (max-width: 900px) {
.links-profile-band {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.links-profile-heading {
grid-column: 1 / -1;
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
gap: .5rem;
padding-bottom: .55rem;
border-bottom: 1px solid #eadfd9;
}
.links-profile-heading .profile-en {
margin-top: 0;
}
.links-profile-item:first-of-type {
border-left: 0;
}
}
@media (max-width: 620px) {
.links-profile-band {
grid-template-columns: 1fr;
margin-bottom: .85rem;
}
.links-profile-heading {
grid-column: auto;
grid-template-columns: 1fr;
gap: .05rem;
}
.links-profile-item {
border-left: 0;
border-top: 1px solid #eadfd9;
padding-block: .56rem;
}
.links-curated-list,
.links-wide-area {
padding-top: .55rem;
}
}
/* ---------- v0.9.9: full-width Research title strip ---------- */
/* The Research overview title now spans the full standard content canvas,
matching Teaching. The Academic profile remains a sidebar card, but starts
on the row below the orange title strip beside the research introduction. */
.research-overview-shell {
grid-template-columns: minmax(0, 1fr) 220px;
column-gap: 2rem;
row-gap: 1.25rem;
}
.research-overview-shell > .research-overview-header {
grid-column: 1 / -1;
width: 100%;
margin: 0;
}
.research-overview-shell > .research-overview {
grid-column: 1;
grid-row: 2;
min-width: 0;
}
.research-overview-shell > .research-profile-card {
grid-column: 2;
grid-row: 2;
align-self: start;
margin: 0;
}
.research-overview-shell > .research-directory {
grid-column: 1 / -1;
grid-row: 3;
margin-top: .45rem;
}
@media (max-width: 900px) {
.research-overview-shell {
grid-template-columns: 1fr;
row-gap: 1rem;
}
.research-overview-shell > .research-overview-header,
.research-overview-shell > .research-overview,
.research-overview-shell > .research-profile-card,
.research-overview-shell > .research-directory {
grid-column: 1;
grid-row: auto;
}
.research-overview-shell > .research-profile-card {
margin-top: .1rem;
}
}
/* ---------- v0.9.10: Links Academic profile visual consistency ---------- */
/* Use the same visual language as Teaching: one parent heading above three
lightweight child cards. This removes the old table-like impression and
makes the two sections feel like parts of the same academic site. */
.links-profile-band {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .52rem;
width: 100%;
margin: 0 0 .82rem;
padding: .72rem .78rem .78rem;
border: 0;
border-top: 3px solid var(--orange);
border-radius: 0 0 7px 7px;
background: linear-gradient(180deg, #fffaf6 0%, #fffdfb 100%);
box-shadow: 0 2px 8px rgba(76, 38, 26, .025);
}
.links-profile-heading {
grid-column: 1 / -1;
position: relative;
display: block;
padding: 0 0 .28rem .68rem;
border: 0;
}
.links-profile-heading::before {
content: "";
position: absolute;
left: 0;
top: .12rem;
bottom: .3rem;
width: 3px;
border-radius: 2px;
background: var(--orange);
}
.links-profile-heading .profile-zh {
color: var(--red-dark);
font-size: .84rem;
font-weight: 800;
line-height: 1.2;
}
.links-profile-heading .profile-en {
margin-top: .06rem;
color: #8a5d50;
font-size: .7rem;
font-weight: 650;
line-height: 1.2;
}
.links-profile-item,
.links-profile-item:first-of-type {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: .58rem .7rem .62rem;
border: 1px solid #eee1da;
border-radius: 6px;
background: rgba(255,255,255,.92);
box-shadow: 0 1px 2px rgba(76, 38, 26, .035);
}
.links-profile-item .profile-zh {
color: #4f403b;
font-size: .78rem;
font-weight: 750;
line-height: 1.25;
}
.links-profile-item .profile-en {
margin-top: .12rem;
color: var(--muted);
font-size: .71rem;
line-height: 1.28;
white-space: normal;
}
/* Keep the link list visually connected to the profile band rather than
separated by a large empty gap. */
.links-curated-list,
.links-wide-area {
padding-top: .62rem;
}
@media (max-width: 720px) {
.links-profile-band {
gap: .45rem;
margin-bottom: .72rem;
padding: .62rem .65rem .68rem;
}
.links-profile-heading {
grid-column: 1 / -1;
padding-left: .62rem;
}
}
@media (max-width: 620px) {
.links-profile-band {
grid-template-columns: 1fr;
}
.links-profile-heading {
grid-column: 1;
}
.links-profile-item,
.links-profile-item:first-of-type {
border: 1px solid #eee1da;
padding: .58rem .7rem .62rem;
}
}
/* ---------- v0.9.11: unify Teaching + Links Academic profile ---------- */
/* Teaching now uses the exact same markup/classes as Links for the Academic
profile band, so both sections remain visually identical across desktop,
tablet and mobile. The legacy .teaching-profile-* rules remain only for
backward compatibility with cached HTML and no longer drive new output. */
.swtang-teaching-page .links-profile-band {
margin-bottom: 1rem;
}
@media (max-width: 620px) {
.swtang-teaching-page .links-profile-band {
margin-bottom: .9rem;
}
}
/* ---------- v0.9.13: semantic Research overview blocks ---------- */
/* Research overview is now rendered as three explicit logical sections rather
than styling guessed paragraph positions from the legacy Dreamweaver HTML.
This makes the rhythm deterministic even if migration metadata/body classes
are absent. */
.research-overview-shell .research-overview-intro .research-text-block {
margin: 0 !important;
}
.research-overview-shell .research-overview-intro .research-text-block + .research-text-block {
margin-top: 1.45em !important;
}
.research-overview-shell .research-overview-intro .research-text-block p,
.research-overview-shell .research-overview-intro .research-text-block ol,
.research-overview-shell .research-overview-intro .research-text-block li {
line-height: 1.45 !important;
}
.research-overview-shell .research-overview-intro .research-text-block p {
margin: 0 !important;
}
.research-overview-shell .research-overview-intro .research-introduction br {
display: none !important;
}
.research-overview-shell .research-overview-intro .research-identifiers p br {
display: inline !important;
}
.research-overview-shell .research-overview-intro .research-topics ol {
margin: .28em 0 0 !important;
padding-left: 1.45rem;
}
.research-overview-shell .research-overview-intro .research-topics li {
margin: 0 !important;
}
/* ---------- v0.9.14: Research overview simplification ---------- */
/* The overview now has two directory groups only: Publications and Academic
Activities. Research Materials is intentionally removed from this landing
page; the detailed legacy pages remain available through existing URLs and
the Research detail navigation. */
.research-overview-shell .research-directory {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.15rem;
}
/* The dissertation summary is promoted into the overview, directly after the
identifier block. All four logical text blocks share the same line height
and exactly one blank-line rhythm between sections. */
.research-overview-shell .research-overview-intro .research-dissertation-summary p {
margin: 0 !important;
line-height: 1.45 !important;
}
@media (max-width: 720px) {
.research-overview-shell .research-directory {
grid-template-columns: 1fr;
}
}
/* ---------- v0.9.15: Research profile vertical balance ---------- */
/* Center the Research Academic profile card against the full overview text
column and give its three child fields a calmer vertical rhythm. */
.research-overview-shell > .research-profile-card {
align-self: center;
padding-top: 1.15rem;
padding-bottom: 1.2rem;
}
.research-overview-shell > .research-profile-card .academic-profile-title {
margin-bottom: 1rem;
}
.research-overview-shell > .research-profile-card .academic-profile-list {
gap: .95rem;
}
.research-overview-shell > .research-profile-card .academic-profile-item .profile-zh {
line-height: 1.25;
}
.research-overview-shell > .research-profile-card .academic-profile-item .profile-en {
margin-top: .16rem;
line-height: 1.25;
white-space: nowrap;
}
/* Keep the two-word label “Comparative grammar” on one line on desktop. */
@media (min-width: 901px) {
.research-overview-shell > .research-profile-card {
min-width: 220px;
}
.research-overview-shell > .research-profile-card .profile-en {
white-space: nowrap;
}
}
/* Once the profile becomes a full-width band, normal wrapping is safer. */
@media (max-width: 900px) {
.research-overview-shell > .research-profile-card {
align-self: stretch;
}
.research-overview-shell > .research-profile-card .academic-profile-item .profile-en {
white-space: normal;
}
}
/* ==========================================================================
v1.0 No-code managed additions
========================================================================== */
.managed-updates,
.managed-teaching-updates {
margin: 0 0 1.8rem;
padding: 0 0 1.2rem;
border-bottom: 1px solid var(--line);
}
.managed-updates h2,
.managed-teaching-updates > h2 {
margin: 0 0 .9rem;
color: var(--red-dark);
font-size: 1rem;
}
.managed-updates-list {
margin: 0;
padding-left: 1.35rem;
}
.managed-updates-list > li {
margin: 0 0 .9rem;
line-height: 1.55;
}
.managed-year {
white-space: nowrap;
}
.managed-entry-copy {
display: inline;
}
.managed-entry-copy p {
display: inline;
margin: 0;
}
.managed-entry-links {
white-space: nowrap;
}
.managed-teaching-group {
margin: 1.1rem 0 1.7rem;
}
.managed-teaching-group h3 {
margin: 0 0 .7rem;
font-size: .95rem;
}
.managed-teaching-desktop table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.managed-teaching-desktop th {
background: #e7e5e4;
padding: .65rem .75rem;
text-align: left;
}
.managed-teaching-desktop td {
padding: .75rem;
vertical-align: top;
border-bottom: 1px solid var(--line);
}
.managed-teaching-desktop th:nth-child(1){width:22%}
.managed-teaching-desktop th:nth-child(2){width:48%}
.managed-teaching-desktop th:nth-child(3){width:18%}
.managed-teaching-desktop th:nth-child(4){width:12%}
.managed-nowrap { white-space: nowrap; }
.managed-award { margin-top: .35rem; color: var(--orange); }
.managed-teaching-mobile { display: none; }
@media (max-width: 700px) {
.managed-teaching-desktop { display: none; }
.managed-teaching-mobile { display: grid; gap: .8rem; }
.managed-teaching-card {
border: 1px solid var(--line);
border-left: 3px solid var(--orange);
border-radius: 6px;
padding: .85rem;
background: #fffdfb;
}
.managed-teaching-topic { margin-bottom: .7rem; }
.managed-teaching-topic strong,
.managed-teaching-topic span { display: block; }
.managed-teaching-card dl {
display: grid;
grid-template-columns: 78px 1fr;
margin: 0;
gap: .25rem .7rem;
}
.managed-teaching-card dt { font-weight: 700; color: var(--red-dark); }
.managed-teaching-card dd { margin: 0; }
}
/* ==========================================================================
v1.0.3: remove repeated Academic profile panels
========================================================================== */
/* Academic profile is no longer repeated in the Research detail sidebar,
Teaching page or Links page. Their content now starts directly after each
section heading/navigation while the Research overview remains unchanged. */
.swtang-teaching-page .entry-header + .entry-content {
margin-top: 0;
}
.links-shell .links-primary-card + .links-curated-list {
margin-top: 0;
}
/* ---------- v1.0.4: Teaching title-to-content spacing ---------- */
/* After the Academic profile panel was removed, the first legacy Teaching
paragraph still kept its old top margin. That made the gap below the orange
page title visibly larger than on Links. Keep the standard entry-header
spacing, but remove only that inherited first-paragraph margin. */
.swtang-teaching-page .entry-content > table:first-child > tbody > tr:first-child > td:first-child > div[align="center"] > table:first-child > tbody > tr:first-child > td:first-child > p:first-child,
.swtang-teaching-page .entry-content > table:first-child > tr:first-child > td:first-child > div[align="center"] > table:first-child > tr:first-child > td:first-child > p:first-child {
margin-top: 0 !important;
}
/* ---------- v1.0.5: retire Academic profile panels site-wide ---------- */
/* The Academic profile / 學術領域 cards have been removed from the public
Research, Teaching, Links and research-detail layouts. Research overview
now uses the full content column rather than reserving an empty sidebar. */
.research-overview-shell {
grid-template-columns: minmax(0, 1fr);
column-gap: 0;
}
.research-overview-shell > .research-overview-header,
.research-overview-shell > .research-overview,
.research-overview-shell > .research-directory {
grid-column: 1;
grid-row: auto;
}
.research-overview-shell > .research-overview {
width: 100%;
}
.research-overview-shell .research-overview-intro {
max-width: none;
}
/* ---------- v1.0.6: Teaching legacy spacer cleanup ---------- */
/* The actual extra gap came from two leading Dreamweaver
elements in the
Teaching source. They are now removed server-side in functions.php; keep
the normal shared entry-header margin so Teaching matches Links naturally. */
/* ---------- v1.0.7: Teaching divider under page title ---------- */
/* Match the Links page by adding the same subtle horizontal divider between
the orange page title and the Teaching content. */
.swtang-teaching-page .entry-header + .entry-content {
border-top: 1px solid var(--line);
padding-top: .9rem;
}
/* ---------- v1.0.9: Research detail title-to-content spacing ---------- */
/* Papers is the visual reference for the space below the orange H1. The
remaining legacy Research detail pages still render through nested tables,
so give that first legacy table the same small top rhythm as the Papers list
and suppress the first paragraph's inherited top margin. Combined with the
server-side removal of obsolete
spacers, this keeps Monographs,
Conferences and Invited Seminars aligned with Papers. */
.research-detail .entry-content > table:first-child {
margin-top: .45rem;
}
.research-detail .entry-content > table:first-child > tbody > tr:first-child > td:first-child > div[align="center"] > table:first-of-type > tbody > tr:first-child > td:first-child > p:first-child {
margin-top: 0 !important;
}
/* ---------- v1.0.12 Homepage spacing + CUHK identity block ---------- */
/* Keep the homepage content centered with genuinely equal left/right margins.
v1.0.11 widened only the biography paragraphs to the right; this version
restores a symmetric content box and gains the needed line length by
reducing the Home page padding equally on both sides. */
.home .home-main {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.profile-content .home-justified-copy {
text-align: justify;
text-justify: inter-word;
}
.profile-content .home-bio-copy {
width: 100%;
max-width: 100%;
}
/* A tiny tracking adjustment only for the Chinese biography avoids leaving
the final 「學。」 on an orphan line while preserving equal page margins. */
.profile-content .home-bio-copy-zh {
letter-spacing: -0.01em;
}
.profile-content .home-institution-block {
display: inline-block;
max-width: 100%;
margin: .35rem 0 .2rem;
vertical-align: top;
}
.profile-content .home-institution-table {
display: table;
width: auto;
max-width: 100%;
margin: .35rem 0 .55rem;
border-collapse: collapse;
border-bottom: 1px solid #b8b8b8;
overflow: visible;
}
.profile-content .home-institution-table td {
padding: 0 0 .75rem;
border-bottom: 0;
vertical-align: middle;
}
.profile-content .home-institution-table td:first-child {
width: auto;
padding-right: 2.6rem;
}
.profile-content .home-institution-table img[src*="cuhk_logo"] {
display: block;
width: 128px;
max-width: 128px;
height: auto;
margin: 0 auto;
}
.profile-content .home-institution-table td:nth-child(2) {
line-height: 1.82;
}
.profile-content .home-institution-table td:nth-child(2) > p {
margin: .6rem 0 0;
}
/* The divider is now attached to the identity table above, not to the date,
so its right edge naturally aligns with the longest address line. */
.profile-content .home-latest-update {
width: auto;
margin: .35rem 0 0;
padding-top: 0;
border-top: 0;
}
/* The Home frame already supplies a visual boundary before the footer.
Suppress the footer's extra rule so only one line remains below the date. */
.home .site-footer .footer-inner {
border-top: 0;
}
@media (max-width: 640px) {
.home .home-main {
padding-left: 1rem;
padding-right: 1rem;
}
.profile-content .home-bio-copy {
width: 100%;
max-width: 100%;
}
.profile-content .home-bio-copy-zh {
letter-spacing: normal;
}
.profile-content .home-institution-block {
display: block;
width: 100%;
}
.profile-content .home-institution-table {
width: 100%;
}
.profile-content .home-institution-table td:first-child {
width: 112px;
padding-right: 1rem;
}
.profile-content .home-institution-table img[src*="cuhk_logo"] {
width: 96px;
max-width: 96px;
}
.profile-content .home-institution-table td:nth-child(2) {
line-height: 1.55;
}
.profile-content .home-institution-table td:nth-child(2) > p {
margin-top: .35rem;
}
}
/* ---------- v1.0.13 Homepage divider, photo spacing, date hardening ---------- */
/* Give the portrait a little more breathing room before the welcome copy. */
.profile-content .home-profile-photo {
margin-bottom: 1.35rem !important;
}
.profile-content .home-profile-photo img[src*="profilepic2017-mini"] {
margin-bottom: 0;
}
/* The professor biography and CUHK identity block are distinct information
groups. Keep one subtle rule between them with a little extra air. */
.profile-content .home-bio-divider {
width: 100%;
height: 0;
margin: 1.35rem 0 1.2rem;
border: 0;
border-top: 1px solid #b8b8b8;
}
/* Preserve the lower divider between the identity block and update date. */
.profile-content .home-institution-table {
margin-top: 0;
}
@media (max-width: 640px) {
.profile-content .home-profile-photo {
margin-bottom: 1rem !important;
}
.profile-content .home-bio-divider {
margin: 1rem 0;
}
}
/* ---------- v1.0.14 Homepage CUHK crest scale ---------- */
/* Match the compact crest-to-address proportion of the legacy homepage
reference supplied for visual comparison. The address text and existing
alignment/dividers remain unchanged. */
.profile-content .home-institution-table img[src*="cuhk_logo"] {
width: 58px;
max-width: 58px;
height: auto;
}
@media (max-width: 640px) {
.profile-content .home-institution-table td:first-child {
width: 72px;
padding-right: .9rem;
}
.profile-content .home-institution-table img[src*="cuhk_logo"] {
width: 52px;
max-width: 52px;
}
}
/* ---------- v1.0.15 Homepage portrait scale ---------- */
/* Enlarge the professor portrait to approximately the footprint marked in the
supplied homepage screenshot, while keeping the original aspect ratio and
centered alignment. Mobile sizing remains governed by the existing
responsive rule below 640px. */
@media (min-width: 641px) {
.profile-content .home-profile-photo img[src*="profilepic2017-mini"] {
width: min(100%, 520px);
max-width: 520px;
height: auto;
margin-inline: auto;
}
}