Minimalistic version of newtype.fr

static/css/main.css

@@ -0,0 +1,420 @@
+@font-face {
+  font-family: "Fira Code";
+  src: url("../fonts/FiraCode/eot/FiraCode-Light.eot");
+  src: url("../fonts/FiraCode/eot/FiraCode-Light.eot") format("embedded-opentype"),
+    url("../fonts/FiraCode/woff2/FiraCode-Light.woff2") format("woff2"),
+    url("../fonts/FiraCode/woff/FiraCode-Light.woff") format("woff"),
+    url("../fonts/FiraCode/ttf/FiraCode-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Fira Code";
+  src: url("../fonts/FiraCode/eot/FiraCode-Regular.eot");
+  src: url("../fonts/FiraCode/eot/FiraCode-Regular.eot")
+      format("embedded-opentype"),
+    url("../fonts/FiraCode/woff2/FiraCode-Regular.woff2") format("woff2"),
+    url("../fonts/FiraCode/woff/FiraCode-Regular.woff") format("woff"),
+    url("../fonts/FiraCode/ttf/FiraCode-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Fira Code";
+  src: url("../fonts/FiraCode/eot/FiraCode-Medium.eot");
+  src: url("../fonts/FiraCode/eot/FiraCode-Medium.eot")
+      format("embedded-opentype"),
+    url("../fonts/FiraCode/woff2/FiraCode-Medium.woff2") format("woff2"),
+    url("../fonts/FiraCode/woff/FiraCode-Medium.woff") format("woff"),
+    url("../fonts/FiraCode/ttf/FiraCode-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Fira Code";
+  src: url("../fonts/FiraCode/eot/FiraCode-Bold.eot");
+  src: url("../fonts/FiraCode/eot/FiraCode-Bold.eot") format("embedded-opentype"),
+    url("../fonts/FiraCode/woff2/FiraCode-Bold.woff2") format("woff2"),
+    url("../fonts/FiraCode/woff/FiraCode-Bold.woff") format("woff"),
+    url("../fonts/FiraCode/ttf/FiraCode-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@media (max-width: 455.98px) {
+  html {
+    font-size: 11px;
+  }
+}
+
+@media (min-width: 456px) and (max-width: 575.98px) {
+  html {
+    font-size: 12px;
+  }
+}
+
+@media (min-width: 576px) and (max-width: 767.98px) {
+  html {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991.98px) {
+  html {
+    font-size: 16px;
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1199.98px) {
+  html {
+    font-size: 18px;
+  }
+}
+
+@media (min-width: 1200px) {
+  html {
+    font-size: 20px;
+  }
+}
+
+body {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin: 0;
+  font-family: "Fira Code", "Roboto Mono", "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, serif;
+  font-feature-settings: "calt" 1;
+  /* Enable ligatures for IE 10+, Edge */
+  text-rendering: optimizeLegibility;
+  /* Force ligatures for Webkit, Blink, Gecko */
+  min-width: 300px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
+  background: white;
+}
+
+a {
+  word-break: break-all;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1.3em;
+  font-weight: 500;
+}
+
+fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+pre {
+  padding: 2rem;
+  margin: 1.75rem 0;
+  background-color: black;
+  border: 1px solid #ccc;
+  overflow: auto;
+}
+
+code[class*="language-"],
+pre[class*="language-"],
+pre code {
+  font-weight: 100;
+  text-shadow: none;
+  margin: 1.75rem 0;
+}
+
+p {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong {
+  color: black;
+}
+
+footer {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+a {
+  cursor: pointer;
+  color: blue;
+  text-decoration: none;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:hover {
+  background-color: blue;
+  color: white;
+}
+
+a:hover:visited {
+  background-color: purple;
+}
+
+.hack,
+.hack blockquote,
+.hack code,
+.hack em,
+.hack h1,
+.hack h2,
+.hack h3,
+.hack h4,
+.hack h5,
+.hack h6,
+.hack strong {
+  font-style: normal;
+}
+
+.hack blockquote,
+.hack code,
+.hack em,
+.hack strong {
+  line-height: 20px;
+}
+
+.hack blockquote,
+.hack code,
+.hack footer,
+.hack h1,
+.hack h2,
+.hack h3,
+.hack h4,
+.hack h5,
+.hack h6,
+.hack header,
+.hack li,
+.hack ol,
+.hack p,
+.hack section,
+.hack ul {
+  float: none;
+  margin: 0;
+  padding: 0;
+}
+
+.hack blockquote,
+.hack h1,
+.hack ol,
+.hack p,
+.hack ul {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.hack h1,
+.hack h2,
+.hack h3,
+.hack h4,
+.hack h5,
+.hack h6 {
+  position: relative;
+  margin-bottom: 1.75rem;
+}
+
+.hack li {
+  position: relative;
+  display: block;
+  padding-left: 20px;
+}
+
+.hack li:after {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.hack ul > li:after {
+  content: "-";
+}
+
+.hack ol {
+  counter-reset: a;
+	list-style-type:decimal;
+	list-style-position:outside;
+}
+
+.hack ol > li:after {
+  content: counter(a) ".";
+  counter-increment: a;
+
+	padding:0 0 0 0px;
+  /* Add some space between numbering and content. */
+	margin:0 0 0 -0.3em;
+}
+
+.hack ol li:nth-child(n + 10):after {
+  left: -7px;
+}
+
+.hack em {
+  font-style: italic;
+}
+
+.hack pre code:after,
+.hack pre code:before {
+  content: "";
+}
+
+.hack code {
+  font-weight: 700;
+}
+
+.hack code:after,
+.hack code:before {
+  content: "`";
+  display: inline;
+}
+
+@-moz-document url-prefix() {
+  .hack h1 {
+    display: block;
+  }
+}
+
+.hack-ones ol > li:after {
+  content: "1.";
+}
+
+p {
+  margin: 0 0 1.75rem;
+}
+
+.container {
+  width: 100%;
+  flex: 1;
+}
+
+.inner {
+  padding: 1rem;
+}
+
+.inner2x {
+  padding: 2rem;
+}
+
+.pull-left {
+  float: left;
+}
+
+.pull-right {
+  float: right;
+}
+
+.hack h1 {
+  font-size: 3rem;
+}
+
+.hack h2 {
+  font-size: 2rem;
+  padding: 32px 0 0;
+}
+
+.hack h3 {
+  font-size: 1.5rem;
+}
+
+b {
+  font-weight: bold;
+}
+
+u {
+  text-decoration: underline;
+}
+
+#T, #Y, #P, #E, #bropen, #brclose {
+  background: black;
+  text-decoration: underline;
+}
+
+#T:hover, #Y:hover, #P:hover, #E:hover, #brclose:hover, #bropen:hover {
+  color: white;
+}
+
+#T {
+  color: hsl(0, 80%, 60%);
+}
+
+#T:hover {
+  background: hsl(0, 80%, 60%);
+}
+
+#Y {
+  color: hsl(60, 80%, 60%);
+}
+
+#Y:hover {
+  background: hsl(60, 80%, 60%);
+}
+
+#P {
+  color: hsl(120, 80%, 60%);
+}
+
+#P:hover {
+  background: hsl(120, 80%, 60%);
+}
+
+#E {
+  color: hsl(180, 80%, 60%);
+}
+
+#E:hover {
+  background: hsl(180, 80%, 60%);
+}
+
+#bropen {
+  color: hsl(240, 80%, 60%);
+}
+
+#bropen:hover {
+  background: hsl(240, 80%, 60%);
+}
+
+#brclose {
+  color: hsl(300, 80%, 60%);
+}
+
+#brclose:hover {
+  background: hsl(300, 80%, 60%);
+}
+
+#hidden {
+  color: white;
+  white-space: nowrap;
+}
+
+h1 {
+  overflow: hidden;
+}
+
+#T u, #Y u, #P u, #E u, #brclose u, #bropen u {
+  color: white;
+  text-decoration: none;
+}
+
+#T u:hover, #Y u:hover, #P u:hover, #E u:hover, #brclose u:hover, #bropen u:hover {
+  color: black;
+}
+
+hr {
+  border: 2px solid black;
+}