mirror of https://github.com/IoTcat/js.org.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
2.9 KiB
165 lines
2.9 KiB
html.no-js, html.ie8, html.bg { |
|
background: url("http://js.org/img/bg.png") #ffb400 repeat-y fixed; |
|
} |
|
|
|
::selection { |
|
color: #ffb400; |
|
background: #333333; |
|
} |
|
|
|
.btf { |
|
opacity: 1; |
|
} |
|
|
|
a:hover { |
|
color: rgba(51, 51, 51, 0.25); |
|
} |
|
|
|
.hf .logo a:hover { |
|
color: rgba(51, 51, 51, 0.25); |
|
} |
|
.hf a { |
|
-moz-transition: all .3s; |
|
-o-transition: all .3s; |
|
-webkit-transition: all .3s; |
|
transition: all .3s; |
|
} |
|
.hf .fb:hover, .hf .tw:hover, .hf .gp:hover, .hf .gh:hover { |
|
background: white; |
|
} |
|
.hf .fb:hover { |
|
color: #3c5a98; |
|
} |
|
.hf .tw:hover { |
|
color: #54a3db; |
|
} |
|
.hf .gp:hover { |
|
color: #de4b3b; |
|
} |
|
.hf .gh:hover { |
|
background: rgba(51, 51, 51, 0.25); |
|
} |
|
|
|
#zodiac { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
z-index: -1; |
|
} |
|
|
|
#err404 { |
|
text-align: center; |
|
} |
|
#err404 span { |
|
font-size: 5.5em; |
|
line-height: 1em; |
|
font-weight: 700; |
|
} |
|
|
|
#typewriter { |
|
font-size: 3em; |
|
margin: 0; |
|
} |
|
#typewriter #hermes { |
|
-moz-transition: all .2s .1s; |
|
-o-transition: all .2s .1s; |
|
-webkit-transition: all .2s .1s; |
|
transition: all .2s .1s; |
|
} |
|
#typewriter #hermes.active { |
|
padding-right: .1em; |
|
border-right: 0.06em solid #333333; |
|
} |
|
|
|
section { |
|
position: relative; |
|
padding: 1em 0; |
|
} |
|
section a { |
|
font-weight: 700; |
|
} |
|
section input { |
|
position: absolute; |
|
opacity: 0; |
|
top: 0; |
|
left: -999px; |
|
} |
|
section input:checked + article { |
|
display: inline-block; |
|
} |
|
section input#s1I:checked ~ nav #s1L, section input#s2I:checked ~ nav #s2L, section input#s3I:checked ~ nav #s3L, section input#s4I:checked ~ nav #s4L { |
|
background-color: white; |
|
} |
|
section nav { |
|
display: inline-table; |
|
border-collapse: collapse; |
|
margin: 0; |
|
} |
|
section nav label { |
|
cursor: pointer; |
|
display: table-cell; |
|
border: 2px solid white; |
|
border-top: none; |
|
left: 0; |
|
font-weight: 700; |
|
font-size: 1em; |
|
height: 2em; |
|
width: 2em; |
|
line-height: 2em; |
|
text-align: center; |
|
margin: 0; |
|
padding: 0; |
|
-moz-transition: all .3s; |
|
-o-transition: all .3s; |
|
-webkit-transition: all .3s; |
|
transition: all .3s; |
|
} |
|
section nav label:hover { |
|
background-color: fade(white, 50%); |
|
} |
|
section article { |
|
display: none; |
|
background-color: white; |
|
margin: 0; |
|
padding: 1.2em; |
|
} |
|
section article h3 { |
|
float: left; |
|
color: #ffb400; |
|
border-right: 2px solid #ffb400; |
|
font-size: 6em; |
|
width: 1em; |
|
padding-top: .2em; |
|
text-align: center; |
|
line-height: .75em; |
|
font-weight: 700; |
|
margin: -.2em .3em .1em -.2em; |
|
} |
|
|
|
h4 { |
|
margin-bottom: .5em; |
|
} |
|
|
|
@media screen and (max-width: 640px) { |
|
section article h3 { |
|
font-size: 2em; |
|
padding-top: .4em; |
|
margin: -.6em .6em 0 0; |
|
} |
|
|
|
#typewriter { |
|
font-size: 2em; |
|
} |
|
} |
|
@media screen and (max-width: 480px) { |
|
#typewriter { |
|
font-size: 1.5em; |
|
font-weight: 700; |
|
} |
|
|
|
code, h4 { |
|
display: none; |
|
} |
|
}
|
|
|