Skip to content

Commit 75c8441

Browse files
author
hello@cyan.red
committed
Initial commit
1 parent 85a5af2 commit 75c8441

File tree

6 files changed

+332
-0
lines changed

6 files changed

+332
-0
lines changed

‎css_circle/base.css

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
@charset "UTF-8";
2+
3+
4+
5+
/* VARIABLES -------------------------------------------------------------- */
6+
7+
:root {
8+
--heading-font: 'Open Sans', sans-serif;
9+
--main-font: 'Open Sans', sans-serif;
10+
--minor-font: 'Open Sans', sans-serif;
11+
--heading-color: rgba(0,0,50,.9);
12+
--main-color: rgba(70,70,90,.9);
13+
--minor-color: rgb(190,190,200);
14+
--emphasis-color: rgb(27,211,165);
15+
}
16+
17+
18+
19+
/* DEFAULTS --------------------------------------------------------------- */
20+
21+
html {
22+
color: var(--main-color);
23+
font-family: var(--main-font);
24+
font-size: 16px;
25+
font-weight: 400;
26+
}
27+
28+
/* TYPOGRAPHY ------------------------------------------------------------- */
29+
30+
.primary-heading {
31+
color: var(--heading-color);
32+
font-family: var(--heading-font);
33+
font-size: 2rem;
34+
font-weight: 400;
35+
}
36+
37+
/* good for block-level */
38+
.circle-letter-flex {
39+
align-items: center;
40+
background: var(--main-color);
41+
border-radius: 50%;
42+
color: #fff;
43+
display: flex;
44+
height: 3rem;
45+
justify-content: center;
46+
margin: .2rem;
47+
width: 3rem;
48+
}
49+
50+
/* good for inline but margin doesn't work on table-cell */
51+
.circle-letter-table {
52+
background: var(--main-color);
53+
border-radius: 50%;
54+
color: #fff;
55+
display: table-cell;
56+
height: 3rem;
57+
text-align: center;
58+
vertical-align: middle;
59+
width: 3rem;
60+
}
61+
62+
/* good for inline but padding must change with width & height */
63+
.circle-letter-padding {
64+
background: var(--main-color);
65+
border-radius: 50%;
66+
box-sizing: border-box;
67+
color: #fff;
68+
display: inline-block;
69+
height: 3rem;
70+
line-height: 1rem;
71+
margin: .2rem;
72+
padding-top: calc((3rem - 1rem) / 2);
73+
text-align: center;
74+
width: 3rem;
75+
}
76+
77+
78+
79+
/* LINKS & BUTTONS -------------------------------------------------------- */
80+
81+
/* LAYOUT ----------------------------------------------------------------- */
82+
83+
/* COMPONENTS ------------------------------------------------------------- */
84+
85+
/* COSMETIC --------------------------------------------------------------- */
86+
87+
/* UTILITY ---------------------------------------------------------------- */
88+
89+
/* STATE ------------------------------------------------------------------ */

‎css_circle/index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Circle Character</title>
7+
<link href="base.css" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
13+
<header>
14+
<h1 class="primary-heading">CSS Circle Character</h1>
15+
<nav></nav>
16+
</header>
17+
18+
<main>
19+
20+
<span class="circle-letter-flex">10</span>
21+
<span class="circle-letter-table">A</span>
22+
<span class="circle-letter-table">B</span>
23+
<span class="circle-letter-padding">5</span>
24+
<span class="circle-letter-padding">100</span>
25+
26+
</main>
27+
28+
<footer>
29+
</footer>
30+
31+
</body>
32+
</html>

‎css_counter/base.css

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
@charset "UTF-8";
2+
3+
4+
5+
/* VARIABLES -------------------------------------------------------------- */
6+
7+
:root {
8+
--heading-font: 'Open Sans', sans-serif;
9+
--main-font: 'Open Sans', sans-serif;
10+
--minor-font: 'Open Sans', sans-serif;
11+
--heading-color: rgba(0,0,50,.9);
12+
--main-color: rgba(70,70,90,.9);
13+
--minor-color: rgb(190,190,200);
14+
--emphasis-color: rgb(27,211,165);
15+
}
16+
17+
18+
19+
/* DEFAULTS --------------------------------------------------------------- */
20+
21+
html {
22+
color: var(--main-color);
23+
font-family: var(--main-font);
24+
font-size: 16px;
25+
font-weight: 400;
26+
}
27+
28+
29+
30+
/* TYPOGRAPHY ------------------------------------------------------------- */
31+
32+
.primary-heading {
33+
color: var(--heading-color);
34+
font-family: var(--heading-font);
35+
font-size: 2rem;
36+
font-weight: 400;
37+
}
38+
39+
.counter {
40+
counter-reset: counter;
41+
}
42+
43+
li::before {
44+
counter-increment: counter;
45+
content: counters(counter, '.') ' ';
46+
}
47+
48+
49+
/* LINKS & BUTTONS -------------------------------------------------------- */
50+
51+
/* LAYOUT ----------------------------------------------------------------- */
52+
53+
/* COMPONENTS ------------------------------------------------------------- */
54+
55+
/* COSMETIC --------------------------------------------------------------- */
56+
57+
/* UTILITY ---------------------------------------------------------------- */
58+
59+
/* STATE ------------------------------------------------------------------ */

‎css_counter/index.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Counter</title>
7+
<link href="base.css" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
13+
<header>
14+
<h1 class="primary-heading">CSS Counter</h1>
15+
<nav></nav>
16+
</header>
17+
18+
<main>
19+
<ul class="counter">
20+
<li>List item</li>
21+
<li>List item</li>
22+
<li>List item
23+
<ul class="counter">
24+
<li>List item</li>
25+
<li>List item</li>
26+
<li>List item</li>
27+
</ul>
28+
</li>
29+
<li>List item</li>
30+
</ul>
31+
32+
33+
34+
35+
</main>
36+
37+
<footer>
38+
</footer>
39+
40+
</body>
41+
</html>

‎css_loader/base.css

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
@charset "UTF-8";
2+
3+
4+
5+
/* VARIABLES -------------------------------------------------------------- */
6+
7+
:root {
8+
--heading-font: 'Open Sans', sans-serif;
9+
--main-font: 'Open Sans', sans-serif;
10+
--minor-font: 'Open Sans', sans-serif;
11+
--heading-color: rgba(0,0,50,.9);
12+
--main-color: rgba(70,70,90,.9);
13+
--minor-color: rgb(190,190,200);
14+
--emphasis-color: rgb(27,211,165);
15+
}
16+
17+
18+
19+
/* DEFAULTS --------------------------------------------------------------- */
20+
21+
html {
22+
color: var(--main-color);
23+
font-family: var(--main-font);
24+
font-size: 16px;
25+
font-weight: 400;
26+
}
27+
28+
/* TYPOGRAPHY ------------------------------------------------------------- */
29+
30+
.primary-heading {
31+
color: var(--heading-color);
32+
font-family: var(--heading-font);
33+
font-size: 2rem;
34+
font-weight: 400;
35+
}
36+
37+
.highlight-text {
38+
color: var(--emphasis-color);
39+
}
40+
41+
42+
43+
/* LINKS & BUTTONS -------------------------------------------------------- */
44+
45+
/* LAYOUT ----------------------------------------------------------------- */
46+
47+
/* COMPONENTS ------------------------------------------------------------- */
48+
49+
@keyframes bouncing-loader {
50+
to {
51+
opacity: 0.1;
52+
transform: translate3d(0, -.8rem, 0);
53+
}
54+
}
55+
.bouncing-loader {
56+
display: flex;
57+
justify-content: center;
58+
}
59+
.bouncing-loader__ball {
60+
width: .8rem;
61+
height: .8rem;
62+
margin: 1rem .2rem;
63+
background: #8385aa;
64+
border-radius: 50%;
65+
animation: bouncing-loader 0.6s infinite alternate;
66+
}
67+
.bouncing-loader__ball:nth-child(2) {
68+
animation-delay: 0.2s;
69+
}
70+
.bouncing-loader__ball:nth-child(3) {
71+
animation-delay: 0.4s;
72+
}
73+
74+
75+
/* COSMETIC --------------------------------------------------------------- */
76+
77+
/* UTILITY ---------------------------------------------------------------- */
78+
79+
/* STATE ------------------------------------------------------------------ */

‎css_loader/index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Loader Animation</title>
7+
<link href="base.css" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
13+
<header>
14+
<h1 class="primary-heading">CSS Loader Animation</h1>
15+
<nav></nav>
16+
</header>
17+
18+
<main>
19+
20+
<div class="bouncing-loader">
21+
<div class="bouncing-loader__ball"></div>
22+
<div class="bouncing-loader__ball"></div>
23+
<div class="bouncing-loader__ball"></div>
24+
</div>
25+
26+
</main>
27+
28+
<footer>
29+
</footer>
30+
31+
</body>
32+
</html>

0 commit comments

Comments
 (0)