Select Git revision
tour.css 7.18 KiB
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap");
@import url("https://fonts.googleapis.com/css?family=Fira+Code&display=swap");
a {
color: #1e90ff;
text-decoration: none;
font-weight: bold;
}
a:focus {
outline: none;
}
pre > code,
code,
.code-badge {
font-family: "Fira Code", monospace;
}
div.page img {
max-height: 100%;
max-width: calc(100%);
}
/* TODO: HOW TO CHANGE FONT SIZE IN EMBEDDED */
/* .GtOBiXh6TX6MRcPpfiv5 {
http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/
ACE uses Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
font-family: "Source Code Pro", monospace;
font-size: 1.2em;
} */
s {
color: #999;
opacity: 0.7;
}
hr {
border: none;
font-size: 0;
line-height: 0;
height: 20px;
margin: 20px auto;
background: url(/divider-line.svg);
background-size: 200px 200px;
cursor: pointer !important;
background-position: 0 -160px;
background-repeat: no-repeat;
width: 200px;
}
blockquote {
font-style: italic;
font-size: 1.2em;
margin: 20px 0;
padding: 10px;
border-left: 5px solid #ff6801;
background-color: #efefef;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 40px;
margin-inline-end: 40px;
}
code {
/* font-family: Consolas, monospace; */
font-size: 1.1em;
font-weight: 500;
padding: 0.3em;
margin: 0.5em 0;
border-radius: 4px;
background-color: #ffd2b3;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
line-height: 1.5;
color: #333;
}
.title a {
text-decoration: none;
color: #120b12;
font-size: 34px;
line-height: 34px;
font-display: optional;
}
.emoji {
font-family: apple color emoji, segoe ui emoji, noto color emoji,
android emoji, emojisymbols, emojione mozilla, twemoji mozilla,
segoe ui symbol;
}
h1,
h2,
p,
pre {
margin-left: 40px;
margin-right: 40px;
}
.page p,
.page pre {
font-size: 22px;
line-height: 40px;
}
.header {
height: 40px;
padding: 4px;
line-height: 40px;
font-size: 28px;
line-height: 28px;
font-weight: bold;
color: white;
padding-left: 30px;
background-color: #ff6801;
box-shadow: 0 2px 3px #cf3801;
grid-column: span 2;
}
.header a {
color: white !important;
}
html,
body {
padding: 0px;
margin: 0px;
font-family: "Noto Sans KR", sans-serif;
/* font-family: "NanumGothic", serif; */
color: #333;
}
.tour {
display: grid;
grid-template-columns: 1fr 1fr;
}
.next a,
.back a {
color: #120b12;
}
.nav {
float: right;
padding-right: 10px;
}
h3 {
font-size: 2em;
}
iframe {
border-radius: 10px;
}
.page {
/* font-family: "IBM Plex Serif", serif; */
overflow-y: auto;
-webkit-animation: fadein 0.5s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 0.5s;
/* Firefox < 16 */
-ms-animation: fadein 0.5s;
/* Internet Explorer */
-o-animation: fadein 0.5s;
/* Opera < 12.1 */
animation: fadein 0.5s;
min-height: 50vh;
}
/* code {
display: inline;
background: #444;
color: white;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 3px;
margin-right: 3px;
margin-left: 3px;
} */
li {
list-style-type: none;
padding-left: 1em;
}
li::before {
content: ">";
color: #333;
font-size: 1.2em;
font-weight: 900;
/* Use a higher font weight */
display: inline-block;
width: 1em;
margin-left: -1em;
}
li {
padding-top: 10px;
padding-bottom: 3px;
}
.nav span {
padding-left: 10px;
}
.toc a {
color: #120b12;
}
ul,
ol,
h3 {
margin-left: 40px;
margin-right: 40px;
}
.bottomnav {
padding-top: 20px;
text-align: center;
font-size: 42px;
}
.bottomnav a {
text-decoration: none;
color: #666;
font-weight: 100;
font-size: 20px;
}
.bottomnav .back {
float: left;
padding-left: 40px;
}
.bottomnav .next {
float: right;
padding-right: 40px;
}
body.welcome-cover {
background: url(cover.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
}
.welcome {
font-size: 40;
top: 50%;
width: 100%;
position: absolute;
text-shadow: 2px 2px black;
font-weight: bold;
color: white;
-webkit-animation: fadein 2s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s;
/* Firefox < 16 */
-ms-animation: fadein 2s;
/* Internet Explorer */
-o-animation: fadein 2s;
/* Opera < 12.1 */
animation: fadein 2s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.welcome a {
font-size: 40px;
color: white;
text-shadow: 4px 2px black;
line-height: 80px;
font-weight: bold;
text-decoration: none;
}
.welcome a {
font-size: 120;
}
.welcome-instruction {
text-shadow: 2px 1px black;
padding-top: 10px;
font-size: 30px;
text-decoration: underline;
}
ul {
font-size: 22px;
line-height: 36px;
}
.mobile-ferris {
display: none;
}
.page h1 {
font-size: 26px;
}
.code {
padding-top: 60px;
padding-right: 20px;
}
iframe {
position: sticky;
top: 20px;
height: max(80vh, 500px);
}
.page {
padding-bottom: 60px;
}
@media screen and (max-width: 600px) {
.tour {
display: block;
}
.code {
font-size: 14px;
padding-right: 0;
}
.header {
font-size: 20px;
padding-left: 7px;
padding-right: 7px;
line-height: 40px;
grid-column: unset;
}
iframe {
position: unset;
top: unset;
height: 80vh;
border-radius: 0;
}
.title a {
font-size: 28px;
line-height: 40px;
}
.page p,
h1,
pre {
margin-left: 20px;
margin-right: 20px;
}
.page h1 {
font-size: 26px;
}
.page p,
.page pre {
font-size: 22px;
line-height: 40px;
}
.page {
padding-bottom: 0px;
}
ul,
ol,
h3 {
margin-left: 0px;
margin-right: 20px;
}
.nav span {
padding-left: 5px;
}
.nav {
padding-right: 0px;
letter-spacing: -0.6px;
}
.bottomnav a {
font-size: 22px;
}
.bottomnav .back {
padding-left: 20px;
}
.bottomnav .next {
padding-right: 20px;
}
.welcome {
font-size: 24px;
}
.welcome a {
font-size: 40px;
line-height: 40px;
}
.welcome a {
font-size: 50;
text-shadow: 2px 2px black;
}
.welcome-instruction {
padding-top: 10px;
font-size: 30px;
}
.mobile-ferris {
display: block;
top: 20%;
left: 50%;
margin-left: -75px;
position: absolute;
width: 150px;
-webkit-animation: fadein 2s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s;
/* Firefox < 16 */
-ms-animation: fadein 2s;
/* Internet Explorer */
-o-animation: fadein 2s;
/* Opera < 12.1 */
animation: fadein 2s;
}
}
b,
h1 {
color: black;
}
.header:fullscreen,
.header:-webkit-full-screen,
.header:moz-full-screen {
display: none;
}