andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve colors of snippets

Browse Source
This commit is contained in:
atomiks
2018-03-01 18:18:08 +10:00
parent 0652370731
commit 71016d7938
6 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/4d4edbda57043aeeabeac31d2dd12d0d.js
View File

File diff suppressed because one or more lines are too long

12
docs/index.html
View File

File diff suppressed because one or more lines are too long

24
index.html
View File

@ -75,9 +75,9 @@
box-sizing: border-box; box-sizing: border-box;
width: 200px; width: 200px;
padding: 1.5em; padding: 1.5em;
color: #000; color: #7983ff;
font-family: sans-serif; font-family: sans-serif;
background-color: #ccc; background-color: white;
border: 5px solid; border: 5px solid;
} }
</style> </style>
@ -274,11 +274,11 @@ in any specification.</span></p>
} }
.donut { .donut {
display: inline-block; display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.25); border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: blue; border-left-color: #7983ff;
border-radius: 50%; border-radius: 50%;
width: 20px; width: 30px;
height: 20px; height: 30px;
animation: donut-spin 1.2s linear infinite; animation: donut-spin 1.2s linear infinite;
} }
</code></pre> </code></pre>
@ -297,11 +297,11 @@ in any specification.</span></p>
} }
.snippet-demo__donut-spinner { .snippet-demo__donut-spinner {
display: inline-block; display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.25); border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: blue; border-left-color: #7983ff;
border-radius: 50%; border-radius: 50%;
width: 20px; width: 30px;
height: 20px; height: 30px;
animation: snippet-demo__donut-spin 1.2s linear infinite; animation: snippet-demo__donut-spin 1.2s linear infinite;
} }
</style> </style>
@ -770,7 +770,7 @@ in any specification.</span></p>
</code></pre> </code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.mouse-cursor-gradient-tracking { <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.mouse-cursor-gradient-tracking {
position: relative; position: relative;
background: #2379f7; background: #7983ff;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 1.2rem; font-size: 1.2rem;
border: none; border: none;
@ -815,7 +815,7 @@ btn.onmousemove = function (e) {
<style> <style>
.snippet-demo__mouse-cursor-gradient-tracking { .snippet-demo__mouse-cursor-gradient-tracking {
position: relative; position: relative;
background: #2379f7; background: #7983ff;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 1.2rem; font-size: 1.2rem;
border: none; border: none;

4
snippets/box-sizing-reset.md
View File

@ -27,9 +27,9 @@ html {
box-sizing: border-box; box-sizing: border-box;
width: 200px; width: 200px;
padding: 1.5em; padding: 1.5em;
color: #000; color: #7983ff;
font-family: sans-serif; font-family: sans-serif;
background-color: #ccc; background-color: white;
border: 5px solid; border: 5px solid;
} }
</style> </style>

16
snippets/donut-spinner.md
View File

@ -17,11 +17,11 @@ Creates a donut spinner that can be used to indicate the loading of content.
} }
.donut { .donut {
display: inline-block; display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.25); border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: blue; border-left-color: #7983ff;
border-radius: 50%; border-radius: 50%;
width: 20px; width: 30px;
height: 20px; height: 30px;
animation: donut-spin 1.2s linear infinite; animation: donut-spin 1.2s linear infinite;
} }
``` ```
@ -39,11 +39,11 @@ Creates a donut spinner that can be used to indicate the loading of content.
} }
.snippet-demo__donut-spinner { .snippet-demo__donut-spinner {
display: inline-block; display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.25); border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: blue; border-left-color: #7983ff;
border-radius: 50%; border-radius: 50%;
width: 20px; width: 30px;
height: 20px; height: 30px;
animation: snippet-demo__donut-spin 1.2s linear infinite; animation: snippet-demo__donut-spin 1.2s linear infinite;
} }
</style> </style>

4
snippets/mouse-cursor-gradient-tracking.md
View File

@ -17,7 +17,7 @@ A hover effect where the gradient follows the mouse cursor.
```css ```css
.mouse-cursor-gradient-tracking { .mouse-cursor-gradient-tracking {
position: relative; position: relative;
background: #2379f7; background: #7983ff;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 1.2rem; font-size: 1.2rem;
border: none; border: none;
@ -72,7 +72,7 @@ btn.onmousemove = function (e) {
<style> <style>
.snippet-demo__mouse-cursor-gradient-tracking { .snippet-demo__mouse-cursor-gradient-tracking {
position: relative; position: relative;
background: #2379f7; background: #7983ff;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 1.2rem; font-size: 1.2rem;
border: none; border: none;