Explorar o código

update gh-pages

Ethosa %!s(int64=3) %!d(string=hai) anos
pai
achega
803e452182
Modificáronse 3 ficheiros con 104 adicións e 7 borrados
  1. 7 7
      index.html
  2. 13 0
      styles/main.css
  3. 84 0
      styles/night-owl.min.css

+ 7 - 7
index.html

@@ -9,7 +9,7 @@
     <title>nodesnim</title>
 </head>
 <body>
-    <div align="center" style="width:fit-content; margin-left: auto; margin-right: auto;">
+    <div class="main">
         <h1>
             <font style="position: absolute; margin-left: -32px;">♡</font>
             <font color="#cb8ea3">nodes</font><font color="#9a4488">nim</font>
@@ -17,10 +17,11 @@
         <h3>
             GUI/2D engine written in Nim.
         </h3>
-
-        <div style="width: fit-content; position: relative; text-align: left;">
-            <h4 class="pink-text">Hello world example:</h4>
-            <pre><code class="nim" style="padding: 0 1em 0 1em;">
+    </div>
+    
+    <div class="codes">
+        <h4 class="pink-text">Hello world example:</h4>
+        <pre><code class="nim" style="padding: 0 1em 0 1em;">
 import nodesnim
 
 Window("Hello, world!", 640, 480)  # Title, width, height</code><code class="yaml" style="padding: 0 1em 0 1em;">
@@ -30,8 +31,7 @@ build:
 
 addMainScene(main)
 windowLaunch()
-            </code></pre>
-        </div>
+        </code></pre>
     </div>
     
     <!-- Initialize highlight -->

+ 13 - 0
styles/main.css

@@ -6,6 +6,7 @@ body {
     font-weight: 700;
     background-color: #181527;
     color: #d8d3ec;
+    padding: 8px;
 }
 
 .pink-text {
@@ -24,3 +25,15 @@ h4 {
     padding-top: 1em;
     margin-left: 1em;
 }
+
+.main {
+    padding-left: 32px;
+    display: inline-block;
+    vertical-align: top;
+    text-align: left;
+}
+
+.codes {
+    float: right;
+    display: inline-block;
+}

+ 84 - 0
styles/night-owl.min.css

@@ -11,55 +11,106 @@ code.hljs{
     border-radius: 8px;
 	color:#d6deeb
 }
+
+.hljs::selection {
+    background: #d8d3ec55;
+}
+
 .hljs-keyword{
 	color:#c792ea;
 	font-style:italic
 }
+
+.hljs-keyword::selection {
+    background: #d8d3ec55;
+}
 .hljs-built_in{
 	color:#addb67;
 	font-style:italic
 }
+.hljs-built_in::selection {
+    background: #d8d3ec55;
+}
 .hljs-type{
 	color:#82aaff
 }
+.hljs-type::selection {
+    background: #d8d3ec55;
+}
 .hljs-literal{
 	color:#ff5874
 }
+.hljs-literal::selection {
+    background: #d8d3ec55;
+}
 .hljs-number{
 	color:#f78c6c
 }
+.hljs-number::selection {
+    background: #d8d3ec55;
+}
 .hljs-regexp{
 	color:#5ca7e4
 }
+.hljs-regexp::selection {
+    background: #d8d3ec55;
+}
 .hljs-string{
 	color:#ecc48d
 }
+.hljs-string::selection {
+    background: #d8d3ec55;
+}
 .hljs-subst{
 	color:#d3423e
 }
+.hljs-string::selection {
+    background: #d8d3ec55;
+}
 .hljs-symbol{
 	color:#82aaff
 }
+.hljs-symbol::selection {
+    background: #d8d3ec55;
+}
 .hljs-class{
 	color:#ffcb8b
 }
+.hljs-class::selection {
+    background: #d8d3ec55;
+}
 .hljs-function{
 	color:#82aaff
 }
+.hljs-function::selection {
+    background: #d8d3ec55;
+}
 .hljs-title{
 	color:#dcdcaa;
 	font-style:italic
 }
+.hljs-title::selection {
+    background: #d8d3ec55;
+}
 .hljs-params{
 	color:#7fdbca
 }
+.hljs-params::selection {
+    background: #d8d3ec55;
+}
 .hljs-comment{
 	color:#637777;
 	font-style:italic
 }
+.hljs-comment::selection {
+    background: #d8d3ec55;
+}
 .hljs-doctag{
 	color:#7fdbca
 }
+.hljs-doctag::selection {
+    background: #d8d3ec55;
+}
 .hljs-meta,.hljs-meta .hljs-keyword{
 	color:#82aaff
 }
@@ -69,39 +120,72 @@ code.hljs{
 .hljs-section{
 	color:#82b1ff
 }
+.hljs-section::selection{
+    background: #d8d3ec55;
+}
 .hljs-attr,.hljs-name,.hljs-tag{
 	color:#7fdbca
 }
+.hljs-attr::selection {
+    background: #d8d3ec55;
+}
 .hljs-attribute{
 	color:#80cbc4
 }
+.hljs-attribute::selection{
+    background: #d8d3ec55;
+}
 .hljs-variable{
 	color:#addb67
 }
+.hljs-variable::selection{
+    background: #d8d3ec55;
+}
 .hljs-bullet{
 	color:#d9f5dd
 }
+.hljs-bullet::selection{
+    background: #d8d3ec55;
+}
 .hljs-code{
 	color:#80cbc4
 }
+.hljs-code::selection{
+    background: #d8d3ec55;
+}
 .hljs-emphasis{
 	color:#c792ea;
 	font-style:italic
 }
+.hljs-emphasis::selection{
+    background: #d8d3ec55;
+}
 .hljs-strong{
 	color:#addb67;
 	font-weight:700
 }
+.hljs-strong::selection{
+    background: #d8d3ec55;
+}
 .hljs-formula{
 	color:#c792ea
 }
+.hljs-formula::selection{
+    background: #d8d3ec55;
+}
 .hljs-link{
 	color:#ff869a
 }
+.hljs-link::selection{
+    background: #d8d3ec55;
+}
 .hljs-quote{
 	color:#697098;
 	font-style:italic
 }
+.hljs-quote::selection{
+    background: #d8d3ec55;
+}
 .hljs-selector-tag{
 	color:#ff6363
 }