patrick/KaTeX
1
0
Fork 0
mirror of https://github.com/Smaug123/KaTeX synced 2025-10-06 11:48:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Sync support pages (#1556)

Browse Source 
* Sync support pages

* Use KaTeX logo for \href example

* mobile support

* Unit block sizes

* Add texvc to supported.md

* Fix CSS lint errors

* Added suggested braces to demo page

* Pick up review comments

* Move \allowbreak
This commit is contained in:
Ron Kok
2018-08-10 13:37:08 -07:00
committed by Erik Demaine
parent 881d780287
commit d2f56cebd7
4 changed files with 347 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/pages/index.html
View File

@@ -82,7 +82,7 @@ f(x) = \int_{-\infty}^\infty
<div class="examples">
<div class="example tex" data-expr="\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }"></div>
<div class="example tex" data-expr="\displaystyle \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)"></div>
<div class="example tex" data-expr="\displaystyle 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for }\lvert q\rvert<1."></div>
<div class="example tex" data-expr="\displaystyle {1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots }= \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for }\lvert q\rvert<1."></div>
</div>
<div class="subtagline">

96
website/static/css/custom.css
View File

@@ -26,6 +26,102 @@
height: 80%;
}
/* Add special CSS for supported.md rendered on mobile */
@media screen and (max-width: 480px) {
/* We have two styles for very narrow screens.
* We apply the hopscotch style to headless tables. It breaks
* tables down so that each cell acts like a <div>
*
* We apply a card style to tables with headings. This converts
* each cell into its own row, with a heading to its left.
*/
.katex-cards table td {
display: block;
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
.katex-hopscotch table td {
display: inline-block;
background: #fff;
}
.katex-hopscotch table tr {
border: none;
background: #fff;
}
.katex-cards table,
.katex-cards thead,
.katex-cards tbody,
.katex-cards th {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.katex-cards thead tr {
display: block;
position: absolute;
top: -9999px;
left: -9999px;
}
.katex-cards td:nth-of-type(1),
.katex-cards td:nth-of-type(2) { background-color: #fff; }
.katex-cards td:nth-of-type(3),
.katex-cards td:nth-of-type(4) { background-color: #f6f8fa; }
.katex-cards table td:nth-child(even) { border-bottom: 1px solid #ccc; }
.katex-cards td::before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
#spacing-tbl td:nth-of-type(1)::before,
#spacing-tbl td:nth-of-type(3)::before { content: "Function:"; }
#spacing-tbl td:nth-of-type(2)::before,
#spacing-tbl td:nth-of-type(4)::before { content: "Produces:"; }
#math-alpha td:nth-of-type(1)::before,
#math-alpha td:nth-of-type(3)::before { content: "Item:"; }
#math-alpha td:nth-of-type(2)::before,
#math-alpha td:nth-of-type(4)::before { content: "Range:"; }
#environments td:nth-of-type(1)::before,
#environments td:nth-of-type(3)::before { content: "Environment:"; }
#environments td:nth-of-type(2)::before,
#environments td:nth-of-type(4)::before { content: "From code:"; }
#unit-tbl td:nth-of-type(1)::before,
#unit-tbl td:nth-of-type(3)::before { content: "Unit:"; }
#unit-tbl td:nth-of-type(2)::before,
#unit-tbl td:nth-of-type(4)::before { content: "Value:"; }
#unit-blocks td:nth-of-type(2)::before { content: "textstyle:"; }
#unit-blocks td:nth-of-type(3)::before { content: "scriptscript:"; }
#unit-blocks td:nth-of-type(4)::before { content: "huge:"; }
#unit-blocks td { background-color: #fff; }
}
/* stylelint-disable block-no-empty */
@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
}