Skip to content

Commit 621a0bc

Browse files
author
jessicarush
committed
Add: updates and refactor
1 parent a4e0b55 commit 621a0bc

File tree

12 files changed

+271
-42
lines changed

12 files changed

+271
-42
lines changed

‎css_js_height_transition/base.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
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+
p {
29+
margin: 0;
30+
}
31+
32+
/* TYPOGRAPHY ------------------------------------------------------------- */
33+
34+
.primary-heading {
35+
color: var(--heading-color);
36+
font-family: var(--heading-font);
37+
font-size: 2rem;
38+
font-weight: 400;
39+
}
40+
41+
42+
/* LINKS & BUTTONS -------------------------------------------------------- */
43+
44+
/* LAYOUT ----------------------------------------------------------------- */
45+
46+
.content-box {
47+
background: rgb(242,244,248);
48+
padding: 15px;
49+
}
50+
51+
.is-hidden {
52+
transition: max-height 0.5s;
53+
overflow: hidden;
54+
max-height: 0;
55+
}
56+
57+
.trigger:hover > .is-hidden {
58+
max-height: var(--js-scrollHeight);
59+
}
60+
61+
62+
63+
64+
65+
/* COMPONENTS ------------------------------------------------------------- */
66+
67+
/* COSMETIC --------------------------------------------------------------- */
68+
69+
/* UTILITY ---------------------------------------------------------------- */
70+
71+
/* STATE ------------------------------------------------------------------ */

‎css_js_height_transition/index.html‎

Lines changed: 32 additions & 0 deletions
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 Height Transition</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+
<script src="script.js" defer></script>
10+
</head>
11+
12+
<body>
13+
14+
<header>
15+
<h1 class="primary-heading">CSS Height Transition</h1>
16+
<nav></nav>
17+
</header>
18+
19+
<main>
20+
21+
<div class="content-box trigger">
22+
<p>Hover to see a height transition.</p>
23+
<div class="is-hidden">This demo is full of issues. None of the browsers seem to be able to calculate the scrollHeight properly when using a google font. If I use a generic font, all is well. Next, this doesn't really work at all in firefox. Mozilla says "When an element's content does not generate a vertical scrollbar, then its scrollHeight property is equal to its clientHeight property." clientHeight logs as being undefined and scrollHeight logs as being 77px. The only way I was able to work-around this was to multiply the scrollHeight by a guessed amount like 1.7. Not an ideal solution at all. Lastly, Firefox seems to completely ignore line-height and width so overall it's crap.</div>
24+
</div>
25+
26+
</main>
27+
28+
<footer>
29+
</footer>
30+
31+
</body>
32+
</html>

‎css_js_height_transition/script.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
function setHeight() {
2+
let el = document.querySelector('.is-hidden');
3+
let height = el.scrollHeight;
4+
console.log(el.scrollHeight, el.clientHeigh);
5+
console.log(el.scrollWidth, el.clientWidth);
6+
el.style.setProperty('--js-scrollHeight', (height * 1.7) + 'px');
7+
}
8+
9+
10+
setHeight();

‎css_transition_box-shadow/base.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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+
width: 300px;
36+
}
37+
38+
.box-shadow-transition {
39+
box-shadow: inset 0 -.5em 0 rgb(145,252,240);
40+
transition: box-shadow .2s ease-in-out;
41+
}
42+
43+
.box-shadow-transition:hover {
44+
box-shadow: inset 0 -1.4em 0 rgb(255,200,200);
45+
}
46+
47+
/* LINKS & BUTTONS -------------------------------------------------------- */
48+
49+
/* LAYOUT ----------------------------------------------------------------- */
50+
51+
/* COMPONENTS ------------------------------------------------------------- */
52+
53+
/* COSMETIC --------------------------------------------------------------- */
54+
55+
/* UTILITY ---------------------------------------------------------------- */
56+
57+
/* STATE ------------------------------------------------------------------ */

‎css_transition_box-shadow/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS box-shadow transition</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">
15+
<span class="box-shadow-transition">CSS box-shadow transition using inset value</span>
16+
</h1>
17+
<nav></nav>
18+
</header>
19+
20+
<main>
21+
</main>
22+
23+
<footer>
24+
</footer>
25+
26+
</body>
27+
</html>

‎css_easing_transitions/base.css‎ renamed to ‎css_transition_easing/base.css‎

File renamed without changes.

‎css_easing_transitions/index.html‎ renamed to ‎css_transition_easing/index.html‎

File renamed without changes.

‎css_underline_animation/base.css‎ renamed to ‎css_transition_underline/base.css‎

File renamed without changes.

‎css_underline_animation/index.html‎ renamed to ‎css_transition_underline/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title>CSS Underline Animation</title>
6+
<title>CSS Underline Transition</title>
77
<link href="base.css" rel="stylesheet">
88
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
99
</head>
@@ -12,7 +12,7 @@
1212

1313
<header>
1414
<h1 class="primary-heading underline-animation">
15-
CSS Underline Animation
15+
CSS Underline Transition
1616
</h1>
1717
<nav></nav>
1818
</header>

‎css_transitions/base.css‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,12 @@ html {
2323
font-family: var(--main-font);
2424
font-size: 16px;
2525
font-weight: 400;
26+
line-height: 1.7em;
2627
}
27-
p {
28-
margin: 0;
28+
29+
code {
30+
line-height: 1.5em;
31+
background: lightcyan;
2932
}
3033

3134
/* TYPOGRAPHY ------------------------------------------------------------- */
@@ -42,47 +45,45 @@ p {
4245

4346
/* LAYOUT ----------------------------------------------------------------- */
4447

45-
.flex-centered {
48+
.centered-container {
49+
max-width: 800px;
50+
margin: 0 auto;
51+
}
52+
53+
.box {
4654
width: 100px;
4755
height: 100px;
4856
display: flex;
4957
justify-content: center;
5058
align-items: center;
5159
margin: 5px 0;
60+
float: left;
5261
}
5362

63+
5464
/* COMPONENTS ------------------------------------------------------------- */
5565

56-
.content-box {
57-
background: rgb(242,244,248);
58-
padding: 15px;
59-
}
66+
/* COSMETIC --------------------------------------------------------------- */
6067

61-
.is-hidden {
62-
transition: max-height 0.5s;
63-
overflow: hidden;
64-
max-height: 0;
68+
.trans-example-1 {
69+
margin-left: 0;
70+
transition: margin-left .5s ease-in-out .5s;
6571
}
6672

67-
.trigger:hover > .is-hidden {
68-
max-height: var(--js-scrollHeight);
73+
.trans-example-1:hover {
74+
margin-left: 50px;
6975
}
7076

71-
7277
.color-box {
7378
background: rgb(242,244,248);
74-
transition: background 0.5s;
79+
transition: background .5s;
7580
}
7681

7782
.color-box:hover {
7883
background: var(--random-bg);
7984
}
8085

8186

82-
83-
84-
/* COSMETIC --------------------------------------------------------------- */
85-
8687
/* UTILITY ---------------------------------------------------------------- */
8788

8889
/* STATE ------------------------------------------------------------------ */

0 commit comments

Comments
 (0)