mirror of
https://github.com/Pomax/BezierInfo-2.git
synced 2025-08-31 20:11:59 +02:00
image regeneration
This commit is contained in:
Pomax
382
docs/style.css
Normal file
382
docs/style.css
Normal file
@@ -0,0 +1,382 @@
|
||||
:root[lang="en-GB"] {
|
||||
font-family: "Museo", "Helvetica Neue", "Helvetica", Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
:root[lang="ja-JP"] {
|
||||
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue",
|
||||
"Helvetica", Arial, sans-serif;
|
||||
font-size: 15.6px;
|
||||
}
|
||||
|
||||
:root[lang="zh-CN"] {
|
||||
font-family: "华文细黑", "STXihei", "PingFang TC", "微软雅黑体", "Microsoft YaHei New", "微软雅黑", "Microsoft Yahei", "宋体", "SimSun",
|
||||
"Helvetica Neue", "Helvetica", Arial, sans-serif;
|
||||
font-size: 16.7px;
|
||||
}
|
||||
|
||||
:root {
|
||||
background: #eee;
|
||||
background-image: url(images/paper.png);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
--note-block-color: rgb(255, 255, 246);
|
||||
--code-block-color: rgba(0, 0, 0, 0.03);
|
||||
--heading-color: #cfe6ff;
|
||||
--heading-text: #333;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0 auto;
|
||||
width: auto;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 24px 16px white;
|
||||
color: black;
|
||||
|
||||
--body-padding: 0.5em;
|
||||
padding: var(--body-padding);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 576px) {
|
||||
body {
|
||||
width: 540px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
body {
|
||||
--body-padding: 1em;
|
||||
width: 720px;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 992px) {
|
||||
body {
|
||||
width: 960px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1200px) {
|
||||
body {
|
||||
width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
TODO: add in prefers-color-scheme? This would definitely make graphics weird.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
background: var(--heading-color);
|
||||
color: var(--heading-text);
|
||||
padding: 0.2em 0.5em;
|
||||
}
|
||||
|
||||
body header h1:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 div.nav {
|
||||
float: right;
|
||||
font-size: 0.6em;
|
||||
padding-top: 0.4em;
|
||||
}
|
||||
|
||||
h1 div.nav a + a {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
ul.lang-switcher {
|
||||
display: inline;
|
||||
text-indent: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul.lang-switcher li {
|
||||
display: inline;
|
||||
text-indent: 0;
|
||||
padding: 0 0.2em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label[for="changelogtoggle"] {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
color: #2929b3;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
header nav h4 {
|
||||
text-indent: 1em;
|
||||
}
|
||||
|
||||
header nav ol {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: 75vh;
|
||||
}
|
||||
|
||||
#changelogtoggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#changelogtoggle:not(:checked) ~ * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#chapters {
|
||||
counter-reset: section;
|
||||
}
|
||||
|
||||
#chapters section h1:before {
|
||||
counter-increment: section;
|
||||
content: "§" counter(section);
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
#chapters section > h1 > a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
graphics-element {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
div.print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.howtocode {
|
||||
position: relative;
|
||||
border: 1px solid black;
|
||||
background: #fcfcfd;
|
||||
margin: 1em;
|
||||
padding: 1em 1em 0 1em;
|
||||
}
|
||||
|
||||
div.howtocode h3 {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: calc(100% + 2em - 4px);
|
||||
left: calc(-1em + 2px);
|
||||
background: var(--heading-color);
|
||||
color: var(--heading-text);
|
||||
padding: 0.2em;
|
||||
margin: 0 auto;
|
||||
margin-top: -1em;
|
||||
border: 1px solid black;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
div.note {
|
||||
position: relative;
|
||||
border: 1px solid black;
|
||||
background: var(--note-block-color);
|
||||
margin: 1em;
|
||||
padding: 1em 1em 0 1em;
|
||||
}
|
||||
|
||||
div.note:before {
|
||||
display: inline-block;
|
||||
content: "Note";
|
||||
border: 1px solid black;
|
||||
border-radius: 0.5em;
|
||||
background: orange;
|
||||
padding: 0.2em 0.5em;
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
left: -1em;
|
||||
}
|
||||
|
||||
img.LaTeX.SVG {
|
||||
margin: 0;
|
||||
background: white;
|
||||
padding: 1em 1em 1em 0;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
/* The next two rules are a wonky fix for paragraph vs. image margins */
|
||||
|
||||
p + img.LaTeX.SVG {
|
||||
margin-top: -0.9em;
|
||||
}
|
||||
|
||||
img.LaTeX.SVG + p {
|
||||
margin-top: -0.25em;
|
||||
}
|
||||
|
||||
div.note img.LaTeX.SVG {
|
||||
background: var(--note-block-color);
|
||||
}
|
||||
|
||||
pre img.LaTeX.SVG {
|
||||
background: var(--code-block-color);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
img.LaTeX.SVG {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
background-color: var(--code-block-color);
|
||||
padding: 0.5em;
|
||||
border: 1px dotted gray;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
pre {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Courier;
|
||||
}
|
||||
|
||||
li code,
|
||||
p code {
|
||||
display: inline-block;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
font-weight: bold;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
|
||||
table.slider-wrapper {
|
||||
font-size: 75%;
|
||||
background: white;
|
||||
border: 1px solid black;
|
||||
border-collapse: collapse;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.slider-wrapper tr td {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slider-wrapper tr td:first-child {
|
||||
width: 3em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.slider-wrapper tr td:last-child {
|
||||
width: 3em;
|
||||
white-space: nowrap;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.slider-wrapper .slider-label {
|
||||
font-family: Arial;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.slider-wrapper .slider-value {
|
||||
padding: 0 0.25em;
|
||||
text-align-last: center;
|
||||
}
|
||||
|
||||
.slider-wrapper .slider {
|
||||
width: 100%;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: calc(100% + 2 * var(--body-padding));
|
||||
position: relative;
|
||||
left: calc(-1 * var(--body-padding));
|
||||
border: none;
|
||||
border-top: 1px solid black;
|
||||
margin: 1em 0 2em 0;
|
||||
}
|
||||
|
||||
div.scl img[usemap] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.dev,
|
||||
div.scl,
|
||||
div.github {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
div.dev {
|
||||
background: rgb(43, 49, 95);
|
||||
color: rgb(81, 181, 255);
|
||||
position: fixed;
|
||||
transform: rotate(-45deg);
|
||||
width: 22em;
|
||||
text-align: center;
|
||||
top: 4em;
|
||||
left: -6em;
|
||||
font-variant: small-caps;
|
||||
font-weight: bolder;
|
||||
font-family: Helvetica;
|
||||
box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 0.3);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
div.scl {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
div.scl {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0.25em;
|
||||
left: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
div.github {
|
||||
--scale: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
transform-origin: top right;
|
||||
transform: scale(var(--scale));
|
||||
}
|
||||
@media screen and (min-width: 992px) {
|
||||
div.github {
|
||||
--scale: 0.4;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1200px) {
|
||||
div.github {
|
||||
--scale: 0.5;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1470px) {
|
||||
div.github {
|
||||
--scale: 0.75;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1600px) {
|
||||
div.github {
|
||||
--scale: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
div.github img area {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h5.post-date {
|
||||
text-align: right;
|
||||
}
|
||||
Reference in New Issue
Block a user