From 9dcb0bbe4fbb017a14e5efebc148dfc82e29c5cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Steven=20H=C3=A9=20=28S=C4=ABch=C3=A0ng=29?=
<sichang.he@dukekunshan.edu.cn>
Date: Thu, 13 Oct 2022 15:51:03 -0400
Subject: [PATCH] optimize for small screens
---
public/book.js | 4 ++--
public/css/general.css | 2 +-
public/index.html | 20 ++++++++++++--------
3 files changed, 15 insertions(+), 11 deletions(-)
diff --git a/public/book.js b/public/book.js
index 9e55f3e..bfcf3ae 100644
--- a/public/book.js
+++ b/public/book.js
@@ -127,8 +127,8 @@ const snap_home_articles = () => {
current_scroll = window.scrollY;
if (
snapping ||
- window.innerHeight < 600 ||
- first_article.offsetWidth / window.innerHeight > 1.5
+ window.innerWidth < 640 ||
+ window.innerHeight + 200 < last_article.offsetHeight
) {
return;
}
diff --git a/public/css/general.css b/public/css/general.css
index 46c8992..8aeb9a8 100644
--- a/public/css/general.css
+++ b/public/css/general.css
@@ -1 +1 @@
-.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.isolate{isolation:isolate}.m-auto{margin:auto}.block{display:block}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-screen{height:100vh}.h-20{height:5rem}.w-1\/3{width:33.333333%}.w-16{width:4rem}.w-full{width:100%}.w-1\/6{width:16.666667%}.w-1\/2{width:50%}.max-w-full{max-width:100%}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@-webkit-keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-bounce{-webkit-animation:bounce 1s infinite;animation:bounce 1s infinite}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}.animate-pulse{-webkit-animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.grid-flow-row{grid-auto-flow:row}.grid-flow-col{grid-auto-flow:column}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.items-center{align-items:center}.justify-center{justify-content:center}.gap-20{gap:5rem}.gap-4{gap:1rem}.scroll-smooth{scroll-behavior:smooth}.p-10{padding:2.5rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-40{padding-bottom:10rem}.pt-40,.py-40{padding-top:10rem}.pb-80{padding-bottom:20rem}.pt-80{padding-top:20rem}.pt-60{padding-top:15rem}.pb-20{padding-bottom:5rem}.text-center{text-align:center}.text-6xl{font-size:3.75rem;line-height:1}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.duration-100{transition-duration:.1s}:root{font-size:62.5%;scroll-behavior:smooth}*{background:transparent}:not([class],a,li,div,blockquote,blockquote>*,mark,span,strong,em,main,img,footer){background-color:var(--bg)}html{font-family:Open Sans,sans-serif;color:var(--fg);-moz-text-size-adjust:none;text-size-adjust:none;-webkit-text-size-adjust:none}body{margin:0;font-size:1.6rem;overflow-x:hidden}code{font-family:Source Code Pro,Consolas,Ubuntu Mono,Menlo,DejaVu Sans Mono,monospace,monospace!important;font-size:.875em}main{overflow-wrap:break-word}.no-js #main-loading,html:not(.no-js) main{display:none}footer{padding-top:15rem;font-size:.875rem;line-height:1.25rem}hr{border-color:var(--bg)}.table-wrapper{overflow-x:auto}h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{font-size:unset}.left{float:left}.right{float:right}.boring{opacity:.6}.hide-boring .boring{display:none}.hidden{display:none!important}h2,h3{margin-top:2.5em}h4,h5{margin-top:2em}.header+.header h3,.header+.header h4,.header+.header h5{margin-top:1em}h1:target:before,h2:target:before,h3:target:before,h4:target:before,h5:target:before,h6:target:before{display:inline-block;content:"»";margin-left:-30px;width:30px}:target{scroll-margin-top:calc(var(--menu-bar-height) + .5em)}.page{outline:0;padding:0 var(--page-padding);margin-top:calc(0px - var(--menu-bar-height))}.page-wrapper{box-sizing:border-box}.js:not(.sidebar-resizing) .page-wrapper{transition:margin-left .3s ease,transform .3s ease}.content{overflow-y:auto;padding:0 5px 50px}.content main{margin-left:auto;margin-right:auto;max-width:var(--content-max-width)}.content ol,.content p,.content ul{line-height:1.45em}.content a{text-decoration:none}.content a:hover{text-decoration:underline}.content img,.content video{max-width:100%}.content .header:link,.content .header:visited{color:var(--fg)}.content .header:link,.content .header:visited:hover{text-decoration:none}table{margin:0 auto;border-collapse:collapse}table td{padding:3px 20px;border:1px solid var(--table-header-bg)}table thead{background:var(--table-header-bg)}table thead td{font-weight:700;border:none}table thead th{padding:3px 20px}table thead tr{border:1px solid var(--table-header-bg)}table tbody tr:nth-child(2n){background:var(--table-alternate-bg)}blockquote{margin:20px 0;padding:0 20px;color:var(--fg);background-color:var(--quote-bg);border-top:.1em solid var(--quote-border);border-bottom:.1em solid var(--quote-border)}.footnote-definition+:not(.footnote-definition),:not(.footnote-definition)+.footnote-definition{margin-top:2em}.footnote-definition{font-size:.9em;margin:.5em 0}.footnote-definition p{display:inline}.tooltiptext{position:absolute;visibility:hidden;color:#fff;background-color:#333;transform:translateX(-50%);left:-8px;top:-35px;font-size:.8em;text-align:center;border-radius:6px;padding:5px 8px;margin:5px;z-index:1000}.tooltipped .tooltiptext{visibility:visible}.chapter li.part-title{color:var(--sidebar-fg);margin:5px 0;font-weight:700}.result-no-output{font-style:italic}::-webkit-scrollbar{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--scrollbar)}html{scrollbar-color:var(--scrollbar) var(--bg)}#searchresults a,.content a:link,a:visited,a>.hljs{color:var(--links)}#menu-bar,#menu-bar-hover-placeholder{z-index:101;margin:auto calc(0px - var(--page-padding))}#menu-bar{position:relative;display:flex;flex-wrap:wrap;background-color:var(--bg);border-bottom:1px solid var(--bg)}#menu-bar.sticky,.js #menu-bar-hover-placeholder:hover+#menu-bar,.js #menu-bar:hover,.js.sidebar-visible #menu-bar{position:-webkit-sticky;position:sticky;top:0!important}#menu-bar-hover-placeholder{position:sticky;position:-webkit-sticky;top:0;height:var(--menu-bar-height)}#menu-bar .icon-button,#menu-bar i{position:relative;padding:0 8px;z-index:10;line-height:var(--menu-bar-height);cursor:pointer;transition:color .5s}@media only screen and (max-width:420px){#menu-bar .icon-button,#menu-bar i{padding:0 5px}}.icon-button{border:none;background:none;padding:0;color:inherit}.icon-button i{margin:0}.right-buttons{margin:0 15px}.right-buttons a{text-decoration:none}.left-buttons{display:flex;margin:0 5px}.no-js .left-buttons{display:none}.menu-title{display:inline-block;font-weight:200;font-size:2.4rem;line-height:var(--menu-bar-height);text-align:center;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.js .menu-title{cursor:pointer}.menu-bar,.menu-bar .icon-button,.menu-bar a i,.menu-bar:visited,.mobile-nav-chapters,.mobile-nav-chapters:visited,.nav-chapters,.nav-chapters:visited{color:var(--icons)}.menu-bar .icon-button:hover,.menu-bar i:hover,.mobile-nav-chapters i:hover,.nav-chapters:hover{color:var(--icons-hover)}.nav-chapters{font-size:2.5em;text-align:center;text-decoration:none;position:fixed;top:0;bottom:0;margin:0;max-width:150px;min-width:90px;display:flex;justify-content:center;align-content:center;flex-direction:column;transition:color .5s,background-color .5s}.nav-chapters:hover{text-decoration:none;background-color:var(--theme-hover);transition:background-color .15s,color .15s}.nav-wrapper{margin-top:50px;display:none}.mobile-nav-chapters{font-size:2.5em;text-align:center;text-decoration:none;width:90px;border-radius:5px;background-color:var(--sidebar-bg)}.previous{float:left}.next{float:right;right:var(--page-padding)}@media only screen and (max-width:1080px){.nav-wide-wrapper{display:none}.nav-wrapper{display:block}}@media only screen and (max-width:1380px){.sidebar-visible .nav-wide-wrapper{display:none}.sidebar-visible .nav-wrapper{display:block}}:not(pre)>.hljs{display:inline;padding:.1em .3em;border-radius:3px}:not(pre):not(a)>.hljs{color:var(--inline-code-color);overflow-x:initial}a:hover>.hljs{text-decoration:underline}pre{position:relative}pre>.buttons{position:absolute;z-index:100;right:0;top:2px;margin:0;padding:2px 0;color:var(--sidebar-fg);cursor:pointer;visibility:hidden;opacity:0;transition:visibility .1s linear,opacity .1s linear}pre:hover>.buttons{visibility:visible;opacity:1}pre>.buttons :hover{color:var(--sidebar-active);border-color:var(--icons-hover);background-color:var(--theme-hover)}pre>.buttons i{margin-left:8px}pre>.buttons button{cursor:inherit;margin:0 5px;padding:3px 5px;font-size:14px;border-style:solid;border-width:1px;border-radius:4px;border-color:var(--icons);background-color:var(--theme-popup-bg);transition:.1s;transition-property:color,border-color,background-color;color:var(--icons)}@media (pointer:coarse){pre>.buttons button{padding:.3rem 1rem}}pre>code{padding:1rem}.hljs.ace_editor{padding:0}pre>.result{margin-top:10px}#searchresults a{text-decoration:none}mark{border-radius:2px;padding:0 3px 1px;margin:0 -3px -1px;background-color:var(--search-mark-bg);transition:background-color .3s linear;cursor:pointer}mark.fade-out{background-color:transparent!important;cursor:auto}.searchbar-outer{margin-left:auto;margin-right:auto;max-width:var(--content-max-width)}#searchbar{width:100%;margin:5px auto 0;padding:10px 16px;transition:box-shadow .3s ease-in-out;border:1px solid var(--searchbar-border-color);border-radius:3px;background-color:var(--searchbar-bg);color:var(--searchbar-fg)}#searchbar.active,#searchbar:focus{box-shadow:0 0 3px var(--searchbar-shadow-color)}.searchresults-header{font-weight:700;font-size:1em;padding:18px 0 0 5px;color:var(--searchresults-header-fg)}.searchresults-outer{margin-left:auto;margin-right:auto;max-width:var(--content-max-width);border-bottom:1px dashed var(--searchresults-border-color)}ul#searchresults{list-style:none;padding-left:20px}ul#searchresults li{margin:10px 0;padding:2px;border-radius:2px}ul#searchresults li.focus{background-color:var(--searchresults-li-bg)}ul#searchresults span.teaser{display:block;clear:both;margin:5px 0 0 20px;font-size:.8em}ul#searchresults span.teaser em{font-weight:700;font-style:normal}.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);font-size:.875em;box-sizing:border-box;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;background-color:var(--sidebar-bg);color:var(--sidebar-fg)}.sidebar-resizing{-moz-user-select:none;-webkit-user-select:none;user-select:none}.js:not(.sidebar-resizing) .sidebar{transition:transform .3s}.sidebar code{line-height:2em}.sidebar .sidebar-scrollbox{overflow-y:auto;position:absolute;top:0;bottom:0;left:0;right:0;padding:10px}.sidebar .sidebar-resize-handle{position:absolute;cursor:col-resize;width:0;right:0;top:0;bottom:0}.js .sidebar .sidebar-resize-handle{cursor:col-resize;width:5px}.sidebar-hidden .sidebar{transform:translateX(calc(0px - var(--sidebar-width)))}.sidebar::-webkit-scrollbar{background:var(--sidebar-bg)}.sidebar::-webkit-scrollbar-thumb{background:var(--scrollbar)}.sidebar-visible .page-wrapper{transform:translateX(var(--sidebar-width))}@media only screen and (min-width:620px){.sidebar-visible .page-wrapper{transform:none;margin-left:var(--sidebar-width)}}.chapter{list-style:none outside none;padding-left:0;line-height:2.2em}.chapter ol{width:100%;max-height:144rem;overflow:hidden;transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:1s}.chapter li{color:var(--sidebar-non-existant);transition:background-color .5s;display:flex;justify-content:space-between;border-radius:.75rem;padding:1rem;font-size:1.875rem;line-height:2.25rem}.chapter li.chapter-item:hover{background-color:var(--searchresults-border-color)}.chapter li a{display:block;padding:0;text-decoration:none;color:var(--sidebar-fg)}.chapter li a:hover,.chapter li.expanded a{color:var(--sidebar-active)}.chapter li.expanded{background-color:var(--searchresults-border-color);transition:background-color .5s}.chapter li>a.toggle{cursor:pointer;display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.68;padding-left:2rem;padding-right:2rem}.chapter li>a.toggle div{transition:transform .5s}.chapter li:not(.expanded)+li>ol{max-height:0;overflow:hidden;transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.5s}.chapter li.chapter-item{line-height:1.5em}.chapter li.expanded>a.toggle div{transform:rotate(90deg)}.toc-item{font-size:1.5rem;line-height:2rem}.spacer{width:100%;height:3px;margin:5px 0}.chapter .spacer{background-color:var(--sidebar-spacer)}@media (-moz-touch-enabled:1),(pointer:coarse){.chapter li a{padding:5px 0}.spacer{margin:10px 0}}.section{list-style:none outside none;padding-left:20px;line-height:1.9em}.theme-popup{position:absolute;left:10px;top:var(--menu-bar-height);z-index:1000;border-radius:4px;font-size:.7em;color:var(--fg);background:var(--theme-popup-bg);border:1px solid var(--theme-popup-border);margin:0;padding:0;list-style:none;display:none}.theme-popup .default{color:var(--icons)}.theme-popup .theme{width:100%;border:0;margin:0;padding:2px 10px;line-height:25px;white-space:nowrap;text-align:left;cursor:pointer;color:inherit;background:inherit;font-size:inherit}.theme-popup .theme:hover{background-color:var(--theme-hover)}.theme-popup .theme:hover:first-child,.theme-popup .theme:hover:last-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.particle{pointer-events:none;position:fixed;width:2.5rem;opacity:.2;z-index:-100}.h1-bg{box-shadow:inset 0 0 25px 50px var(--bg);display:flex;align-items:center;justify-content:center;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.h1-bg>h1{text-shadow:5px 5px 5px var(--bg);position:absolute;text-align:center;font-size:6rem;line-height:1}.h1-bg>img{z-index:-1;width:100%;opacity:.6}html:not(.no-js) main>*{opacity:0}html.home:not(.no-js) main>:not(#home_logo){transition-duration:1s}html:not(.no-js,.home) main>*{transition-duration:.5s}html.sidebar-visible{overflow-x:hidden}@media (min-width:640px){html.sidebar-visible{overflow:visible}}@media (min-width:768px){.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
\ No newline at end of file
+.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:-webkit-sticky;position:sticky}.isolate{isolation:isolate}.m-auto{margin:auto}.block{display:block}.flex{display:flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-screen{height:100vh}.h-20{height:5rem}.w-1\/2{width:50%}.w-1\/3{width:33.333333%}.w-16{width:4rem}.w-full{width:100%}.w-3\/4{width:75%}.w-1\/6{width:16.666667%}.max-w-full{max-width:100%}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@-webkit-keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-bounce{-webkit-animation:bounce 1s infinite;animation:bounce 1s infinite}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}.animate-pulse{-webkit-animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.grid-flow-row{grid-auto-flow:row}.grid-flow-col{grid-auto-flow:column}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.items-center{align-items:center}.justify-center{justify-content:center}.gap-20{gap:5rem}.gap-4{gap:1rem}.scroll-smooth{scroll-behavior:smooth}.p-10{padding:2.5rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-40{padding-top:10rem;padding-bottom:10rem}.pb-20{padding-bottom:5rem}.pt-80{padding-top:20rem}.pt-60{padding-top:15rem}.text-center{text-align:center}.text-6xl{font-size:3.75rem;line-height:1}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.duration-100{transition-duration:.1s}:root{font-size:62.5%;scroll-behavior:smooth}*{background:transparent}:not([class],a,li,div,blockquote,blockquote>*,mark,span,strong,em,main,img,footer){background-color:var(--bg)}html{font-family:Open Sans,sans-serif;color:var(--fg);-moz-text-size-adjust:none;text-size-adjust:none;-webkit-text-size-adjust:none}body{margin:0;font-size:1.6rem;overflow-x:hidden}code{font-family:Source Code Pro,Consolas,Ubuntu Mono,Menlo,DejaVu Sans Mono,monospace,monospace!important;font-size:.875em}main{overflow-wrap:break-word}.no-js #main-loading,html:not(.no-js) main{display:none}footer{padding-top:15rem;font-size:.875rem;line-height:1.25rem}hr{border-color:var(--bg)}.table-wrapper{overflow-x:auto}h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{font-size:unset}.left{float:left}.right{float:right}.boring{opacity:.6}.hide-boring .boring{display:none}.hidden{display:none!important}h2,h3{margin-top:2.5em}h4,h5{margin-top:2em}.header+.header h3,.header+.header h4,.header+.header h5{margin-top:1em}h1:target:before,h2:target:before,h3:target:before,h4:target:before,h5:target:before,h6:target:before{display:inline-block;content:"»";margin-left:-30px;width:30px}:target{scroll-margin-top:calc(var(--menu-bar-height) + .5em)}.page{outline:0;padding:0 var(--page-padding);margin-top:calc(0px - var(--menu-bar-height))}.page-wrapper{box-sizing:border-box}.js:not(.sidebar-resizing) .page-wrapper{transition:margin-left .3s ease,transform .3s ease}.content{overflow-y:auto;padding:0 5px 50px}.content main{margin-left:auto;margin-right:auto;max-width:var(--content-max-width)}.content ol,.content p,.content ul{line-height:1.45em}.content a{text-decoration:none}.content a:hover{text-decoration:underline}.content img,.content video{max-width:100%}.content .header:link,.content .header:visited{color:var(--fg)}.content .header:link,.content .header:visited:hover{text-decoration:none}table{margin:0 auto;border-collapse:collapse}table td{padding:3px 20px;border:1px solid var(--table-header-bg)}table thead{background:var(--table-header-bg)}table thead td{font-weight:700;border:none}table thead th{padding:3px 20px}table thead tr{border:1px solid var(--table-header-bg)}table tbody tr:nth-child(2n){background:var(--table-alternate-bg)}blockquote{margin:20px 0;padding:0 20px;color:var(--fg);background-color:var(--quote-bg);border-top:.1em solid var(--quote-border);border-bottom:.1em solid var(--quote-border)}.footnote-definition+:not(.footnote-definition),:not(.footnote-definition)+.footnote-definition{margin-top:2em}.footnote-definition{font-size:.9em;margin:.5em 0}.footnote-definition p{display:inline}.tooltiptext{position:absolute;visibility:hidden;color:#fff;background-color:#333;transform:translateX(-50%);left:-8px;top:-35px;font-size:.8em;text-align:center;border-radius:6px;padding:5px 8px;margin:5px;z-index:1000}.tooltipped .tooltiptext{visibility:visible}.chapter li.part-title{color:var(--sidebar-fg);margin:5px 0;font-weight:700}.result-no-output{font-style:italic}::-webkit-scrollbar{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--scrollbar)}html{scrollbar-color:var(--scrollbar) var(--bg)}#searchresults a,.content a:link,a:visited,a>.hljs{color:var(--links)}#menu-bar,#menu-bar-hover-placeholder{z-index:101;margin:auto calc(0px - var(--page-padding))}#menu-bar{position:relative;display:flex;flex-wrap:wrap;background-color:var(--bg);border-bottom:1px solid var(--bg)}#menu-bar.sticky,.js #menu-bar-hover-placeholder:hover+#menu-bar,.js #menu-bar:hover,.js.sidebar-visible #menu-bar{position:-webkit-sticky;position:sticky;top:0!important}#menu-bar-hover-placeholder{position:sticky;position:-webkit-sticky;top:0;height:var(--menu-bar-height)}#menu-bar .icon-button,#menu-bar i{position:relative;padding:0 8px;z-index:10;line-height:var(--menu-bar-height);cursor:pointer;transition:color .5s}@media only screen and (max-width:420px){#menu-bar .icon-button,#menu-bar i{padding:0 5px}}.icon-button{border:none;background:none;padding:0;color:inherit}.icon-button i{margin:0}.right-buttons{margin:0 15px}.right-buttons a{text-decoration:none}.left-buttons{display:flex;margin:0 5px}.no-js .left-buttons{display:none}.menu-title{display:inline-block;font-weight:200;font-size:2.4rem;line-height:var(--menu-bar-height);text-align:center;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.js .menu-title{cursor:pointer}.menu-bar,.menu-bar .icon-button,.menu-bar a i,.menu-bar:visited,.mobile-nav-chapters,.mobile-nav-chapters:visited,.nav-chapters,.nav-chapters:visited{color:var(--icons)}.menu-bar .icon-button:hover,.menu-bar i:hover,.mobile-nav-chapters i:hover,.nav-chapters:hover{color:var(--icons-hover)}.nav-chapters{font-size:2.5em;text-align:center;text-decoration:none;position:fixed;top:0;bottom:0;margin:0;max-width:150px;min-width:90px;display:flex;justify-content:center;align-content:center;flex-direction:column;transition:color .5s,background-color .5s}.nav-chapters:hover{text-decoration:none;background-color:var(--theme-hover);transition:background-color .15s,color .15s}.nav-wrapper{margin-top:50px;display:none}.mobile-nav-chapters{font-size:2.5em;text-align:center;text-decoration:none;width:90px;border-radius:5px;background-color:var(--sidebar-bg)}.previous{float:left}.next{float:right;right:var(--page-padding)}@media only screen and (max-width:1080px){.nav-wide-wrapper{display:none}.nav-wrapper{display:block}}@media only screen and (max-width:1380px){.sidebar-visible .nav-wide-wrapper{display:none}.sidebar-visible .nav-wrapper{display:block}}:not(pre)>.hljs{display:inline;padding:.1em .3em;border-radius:3px}:not(pre):not(a)>.hljs{color:var(--inline-code-color);overflow-x:initial}a:hover>.hljs{text-decoration:underline}pre{position:relative}pre>.buttons{position:absolute;z-index:100;right:0;top:2px;margin:0;padding:2px 0;color:var(--sidebar-fg);cursor:pointer;visibility:hidden;opacity:0;transition:visibility .1s linear,opacity .1s linear}pre:hover>.buttons{visibility:visible;opacity:1}pre>.buttons :hover{color:var(--sidebar-active);border-color:var(--icons-hover);background-color:var(--theme-hover)}pre>.buttons i{margin-left:8px}pre>.buttons button{cursor:inherit;margin:0 5px;padding:3px 5px;font-size:14px;border-style:solid;border-width:1px;border-radius:4px;border-color:var(--icons);background-color:var(--theme-popup-bg);transition:.1s;transition-property:color,border-color,background-color;color:var(--icons)}@media (pointer:coarse){pre>.buttons button{padding:.3rem 1rem}}pre>code{padding:1rem}.hljs.ace_editor{padding:0}pre>.result{margin-top:10px}#searchresults a{text-decoration:none}mark{border-radius:2px;padding:0 3px 1px;margin:0 -3px -1px;background-color:var(--search-mark-bg);transition:background-color .3s linear;cursor:pointer}mark.fade-out{background-color:transparent!important;cursor:auto}.searchbar-outer{margin-left:auto;margin-right:auto;max-width:var(--content-max-width)}#searchbar{width:100%;margin:5px auto 0;padding:10px 16px;transition:box-shadow .3s ease-in-out;border:1px solid var(--searchbar-border-color);border-radius:3px;background-color:var(--searchbar-bg);color:var(--searchbar-fg)}#searchbar.active,#searchbar:focus{box-shadow:0 0 3px var(--searchbar-shadow-color)}.searchresults-header{font-weight:700;font-size:1em;padding:18px 0 0 5px;color:var(--searchresults-header-fg)}.searchresults-outer{margin-left:auto;margin-right:auto;max-width:var(--content-max-width);border-bottom:1px dashed var(--searchresults-border-color)}ul#searchresults{list-style:none;padding-left:20px}ul#searchresults li{margin:10px 0;padding:2px;border-radius:2px}ul#searchresults li.focus{background-color:var(--searchresults-li-bg)}ul#searchresults span.teaser{display:block;clear:both;margin:5px 0 0 20px;font-size:.8em}ul#searchresults span.teaser em{font-weight:700;font-style:normal}.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);font-size:.875em;box-sizing:border-box;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;background-color:var(--sidebar-bg);color:var(--sidebar-fg)}.sidebar-resizing{-moz-user-select:none;-webkit-user-select:none;user-select:none}.js:not(.sidebar-resizing) .sidebar{transition:transform .3s}.sidebar code{line-height:2em}.sidebar .sidebar-scrollbox{overflow-y:auto;position:absolute;top:0;bottom:0;left:0;right:0;padding:10px}.sidebar .sidebar-resize-handle{position:absolute;cursor:col-resize;width:0;right:0;top:0;bottom:0}.js .sidebar .sidebar-resize-handle{cursor:col-resize;width:5px}.sidebar-hidden .sidebar{transform:translateX(calc(0px - var(--sidebar-width)))}.sidebar::-webkit-scrollbar{background:var(--sidebar-bg)}.sidebar::-webkit-scrollbar-thumb{background:var(--scrollbar)}.sidebar-visible .page-wrapper{transform:translateX(var(--sidebar-width))}@media only screen and (min-width:620px){.sidebar-visible .page-wrapper{transform:none;margin-left:var(--sidebar-width)}}.chapter{list-style:none outside none;padding-left:0;line-height:2.2em}.chapter ol{width:100%;max-height:144rem;overflow:hidden;transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:1s}.chapter li{color:var(--sidebar-non-existant);transition:background-color .5s;display:flex;justify-content:space-between;border-radius:.75rem;padding:1rem;font-size:1.875rem;line-height:2.25rem}.chapter li.chapter-item:hover{background-color:var(--searchresults-border-color)}.chapter li a{display:block;padding:0;text-decoration:none;color:var(--sidebar-fg)}.chapter li a:hover,.chapter li.expanded a{color:var(--sidebar-active)}.chapter li.expanded{background-color:var(--searchresults-border-color);transition:background-color .5s}.chapter li>a.toggle{cursor:pointer;display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.68;padding-left:2rem;padding-right:2rem}.chapter li>a.toggle div{transition:transform .5s}.chapter li:not(.expanded)+li>ol{max-height:0;overflow:hidden;transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.5s}.chapter li.chapter-item{line-height:1.5em}.chapter li.expanded>a.toggle div{transform:rotate(90deg)}.toc-item{font-size:1.5rem;line-height:2rem}.spacer{width:100%;height:3px;margin:5px 0}.chapter .spacer{background-color:var(--sidebar-spacer)}@media (-moz-touch-enabled:1),(pointer:coarse){.chapter li a{padding:5px 0}.spacer{margin:10px 0}}.section{list-style:none outside none;padding-left:20px;line-height:1.9em}.theme-popup{position:absolute;left:10px;top:var(--menu-bar-height);z-index:1000;border-radius:4px;font-size:.7em;color:var(--fg);background:var(--theme-popup-bg);border:1px solid var(--theme-popup-border);margin:0;padding:0;list-style:none;display:none}.theme-popup .default{color:var(--icons)}.theme-popup .theme{width:100%;border:0;margin:0;padding:2px 10px;line-height:25px;white-space:nowrap;text-align:left;cursor:pointer;color:inherit;background:inherit;font-size:inherit}.theme-popup .theme:hover{background-color:var(--theme-hover)}.theme-popup .theme:hover:first-child,.theme-popup .theme:hover:last-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.particle{pointer-events:none;position:fixed;width:2.5rem;opacity:.2;z-index:-100}.h1-bg{box-shadow:inset 0 0 25px 50px var(--bg);display:flex;align-items:center;justify-content:center;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.h1-bg>h1{text-shadow:5px 5px 5px var(--bg);position:absolute;text-align:center;font-size:6rem;line-height:1}.h1-bg>img{z-index:-1;width:100%;opacity:.6}html:not(.no-js) main>*{opacity:0}html.home:not(.no-js) main>:not(#home_logo){transition-duration:1s}html:not(.no-js,.home) main>*{transition-duration:.5s}html.sidebar-visible{overflow-x:hidden}@media (min-width:640px){html.sidebar-visible{overflow:visible}.sm\:pb-20{padding-bottom:5rem}.sm\:pt-80{padding-top:20rem}}@media (min-width:768px){.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index e753c6d..9b9bb36 100644
--- a/public/index.html
+++ b/public/index.html
@@ -109,7 +109,7 @@
<div id="promotion_video" class="flex justify-center">
<iframe title="DKU: GutGuard (2022) - Project Promotion [English]" width="560" height="315" src="https://video.igem.org/videos/embed/c28db71c-27b0-4945-863c-3aed20c3bfde" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" class="py-40"></iframe>
</div>
-<article class="gap-20 pb-20 pt-80">
+<article class="pt-60 sm:pb-20 sm:pt-80">
Shigella, as one of the most antibiotic resistant pathogens,
poses a great threat to food safety especially in developing areas.
<p><strong>10 million</strong> will be subject to mortalities caused by <em>Shigella</em> infection by 2050.</p>
@@ -122,7 +122,7 @@ and the emergence of more antibiotic resistant strains.</p>
<img alt="Figure 1 legend" src="https://static.igem.wiki/teams/4161/wiki/hmpg1-1-legend.png" />
</div>
</article>
-<article class="gap-20 pb-20 pt-80">
+<article class="pt-60 sm:pb-20 sm:pt-80">
We are in an endless race against pathogens.
<p>Antibiotics are our weapons. Mutations are their strategies to survival.</p>
<p>Now, DKU iGEM team has proposed an alternative to jump out of this race and possibly, go far beyond.</p>
@@ -130,17 +130,21 @@ We are in an endless race against pathogens.
<p>It is different from antibiotics and can be more effective when triggering the host immune system.
<img alt="Figure 2" src="https://static.igem.wiki/teams/4161/wiki/hmpg-2.png" class="w-full" /></p>
</article>
-<article class="gap-20 pb-20 pt-80">
+<article class="pt-60 sm:pb-20 sm:pt-80">
However, conventional antibodies have a high cost because of the complicated synthesis procedure.
-<p>It can also be vulnerable to proteosomes in the GI tract.
-<img alt="Figure 3" src="https://static.igem.wiki/teams/4161/wiki/hmpg-3.png" class="w-full" /></p>
+<p>It can also be vulnerable to proteosomes in the GI tract.</p>
+<div class="flex justify-center">
+<img alt="Figure 3" src="https://static.igem.wiki/teams/4161/wiki/hmpg-3.png" class="w-3/4" />
+</div>
</article>
-<article class="gap-20 pb-20 pt-80">
+<article class="pt-60 sm:pb-20 sm:pt-80">
Thus we propose a novel method to display nanobodies on the surface of probiotics.
<p>It exploits the natural pathogen inhibition effects of the probiotics.</p>
<p>It also explores possibilities of antibody therapy mass production.</p>
-<p>Click on the left menu to learn more.
-<img alt="Figure 4" src="https://static.igem.wiki/teams/4161/wiki/hmpg-4.png" class="w-full" /></p>
+<p>Click on the left menu to learn more.</p>
+<div class="flex justify-center">
+<img alt="Figure 4" src="https://static.igem.wiki/teams/4161/wiki/hmpg-4.png" class="w-3/4" />
+</div>
</article>
</main>
--
GitLab