Skip to content

Commit 3c5a208

Browse files
theanamtheanam
authored
Merge pull request theanam#9 from theanam/homepage
Homepage Logic
2 parents b07541d + fb97608 commit 3c5a208

File tree

10 files changed

+245
-19
lines changed

10 files changed

+245
-19
lines changed

‎homepage-assets/homepage.js

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
var baseURL = "https://raw.githubusercontent.com/theanam/css-only-loaders/master/spinners/";
2+
var base_css = "";
3+
function getDefination(cssClass,callback){
4+
$.get(`${baseURL}/${cssClass}/${cssClass}.css`)
5+
.then(data=>{
6+
callback(data);
7+
})
8+
.catch(e=>{
9+
console.log("CSS defination fetch error");
10+
});
11+
}
12+
13+
function prepareSourceCode(data){
14+
console.log(data);
15+
$(".sourceholder").css("display","flex");
16+
$(".actual-code").text(base_css + "\n\n" + data);
17+
}
18+
19+
$(".spinner,.ripple").on("click",function(e){
20+
var classes = $(this).attr("class");
21+
var defName = classes.split(" ")[1];
22+
if(!defName) return console.log("Defination class missing");
23+
getDefination(defName,function(data){
24+
prepareSourceCode(data);
25+
});
26+
});
27+
28+
$(".source").on("click",function(e){
29+
e.stopPropagation();
30+
});
31+
32+
$(".sourceholder").on("click",function(){
33+
$(this).css("display","none");
34+
});
35+
36+
$(function(){
37+
$.get(`${baseURL}/vars.css`)
38+
.then(data=>{
39+
base_css = data;
40+
})
41+
.catch(e=>{
42+
console.log("Failed to load base CSS");
43+
})
44+
})

‎homepage-assets/jquery-3.4.1.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎homepage-assets/prism.css

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/* PrismJS 1.17.1
2+
https://prismjs.com/download.html#themes=prism-okaidia&languages=css */
3+
/**
4+
* okaidia theme for JavaScript, CSS and HTML
5+
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
6+
* @author ocodia
7+
*/
8+
9+
code[class*="language-"],
10+
pre[class*="language-"] {
11+
color: #f8f8f2;
12+
background: none;
13+
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
14+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
15+
font-size: 1em;
16+
text-align: left;
17+
white-space: pre;
18+
word-spacing: normal;
19+
word-break: normal;
20+
word-wrap: normal;
21+
line-height: 1.5;
22+
23+
-moz-tab-size: 4;
24+
-o-tab-size: 4;
25+
tab-size: 4;
26+
27+
-webkit-hyphens: none;
28+
-moz-hyphens: none;
29+
-ms-hyphens: none;
30+
hyphens: none;
31+
}
32+
33+
/* Code blocks */
34+
pre[class*="language-"] {
35+
padding: 1em;
36+
margin: .5em 0;
37+
overflow: auto;
38+
border-radius: 0.3em;
39+
}
40+
41+
:not(pre) > code[class*="language-"],
42+
pre[class*="language-"] {
43+
background: #272822;
44+
}
45+
46+
/* Inline code */
47+
:not(pre) > code[class*="language-"] {
48+
padding: .1em;
49+
border-radius: .3em;
50+
white-space: normal;
51+
}
52+
53+
.token.comment,
54+
.token.prolog,
55+
.token.doctype,
56+
.token.cdata {
57+
color: slategray;
58+
}
59+
60+
.token.punctuation {
61+
color: #f8f8f2;
62+
}
63+
64+
.namespace {
65+
opacity: .7;
66+
}
67+
68+
.token.property,
69+
.token.tag,
70+
.token.constant,
71+
.token.symbol,
72+
.token.deleted {
73+
color: #f92672;
74+
}
75+
76+
.token.boolean,
77+
.token.number {
78+
color: #ae81ff;
79+
}
80+
81+
.token.selector,
82+
.token.attr-name,
83+
.token.string,
84+
.token.char,
85+
.token.builtin,
86+
.token.inserted {
87+
color: #a6e22e;
88+
}
89+
90+
.token.operator,
91+
.token.entity,
92+
.token.url,
93+
.language-css .token.string,
94+
.style .token.string,
95+
.token.variable {
96+
color: #f8f8f2;
97+
}
98+
99+
.token.atrule,
100+
.token.attr-value,
101+
.token.function,
102+
.token.class-name {
103+
color: #e6db74;
104+
}
105+
106+
.token.keyword {
107+
color: #66d9ef;
108+
}
109+
110+
.token.regex,
111+
.token.important {
112+
color: #fd971f;
113+
}
114+
115+
.token.important,
116+
.token.bold {
117+
font-weight: bold;
118+
}
119+
.token.italic {
120+
font-style: italic;
121+
}
122+
123+
.token.entity {
124+
cursor: help;
125+
}
126+

‎homepage-assets/prism.js

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎homepage-assets/style.css

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.spinner,.ripple{
2+
display: inline-block;
3+
margin: 100px;
4+
cursor: pointer;
5+
background: #fff;
6+
}
7+
8+
.sourceholder{
9+
width:100%;
10+
height:100%;
11+
left:0px;
12+
top:0px;
13+
position: fixed;
14+
background: rgba(0,0,0,0.2);
15+
display: none;
16+
z-index: 10000;
17+
align-items: center;
18+
justify-content: center;
19+
}
20+
.source{
21+
width:70vw;
22+
height:70vh;
23+
background: #222;
24+
padding:20px;
25+
z-index: 30000;
26+
border-radius:4px;
27+
overflow:scroll;
28+
}
29+
.actual-code{
30+
z-index:800000000;
31+
font-size: 12px;
32+
color: #fff;
33+
display: block;
34+
overflow: scroll;
35+
}

‎index.html

+13-8
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,21 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<title>CSS Only Loaders</title>
8-
<link rel="stylesheet" href="style.css">
9-
<link rel="stylesheet" href="spinners/vars.css">
8+
<link rel="stylesheet" href="homepage-assets/style.css">
109
<!-- spinners -->
10+
<link rel="stylesheet" href="spinners/vars.css">
1111
<link rel="stylesheet" href="spinners/circle/circle.css">
1212
<link rel="stylesheet" href="spinners/blasting-circle/blasting-circle.css">
1313
<link rel="stylesheet" href="spinners/rotating-plane/rotating-plane.css">
1414
<link rel="stylesheet" href="spinners/bouncing-circle/bouncing-circle.css">
1515
<link rel="stylesheet" href="spinners/blasting-ripple/blasting-ripple.css">
1616
<link rel="stylesheet" href="spinners/color-pulse-ball/color-pulse-ball.css">
17-
<style>
18-
.spinner, .ripple {
19-
margin-bottom: 20px;
20-
}
21-
</style>
2217
</head>
2318
<body>
24-
<h1>This is just a sample page, Homepage is under construction</h1>
19+
<h1>Click on the Spinners to see CSS Styles</h1>
20+
<p>
21+
Homepage Under construction
22+
</p>
2523
<div class="spinner circle"></div>
2624
<div class="spinner blasting-circle"></div>
2725
<div class="spinner rotating-plane"></div>
@@ -36,5 +34,12 @@ <h1>This is just a sample page, Homepage is under construction</h1>
3634
All the attributes are in the <code>/spinners/values.css</code> file. you need to include that file before the spinner CSS file.
3735
see the source code to this file <code>/index.html</code> for example usage.
3836
</p>
37+
<div class="sourceholder">
38+
<pre class="source">
39+
<code class="actual-code"></code>
40+
</pre>
41+
</div>
42+
<script src="homepage-assets/jquery-3.4.1.min.js"></script>
43+
<script src="homepage-assets/homepage.js"></script>
3944
</body>
4045
</html>

‎spinners/blasting-circle/blasting-circle.css

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
/*
2+
Blasting Circle Styles
3+
*/
14
@keyframes blast {
25
0% {
36
opacity: var(--spinner-initial-scale, 0.1);

‎spinners/blasting-ripple/blasting-ripple.css

+9-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1+
/*
2+
Blasting Ripple Styles
3+
*/
14
@keyframes blast-ripple {
25
0% {
3-
top: calc(var(--spinner-width, 100px) / 2 - var(--line-width, 4px));
6+
top: calc(var(--spinner-height, 100px) / 2 - var(--line-width, 4px));
47
left: calc(var(--spinner-width, 100px) / 2 - var(--line-width, 4px));
58
width: 0;
69
height: 0;
@@ -10,19 +13,19 @@
1013
top: -1px;
1114
left: -1px;
1215
width: calc(var(--spinner-width, 100px) - var(--line-width, 4px));
13-
height: calc(var(--spinner-width, 100px) - var(--line-width, 4px));
16+
height: calc(var(--spinner-height, 100px) - var(--line-width, 4px));
1417
opacity: 0;
1518
}
1619
}
1720

1821
.ripple.blasting-ripple {
19-
display: inline-block;
2022
position: relative;
2123
width: var(--spinner-width, 100px);
22-
height: var(--spinner-width, 100px);
24+
height: var(--spinner-height, 100px);
2325
}
2426

2527
.ripple::after {
28+
opacity: 0;
2629
content: "";
2730
position: absolute;
2831
border: var(--line-width, 4px) solid var(--spinner-color-primary, #00f);
@@ -31,7 +34,8 @@
3134
animation: blast-ripple var(--animation-duration, 0.5s) cubic-bezier(0, 0.2, 0.8, 1) infinite;
3235
}
3336
.ripple::before {
34-
top: calc(var(--spinner-width, 100px) / 2 - var(--line-width, 4px));
37+
opacity: 0;
38+
top: calc(var(--spinner-height, 100px) / 2 - var(--line-width, 4px));
3539
left: calc(var(--spinner-width, 100px) / 2 - var(--line-width, 4px));
3640
content: "";
3741
position: absolute;

‎spinners/vars.css

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
1-
html {
1+
/*
2+
The loaders use CSS custom properties (variables) to control the attributes of the loaders
3+
*/
4+
:root{
25
--spinner-width: 100px;
36
--spinner-height: 100px;
47
--spinner-color-primary: #27ae60;
58
--spinner-color-secondary: #eee;
69
--line-width: 4px;
710
--animation-duration: 1s;
811
--spinner-initial-scale: 0.1;
9-
}
12+
}
13+
14+
/*
15+
In order to get optimal results, please only change the variables above and don't change anything in the actual spinner code
16+
*/

‎style.css

-4
This file was deleted.

0 commit comments

Comments
 (0)