|
- html {
- background: #2637dd;
- font-family: "Roboto Mono", monospace;
- font-weight: 500;
- color: #fff;
- -webkit-font-smoothing: antialiased;
- }
- header {
- text-align: center;
- margin-top: 8%;
- font-family: "Rubik Mono One", sans-serif;
- font-size: 14px;
- letter-spacing: 1px;
- text-transform: uppercase;
- }
- header p {
- margin-top: 1em;
- }
- .l1991 {
- font-size: 0;
- position: relative;
- display: inline-block;
- width: 45%;
- max-width: 600px;
- min-width: 250px;
- height: 60px;
- margin-right: -1%;
- }
- .l {
- display: inline-block;
- width: 23%;
- height: 100%;
- margin-right: 2%;
- box-sizing: border-box;
- font-size: 0;
- position: relative;
- }
- .l1 {
- border-bottom: solid 9px;
- }
- .l1:before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- box-sizing: border-box;
- border: solid 9px;
- border-left: none;
- border-bottom: none;
- width: 69.23%;
- height: 100%;
- }
- .l9:before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 56.83%;
- -webkit-border-radius: 15px;
- -webkit-border-bottom-right-radius: 0;
- -moz-border-radius: 15px;
- -moz-border-radius-bottomright: 0;
- border-radius: 15px;
- border-bottom-right-radius: 0;
- box-sizing: border-box;
- border: solid 9px;
- }
- .l9:after {
- content: "";
- position: absolute;
- right: 0;
- bottom: 0;
- width: 97.89%;
- height: 56.83%;
- -webkit-border-bottom-right-radius: 20px;
- -moz-border-radius-bottomright: 20px;
- border-bottom-right-radius: 20px;
- box-sizing: border-box;
- border: solid 9px;
- border-top: none;
- border-left: none;
- }
-
- article {
- display: block;
- width: 60%;
- margin-left: 20%;
- }
- section {
- text-align: justify;
- font-size: 1em;
- line-height: 2em;
- }
- main h1 {
- margin-top: 8%;
- margin-bottom: 0;
- font-family: "Rubik Mono One";
- background: #fff;
- color: #2637dd;
- padding: 0.1em 0.3em;
- font-size: 1.2em;
- text-transform: uppercase;
- display: inline-block;
- }
-
- h2 {
- margin-top: 5%;
- }
-
- h1, h2, h3, h4, h5 {
- text-align: left;
- line-height: 2em;
- }
-
- strong {
- font-weight: inherit;
- color: #2637dd;
- background: #fff;
- padding-left: 0.3em;
- padding-right: 0.3em;
- }
- a {
- color: inherit;
- text-shadow: 1px 1px #2637dd, -1px -1px #2637dd;
- text-decoration: underline;
- }
- a:hover {
- text-decoration: none;
- text-decoration: line-through;
- }
-
- code {
- padding: 2px 5px;
- border: solid 1px;
- font-family: inherit;
- }
- pre {
- display: block;
- border: solid 2px;
- padding: 10px;
- margin: 10px 0px;
- white-space: pre-wrap;
- font-family: inherit;
- line-height: 1.5em;
- overflow: hidden;
- text-align: left;
- }
-
- ::selection {
- background: #fff;
- color: #2637dd;
- text-shadow: none;
- }
- ::-moz-selection {
- background: #fff;
- color: #2637dd;
- text-shadow: none;
- }
-
- footer {
- margin-top: 8%;
- margin-bottom: 5%;
- text-align: center;
- }
-
- footer .l1991 {
- width: 150px;
- height: 25px;
- min-width: auto;
- }
- footer .l1991 .l,
- footer .l1991 .l:before,
- footer .l1991 .l:after {
- border-width: 4px;
- }
- footer .l1991 .l9:before {
- -webkit-border-radius: 7px;
- -webkit-border-bottom-right-radius: 0;
- -moz-border-radius: 7px;
- -moz-border-radius-bottomright: 0;
- border-radius: 7px;
- border-bottom-right-radius: 0;
- }
- footer .l1991 .l9:after {
- -webkit-border-bottom-right-radius: 8px;
- -moz-border-radius-bottomright: 8px;
- border-bottom-right-radius: 8px;
- }
- footer nav {
- margin-top: 3%;
- border: 4px ridge;
- background: #e9e9e9;
- width: auto;
- display: inline-block;
- font-size: 0;
- }
- footer nav a {
- width: 60px;
- height: 60px;
- padding: 10px;
- box-sizing: border-box;
- display: inline-block;
- background: #e9e9e9;
- border: 2px outset;
- vertical-align: top;
- }
- footer nav a:active {
- border-style: inset;
- }
- footer nav a.url {
- position: relative;
- }
- footer nav a.url:after {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- width: 20px;
- height: 20px;
- background: url("http://www.urlysses.com/img/smile.gif");
- }
-
- .fork {
- position: fixed;
- top: 0;
- right: 0;
- z-index: 1;
- text-align: center;
- text-shadow: 1px 1px 0px #fff;
- width: 300px;
- height: 30px;
- line-height: 30px;
- color: #000;
- text-decoration: none !important;
- background: #e9e9e9;
- border: 3px inset #fff;
- font-weight: 900;
- -webkit-transform: rotate(45deg) translate(30%, -75%);
- -moz-transform: rotate(45deg) translate(30%, -75%);
- -ms-transform: rotate(45deg) translate(30%, -75%);
- transform: rotate(45deg) translate(30%, -75%);
- }
-
-
- /* "browser" */
- .browser {
- background: #e9e9e9;
- border: solid 1px #000;
- box-shadow: 6px 6px 0px #000;
- position: relative;
- box-sizing: border-box;
- color: #000;
- margin: 0;
- padding: 0;
- }
- .browser:before {
- content: "";
- pointer-events: none;
- position: absolute;
- border: solid 1px #000;
- top: 2px;
- left: 2px;
- right: 2px;
- bottom: 2px;
- }
- .browser:after {
- content: "EXAMPLE FILES";
- position: absolute;
- top: 10px;
- left: 1%;
- right: 1%;
- height: 20px;
- background: #2637dd;
- color: #fff;
- line-height: 20px;
- text-align: center;
- border: solid 1px #000;
- box-sizing: border-box;
- font-size: 0.5em;
- letter-spacing: 1px;
- }
- .browser .tabs {
- position: absolute;
- box-sizing: border-box;
- border: solid 1px #000;
- top: 40px;
- left: 1%;
- width: 98%;
- height: 30px;
- display: table;
- padding: 0;
- margin: 0;
- background: none;
- }
- .browser .tabs div {
- color: #aaa;
- text-shadow: 1px 1px 0px #fff;
- font-size: 0.8em;
- line-height: 30px;
- display: table-cell;
- vertical-align: middle;
- border: 3px outset;
- box-sizing: border-box;
- cursor: pointer;
- padding: 0px 10px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- max-width: 100px;
- }
- .browser .tabs div:hover {
- color: #777;
- }
- .browser .tabs div:active {
- border-style: inset;
- }
- .browser .tabs div.selected {
- color: #000;
- }
- .browser pre {
- background: #fff;
- position: relative;
- border: solid 1px #000;
- box-sizing: border-box;
- margin-left: 1%;
- margin-top: 90px;
- width: 98%;
- display: none;
- }
- .browser pre.selected {
- display: block;
- }
- .browser .keyword-wrapper {
- color: #1FAAAA;
- }
- .browser .keyword {
- color: #FF0086;
- }
- .browser .number {
- color: #FD8900;
- }
- .browser .string {
- color: #3777E6;
- }
- .browser .comment,
- .browser .comment * {
- color: #989898;
- }
- .browser *::selection {
- background: #dedede;
- }
- .browser *::-moz-selection {
- background: #dedede;
- }
-
-
- /* media queries */
- @media all and (max-width: 600px) {
- article {
- width: 90%;
- margin-left: 5%;
- }
- .fork {
- font-size: 10px;
- width: 200px;
- height: 20px;
- line-height: 20px;
- }
- }
|