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.
200 lines
3.5 KiB
200 lines
3.5 KiB
@import "variables"; |
|
|
|
html.no-js, html.ie8, html.bg { |
|
background: url("http://js.org/img/bg.png") $cBg repeat-y fixed; |
|
} |
|
|
|
::selection { |
|
color: $cBg; |
|
background: $cTxt; |
|
} |
|
|
|
.btf { |
|
opacity: 1; |
|
} |
|
|
|
a:hover { |
|
color: rgba($cTxt, .25); |
|
} |
|
|
|
.hf { |
|
|
|
.logo { |
|
a:hover { |
|
color: rgba($cTxt, .25); |
|
} |
|
} |
|
|
|
a { |
|
-moz-transition: all .3s; |
|
-o-transition: all .3s; |
|
-webkit-transition: all .3s; |
|
transition: all .3s; |
|
} |
|
|
|
.fb, .tw, .gp, .gh { |
|
|
|
&:hover { |
|
background: $cKey; |
|
} |
|
} |
|
|
|
.fb:hover { |
|
color: $cFb; |
|
} |
|
|
|
.tw:hover { |
|
color: $cTw; |
|
} |
|
|
|
.gp:hover { |
|
color: $cGp; |
|
} |
|
|
|
.gh:hover { |
|
background: rgba($cTxt, .25); |
|
} |
|
} |
|
|
|
#zodiac { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
z-index: -1; |
|
} |
|
|
|
|
|
#err404 { |
|
text-align: center; |
|
|
|
span { |
|
font-size: 5.5em; |
|
line-height: 1em; |
|
font-weight: 700; |
|
} |
|
} |
|
|
|
|
|
#typewriter { |
|
font-size: 3em; |
|
margin: 0; |
|
|
|
#hermes { |
|
-moz-transition: all .2s .1s; |
|
-o-transition: all .2s .1s; |
|
-webkit-transition: all .2s .1s; |
|
transition: all .2s .1s; |
|
|
|
&.active { |
|
padding-right: .1em; |
|
border-right: .06em solid $cTxt; |
|
} |
|
} |
|
} |
|
|
|
section { |
|
position: relative; |
|
padding: 1em 0; |
|
|
|
a { |
|
font-weight:700; |
|
} |
|
|
|
input { |
|
position: absolute; |
|
opacity: 0; |
|
top: 0; |
|
left: -999px; |
|
|
|
&:checked + article { |
|
display: inline-block; |
|
} |
|
|
|
&#s1I:checked ~ nav #s1L, |
|
&#s2I:checked ~ nav #s2L, |
|
&#s3I:checked ~ nav #s3L, |
|
&#s4I:checked ~ nav #s4L { |
|
background-color: $cKey; |
|
} |
|
} |
|
|
|
nav { |
|
display: inline-table; |
|
border-collapse: collapse; |
|
margin: 0; |
|
|
|
label { |
|
cursor: pointer; |
|
display: table-cell; |
|
border: 2px solid $cKey; |
|
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; |
|
|
|
&:hover { |
|
background-color: fade($cKey, 50%); |
|
} |
|
} |
|
} |
|
|
|
article { |
|
display: none; |
|
background-color: $cKey; |
|
margin: 0; |
|
padding: 1.2em; |
|
|
|
|
|
h3 { |
|
float: left; |
|
color: $cBg; |
|
border-right: 2px solid $cBg; |
|
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; |
|
} |
|
}
|
|
|