From a365160cf7a25a2958b1c26aa2548f5321edb42d Mon Sep 17 00:00:00 2001 From: jessicarush Date: Fri, 8 Oct 2021 08:44:19 -0700 Subject: [PATCH] Style: minor edits --- css_columns/base.css | 5 + css_columns/index.html | 82 +++++++++++++ css_flexbox/base.css | 7 +- css_flexbox/index.html | 242 +++++++++++++++++++------------------ css_gradient_test/base.css | 112 ++--------------- 5 files changed, 226 insertions(+), 222 deletions(-) diff --git a/css_columns/base.css b/css_columns/base.css index ba6b9a3..2fcffb5 100644 --- a/css_columns/base.css +++ b/css_columns/base.css @@ -100,6 +100,11 @@ a:active { height: 900px; */ } +.container-c { + column-width: 150px; + /* column-count: 3; */ +} + /* COMPONENTS ------------------------------------------------------------- */ diff --git a/css_columns/index.html b/css_columns/index.html index 298bd4f..49d95f9 100644 --- a/css_columns/index.html +++ b/css_columns/index.html @@ -88,7 +88,89 @@

Spanning element

Donec id odio fringilla, convallis mi eget, porttitor nisi. Suspendisse ultricies aliquet ipsum, et interdum ligula. Nullam dignissim ut ipsum non faucibus. Donec accumsan consequat justo, ultricies iaculis risus lobortis laoreet. Sed nec placerat est. Duis tincidunt laoreet libero a pellentesque. Aliquam erat volutpat. Nunc luctus diam nunc. Aenean elementum purus et erat gravida, vel dictum lacus volutpat. Duis neque ligula, cursus a lobortis eget, malesuada eget nisl. Fusce commodo rutrum magna, placerat viverra massa eleifend sit amet. Maecenas nec rutrum ante.

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
diff --git a/css_flexbox/base.css b/css_flexbox/base.css index 06acb2d..87651aa 100644 --- a/css_flexbox/base.css +++ b/css_flexbox/base.css @@ -69,11 +69,8 @@ a:active { margin: 15px auto; } -.fixed { - border: solid 2px aquamarine; - width: 800px; - height: 800px; - margin: 15px auto; +.fixed-height { + height: 350px; } .box { diff --git a/css_flexbox/index.html b/css_flexbox/index.html index 954a3a6..edd719b 100644 --- a/css_flexbox/index.html +++ b/css_flexbox/index.html @@ -19,136 +19,148 @@

Flexbox.

Though you could create entire page layouts with flexbox, it's most suitable for working with interface elements and smaller components.

Mozillas guide on Flexbox Layouts
A Flexbox playground.

- -
-

Hi

-
+
+

Hi

+
+ -
-
-

Flexbox Container Properties.

-
-
- -
    -
  • display: flexbox;
    • -
  • flex-direction: row-reverse;
    • -
  • justify-content: space-between;
    • -
  • align-items: center;
    • -
  • flex-wrap: wrap;
    • -
  • /* Note: align-content has no effect when there is only one line of flex items */
    • -
  • align-content: space-between;
    • -
  • /* (Shorthand) flex-flow: flex-direction flex-wrap; */
    • -
  • flex-flow: row wrap;
    • -
  • /* (Shorthand) place-content: align-content justify-content; */
    • -
  • place-content: end space-between;
    • -
- -
-
-

Hi

-
+
+
+

Flexbox Container Properties.

+
+
+ +
    +
  • display: flexbox;
    • +
  • flex-direction: row-reverse;
    • +
  • justify-content: space-between;
    • +
  • align-items: center;
    • +
  • flex-wrap: wrap;
    • +
  • /* Note: align-content has no effect when there is only one line of flex items */
    • +
  • align-content: space-between;
    • +
  • /* (Shorthand) flex-flow: flex-direction flex-wrap; */
    • +
  • flex-flow: row wrap;
    • +
  • /* (Shorthand) place-content: align-content justify-content; */
    • +
  • place-content: end space-between;
    • +
+ +
+
+

Hi

+
-
-
-

Flexbox Items Properties.

-
-
- -
    -
  • order: 1;
    • -
  • flex-grow: 1;
    • -
  • flex-shrink: 1;
    • -
  • flex-basis: 200px;
    • -
  • align-self: center;
    • -
  • /* (Shorthand) flex: flex-grow flex-shrink flex-basis; */
    • -
  • flex: 2 0 0;
    • -
- -
-
-

Hi

-
+
+
+

Flexbox Items Properties.

+
+ +
    +
  • order: 1;
    • +
  • flex-grow: 1;
    • +
  • flex-shrink: 1;
    • +
  • flex-basis: 200px;
    • +
  • align-self: center;
    • +
  • /* (Shorthand) flex: flex-grow flex-shrink flex-basis; */
    • +
  • flex: 2 0 0;
    • +
+ +
+
+

Hi

+
+
-
-
-

A

-
-
-

B

-
-
-

C

-
+
+
+

A

+
+
+

B

+
+

C

+
+
-
-
-

A

-
-
-

B

-
-
-

C

-
+
+
+

A

+
+
+

B

+
+
+

C

+
-
-
-

A

-
-
-

B

-
-
-

C

-
+
+
+

A

+
+

B

+
+
+

C

+
+
-
-
-

A

-
-
-

B

-
-
-

C

-
-
-

D

-
-
-

E

-
+
+
+

A

+
+
+

B

+
+

C

+
+
+

D

+
+
+

E

+
+
-
-
-

A

-
-
-

B

-
-
-

C

-
-
-

C

-
-
-

C

-
-
-

C

-
+
+
+

A

+
+
+

B

+
+
+

C

+
+
+

C

+
+
+

C

+
+
+

C

+
+
+

C

+
+
+

C

+
+
+

C

+
+
+

C

+
- - + + diff --git a/css_gradient_test/base.css b/css_gradient_test/base.css index 7e3ffeb..0800d99 100644 --- a/css_gradient_test/base.css +++ b/css_gradient_test/base.css @@ -43,6 +43,15 @@ html { /* COMPONENTS ------------------------------------------------------------- */ +/* .grad-bar { + background: rgba(255,255,255,.5); + padding: 25px; + width: 380px; + border-radius: 10px; + border-bottom: solid 5px; + border-image-slice: 1; + border-image-source: linear-gradient(to left, tomato, cornsilk); +} */ .grad-bar { background: rgba(255,255,255,.5); @@ -61,8 +70,7 @@ html { background: linear-gradient(to left, tomato, cornsilk); width: 100%; border-radius: 10px; - -moz-clip-path: inset(70% 0 0 0); - -webkit-clip-path: inset(70% 0 0 0); + /* clip-path: inset(50% 0 0 0); */ clip-path: inset(70% 0 0 0); } @@ -96,106 +104,6 @@ html { 100% {transform:rotate(360deg);} } - -.flow-container { - display: grid; - grid-template-columns: 1fr 50px 1fr; - grid-template-rows: auto; - width: 400px; - padding-top: 100px; - overflow-x: hidden; -} - -.flow-line { - background: aquamarine; - width: 100%; - height: 2px; -} - -.flow-line--left { - grid-column-start: 1; - grid-row-start: 1; -} - -.flow-line--right { - grid-column-start: 3; - grid-row-start: 1; -} - - -.flow-ball-clip-wrapper { - /* background: rgba(255,0,0,.2); */ - box-sizing: border-box; - width: 100%; - padding: 0 50px 0 50px; - grid-column-start: 1; - grid-column-end: span 3; - grid-row-start: 1; - position: relative; - top: -3px; - clip-path: polygon( - 0 0, - 100% 0, - 100% 100%, - calc(50% + 25px) 100%, - calc(50% + 25px) 0, - calc(50% - 25px) 0, - calc(50% - 25px) 100%, - 0 100% - ); -} - -.flow-ball-animation-wrapper { - width: 100%; - /* background: rgba(255,255,0,.2); */ - - /* flow right */ - animation-duration: 3s; - animation-name: flow-right; - animation-iteration-count: infinite; - animation-timing-function: linear; -} - -@keyframes flow-right { - 0% {transform:translateX(0%);} - 100% {transform:translateX(100%);} -} - -.flow-ball { - width: 8px; - height: 8px; - background: green; - border-radius: 50%; -} - - - -.percent-ring__container { - width: 55px; - height: 55px; - background: rgba(255,255,0,.2); -} - -.percent-ring { - display: block; -} - -.percent-ring__path { - stroke: rgb(106,255,161); - fill: none; - stroke-width: 2; - stroke-linecap: round; - animation: progress .5s ease-out forwards; -} - -@keyframes progress { - 0% { - stroke-dasharray: 0 100; - } -} - - - /* COSMETIC --------------------------------------------------------------- */ /* UTILITY ---------------------------------------------------------------- */