graphics() fix after wmic refactor (win)

This commit is contained in:
Sebastian Hildebrandt 2021-10-21 13:41:34 +02:00
parent 23650f7079
commit 0612e3aa20
3 changed files with 1964 additions and 1946 deletions

File diff suppressed because it is too large Load Diff

View File

@ -1,173 +1,178 @@
body { body {
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", Roboto, Helvetica, Arial, sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol"; font-family: -apple-system, BlinkMacSystemFont, "segoe ui", Roboto, Helvetica, Arial, sans-serif, "apple color emoji",
font-weight: 300; "segoe ui emoji", "segoe ui symbol";
min-height: 100%; font-weight: 300;
background-color: rgb(89, 53, 30); min-height: 100%;
background-color: rgb(89, 53, 30);
} }
h1, h2, h3, h4 { h1,
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", Roboto, Helvetica, Arial, sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol"; h2,
font-weight: 300; h3,
h4 {
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", Roboto, Helvetica, Arial, sans-serif, "apple color emoji",
"segoe ui emoji", "segoe ui symbol";
font-weight: 300;
} }
.center { .center {
text-align: center; text-align: center;
} }
.bold { .bold {
font-weight: 700; font-weight: 700;
} }
.warning { .warning {
font-weight: 500; font-weight: 500;
color: rgb(156, 1, 1); color: rgb(156, 1, 1);
} }
.container-fluid { .container-fluid {
background-color: rgb(255,255,255); background-color: rgb(255, 255, 255);
padding-bottom: 30px; padding-bottom: 30px;
} }
.bg-image-full { .bg-image-full {
background: no-repeat center center scroll; background: no-repeat center center scroll;
background-color: #4b2313; /* For browsers that do not support gradients */ background-color: #4b2313; /* For browsers that do not support gradients */
background-image: linear-gradient(210deg, #4b2313, #2c0c0a ); /* Standard syntax (must be last) */ background-image: linear-gradient(210deg, #4b2313, #2c0c0a); /* Standard syntax (must be last) */
-webkit-background-size: cover; -webkit-background-size: cover;
-moz-background-size: cover; -moz-background-size: cover;
background-size: cover; background-size: cover;
-o-background-size: cover; -o-background-size: cover;
height: 100vh; //calc(100vh); height: 100vh; //calc(100vh);
height: calc(var(--vh, 1vh) * 100); height: calc(var(--vh, 1vh) * 100);
opacity: 0.95; opacity: 0.95;
display: flex;
justify-content: center;
text-align: center;
// align-items: center;
flex-direction: column;
.container {
text-align: center;
align-self: center;
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: center;
// align-items: center;
flex-direction: column; flex-direction: column;
.container { align-items: center;
text-align: center; flex-grow: 1;
align-self: center; }
display: flex; .recommendation {
justify-content: center; position: absolute;
flex-direction: column; top: 40px;
align-items: center; right: -95px;
flex-grow: 1; z-index: 10;
display: inline-block;
width: 330px;
text-align: center;
padding: 0.25em 0;
color: white;
transform: rotate(45deg);
background: rgb(151, 29, 29);
font-size: 0.9rem;
@media only screen and (min-width: 420px) {
font-size: 1rem;
} }
.recommendation { @media only screen and (min-width: 768px) {
position: absolute; font-size: 1.1rem;
top: 40px; }
right: -95px; @media only screen and (min-width: 1024px) {
z-index: 10; top: 50px;
display: inline-block; right: -75px;
width: 330px; font-size: 1.2rem;
text-align: center; }
padding: .25em 0; &:hover {
color: white; text-decoration: none;
transform: rotate(45deg); }
background: rgb(151, 29, 29); }
.title {
color: #fff;
padding-top: 10px;
font-size: 1.8rem;
margin-bottom: 10px;
@media only screen and (min-width: 420px) {
font-size: 2.4rem;
}
@media only screen and (min-width: 768px) {
font-size: 3.2rem;
}
@media only screen and (min-width: 1024px) {
font-size: 4rem;
}
}
.logo {
width: 100px;
@media only screen and (min-width: 420px) {
width: 120px;
}
@media only screen and (min-width: 768px) {
width: 160px;
}
@media only screen and (min-width: 1024px) {
width: 200px;
}
}
.subtitle {
text-align: center;
color: #bbb;
font-size: 0.78rem;
@media only screen and (min-width: 375px) {
font-size: 0.9rem; font-size: 0.9rem;
@media only screen and (min-width: 420px) {
font-size: 1.0rem;
}
@media only screen and (min-width: 768px) {
font-size: 1.1rem;
}
@media only screen and (min-width: 1024px) {
top: 50px;
right: -75px;
font-size: 1.2rem;
}
&:hover {
text-decoration: none;;
}
} }
.title { @media only screen and (min-width: 420px) {
color: #fff; font-size: 1rem;
padding-top: 10px;
font-size: 1.8rem;
margin-bottom: 10px;
@media only screen and (min-width: 420px) {
font-size: 2.4rem;
}
@media only screen and (min-width: 768px) {
font-size: 3.2rem;
}
@media only screen and (min-width: 1024px) {
font-size: 4rem;
}
} }
.logo { @media only screen and (min-width: 768px) {
width: 100px; font-size: 1.1rem;
@media only screen and (min-width: 420px) {
width: 120px;
}
@media only screen and (min-width: 768px) {
width: 160px;
}
@media only screen and (min-width: 1024px) {
width: 200px;
}
} }
.subtitle { @media only screen and (min-width: 1024px) {
text-align: center;
color: #bbb;
font-size: 0.78rem;
@media only screen and (min-width: 375px) {
font-size: 0.9rem;
}
@media only screen and (min-width: 420px) {
font-size: 1rem;
}
@media only screen and (min-width: 768px) {
font-size: 1.1rem;
}
@media only screen and (min-width: 1024px) {
font-size: 1.3rem;
}
}
.text > a {
text-align: center;
color: #fff;
font-size: 0.9rem;
&:hover {
color: #aaa;
text-decoration: none;
}
@media only screen and (min-width: 375px) {
font-size: 0.9rem;
}
@media only screen and (min-width: 420px) {
font-size: 1rem;
}
@media only screen and (min-width: 768px) {
font-size: 1rem;
}
@media only screen and (min-width: 1024px) {
font-size: 1.1rem;
}
}
.version {
text-align: center;
margin-bottom: 10px;
color: #fff;
font-size: .9rem;
@media only screen and (min-width: 420px) {
font-size: .9rem;
}
@media only screen and (min-width: 768px) {
font-size: 1rem;
}
@media only screen and (min-width: 1024px) {
font-size: 1.1rem;
}
}
.down {
text-align: center;
color: #fff;
font-size: 1.3rem; font-size: 1.3rem;
line-height: 1;
margin-bottom: 15px;
cursor: pointer;
.caret {
font-size: 3rem;
}
} }
}
.text > a {
text-align: center;
color: #fff;
font-size: 0.9rem;
&:hover {
color: #aaa;
text-decoration: none;
}
@media only screen and (min-width: 375px) {
font-size: 0.9rem;
}
@media only screen and (min-width: 420px) {
font-size: 1rem;
}
@media only screen and (min-width: 768px) {
font-size: 1rem;
}
@media only screen and (min-width: 1024px) {
font-size: 1.1rem;
}
}
.version {
text-align: center;
margin-bottom: 10px;
color: #fff;
font-size: 0.9rem;
@media only screen and (min-width: 420px) {
font-size: 0.9rem;
}
@media only screen and (min-width: 768px) {
font-size: 1rem;
}
@media only screen and (min-width: 1024px) {
font-size: 1.1rem;
}
}
.down {
text-align: center;
color: #fff;
font-size: 1.3rem;
line-height: 1;
margin-bottom: 15px;
cursor: pointer;
.caret {
font-size: 3rem;
}
}
} }
// a[ id="quickstart" ]:target ~ #main div.row { // a[ id="quickstart" ]:target ~ #main div.row {
@ -178,312 +183,318 @@ h1, h2, h3, h4 {
// background-color: #ff3333; // background-color: #ff3333;
// } // }
.nav { .nav {
background: no-repeat center center scroll; background: no-repeat center center scroll;
// background-color: #1A1F30; /* For browsers that do not support gradients */ // background-color: #1A1F30; /* For browsers that do not support gradients */
// background-image: linear-gradient(210deg, #2A2D66, #060520); /* Standard syntax (must be last) */ // background-image: linear-gradient(210deg, #2A2D66, #060520); /* Standard syntax (must be last) */
background-color: #4b2313; /* For browsers that do not support gradients */ background-color: #4b2313; /* For browsers that do not support gradients */
background-image: linear-gradient(210deg, #4b2313, #2c0c0a ); /* Standard syntax (must be last) */ background-image: linear-gradient(210deg, #4b2313, #2c0c0a); /* Standard syntax (must be last) */
-webkit-background-size: cover; -webkit-background-size: cover;
-moz-background-size: cover; -moz-background-size: cover;
background-size: cover; background-size: cover;
-o-background-size: cover; -o-background-size: cover;
height: 65px; height: 65px;
position: relative; position: relative;
.logo { .logo {
width: 60px; width: 60px;
margin-top: 12px; margin-top: 12px;
} }
.title { .title {
display: none; display: none;
color: #fff; color: #fff;
font-size: 1.2rem; font-size: 1.2rem;
margin-left: 15px; margin-left: 15px;
margin-top: 18px; margin-top: 18px;
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
display: inline-block;
}
@media only screen and (min-width: 1024px) {
font-size: 1.2rem;
}
}
.text {
margin-top: 18px;
a {
color: #fff;
margin-top: 12px;
font-size: 1.0rem;
@media only screen and (min-width: 1023px) {
margin-top: 10px;
font-size: 1.2rem;
}
&:hover {
color: #aaa;
text-decoration: none;
}
}
}
.github {
display: none;
@media only screen and (min-width: 768px) {
display: inline-block;
}
}
.todocs {
display: inline-block; display: inline-block;
@media only screen and (min-width: 768px) { }
display: none; @media only screen and (min-width: 1024px) {
font-size: 1.2rem;
}
}
.text {
margin-top: 18px;
a {
color: #fff;
margin-top: 12px;
font-size: 1rem;
@media only screen and (min-width: 1023px) {
margin-top: 10px;
font-size: 1.2rem;
}
&:hover {
color: #aaa;
text-decoration: none;
} }
} }
}
.github {
display: none;
@media only screen and (min-width: 768px) {
display: inline-block;
}
}
.todocs {
display: inline-block;
@media only screen and (min-width: 768px) {
display: none;
}
}
} }
.features { .features {
text-align: center; text-align: center;
color: #333; color: #333;
.inner { .inner {
padding: 10px 0px; padding: 10px 0px;
@media only screen and (min-width: 768px) {
padding: 15px 20px;
}
.icons {
display: block;
font-size: 3rem;
color: #bbb;
@media only screen and (min-width: 420px) {
font-size: 3.5rem;
}
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
padding: 15px 20px; font-size: 4rem;
} }
.icons { @media only screen and (min-width: 1024px) {
display: block; font-size: 5rem;
font-size: 3rem;
color: #bbb;
@media only screen and (min-width: 420px) {
font-size: 3.5rem;
}
@media only screen and (min-width: 768px) {
font-size: 4rem;
}
@media only screen and (min-width: 1024px) {
font-size: 5rem;
}
}
.icontitle {
font-size: 1.2rem;
}
&:hover {
background: #f4f4f4;
color: rgb(86, 122, 223);
.icons {
color: rgb(86, 122, 223);
}
} }
} }
.icontitle {
font-size: 1.2rem;
}
&:hover {
background: #f4f4f4;
color: rgb(86, 122, 223);
.icons {
color: rgb(86, 122, 223);
}
}
}
} }
.sectionheader { .sectionheader {
.title { .title {
text-align: center; text-align: center;
padding-top: 20px; padding-top: 20px;
font-size: 2rem; font-size: 2rem;
@media only screen and (min-width: 420px) { @media only screen and (min-width: 420px) {
font-size: 2.3rem; font-size: 2.3rem;
}
@media only screen and (min-width: 768px) {
text-align: left;
padding-top: 25px;
font-size: 2.6rem;
}
@media only screen and (min-width: 1024px) {
padding-top: 30px;
font-size: 3rem;
}
} }
.title-small { @media only screen and (min-width: 768px) {
text-align: center; text-align: left;
font-size: 1.4rem; padding-top: 25px;
@media only screen and (min-width: 420px) { font-size: 2.6rem;
font-size: 1.6rem;
}
@media only screen and (min-width: 768px) {
text-align: left;
padding-top: 25px;
font-size: 1.8rem;
}
@media only screen and (min-width: 1024px) {
padding-top: 30px;
font-size: 2rem;
}
} }
.subtitle { @media only screen and (min-width: 1024px) {
text-align: center; padding-top: 30px;
font-size: .9rem; font-size: 3rem;
@media only screen and (min-width: 420px) {
font-size: 1rem;
}
@media only screen and (min-width: 768px) {
text-align: left;
font-size: 1.1rem;
}
@media only screen and (min-width: 1024px) {
font-size: 1.3rem;
}
} }
.npmicons { }
text-align: center; .title-small {
text-align: center;
font-size: 1.4rem;
@media only screen and (min-width: 420px) {
font-size: 1.6rem;
} }
.text { @media only screen and (min-width: 768px) {
text-align: center; text-align: left;
padding-top: 10px; padding-top: 25px;
@media only screen and (min-width: 768px) { font-size: 1.8rem;
text-align: left;
}
} }
hr { @media only screen and (min-width: 1024px) {
margin-top: 40px; padding-top: 30px;
margin-bottom: 0px; font-size: 2rem;
border: 1px solid #ddd;
} }
}
.subtitle {
text-align: center;
font-size: 0.9rem;
@media only screen and (min-width: 420px) {
font-size: 1rem;
}
@media only screen and (min-width: 768px) {
text-align: left;
font-size: 1.1rem;
}
@media only screen and (min-width: 1024px) {
font-size: 1.3rem;
}
}
.npmicons {
text-align: center;
}
.text {
text-align: center;
padding-top: 10px;
@media only screen and (min-width: 768px) {
text-align: left;
}
}
hr {
margin-top: 40px;
margin-bottom: 0px;
border: 1px solid #ddd;
}
} }
.index { .index {
margin: 0 0 10px 0; margin: 0 0 10px 0;
.text, .subtitle, .title, .title-small, .npmicons { .text,
text-align: center; .subtitle,
.title,
.title-small,
.npmicons {
text-align: center;
} }
a { a {
text-decoration: none;
&:hover {
text-decoration: none; text-decoration: none;
&:hover { color: rgb(86, 122, 223);
text-decoration: none; }
color: rgb(86, 122, 223);
}
} }
} }
.left { .left {
.text, .subtitle, .title, .title-small .npmicons { .text,
text-align: left; .subtitle,
} .title,
.title-small .npmicons {
text-align: left;
}
} }
.table { .table {
text-align: left; text-align: left;
} }
ul { ul {
text-align: left; text-align: left;
} }
.number-section { .number-section {
margin-top: 40px; margin-top: 40px;
text-align: center; text-align: center;
.numbers { .numbers {
font-size: 2rem; font-size: 2rem;
@media only screen and (min-width: 420px) { @media only screen and (min-width: 420px) {
font-size: 2.4rem; font-size: 2.4rem;
}
@media only screen and (min-width: 768px) {
font-size: 2.8rem;
}
} }
.title { @media only screen and (min-width: 768px) {
color: #999; font-size: 2.8rem;
font-size: 1rem;
@media only screen and (min-width: 420px) {
font-size: 1.1rem;
}
@media only screen and (min-width: 768px) {
font-size: 1.2rem;
}
} }
}
.title {
color: #999;
font-size: 1rem;
@media only screen and (min-width: 420px) {
font-size: 1.1rem;
}
@media only screen and (min-width: 768px) {
font-size: 1.2rem;
}
}
} }
.menu { .menu {
display: none; display: none;
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
margin-top: 30px; margin-top: 30px;
display: inline-block;
}
.title {
margin: 25px 0 5px 0;
color: #000;
a {
width: 100%;
color: #000;
text-decoration: none;
&:hover {
color: rgb(86, 122, 223);
}
}
}
hr {
margin: 5px 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
padding: 2px 0;
a {
width: 100%;
color: #666;
text-decoration: none;
&:hover {
color: rgb(86, 122, 223);
}
}
&.active > a {
color: rgb(86, 122, 223);
}
}
}
}
.code {
font-family: Menlo, "dejavu sans mono", "lucida console", monospace;
-webkit-font-smoothing: antialiased;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
display: inline-block; display: inline-block;
background-color: #eee; }
margin: 0; .title {
padding: 0 5px; margin: 25px 0 5px 0;
} color: #000;
pre { a {
padding: 4px 10px 4px 10px; width: 100%;
font-family: Menlo, "dejavu sans mono", "lucida console", monospace; color: #000;
-webkit-font-smoothing: antialiased; text-decoration: none;
font-size: 13px; &:hover {
font-style: normal; color: rgb(86, 122, 223);
font-variant: normal;
font-weight: 400;
line-height: 18px;
background-color: #eee;
width: 100%;
text-align: left;
}
.example {
td:first-child {
background-color: #fff !important;
}
td:last-child {
background-color: #f8faff !important;
}
h5 {
padding-top: 5px;
padding-left: 10px;
}
pre {
background-color: unset;
.js {
background-color: #f0f0f4;
} }
} }
}
hr {
margin: 5px 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
padding: 2px 0;
a {
width: 100%;
color: #666;
text-decoration: none;
&:hover {
color: rgb(86, 122, 223);
}
}
&.active > a {
color: rgb(86, 122, 223);
}
}
}
}
.code {
font-family: Menlo, "dejavu sans mono", "lucida console", monospace;
-webkit-font-smoothing: antialiased;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
display: inline-block;
background-color: #eee;
margin: 0;
padding: 0 5px;
}
pre {
padding: 4px 10px 4px 10px;
font-family: Menlo, "dejavu sans mono", "lucida console", monospace;
-webkit-font-smoothing: antialiased;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 18px;
background-color: #eee;
width: 100%;
text-align: left;
}
.example {
td:first-child {
background-color: #fff !important;
}
td:last-child {
background-color: #f8faff !important;
}
h5 {
padding-top: 5px;
padding-left: 10px;
}
pre {
background-color: unset;
.js {
background-color: #f0f0f4;
}
}
} }
.footer { .footer {
background-color: #eee; background-color: #eee;
padding-top: 30px; padding-top: 30px;
padding-bottom: 30px; padding-bottom: 30px;
position: relative; position: relative;
a { a {
color: #000; color: #000;
} }
.badge { .badge {
color: #fff; color: #fff;
font-size: 0.9rem; font-size: 0.9rem;
} }
} }
.larger { .larger {
margin-top: 10px; margin-top: 10px;
font-size: 1.5rem !important; font-size: 1.5rem !important;
} }
.v5 { .v5 {
color:rgb(86, 122, 223); color: rgb(86, 122, 223);
} }

File diff suppressed because it is too large Load Diff