apps/kirjs/src/app/modules/ast/ast.component.css
.bg {
background: #fff;
opacity: 0.7;
padding: 2vw 5vw;
margin: 5vw 0;
border: 1px solid #000;
}
#intro h1 {
font-size: 9vw;
font-weight: 100;
font-family: 'Helvetica Neue', sans-serif;
}
a {
color: #9c2600;
}
#intro h2,
#outro h2 {
font-size: 12vw;
}
#intro h2,
#outro h1 {
font-size: 6vw;
}
:host /deep/ .slide > div {
width: 100%;
}
:host /deep/ .slide {
background: transparent;
}
#sausage-pre {
background: url(pics/sausage-pre.jpg) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
}
#not-like-sausage {
background: url(pics/sausage2.jpg) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
}
#babel-types {
background: url(pics/park.jpg) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
}
#babel-traverse .bg,
#babel-transform .bg,
#renoir .bg {
margin: 30vw 0;
}
#babel-traverse {
background: url(pics/girl-reading-1890.jpg) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
}
#babel-transform {
background: url(pics/doggie.jpg) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
}
#debugger-pre {
background: url(pics/debugger.jpg) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
}
#renoir {
background: url(pics/renoir.png) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
}
#babel-remove-debugger {
background: url(pics/cat.jpg) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
}
#babel-fit {
background: url(pics/the-garden.jpg) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
}
#parser {
background: url(pics/parser.png) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
}
#links-5-cool-things {
background: url(pics/bg-links.jpg) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
}
#panda {
background: url(pics/panda.webp) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
}
.henry-zhu {
background: url(pics/patreon.png) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
width: 70vw;
}
.babylon {
background: url(pics/babylon.png) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
width: 70vw;
}
.babylon {
background: url(pics/babylon.png) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
width: 70vw;
}
.success-complete-disco {
margin-top: 20px;
width: 500px;
height: 300px;
background: url(pics/success/disco.webp);
background-repeat: no-repeat;
background-size: cover;
}
.success-complete-husky {
margin-top: 20px;
width: 500px;
height: 300px;
background: url(pics/success/happy.webp);
background-repeat: no-repeat;
background-size: cover;
}
.success-complete-dancing {
margin-top: 20px;
width: 500px;
height: 300px;
background: url(pics/success/dancing-dog.webp);
background-repeat: no-repeat;
background-size: cover;
}
.github {
background: url(pics/github.png) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
width: 70vw;
}
.opencollective {
background: url(pics/opencollective.png) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
width: 70vw;
}
#eslint {
background: url(pics/debugger.jpg) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
}
#kirjs {
background: url(pics/kirjs.jpg) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
}
#intro,
#outro {
background: url(pics/landscape-with-trees-1.jpg) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
}
.bad-tree {
background: url(pics/tree.gif) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
}
#venok img {
width: 384px;
height: 288px;
margin: 0 auto;
}
.ast-explorer-link:hover {
font-size: 5vw;
}
.ast-explorer-link {
padding-top: 25px;
font-size: 10px;
}
.description.description.description {
margin: 0;
margin-top: 20px;
padding: 0;
font-size: 0;
}
#debugger-regex /deep/ .solution:hover:before {
color: red;
font-size: 3vw;
}
:host /deep/ #debugger-regex .solution {
}
.ast-preview-helper-list li:hover {
color: #444;
}
.ast-preview-helper-list li {
font-size: 20px;
text-decoration: dashed;
cursor: pointer;
color: #999;
border-bottom: 1px #ddd dashed;
}
.ast-preview {
font-size: 30px;
}
.two-button {
background: url(pics/button-1.png) no-repeat;
background-size: 50% auto;
display: inline-block;
height: 50vh;
font-size: 5vw;
border: 0 solid;
padding: 0;
margin: 0;
}
.two-button2 {
background: url(pics/two-button2.gif) no-repeat;
background-size: 50% auto;
display: inline-block;
height: 50vh;
font-size: 5vw;
border: 0 solid;
padding: 0;
margin: 0;
}
.two-button3 {
background: url(pics/two-button3.gif) no-repeat;
background-size: 100% auto;
display: inline-block;
height: 100vh;
font-size: 5vw;
border: 0 solid;
padding: 0;
margin: 0;
}
.link-number {
display: inline-block;
font-size: 8vw;
border-radius: 50%;
width: 10vw;
height: 10vw;
text-align: center;
margin-bottom: 10vh;
}
.collie.display {
background: url(pics/collie.webp) no-repeat;
}
.collie {
background-size: 100% auto;
display: inline-block;
height: 40vh;
font-size: 5vw;
width: 50vw;
}
.btn-bar {
line-height: 3vw;
}
.btn-bar:hover .font-size {
display: block;
font-size: 4vw;
}
.btn-bar .font-size {
display: none;
}
.twitter {
color: #444;
font-size: 3vw;
margin: 2vw;
}