From 9882276535e3080112053002bb1777ff1e9dbafe Mon Sep 17 00:00:00 2001 From: kvn8888 <77308744+kvn8888@users.noreply.github.com> Date: Sat, 5 Nov 2022 14:05:41 -0400 Subject: [PATCH 01/51] Create CNAME --- CNAME | 1 + 1 file changed, 1 insertion(+) create mode 100644 CNAME diff --git a/CNAME b/CNAME new file mode 100644 index 0000000..b0011d9 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +kevinc.dev \ No newline at end of file From b16461d693fa5814167413a5d612881ff2c2972f Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 5 Nov 2022 14:19:33 -0400 Subject: [PATCH 02/51] added index.html --- index.html | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..d8b5396 --- /dev/null +++ b/index.html @@ -0,0 +1,9 @@ + + + + Homepage + + +

Homepage

+ + \ No newline at end of file From 609188ec6e62b41b9dee86ac0984a9e7440d823b Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 5 Nov 2022 14:19:56 -0400 Subject: [PATCH 03/51] removed home.html --- home.html | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 home.html diff --git a/home.html b/home.html deleted file mode 100644 index d8b5396..0000000 --- a/home.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - Homepage - - -

Homepage

- - \ No newline at end of file From e193a47eec91a4d0605f1c996285009ebc89644f Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 5 Nov 2022 14:43:19 -0400 Subject: [PATCH 04/51] testing grid layouts --- homepage.css | 21 +++++++++++++++++++++ index.html | 11 +++++++++-- 2 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 homepage.css diff --git a/homepage.css b/homepage.css new file mode 100644 index 0000000..37d29ba --- /dev/null +++ b/homepage.css @@ -0,0 +1,21 @@ +#grid_container { + display: grid; + max-width: auto; + max-height: auto; + grid-template-columns: auto auto auto auto auto auto; + background-color: rgb(250, 250, 250); + gap: 5px; +} +#grid_container > div { + background-color: rgb(241, 241, 241); + text-align: center; + min-height: 200px; +} +#header { + grid-column: 1/7; + grid-row: 1; +} +h1 { + background-color: rgb(247, 247, 247); + text-align: center; +} \ No newline at end of file diff --git a/index.html b/index.html index d8b5396..3f7436e 100644 --- a/index.html +++ b/index.html @@ -2,8 +2,15 @@ Homepage + - -

Homepage

+ +

Testing grid layouts

+
1
+
2
+
3
+
4
+
5
+
6
\ No newline at end of file From aa8789f68fba90161001e408f014e8197799d7fe Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 5 Nov 2022 14:50:39 -0400 Subject: [PATCH 05/51] added box styling --- homepage.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/homepage.css b/homepage.css index 37d29ba..7cd930e 100644 --- a/homepage.css +++ b/homepage.css @@ -10,10 +10,13 @@ background-color: rgb(241, 241, 241); text-align: center; min-height: 200px; + border-radius: 20px; + box-shadow: 2px 2px 5px rgb(150, 150, 150); } #header { grid-column: 1/7; grid-row: 1; + justify-content: center; } h1 { background-color: rgb(247, 247, 247); From 900ea8767e673d93bf0b5d0506075c726c760990 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 5 Nov 2022 16:32:51 -0400 Subject: [PATCH 06/51] Added links and styling --- grid_layouts.html | 19 +++++++++++++++++++ grid_styling.css | 24 ++++++++++++++++++++++++ homepage.css | 26 +++++++++++++++++++++----- index.html | 23 ++++++++++++++--------- 4 files changed, 78 insertions(+), 14 deletions(-) create mode 100644 grid_layouts.html create mode 100644 grid_styling.css diff --git a/grid_layouts.html b/grid_layouts.html new file mode 100644 index 0000000..b033143 --- /dev/null +++ b/grid_layouts.html @@ -0,0 +1,19 @@ + + + + + + + + Homepage + + +

Testing grid layouts

+
1
+
2
+
3
+
4
+
5
+
6
+ + \ No newline at end of file diff --git a/grid_styling.css b/grid_styling.css new file mode 100644 index 0000000..7cd930e --- /dev/null +++ b/grid_styling.css @@ -0,0 +1,24 @@ +#grid_container { + display: grid; + max-width: auto; + max-height: auto; + grid-template-columns: auto auto auto auto auto auto; + background-color: rgb(250, 250, 250); + gap: 5px; +} +#grid_container > div { + background-color: rgb(241, 241, 241); + text-align: center; + min-height: 200px; + border-radius: 20px; + box-shadow: 2px 2px 5px rgb(150, 150, 150); +} +#header { + grid-column: 1/7; + grid-row: 1; + justify-content: center; +} +h1 { + background-color: rgb(247, 247, 247); + text-align: center; +} \ No newline at end of file diff --git a/homepage.css b/homepage.css index 7cd930e..683b9f1 100644 --- a/homepage.css +++ b/homepage.css @@ -2,23 +2,39 @@ display: grid; max-width: auto; max-height: auto; - grid-template-columns: auto auto auto auto auto auto; - background-color: rgb(250, 250, 250); + grid-template-columns: auto auto; + background-color: rgb(255, 255, 255); gap: 5px; + padding-top: 10px; } #grid_container > div { - background-color: rgb(241, 241, 241); + background-color: rgb(255, 255, 255); text-align: center; min-height: 200px; border-radius: 20px; box-shadow: 2px 2px 5px rgb(150, 150, 150); } #header { - grid-column: 1/7; + grid-column: 1/3; grid-row: 1; justify-content: center; + /* background-color: rgb(247, 247, 247); */ } h1 { - background-color: rgb(247, 247, 247); text-align: center; + font-family: 'Lato', sans-serif; +} +h1 > span { + color: rgb(69, 85, 255); + background-color: rgb(226, 226, 255); + border-radius: 10px; + padding: 5px; +} +a { + font-family: "Roboto"; + color: rgb(110, 112, 149); + text-decoration: none; + background-color: rgb(50, 50, 50); + border-radius: 20px; + padding: 10px; } \ No newline at end of file diff --git a/index.html b/index.html index 3f7436e..b1d0dba 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,21 @@ - + - Homepage + + + + Homepage -

Testing grid layouts

-
1
-
2
-
3
-
4
-
5
-
6
+

Welcome to KevinC.dev!

+
+

Work in Progress

+ Grid stylesheet +
+
+

Testing

+ Grid Layouts +
\ No newline at end of file From 72e03c8aa5e4f4c0d1a5d6a568e5392149c1cbfa Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 5 Nov 2022 16:41:34 -0400 Subject: [PATCH 07/51] fixed styling --- homepage.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/homepage.css b/homepage.css index 683b9f1..e512ce0 100644 --- a/homepage.css +++ b/homepage.css @@ -12,7 +12,7 @@ text-align: center; min-height: 200px; border-radius: 20px; - box-shadow: 2px 2px 5px rgb(150, 150, 150); + box-shadow: 2px 2px 20px rgb(200, 200, 200); } #header { grid-column: 1/3; @@ -23,6 +23,7 @@ h1 { text-align: center; font-family: 'Lato', sans-serif; + padding-bottom: 20px; } h1 > span { color: rgb(69, 85, 255); @@ -30,9 +31,12 @@ h1 > span { border-radius: 10px; padding: 5px; } +h3 { + font-family: "Poppins", sans-serif; +} a { font-family: "Roboto"; - color: rgb(110, 112, 149); + color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(50, 50, 50); border-radius: 20px; From 6ac67b0f73b8f95b244b118501804c1c8ee6b747 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 5 Nov 2022 17:22:38 -0400 Subject: [PATCH 08/51] changed link styling --- homepage.css | 25 ++++++++++++++++++++++++- index.html | 6 ++++-- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/homepage.css b/homepage.css index e512ce0..f82c4ad 100644 --- a/homepage.css +++ b/homepage.css @@ -24,6 +24,7 @@ h1 { text-align: center; font-family: 'Lato', sans-serif; padding-bottom: 20px; + font-size: 50px; } h1 > span { color: rgb(69, 85, 255); @@ -33,12 +34,34 @@ h1 > span { } h3 { font-family: "Poppins", sans-serif; + padding-bottom: 10px; } -a { +#button { font-family: "Roboto"; color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(50, 50, 50); border-radius: 20px; padding: 10px; +} +p { + font-family: "Roboto"; +} +a { + font-family: "Roboto"; + color: rgb(0, 0, 0); + padding: 10px; +} +.material-symbols-outlined { + position: relative; + top: 6px; + font-variation-settings: + 'FILL' 0, + 'wght' 400, + 'GRAD' 10, + 'opsz' 38 +} +.textWithIcon { + position: relative; + bottom: 9px; } \ No newline at end of file diff --git a/index.html b/index.html index b1d0dba..3abf691 100644 --- a/index.html +++ b/index.html @@ -5,17 +5,19 @@ + Homepage

Welcome to KevinC.dev!

Work in Progress

- Grid stylesheet + Grid stylesheet outbound +

Working on responsive web layout

\ No newline at end of file From 314e2233f670071e64e8645563f78aa507f7ae5b Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 5 Nov 2022 17:45:03 -0400 Subject: [PATCH 09/51] rwd trial --- homepage.css | 12 +++++++++++- index.html | 1 + 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/homepage.css b/homepage.css index f82c4ad..98e8523 100644 --- a/homepage.css +++ b/homepage.css @@ -1,3 +1,13 @@ +@media all and (max-width: 600px) { + body { + transform: scale(2); + } +} +/* @media all and (min-width: 600px) { + h1 { + font-size: 48px; + } +} */ #grid_container { display: grid; max-width: auto; @@ -24,7 +34,7 @@ h1 { text-align: center; font-family: 'Lato', sans-serif; padding-bottom: 20px; - font-size: 50px; + /* font-size: 50px; */ } h1 > span { color: rgb(69, 85, 255); diff --git a/index.html b/index.html index 3abf691..8cd9476 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + From 6c9659551184a2644f462e259f7d0ef5974be0c9 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 5 Nov 2022 18:03:59 -0400 Subject: [PATCH 10/51] fixed adaptixe web design --- homepage.css | 36 +++++++++++++++++++++++++++++++----- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/homepage.css b/homepage.css index 98e8523..cb5eb57 100644 --- a/homepage.css +++ b/homepage.css @@ -1,8 +1,3 @@ -@media all and (max-width: 600px) { - body { - transform: scale(2); - } -} /* @media all and (min-width: 600px) { h1 { font-size: 48px; @@ -74,4 +69,35 @@ a { .textWithIcon { position: relative; bottom: 9px; +} +@media all and (max-width: 600px) { + h1 { + font-size: 64px; + } + h3 { + font-size: 32px; + } + p { + font-size: 24px; + color: rgb(100, 100, 100); + } + a { + font-size: 24px; + } + #grid_container { + display: grid; + max-width: auto; + max-height: auto; + grid-template-columns: auto; + grid-template-rows: auto auto auto; + background-color: rgb(255, 255, 255); + gap: 10px; + padding-top: 10px; + } + #header { + grid-column: 1; + grid-row: 1; + justify-content: center; + /* background-color: rgb(247, 247, 247); */ + } } \ No newline at end of file From 79b4d9c8031d8b63edc7e27916d5a5618f2adff9 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 5 Nov 2022 18:07:22 -0400 Subject: [PATCH 11/51] added option to view stylesheet --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 8cd9476..5588f8a 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,8 @@

Welcome to KevinC.dev!

Work in Progress

- Grid stylesheet outbound + Grid Stylesheet outbound + View Stylesheet outbound

Working on responsive web layout

From c12500aa7f9b4291ab17703559f3db48d9670bcc Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 5 Nov 2022 18:11:46 -0400 Subject: [PATCH 12/51] fixed scaling issue --- homepage.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/homepage.css b/homepage.css index cb5eb57..a8039a9 100644 --- a/homepage.css +++ b/homepage.css @@ -72,17 +72,17 @@ a { } @media all and (max-width: 600px) { h1 { - font-size: 64px; + font-size: 50px; } h3 { - font-size: 32px; + font-size: 28px; } p { - font-size: 24px; + font-size: 20px; color: rgb(100, 100, 100); } a { - font-size: 24px; + font-size: 20px; } #grid_container { display: grid; From 0c04b26dbb8058c8f82eb701a06c72d509e9c19c Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 5 Nov 2022 19:44:30 -0400 Subject: [PATCH 13/51] fixed font size --- homepage.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/homepage.css b/homepage.css index a8039a9..2c145bd 100644 --- a/homepage.css +++ b/homepage.css @@ -75,14 +75,14 @@ a { font-size: 50px; } h3 { - font-size: 28px; + font-size: 24px; } p { - font-size: 20px; + font-size: 16px; color: rgb(100, 100, 100); } a { - font-size: 20px; + font-size: 16px; } #grid_container { display: grid; From be43d65bfc950703c7925437639ed64bb8b6c55a Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 5 Nov 2022 19:45:14 -0400 Subject: [PATCH 14/51] removed exclaimation mark --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 5588f8a..fdf1c6e 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ Homepage -

Welcome to KevinC.dev!

+

Welcome to KevinC.dev

Work in Progress

Grid Stylesheet outbound From cffaf732a200cc8f14d311329995282572a66d46 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sun, 6 Nov 2022 13:50:21 -0500 Subject: [PATCH 15/51] responsive web design --- homepage.css | 48 ++++++++++++++++++++++++++++++++++++++++++++---- index.html | 11 +++++++---- 2 files changed, 51 insertions(+), 8 deletions(-) diff --git a/homepage.css b/homepage.css index 2c145bd..4c48932 100644 --- a/homepage.css +++ b/homepage.css @@ -7,7 +7,8 @@ display: grid; max-width: auto; max-height: auto; - grid-template-columns: auto auto; + grid-template-columns: auto auto auto auto auto auto; + grid-template-rows: auto auto auto; background-color: rgb(255, 255, 255); gap: 5px; padding-top: 10px; @@ -15,16 +16,19 @@ #grid_container > div { background-color: rgb(255, 255, 255); text-align: center; - min-height: 200px; border-radius: 20px; box-shadow: 2px 2px 20px rgb(200, 200, 200); } #header { - grid-column: 1/3; + grid-column: 1/7; grid-row: 1; justify-content: center; /* background-color: rgb(247, 247, 247); */ } +/* div #wip { + grid-column: 3/4; + grid-row: ; +} */ h1 { text-align: center; font-family: 'Lato', sans-serif; @@ -51,6 +55,8 @@ h3 { } p { font-family: "Roboto"; + padding-left: 5px; + padding-right: 5px; } a { font-family: "Roboto"; @@ -70,6 +76,28 @@ a { position: relative; bottom: 9px; } +#wip { + grid-row: 2; + grid-column: 2/4; + min-height: 200px; + max-width: none; +} +#testing { + grid-row: 2; + grid-column: 4/6; + min-height: 200px; + max-width: none; +} +#footer{ + grid-column: 2/6; + grid-row: 3/4; + min-height: 100px; + max-width: none; + margin-top: 20px; +} +#footer > p { + padding: 5px; +} @media all and (max-width: 600px) { h1 { font-size: 50px; @@ -89,7 +117,7 @@ a { max-width: auto; max-height: auto; grid-template-columns: auto; - grid-template-rows: auto auto auto; + grid-template-rows: auto auto auto auto; background-color: rgb(255, 255, 255); gap: 10px; padding-top: 10px; @@ -100,4 +128,16 @@ a { justify-content: center; /* background-color: rgb(247, 247, 247); */ } + #wip { + grid-row: 2; + grid-column: 1; + } + #testing { + grid-row: 3; + grid-column: 1; + } + #footer { + grid-row: 4; + grid-column: 1; + } } \ No newline at end of file diff --git a/index.html b/index.html index fdf1c6e..8c96ca6 100644 --- a/index.html +++ b/index.html @@ -11,15 +11,18 @@

Welcome to KevinC.dev

-
+

Work in Progress

- Grid Stylesheet outbound View Stylesheet outbound -

Working on responsive web layout

-
+ + \ No newline at end of file From 17eb38f118416fdf81db9f781882fac82bf7ceed Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sun, 6 Nov 2022 13:55:36 -0500 Subject: [PATCH 16/51] fixed font size issue --- homepage.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/homepage.css b/homepage.css index 4c48932..f09170e 100644 --- a/homepage.css +++ b/homepage.css @@ -57,11 +57,13 @@ p { font-family: "Roboto"; padding-left: 5px; padding-right: 5px; + font-size: 16px; } a { font-family: "Roboto"; color: rgb(0, 0, 0); padding: 10px; + font-size: 16px; } .material-symbols-outlined { position: relative; From b3b21a72d6431c0532da5688d1fc77cff907dc6a Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Thu, 1 Dec 2022 16:04:33 -0500 Subject: [PATCH 17/51] Added NewsArticle links --- NewsArticle.css | 125 +++++++++++++++++++++++++++++++++++++++++++++++ NewsArticle.html | 54 ++++++++++++++++++++ index.html | 2 + 3 files changed, 181 insertions(+) create mode 100644 NewsArticle.css create mode 100644 NewsArticle.html diff --git a/NewsArticle.css b/NewsArticle.css new file mode 100644 index 0000000..656e538 --- /dev/null +++ b/NewsArticle.css @@ -0,0 +1,125 @@ +body { + display: grid; + grid-template-columns: repeat(5, auto); + grid-template-rows: repeat(5, auto); + grid-gap: 50px; + /* grid-template-areas: "navbar navbar navbar navbar navbar navbar navbar navbar navbar navbar" + ". . articlehead articlehead . . . . . ." */ + ; +} + + +.navbar { + grid-column: 1/6; + display: flex; + background-color: rgb(255, 255, 255); + padding-top: 3px; + padding-bottom: 3px; + + + justify-content:space-between; + align-items:center; + min-height:8vh; +} +.navbar div { + justify-content: flex-end; +} +.navbar ul { + list-style: none; + display: flex; + padding-right: 16px; +} + +.articlehead { + grid-row: 2/3; + grid-column: 2/5; + background-color: black; + border-radius: 16px; + max-width: 85vw; + color: white; + +} +.content { + grid-column: 2/3; + background-color: #F2F2F2; + border-radius: 16px; + max-width: 50vw; +} +.sources { + background-color: black; + grid-column: 3/5; + border-radius: 16px; + height: 380px; + min-width: 20vw; + max-width: 26vw; + max-height: 380px; +} +.sources div { + background-color: white; + border-radius: 16px; + height: 341px; + position: relative; + left: -3px; + top: 3px; +} + +@media all and (max-width: 800px) { + body { + display: grid; + grid-gap: 50px; + grid-template-columns: auto; + grid-template-rows: repeat(5, auto); + } + .navbar { + grid-column: 1; + grid-row: 1; + display: flex; + background-color: rgb(255, 255, 255); + padding-top: 2px; + padding-bottom: 2px; + + justify-content:space-between; + align-items:center; + } + .navbar div { + justify-content: flex-end; + } + .navbar ul { + list-style: none; + display: flex; + flex-direction: column; + padding-right: 8px; + } + .navbar div ul a { + color: rgb(0, 0, 0); + font-size: 16px; + display: block; + padding: 5px; + padding-right: 2px; + padding-left: 2px; + + font-family: Helvetica, sans-serif; + text-decoration: none; + } + .articlehead { + grid-column: 1; + grid-row: 2; + max-width: 80vw; + margin-left: auto; + margin-right: auto; + } + .content { + grid-column: 1; + grid-row: 3; + max-width: 80vw; + margin-left: auto; + margin-right: auto; + } + .sources { + grid-column: 1; + grid-row: 4; + min-width: 80vw; + margin-left: auto; + margin-right: auto; + } +} \ No newline at end of file diff --git a/NewsArticle.html b/NewsArticle.html new file mode 100644 index 0000000..920f029 --- /dev/null +++ b/NewsArticle.html @@ -0,0 +1,54 @@ + + + + Article + + + + + + + + + +
+ + +
+
+
+

Article Title Article Title

+
Author's Name
+

Sint Lorem officia duis exercitation ex amet labore ipsum aliquip cupidatat esse. Commodo ullamco qui non dolore quis pariatur nostrud veniam elit sint nostrud minim. Officia sunt eu cupidatat laboris cupidatat non adipisicing. Qui commodo adipisicing dolor ad aute labore laborum eiusmod enim cillum commodo. Non nulla sint cillum mollit amet. Ea velit incididunt magna qui incididunt esse sint dolor proident veniam enim. Anim quis nisi sint nulla aute irure labore. Quis dolore ut eu tempor culpa est.

+
+
+
+

Title

+

Body paragraph. In ipsum reprehenderit dolore cillum enim qui sunt non veniam. Aliquip commodo labore et dolor tempor. Ad culpa nulla est incididunt proident occaecat culpa aliqua magna mollit fugiat aliquip culpa proident. Voluptate sunt in ullamco consequat est quis pariatur labore. Excepteur nulla dolor veniam irure nostrud in minim nostrud. Consectetur velit consequat voluptate ad fugiat proident. Nulla in voluptate consequat commodo ipsum amet nostrud amet officia.

+

Title

+

Body paragraph. In ipsum reprehenderit dolore cillum enim qui sunt non veniam. Aliquip commodo labore et dolor tempor. Ad culpa nulla est incididunt proident occaecat culpa aliqua magna mollit fugiat aliquip culpa proident. Voluptate sunt in ullamco consequat est quis pariatur labore. Excepteur nulla dolor veniam irure nostrud in minim nostrud. Consectetur velit consequat voluptate ad fugiat proident. Nulla in voluptate consequat commodo ipsum amet nostrud amet officia.

+

Title

+

Body paragraph. In ipsum reprehenderit dolore cillum enim qui sunt non veniam. Aliquip commodo labore et dolor tempor. Ad culpa nulla est incididunt proident occaecat culpa aliqua magna mollit fugiat aliquip culpa proident. Voluptate sunt in ullamco consequat est quis pariatur labore. Excepteur nulla dolor veniam irure nostrud in minim nostrud. Consectetur velit consequat voluptate ad fugiat proident. Nulla in voluptate consequat commodo ipsum amet nostrud amet officia.

+
+
+

Sources

+ +
+ + \ No newline at end of file diff --git a/index.html b/index.html index 8c96ca6..d54acaa 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,8 @@

Work in Progress

From f6165da24812fe8c6f9953682823e497272dfbdb Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Thu, 1 Dec 2022 16:05:21 -0500 Subject: [PATCH 18/51] Added TextStyling.css --- TextStyling.css | 91 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 TextStyling.css diff --git a/TextStyling.css b/TextStyling.css new file mode 100644 index 0000000..5d32533 --- /dev/null +++ b/TextStyling.css @@ -0,0 +1,91 @@ +#logo { + font-size: 20px; + text-align: start; + color: rgb(0, 0, 0); + padding: 8px; + padding-left: 24px; + text-decoration: none; + + font-family: Georgia, 'Times New Roman', Times, serif; + font-weight: bold; +} +.navbar ul a { + color: rgb(0, 0, 0); + font-size: 16px; + display: block; + padding:1rem; + padding-right: 2rem; + padding-left: 2rem; + + font-family: Helvetica, sans-serif; + text-decoration: none; +} +.navbar a:hover { + background-color: rgb(150, 150, 150); + border-radius: 5px; +} +.articlehead h1 { + text-align: center; + font-family: Georgia, 'Times New Roman', Times, serif; + font-size: 40px; + font-weight: normal; +} +.articlehead h5 { + padding: 0px; + text-align: center; + font-family: Helvetica, sans-serif; + font-weight: 100; + position: relative; + top: -24px; + margin-block-end: 0em; +} +.articlehead p { + padding: 10px; + padding-left: 24px; + padding-right: 24px; + font-family: Roboto Slab; + font-weight: lighter; + font-size: 20; + margin-block-start: 0em; + +} +.content h3 { + color: rgb(0, 0, 0); + text-align: center; + font-family: Georgia, 'Times New Roman', Times, serif; + font-weight: lighter; + font-size: 24px; + margin-block-end: 0px; +} +.content p { + color: rgb(0, 0, 0); + padding: 20px; + font-family: 'Lato', sans-serif; + font-size: 16px; + line-height: 22px; + margin-block-start: 0px; +} +.sources h3 { + color: white; + text-align: center; + font-family: Georgia, 'Times New Roman', Times, serif; + font-weight: lighter; + margin: 0px; + position: relative; + top: 8px; +} +.sources ul { + list-style: none; + text-align: center; + padding-inline-start: 0px; + padding-top: 10px; +} +.sources li { + padding-top: 12px; + padding-bottom: 12px; +} +.sources a { + font-family: Georgia, 'Times New Roman', Times, serif; + font-size: 16px; + color: black; +} \ No newline at end of file From 33c09dee527a5f224a68c219438c93a06adc0023 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Tue, 20 Dec 2022 02:19:34 -0500 Subject: [PATCH 19/51] initial commit --- experimental/design_system.css | 64 +++++++++++++++++++++++++++++++++ experimental/design_system.html | 27 ++++++++++++++ 2 files changed, 91 insertions(+) create mode 100644 experimental/design_system.css create mode 100644 experimental/design_system.html diff --git a/experimental/design_system.css b/experimental/design_system.css new file mode 100644 index 0000000..c95bb49 --- /dev/null +++ b/experimental/design_system.css @@ -0,0 +1,64 @@ +body{ + display: grid; + grid-template-columns: repeat(5, auto); +} +/* #navbar{ + background-color: rgb(82, 82, 82); + color: aliceblue; + grid-column: 1/6; +} +#navbar a { + color: white; +} +#branding { + font-size: large; + text-align: left; +} +#navbar ul { + display: flex; + justify-content: space-around; + text-align: right; + padding-left: 0; +} */ +#navbar { + grid-column: 1/6; + display: flex; + background-color: rgb(255, 255, 255); + padding-top: 3px; + padding-bottom: 3px; + + justify-content:space-between; + align-items:center; + min-height:8vh; +} +#navbar div { + justify-content: flex-end; +} +#navbar ul { + list-style: none; + display: flex; + padding-right: 16px; +} +#branding { + font-size: 20px; + text-align: start; + color: rgb(0, 0, 0); + padding: 8px; + padding-left: 24px; + text-decoration: none; + + font-family: Georgia, 'Times New Roman', Times, serif; + font-weight: bold; +} +#navbar ul a { + color: rgb(0, 0, 0); + font-size: 16px; + display: block; + padding:1rem; + padding-right: 2rem; + padding-left: 2rem; + + font-family: Helvetica, sans-serif; + text-decoration: none; + white-space: nowrap; +} \ No newline at end of file diff --git a/experimental/design_system.html b/experimental/design_system.html new file mode 100644 index 0000000..8dcd5d6 --- /dev/null +++ b/experimental/design_system.html @@ -0,0 +1,27 @@ + + + + + + + + + + Example + + + + + + + + \ No newline at end of file From 07eeb9a075d89b41fea2de5f336a735b4cb01aa7 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Tue, 20 Dec 2022 02:29:34 -0500 Subject: [PATCH 20/51] restructured stylesheets --- experimental/design_system.html | 3 ++- ...{design_system.css => element_positions.css} | 10 +--------- experimental/text_decorations.css | 17 +++++++++++++++++ 3 files changed, 20 insertions(+), 10 deletions(-) rename experimental/{design_system.css => element_positions.css} (77%) create mode 100644 experimental/text_decorations.css diff --git a/experimental/design_system.html b/experimental/design_system.html index 8dcd5d6..7dd2763 100644 --- a/experimental/design_system.html +++ b/experimental/design_system.html @@ -10,7 +10,8 @@ Example - + + + \ No newline at end of file diff --git a/experimental/element_positions.css b/experimental/element_positions.css index 879381b..b0ac6a8 100644 --- a/experimental/element_positions.css +++ b/experimental/element_positions.css @@ -59,4 +59,14 @@ body{ font-family: Helvetica, sans-serif; text-decoration: none; white-space: nowrap; +} + +button { + display: grid; + grid-column: 3; + background-color: rgb(200, 200, 200, 50%); + color: black; + border-radius: 5px; + border: 2px solid linear-gradient(-45deg, black, white); + padding: 6px 36px; } \ No newline at end of file From 2813cbf60a7e337a57e0643a612eebeeabbaeba5 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Tue, 20 Dec 2022 03:31:31 -0500 Subject: [PATCH 23/51] added hover animation --- experimental/element_positions.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/experimental/element_positions.css b/experimental/element_positions.css index b0ac6a8..240abe8 100644 --- a/experimental/element_positions.css +++ b/experimental/element_positions.css @@ -67,6 +67,16 @@ button { background-color: rgb(200, 200, 200, 50%); color: black; border-radius: 5px; - border: 2px solid linear-gradient(-45deg, black, white); + /* border: 2px solid linear-gradient(-45deg, black, white); */ padding: 6px 36px; + transition: background-color 0.2s ease-out, color 0.5s ease-in; +} +button:hover{ + background-color: rgb(200, 200, 200); + /* animation: changeColors .5s ease-in; + transform: scale(1.05, 1.05); */ +} +@keyframes changeColors { + from { background-color: rgb(200, 200, 200, 50%);} + to { background-color: rgb(200, 200, 200);} } \ No newline at end of file From 047db3f6332251a4da468c5b9ef1c9dd4243dbdb Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Tue, 20 Dec 2022 20:22:43 -0500 Subject: [PATCH 24/51] added button gradient and shadow --- experimental/element_positions.css | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/experimental/element_positions.css b/experimental/element_positions.css index 240abe8..048af0c 100644 --- a/experimental/element_positions.css +++ b/experimental/element_positions.css @@ -5,7 +5,7 @@ body{ display: grid; grid-template-columns: repeat(5, auto); grid-template-rows: auto; - background: linear-gradient(-45deg,rgb(200, 200, 200), 30%, rgb(255, 255, 255)); + background: linear-gradient(-45deg,rgb(163, 181, 195), 50%, rgb(255, 255, 255)); background-repeat: no-repeat; } /* #navbar{ @@ -62,17 +62,31 @@ body{ } button { + /* grid */ display: grid; - grid-column: 3; - background-color: rgb(200, 200, 200, 50%); + grid-column: 3/4; + + /* color */ + /* background-color: rgba(255, 255, 255, 0.35); */ + background: linear-gradient(rgba(255, 255, 255, 0.0), rgb(255, 255, 255, 0.8)); color: black; + border: 1px solid rgb(255, 255, 255, 0.5); + + /* style */ border-radius: 5px; - /* border: 2px solid linear-gradient(-45deg, black, white); */ padding: 6px 36px; + max-width: 200px; + /* text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.2); */ + box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1); + + /* animation */ transition: background-color 0.2s ease-out, color 0.5s ease-in; } button:hover{ background-color: rgb(200, 200, 200); + /* the button hover color looks cool */ + + /* animation: changeColors .5s ease-in; transform: scale(1.05, 1.05); */ } From 5e75b893b25458a76df8cbfb9d2f07ba4b2e2fdf Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Tue, 20 Dec 2022 20:38:20 -0500 Subject: [PATCH 25/51] added button press animation --- experimental/element_positions.css | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/experimental/element_positions.css b/experimental/element_positions.css index 048af0c..82dbddf 100644 --- a/experimental/element_positions.css +++ b/experimental/element_positions.css @@ -73,23 +73,33 @@ button { border: 1px solid rgb(255, 255, 255, 0.5); /* style */ + width: 150px; + height: 30px; border-radius: 5px; padding: 6px 36px; max-width: 200px; /* text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.2); */ box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1); + font-size: 14px; /* animation */ transition: background-color 0.2s ease-out, color 0.5s ease-in; + transition: all 0.08s ease-out, color 0.5s ease-in; } button:hover{ - background-color: rgb(200, 200, 200); + background-color: rgba(0, 0, 0, 0.1); /* the button hover color looks cool */ - - + + /* animation: changeColors .5s ease-in; transform: scale(1.05, 1.05); */ } +button:active { + font-size: 12px; + width: 140px; + height: 28px; +} + @keyframes changeColors { from { background-color: rgb(200, 200, 200, 50%);} to { background-color: rgb(200, 200, 200);} From 7dd35a5d2ac0b6ef85f46cb6cbd6a6e0bef271f8 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Tue, 20 Dec 2022 21:34:21 -0500 Subject: [PATCH 26/51] moved files. added directories. renamed "Testing" to "Layouts" in index.html and following elements. Added wip design to homepage --- experimental/element_positions.css | 1 + .../grid_layouts.html | 0 grid_styling.css => experimental/grid_styling.css | 0 homepage.css | 4 ++-- index.html | 15 ++++++++------- NewsArticle.css => layouts/NewsArticle.css | 0 NewsArticle.html => layouts/NewsArticle.html | 0 7 files changed, 11 insertions(+), 9 deletions(-) rename grid_layouts.html => experimental/grid_layouts.html (100%) rename grid_styling.css => experimental/grid_styling.css (100%) rename NewsArticle.css => layouts/NewsArticle.css (100%) rename NewsArticle.html => layouts/NewsArticle.html (100%) diff --git a/experimental/element_positions.css b/experimental/element_positions.css index 82dbddf..ff4c40d 100644 --- a/experimental/element_positions.css +++ b/experimental/element_positions.css @@ -1,5 +1,6 @@ html{ height: 100%; + overscroll-behavior-y: none; } body{ display: grid; diff --git a/grid_layouts.html b/experimental/grid_layouts.html similarity index 100% rename from grid_layouts.html rename to experimental/grid_layouts.html diff --git a/grid_styling.css b/experimental/grid_styling.css similarity index 100% rename from grid_styling.css rename to experimental/grid_styling.css diff --git a/homepage.css b/homepage.css index f09170e..39bf585 100644 --- a/homepage.css +++ b/homepage.css @@ -84,7 +84,7 @@ a { min-height: 200px; max-width: none; } -#testing { +#layouts { grid-row: 2; grid-column: 4/6; min-height: 200px; @@ -134,7 +134,7 @@ a { grid-row: 2; grid-column: 1; } - #testing { + #layouts { grid-row: 3; grid-column: 1; } diff --git a/index.html b/index.html index d54acaa..7d1395d 100644 --- a/index.html +++ b/index.html @@ -13,14 +13,15 @@

Welcome to KevinC.dev

-
-

Testing

- News Article Layout outbound
- News Article Stylesheet outbound
- Grid Stylesheet outbound
- Grid Layouts outbound + - \ No newline at end of file + From 6bfc67a23bf34a1e037f1a3f4de94b39da149558 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Thu, 25 Jan 2024 16:20:35 -0500 Subject: [PATCH 29/51] added article tag --- .DS_Store | Bin 6148 -> 6148 bytes .gitignore | 1 + layouts/NewsArticle.html | 30 ++++++++++++++++-------------- 3 files changed, 17 insertions(+), 14 deletions(-) create mode 100644 .gitignore diff --git a/.DS_Store b/.DS_Store index bd94eb2549794db34747f4859148c874615a5915..90577557a3d0ea3ddef4d1ed2038825b6e983c82 100644 GIT binary patch delta 95 zcmZoMXffEJ%O#Q)JxC#_^9I0CJHSn*aa+ delta 21 dcmZoMXffEJ%Qkr`%bv|I*yI>Dvvd6A2LM=j2f_dV diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..496ee2c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store \ No newline at end of file diff --git a/layouts/NewsArticle.html b/layouts/NewsArticle.html index 920f029..697a77f 100644 --- a/layouts/NewsArticle.html +++ b/layouts/NewsArticle.html @@ -23,21 +23,23 @@
-
-
-

Article Title Article Title

-
Author's Name
-

Sint Lorem officia duis exercitation ex amet labore ipsum aliquip cupidatat esse. Commodo ullamco qui non dolore quis pariatur nostrud veniam elit sint nostrud minim. Officia sunt eu cupidatat laboris cupidatat non adipisicing. Qui commodo adipisicing dolor ad aute labore laborum eiusmod enim cillum commodo. Non nulla sint cillum mollit amet. Ea velit incididunt magna qui incididunt esse sint dolor proident veniam enim. Anim quis nisi sint nulla aute irure labore. Quis dolore ut eu tempor culpa est.

+
+
+
+

Article Title Article Title

+
Author's Name
+

Sint Lorem officia duis exercitation ex amet labore ipsum aliquip cupidatat esse. Commodo ullamco qui non dolore quis pariatur nostrud veniam elit sint nostrud minim. Officia sunt eu cupidatat laboris cupidatat non adipisicing. Qui commodo adipisicing dolor ad aute labore laborum eiusmod enim cillum commodo. Non nulla sint cillum mollit amet. Ea velit incididunt magna qui incididunt esse sint dolor proident veniam enim. Anim quis nisi sint nulla aute irure labore. Quis dolore ut eu tempor culpa est.

+
+
+
+

Title

+

Body paragraph. In ipsum reprehenderit dolore cillum enim qui sunt non veniam. Aliquip commodo labore et dolor tempor. Ad culpa nulla est incididunt proident occaecat culpa aliqua magna mollit fugiat aliquip culpa proident. Voluptate sunt in ullamco consequat est quis pariatur labore. Excepteur nulla dolor veniam irure nostrud in minim nostrud. Consectetur velit consequat voluptate ad fugiat proident. Nulla in voluptate consequat commodo ipsum amet nostrud amet officia.

+

Title

+

Body paragraph. In ipsum reprehenderit dolore cillum enim qui sunt non veniam. Aliquip commodo labore et dolor tempor. Ad culpa nulla est incididunt proident occaecat culpa aliqua magna mollit fugiat aliquip culpa proident. Voluptate sunt in ullamco consequat est quis pariatur labore. Excepteur nulla dolor veniam irure nostrud in minim nostrud. Consectetur velit consequat voluptate ad fugiat proident. Nulla in voluptate consequat commodo ipsum amet nostrud amet officia.

+

Title

+

Body paragraph. In ipsum reprehenderit dolore cillum enim qui sunt non veniam. Aliquip commodo labore et dolor tempor. Ad culpa nulla est incididunt proident occaecat culpa aliqua magna mollit fugiat aliquip culpa proident. Voluptate sunt in ullamco consequat est quis pariatur labore. Excepteur nulla dolor veniam irure nostrud in minim nostrud. Consectetur velit consequat voluptate ad fugiat proident. Nulla in voluptate consequat commodo ipsum amet nostrud amet officia.

-
-
-

Title

-

Body paragraph. In ipsum reprehenderit dolore cillum enim qui sunt non veniam. Aliquip commodo labore et dolor tempor. Ad culpa nulla est incididunt proident occaecat culpa aliqua magna mollit fugiat aliquip culpa proident. Voluptate sunt in ullamco consequat est quis pariatur labore. Excepteur nulla dolor veniam irure nostrud in minim nostrud. Consectetur velit consequat voluptate ad fugiat proident. Nulla in voluptate consequat commodo ipsum amet nostrud amet officia.

-

Title

-

Body paragraph. In ipsum reprehenderit dolore cillum enim qui sunt non veniam. Aliquip commodo labore et dolor tempor. Ad culpa nulla est incididunt proident occaecat culpa aliqua magna mollit fugiat aliquip culpa proident. Voluptate sunt in ullamco consequat est quis pariatur labore. Excepteur nulla dolor veniam irure nostrud in minim nostrud. Consectetur velit consequat voluptate ad fugiat proident. Nulla in voluptate consequat commodo ipsum amet nostrud amet officia.

-

Title

-

Body paragraph. In ipsum reprehenderit dolore cillum enim qui sunt non veniam. Aliquip commodo labore et dolor tempor. Ad culpa nulla est incididunt proident occaecat culpa aliqua magna mollit fugiat aliquip culpa proident. Voluptate sunt in ullamco consequat est quis pariatur labore. Excepteur nulla dolor veniam irure nostrud in minim nostrud. Consectetur velit consequat voluptate ad fugiat proident. Nulla in voluptate consequat commodo ipsum amet nostrud amet officia.

-
+

Sources

From 372643b2b666e5a3dd1146f8f89850767b0f63e2 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Thu, 25 Jan 2024 16:28:07 -0500 Subject: [PATCH 30/51] trying to fix screen reader --- layouts/NewsArticle.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/layouts/NewsArticle.html b/layouts/NewsArticle.html index 697a77f..3472d33 100644 --- a/layouts/NewsArticle.html +++ b/layouts/NewsArticle.html @@ -11,7 +11,7 @@ -
+
-
+
From d67219699dd17d4af7f77dfd9ef44aae37f269eb Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Thu, 25 Jan 2024 16:33:38 -0500 Subject: [PATCH 31/51] screen reader playground --- experimental/reader.html | 12 ++++++++++++ index.html | 1 + 2 files changed, 13 insertions(+) create mode 100644 experimental/reader.html diff --git a/experimental/reader.html b/experimental/reader.html new file mode 100644 index 0000000..e22923f --- /dev/null +++ b/experimental/reader.html @@ -0,0 +1,12 @@ + + + + Screen reader playground + + +
+

Hello world

+

I am testing the screen reader feature for safari

+
+ + \ No newline at end of file diff --git a/index.html b/index.html index 15e1afa..63c0b8f 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@

Welcome to KevinC.dev

Work in Progress

Index.html Stylesheet outbound Experimental design outbound + Reader outbound

Layouts

From cd1d5ec70de6bb6e879cf9c74407d32cd41adc39 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Thu, 25 Jan 2024 16:36:29 -0500 Subject: [PATCH 32/51] testing length of article --- experimental/reader.html | 7 ++++++- index.html | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/experimental/reader.html b/experimental/reader.html index e22923f..ed7b516 100644 --- a/experimental/reader.html +++ b/experimental/reader.html @@ -6,7 +6,12 @@

Hello world

-

I am testing the screen reader feature for safari

+

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). +

+

Another section

+

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. + +

\ No newline at end of file diff --git a/index.html b/index.html index 63c0b8f..c60932a 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@

Welcome to KevinC.dev

Work in Progress

Index.html Stylesheet outbound Experimental design outbound - Reader outbound + Reader outbound

Layouts

From a955b13bdb70b972374be9541a260e15966b0a5e Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Thu, 25 Jan 2024 16:45:55 -0500 Subject: [PATCH 33/51] added article --- experimental/reader.html | 32 ++++++++++++++++++++++++++------ 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/experimental/reader.html b/experimental/reader.html index ed7b516..51dd3b5 100644 --- a/experimental/reader.html +++ b/experimental/reader.html @@ -5,13 +5,33 @@
-

Hello world

-

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). -

-

Another section

-

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. +

3.2 Effect of Mistakes on a Development Schedule

-

+

Michael Jackson (the singer, not the computer scientist) sang that "One bad apple don't spoil the whole bunch, baby." That might be true for apples, but it isn't true for software. One bad apple can spoil your whole project. A group of ITT researchers reviewed 44 projects in 9 countries to examine the impact of 13 productivity factors on productivity (Vosburgh et al. 1984). The factors included the use of modern programming practices, code difficulty, performance requirements, level of client participation in requirements specification, personnel experience, and several others. They divided each of the factors into categories that you would expect to be associated with low, medium, and high performance. For example, they divided the "modern programming practices" factor into low use, medium use, and high use. Figure 3-1 on the next page shows what the researchers found for the "use of modern programming practices" factor. The longer you study Figure 3-1, the more interesting it becomes. The general pattern it shows is representative of the findings for each of the productivity factors studied. The ITT researchers found that projects in the categories that they expected to have poor productivity did in fact have poor productivity, such as the narrow range shown in the Low category in Figure 3-1. But productivity in the high-performance categories varied greatly, such as the wide range shown in the High category in Figure 3-1. Productivity of projects in the High category varied from poor to excellent.

+ +

That projects that were expected to have poor productivity do in fact have poor productivity shouldn't surprise you. But the finding that many of the projects expected to have excellent productivity actually have poor productivity just might be a surprise. What this graph and other graphs like it throughout the book show is that the use of any specific best practice is necessary but not sufficient for achieving maximum development speed. Even if you do a few things right, such as making high use of modern programming practices, you might still make a mistake that nullifies your productivity gains. When thinking about rapid development, it's tempting to think that all you have to do is identify the root causes of slow development and eliminate them—and then you'll have rapid development. The problem is that there aren't just a handful of root causes of slow development, and in the end trying to identify the root causes of slow development isn't very useful. It's like asking, 'What is the root cause of my not being able to run a 4-minute mile?' Well, I'm too old. I weigh too much. I'm too out of shape. I'm not willing to train that hard. I don't have a world-class coach or athletic facility. I wasn't all that fast even when I was younger. The list goes on and on. When you talk about exceptional achievements, the reasons that people don't rise to the top are simply too numerous to list. The Giga-Quote team in Case Study 3-1 made many of the mistakes that have plagued software developers since the earliest days of computing. The software-development road is mined with potholes, and the potholes you fall into partially determine how quickly or slowly you develop software. In software, one bad apple can spoil the whole bunch, baby. To slip into slow development, all you need to do is make one really big mistake; to achieve rapid development you need to avoid making any big mistakes. The next section lists the most common of those big mistakes.

+ +

Classic Mistakes Enumerated

+ +

Some ineffective development practices have been chosen so often, by so many people, with such predictable, bad results that they deserve to be called "classic mistakes." Most of the mistakes have a seductive appeal. Do you need to rescue a project that's behind schedule? Add more people! Do you want to reduce your schedule? Schedule more aggressively! Is one of your key contributors aggravating the rest of the team? Wait until the end of the project to fire him! Do you have a rush project to complete? Take whatever developers are available right now and get started as soon as possible! + Developers, managers, and customers usually have good reasons for making the decisions they do, and the seductive appeal of the classic mistakes is part of the reason these mistakes have been made so often. But because they have been made so many times, their consequences have become easy to predict. And classic mistakes rarely produce the results that people hope for. + This section enumerates three dozen classic mistakes. I have personally seen each of these mistakes made at least once, and I've made more than a few of them myself. Many of them crop up in Case Study 3-1. The common denominator of these mistakes is that you won't necessarily get rapid development if you avoid these mistakes, but you will definitely get slow development if you don't avoid them. + If some of these mistakes sound familiar, take heart—many other people have made them too. Once you understand their effect on development speed you can use this list to help with your project planning and risk management. + Some of the more significant mistakes are discussed in their own sections in other parts of this book. Others are not discussed further. For ease of reference, the list has been divided along the development-speed dimensions of people, process, product, and technology.

+ +

3.4 Escape from Gilligan's Island

+ +

A complete list of classic mistakes would go on for pages more, but those presented are the most common and the most serious. As Seattle University's David Umphress points out, watching most organizations attempt to avoid these classic mistakes seems like watching reruns of Gilligan's Island. At the beginning of each episode, Gilligan, the Skipper, or the Professor comes up with a cockamamie scheme to get off the island. The scheme seems as though it's going to work for a while, but as the episode unfolds, something goes wrong, and by the end of the episode the castaways find themselves right back where they started—stuck on the island. + Similarly, most companies at the end of each project find that they have made yet another classic mistake and that they have delivered yet another project behind schedule or over budget or both.

+ +

Your Own List of Worst Practices

+ +

Be aware of the classic mistakes. Create lists of "worst practices" to avoid on future projects. Start with the list in this chapter. Add to the list by conducting project postmortems to learn from your team's mistakes. Encourage other projects within your organization to conduct postmortems so that you can learn from their mistakes. Exchange war stories with your colleagues in other organizations, and learn from their experiences. Display your list of mistakes prominently so that people will see it and learn not to make the same mistakes yet another time.

+ +

Case Study 4-1. Lack of Fundamentals

+ +

"We thought we had figured out what we were doing," Bill told Charles. "We did pretty well on version 3 of our Sales Bonus Program, SBP, which is the program we use to pay our field agents their commissions. But on version 4, everything fell apart. Bill had been the manager of SBP versions 1 through 4, and Charles was a consultant Giga-Safe had called in to help figure out why version 4 had been so problematic. "What were the differences between versions 3 and 4?" Charles asked. "We had problems with versions 1 and 2." Bill responded, "but by version 3 we felt that we had put our problems behind us. Development proceeded with hardly any problems at all. Our estimates were accurate, partly because we've learned to pad them with a 30-percent safety margin. The developers had almost no problems with forgotten tasks, tools, or design elements. Everything went great." "So what happened on version 4?" Charles prompted. "That was a different story. Version 3 was an evolutionary upgrade, but version 4 was a completely new product developed from scratch. "The team members tried to apply the lessons they'd learned on SBP versions 1 through 3. But partway through the project, the schedule began to slip. Technical tasks turned out to be more complicated than anticipated. Tasks that the developers had estimated would take 2 days instead took 2 to 3 weeks. There were problems with some new development tools, and the team lost ground fighting with them. The new team members didn't know all the team's rules, and they lost work and time because new team members kept overwriting each other's working files. In the end, no one could predict when the product would be ready until the day it actually was ready. Version 4 was almost 100 percent late." "That does sound pretty bad," Charles agreed. "You mentioned that you had had some problems with versions 1 and 2. Can you tell me about those projects?" "Sure," Bill replied. "On version 1 of SBP, the project was complete chaos. Total project estimates and task scheduling seemed almost random. Technical problems turned out to be harder than expected. Development tools that were supposed to save time actually added time to the schedule. The development team took one schedule slip after another, and no one knew when the product would be ready to release until a day or two before it actually was ready. In the end, the SBP team delivered the product about 100 percent over schedule." "That sounds a lot like what happened on version 4," Charles said "That's right," Bill shook his head. "I thought we had learned our lesson a long time ago." "What about version 2?" Charles asked. "On version 2, development proceeded more smoothly than on version 1. The project estimates and task schedules seemed more realistic, and the technical work seemed to be more under control. There were fewer problems with development tools, and the development team's work took about as long as they had estimated. They made up the estimation errors they did have through increased overtime. "But toward the end of the project, the team discovered several tasks that they hadn't included in their original estimates. They also discovered fundamental design flaws, which meant they had to rework 10 to 15 percent of the system. They took one big schedule slip to include the forgotten tasks and the rework. They finished that work, found a few more problems, took another schedule slip, and finally delivered the product about 30 percent late. That's when we learned to add a 30-percent safety margin to our schedules." "And then version 3 went smoothly?" Charles asked. "Right," Bill agreed. "I take it that versions 1 through 3 used the same code base?" Charles asked. "Yes." "Did versions 1 through 3 use the same team members?" "Yes, but several developers quit after version 3, so most of the version 4 team hadn't worked on the project before." "Thanks," Charles said. "That's all helpful." Charles spent the rest of the day talking with the development team and then met with Bill again that night. "What I've got to tell you might not be easy for you to hear," Charles said. "As a consultant, I see dozens of projects a year, and throughout my career I've seen hundreds of projects in more than a hundred organizations. The pattern you experienced with SBP versions 1 through 4 is actually fairly common. "Earlier, you implied that the developers weren't using automated source-code control, and I confirmed that this afternoon in my talks with your developers. I also confirmed that the development team doesn't use design or code reviews. The organization relies on seat-of-the-pants estimates even though more effective estimation methods are available." "OK," Bill said. "Those things are all true. But what do we need to do so that we never experience another project like version 4 again?" "That's the part that's going to be hard for you to hear," Charles said. "There isn't any one thing you need to do. You need to improve on the software development fundamentals or you'll see this same pattern again and again. You need to strengthen your foundation. On the management side, you need more effective scheduling, planning, tracking, and measurement. On the technical side, you need more effective requirements management, design, construction, and configuration management. And you need much stronger quality assurance." "But we did fine on version 3," Bill objected "That's right," Charles agreed. "You will do fine once in a while—when you're working on a familiar product with team members who have worked on the same product before. Most of the version 3 team had also worked on versions 1 and 2. One of the reasons that organizations think they don't need to master software-development fundamentals is that they do have a few successes. They can get pretty good at estimating and planning for a specific product, They think they're doing well, and they don't think that anyone else is doing any better. "But their development capability is built on a fragile foundation. They really only know how to develop one specific product in one specific way. When they are confronted with major changes in personnel, development tools, development environment, or product concept, that fragile development capability breaks down. Suddenly they find themselves back at square 1. That's what happened on SBP 4 when you had to rewrite the product from scratch with new developers. That's why your experiences on version 1 and version 4 were so similar". "I hadn't thought about it that way before, but maybe you're right," Bill said quietly. "That sounds like a lot of work, though. I don't know if we can justify it." "If you don't master the fundamentals, you'll do OK on the easy projects, but your hard projects will fall apart," Charles said, "and those are usually the ones you really care about."

+
\ No newline at end of file From 79069b48b4bb49bb2f4137e3b6b4a356de92ea8f Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Fri, 26 Jan 2024 22:25:45 -0500 Subject: [PATCH 34/51] added spinner and chat page --- experimental/chapter_3_survival_concepts.html | 0 experimental/chat.html | 0 experimental/spinner.css | 0 experimental/spinner.html | 9 +++++++++ index.html | 3 +++ 5 files changed, 12 insertions(+) create mode 100644 experimental/chapter_3_survival_concepts.html create mode 100644 experimental/chat.html create mode 100644 experimental/spinner.css create mode 100644 experimental/spinner.html diff --git a/experimental/chapter_3_survival_concepts.html b/experimental/chapter_3_survival_concepts.html new file mode 100644 index 0000000..e69de29 diff --git a/experimental/chat.html b/experimental/chat.html new file mode 100644 index 0000000..e69de29 diff --git a/experimental/spinner.css b/experimental/spinner.css new file mode 100644 index 0000000..e69de29 diff --git a/experimental/spinner.html b/experimental/spinner.html new file mode 100644 index 0000000..fcde1af --- /dev/null +++ b/experimental/spinner.html @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index c60932a..b270bd5 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,9 @@

Work in Progress

Index.html Stylesheet outbound Experimental design outbound Reader outbound + Reader outbound + Reader outbound + Reader outbound

Layouts

From 27c096c97ed5bf2e69fd0931a69c19c1af521d68 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Fri, 26 Jan 2024 23:30:54 -0500 Subject: [PATCH 35/51] added google spinner --- experimental/spinner.css | 72 +++++++++++++++++++++++++++++++++++++++ experimental/spinner.html | 3 ++ 2 files changed, 75 insertions(+) diff --git a/experimental/spinner.css b/experimental/spinner.css index e69de29..cc68e25 100644 --- a/experimental/spinner.css +++ b/experimental/spinner.css @@ -0,0 +1,72 @@ +/* .spinner { + border: 3px solid rgba(108, 108, 108, 0.1); + width: 36px; + height: 36px; + border-radius: 50%; + border-left-color: rgb(158, 158, 158); + animation: spin 1.5s linear infinite; +} */ + + +.spinner2 { + animation: rotate 2s linear infinite; + z-index: 2; + position: absolute; + top: 50%; + left: 50%; + margin: -25px 0 0 -25px; + width: 50px; + height: 50px; +} + +.spinner2 .path { + stroke:rgb(80, 80, 80); + stroke-linecap: round; + animation: dash 1.5s ease-in-out infinite, colors 6s infinite; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124; + } +} +/* @keyframes colors { + 0% { + stroke: rgb(0, 100, 50); + } + 25% { + stroke: rgb(0, 100, 50); + } + 26% { + stroke: rgb(50, 100, 45); + } + 50% { + stroke: rgb(50, 100, 45); + } + 51% { + stroke: rgb(100, 100, 30); + } + 75% { + stroke: rgb(100, 100, 30); + } + 76% { + stroke: rgb(190, 100, 37); + } + 100% { + stroke: rgb(190, 100, 37); + } +} */ \ No newline at end of file diff --git a/experimental/spinner.html b/experimental/spinner.html index fcde1af..121f232 100644 --- a/experimental/spinner.html +++ b/experimental/spinner.html @@ -5,5 +5,8 @@ + + + \ No newline at end of file From 19ddbc9f0bc7c84afc6b6852eb3432785a7e7f53 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 27 Jan 2024 00:03:58 -0500 Subject: [PATCH 36/51] cool spinner --- experimental/spinner.css | 67 ++++++++++++++-------------------------- 1 file changed, 24 insertions(+), 43 deletions(-) diff --git a/experimental/spinner.css b/experimental/spinner.css index cc68e25..f99a1f7 100644 --- a/experimental/spinner.css +++ b/experimental/spinner.css @@ -9,7 +9,7 @@ .spinner2 { - animation: rotate 2s linear infinite; + /* animation: rotate 2s linear infinite; */ z-index: 2; position: absolute; top: 50%; @@ -22,51 +22,32 @@ .spinner2 .path { stroke:rgb(80, 80, 80); stroke-linecap: round; - animation: dash 1.5s ease-in-out infinite, colors 6s infinite; + animation: dash 1.5s ease-in-out infinite; +} + + +/* Define the gap variable */ +:root { + --gap: 20; } @keyframes rotate { - 100% { - transform: rotate(360deg); - } + 100% { + transform: rotate(360deg); + } } @keyframes dash { - 0% { - stroke-dasharray: 1, 150; - stroke-dashoffset: 0; - } - 50% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -35; - } - 100% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -124; - } + 0% { + stroke-dasharray: 1, var(--gap); + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 125, var(--gap); + /* stroke-dashoffset: -35; */ + } + 100% { + stroke-dasharray: 12, var(--gap); + /* stroke-dashoffset: -124; */ + } + /* The gap has no meaningful effect on the visualization */ } -/* @keyframes colors { - 0% { - stroke: rgb(0, 100, 50); - } - 25% { - stroke: rgb(0, 100, 50); - } - 26% { - stroke: rgb(50, 100, 45); - } - 50% { - stroke: rgb(50, 100, 45); - } - 51% { - stroke: rgb(100, 100, 30); - } - 75% { - stroke: rgb(100, 100, 30); - } - 76% { - stroke: rgb(190, 100, 37); - } - 100% { - stroke: rgb(190, 100, 37); - } -} */ \ No newline at end of file From 213846e55c52f86c806364f11533c572ca5bd008 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 27 Jan 2024 16:08:06 -0500 Subject: [PATCH 37/51] added button to reset spinner --- experimental/spinner.css | 7 +++---- experimental/spinner.html | 26 ++++++++++++++++++++++++++ 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/experimental/spinner.css b/experimental/spinner.css index f99a1f7..c4ff954 100644 --- a/experimental/spinner.css +++ b/experimental/spinner.css @@ -22,10 +22,9 @@ .spinner2 .path { stroke:rgb(80, 80, 80); stroke-linecap: round; - animation: dash 1.5s ease-in-out infinite; + animation: dash 1.5s ease-in-out 1; } - /* Define the gap variable */ :root { --gap: 20; @@ -42,11 +41,11 @@ stroke-dashoffset: 0; } 50% { - stroke-dasharray: 125, var(--gap); + stroke-dasharray: 150, var(--gap); /* stroke-dashoffset: -35; */ } 100% { - stroke-dasharray: 12, var(--gap); + stroke-dasharray: 180, var(--gap); /* stroke-dashoffset: -124; */ } /* The gap has no meaningful effect on the visualization */ diff --git a/experimental/spinner.html b/experimental/spinner.html index 121f232..c47f0ab 100644 --- a/experimental/spinner.html +++ b/experimental/spinner.html @@ -2,11 +2,37 @@ + + \ No newline at end of file From 381e8de0b3702fb016589732e18fa7f7369885d5 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 27 Jan 2024 16:24:12 -0500 Subject: [PATCH 38/51] added speed input field for playback speed --- experimental/spinner.html | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/experimental/spinner.html b/experimental/spinner.html index c47f0ab..d06bfc0 100644 --- a/experimental/spinner.html +++ b/experimental/spinner.html @@ -1,6 +1,13 @@ + Spinner + + + + + + @@ -56,6 +62,15 @@ - + + + + + + +

Current dashlength value:

+ + +

Current gaplength value:

\ No newline at end of file From ddb844ef2fe79392498b7d8be11c15e99af0825b Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sat, 27 Jan 2024 21:11:37 -0500 Subject: [PATCH 40/51] added checkmark --- experimental/spinner.css | 81 +++++++++++++++++++++++++++++++-------- experimental/spinner.html | 29 +++++++++++--- 2 files changed, 89 insertions(+), 21 deletions(-) diff --git a/experimental/spinner.css b/experimental/spinner.css index 964f95b..114d389 100644 --- a/experimental/spinner.css +++ b/experimental/spinner.css @@ -33,6 +33,7 @@ margin: -15px 0 0 -15px; width: 300px; height: 300px; + animation: rotate 2s linear infinite; } .static circle { @@ -41,10 +42,25 @@ cy: 150; r: 50; - stroke-dasharray: 17,20; + stroke-dasharray: 50, 250; /* spinning */ + + /* stroke-dasharray: 50, 0; uponCompletion */ + stroke: rgb(0, 0, 0); stroke-width: 4; stroke-linecap: round; + + /* animation: uponCompletion 1.5s linear 1;*/ +} + +#checkmark { + position: absolute; + top: 20%; + left: 20%; + + stroke-dasharray: 50; + stroke-dashoffset: 50; + animation: draw 2s forwards; } /* Define the gap variable */ @@ -53,21 +69,54 @@ } @keyframes rotate { - 100% { - transform: rotate(360deg); - } + 100% { + transform: rotate(360deg); + } +} + +@keyframes pulse { + 0% { + opacity: 0.25; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0.25; + } } + @keyframes dash { - 0% { - stroke-dasharray: 1, var(--gap); - stroke-dashoffset: 0; - } - 50% { - stroke-dasharray: 50, var(--gap); - /* stroke-dashoffset: -35; */ - } - 100% { - stroke-dasharray: 180, var(--gap); - /* stroke-dashoffset: -124; */ - } + 0% { + stroke-dasharray: 1, var(--gap); + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 50, var(--gap); + /* stroke-dashoffset: -35; */ + } + 100% { + stroke-dasharray: 180, var(--gap); + /* stroke-dashoffset: -124; */ + } } + +@keyframes uponCompletion { + 0% { + stroke-dasharray: 50, 250; + } + 50% { + stroke-dasharray: 50, 50; + stroke-dashoffset: -100; + } + 100% { + stroke-dasharray: 50, 0; + stroke-dashoffset: -200; + } +} + +@keyframes draw { + to { + stroke-dashoffset: 0; + } +} \ No newline at end of file diff --git a/experimental/spinner.html b/experimental/spinner.html index f88ec7a..d28272e 100644 --- a/experimental/spinner.html +++ b/experimental/spinner.html @@ -10,6 +10,10 @@ @@ -63,14 +74,22 @@ - - - +
+ + + + + + +
- +

Current dashlength value:

- +

Current gaplength value:

+ + + \ No newline at end of file From 37877218a568b81f3843fb2916ef1e0e6ee08144 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sun, 28 Jan 2024 11:46:34 -0500 Subject: [PATCH 41/51] added default values to the slider and added a disappear animation --- .DS_Store | Bin 6148 -> 6148 bytes experimental/spinner.css | 12 ++++++++++++ experimental/spinner.html | 7 ++++--- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/.DS_Store b/.DS_Store index 90577557a3d0ea3ddef4d1ed2038825b6e983c82..a5ac5d156d7ec995006d47e51778354975d5d172 100644 GIT binary patch delta 47 zcmZoMXffEZjD?AvbFu?lv@{22ynsY?wXuPzj)I|yMXioPwS}d*j)IAa`DQuRXF>oU CR}0tx delta 52 zcmZoMXffEZjD?khgM*u6@@keaSq@H4&UgWd>S}XS104lpON&|^g=$L!LmdSZ1Cz~i Htj~l1Mx6{~ diff --git a/experimental/spinner.css b/experimental/spinner.css index 114d389..21b8419 100644 --- a/experimental/spinner.css +++ b/experimental/spinner.css @@ -115,6 +115,18 @@ } } +@keyframes disappear { + 0% { + opacity: 1; + } + 80% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + @keyframes draw { to { stroke-dashoffset: 0; diff --git a/experimental/spinner.html b/experimental/spinner.html index d28272e..d4df6b5 100644 --- a/experimental/spinner.html +++ b/experimental/spinner.html @@ -60,7 +60,8 @@ completionButton.addEventListener('click', function() { var staticCircle = document.querySelector('.static circle'); staticCircle.style.strokeDasharray = "50, 0" - staticCircle.style.animation = "uponCompletion 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1"; + staticCircle.style.animation = "uponCompletion 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1, disappear 1.5s cubic-bezier(0,.68,.29,1) 1"; + staticCircle.style.opacity = "0"; }) }; @@ -83,10 +84,10 @@
- +

Current dashlength value:

- +

Current gaplength value:

From 1ea8b059179d28e47c72876f8ca3438d074ea0bb Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sun, 28 Jan 2024 12:26:21 -0500 Subject: [PATCH 42/51] moved cx cy and r values to circle element --- experimental/spinner.css | 4 ++-- experimental/spinner.html | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/experimental/spinner.css b/experimental/spinner.css index 21b8419..3c4a0be 100644 --- a/experimental/spinner.css +++ b/experimental/spinner.css @@ -38,9 +38,9 @@ .static circle { fill: transparent; - cx: 150; + /* cx: 150; cy: 150; - r: 50; + r: 50; */ stroke-dasharray: 50, 250; /* spinning */ diff --git a/experimental/spinner.html b/experimental/spinner.html index d4df6b5..e40a053 100644 --- a/experimental/spinner.html +++ b/experimental/spinner.html @@ -68,10 +68,10 @@ - - + + - +
From a84f3d2f375070f9fba331f40a65b7d118325e90 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sun, 28 Jan 2024 12:29:07 -0500 Subject: [PATCH 43/51] changed gaplength slider max to 300 --- experimental/spinner.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/experimental/spinner.html b/experimental/spinner.html index e40a053..dfc3616 100644 --- a/experimental/spinner.html +++ b/experimental/spinner.html @@ -87,7 +87,7 @@

Current dashlength value:

- +

Current gaplength value:

From f59d6c6b438c9c86e37872438b52f33060e05546 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sun, 28 Jan 2024 12:32:06 -0500 Subject: [PATCH 44/51] added css for mobile --- experimental/spinner.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/experimental/spinner.css b/experimental/spinner.css index 3c4a0be..481070c 100644 --- a/experimental/spinner.css +++ b/experimental/spinner.css @@ -7,6 +7,10 @@ animation: spin 1.5s linear infinite; } */ +body { + overscroll-behavior: none; +} + .spinner2 { /* animation: rotate 2s linear infinite; */ @@ -63,6 +67,10 @@ animation: draw 2s forwards; } +#gaplength { + touch-action: manipulation; +} + /* Define the gap variable */ :root { --gap: 100; From 06278ae1328e54ea631c0fb3180747d37468811b Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sun, 28 Jan 2024 12:48:49 -0500 Subject: [PATCH 45/51] changed div size to prevent overlap, this enables the gaplength slider to be used on mobile, and changed play button's functionality to affect the spinner i made. And removed the complete button. lines are commented out --- experimental/spinner.css | 12 ++++-------- experimental/spinner.html | 20 ++++++++++---------- 2 files changed, 14 insertions(+), 18 deletions(-) diff --git a/experimental/spinner.css b/experimental/spinner.css index 481070c..887959e 100644 --- a/experimental/spinner.css +++ b/experimental/spinner.css @@ -32,11 +32,11 @@ body { .static { z-index: 1; position: absolute; - top: 20%; - left: 20%; + top: 50%; + left: 50%; margin: -15px 0 0 -15px; - width: 300px; - height: 300px; + width: 110px; + height: 110px; animation: rotate 2s linear infinite; } @@ -67,10 +67,6 @@ body { animation: draw 2s forwards; } -#gaplength { - touch-action: manipulation; -} - /* Define the gap variable */ :root { --gap: 100; diff --git a/experimental/spinner.html b/experimental/spinner.html index dfc3616..4a22e7c 100644 --- a/experimental/spinner.html +++ b/experimental/spinner.html @@ -17,7 +17,7 @@ function restartAnimation(elementClass, toggleClass) { var element = document.querySelector(elementClass); var speed = document.querySelector('#speed').value; // Get the speed from the input - var animationString = 'dash ' + speed + 's ease-in-out 1'; // Use the correct @keyframes name here + var animationString = 'uponCompletion ' + speed + 's cubic-bezier(0.16, 1, 0.3, 1) 1, disappear 1.5s cubic-bezier(0,.68,.29,1) 1'; // Use the correct @keyframes name here var newElement = element.cloneNode(true); // Clone the element newElement.style.animation = animationString; // Apply the new animation settings @@ -32,7 +32,7 @@ var completionButton = document.querySelector('#Complete'); button.addEventListener('click', function() { - restartAnimation('.spinner2 .path', 'animate'); + restartAnimation('.static circle', 'animate'); }); dashlengthSlider.addEventListener('input', function() { @@ -57,12 +57,12 @@ gaplengthValue.textContent = 'Current gaplength value: ' + gaplength; }) - completionButton.addEventListener('click', function() { - var staticCircle = document.querySelector('.static circle'); - staticCircle.style.strokeDasharray = "50, 0" - staticCircle.style.animation = "uponCompletion 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1, disappear 1.5s cubic-bezier(0,.68,.29,1) 1"; - staticCircle.style.opacity = "0"; - }) + // completionButton.addEventListener('click', function() { + // var staticCircle = document.querySelector('.static circle'); + // staticCircle.style.strokeDasharray = "50, 0" + // staticCircle.style.animation = "uponCompletion 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1, disappear 1.5s cubic-bezier(0,.68,.29,1) 1"; + // staticCircle.style.opacity = "0"; + // }) }; @@ -80,7 +80,7 @@ - +
@@ -90,7 +90,7 @@

Current gaplength value:

- + \ No newline at end of file From 7bf13e937721f3011afd12b1fbf2367358605bb9 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sun, 28 Jan 2024 12:52:36 -0500 Subject: [PATCH 46/51] reordered elements and polished ux --- experimental/spinner.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/experimental/spinner.html b/experimental/spinner.html index 4a22e7c..072a231 100644 --- a/experimental/spinner.html +++ b/experimental/spinner.html @@ -72,23 +72,23 @@ - - -
- +
-

Current dashlength value:

+

Current dashlength value: 50

-

Current gaplength value:

+

Current gaplength value: 250

+ + + From 697d46a2c8645974f7d2eb7fb8f3b24547e15bd6 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sun, 28 Jan 2024 13:01:27 -0500 Subject: [PATCH 47/51] added header and attached the disappear speed to the input field value --- experimental/spinner.css | 9 ++++++++- experimental/spinner.html | 21 +++++++++++---------- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/experimental/spinner.css b/experimental/spinner.css index 887959e..a58f3de 100644 --- a/experimental/spinner.css +++ b/experimental/spinner.css @@ -11,6 +11,13 @@ body { overscroll-behavior: none; } +h3 { + font-weight: 500; + font-size: 1.2rem; + color: rgb(80, 80, 80); + margin: 20; + padding: 0; +} .spinner2 { /* animation: rotate 2s linear infinite; */ @@ -32,7 +39,7 @@ body { .static { z-index: 1; position: absolute; - top: 50%; + top: 60%; left: 50%; margin: -15px 0 0 -15px; width: 110px; diff --git a/experimental/spinner.html b/experimental/spinner.html index 072a231..0e2e3af 100644 --- a/experimental/spinner.html +++ b/experimental/spinner.html @@ -17,7 +17,7 @@ function restartAnimation(elementClass, toggleClass) { var element = document.querySelector(elementClass); var speed = document.querySelector('#speed').value; // Get the speed from the input - var animationString = 'uponCompletion ' + speed + 's cubic-bezier(0.16, 1, 0.3, 1) 1, disappear 1.5s cubic-bezier(0,.68,.29,1) 1'; // Use the correct @keyframes name here + var animationString = 'uponCompletion ' + speed + 's cubic-bezier(0.16, 1, 0.3, 1) 1, disappear '+ speed +'s cubic-bezier(0,.68,.29,1) 1'; // Use the correct @keyframes name here var newElement = element.cloneNode(true); // Clone the element newElement.style.animation = animationString; // Apply the new animation settings @@ -72,14 +72,7 @@ -
- - - - -
+

Custom Spinner Animation

Current dashlength value: 50

@@ -88,8 +81,16 @@

Current gaplength value: 250

- + +
+ + + + +
From 2c9182119255dfe64146d8424c422ed12dc42326 Mon Sep 17 00:00:00 2001 From: Kevin Chen Date: Sun, 28 Jan 2024 14:42:59 -0500 Subject: [PATCH 48/51] added reset button --- experimental/spinner.html | 53 +++++++++++++++++++++++++++++++-------- 1 file changed, 43 insertions(+), 10 deletions(-) diff --git a/experimental/spinner.html b/experimental/spinner.html index 0e2e3af..87cac93 100644 --- a/experimental/spinner.html +++ b/experimental/spinner.html @@ -14,27 +14,59 @@ //TODO: disable rotation with disable/enable rotation button //TODO: button that enables/disables pulse animation - function restartAnimation(elementClass, toggleClass) { + function playAnimation(elementClass) { + var element = document.querySelector(elementClass); + var speed = document.querySelector('#speed').value + element.style.strokeDasharray = "50, 0" + element.style.animation = 'uponCompletion ' + speed + 's cubic-bezier(0.16, 1, 0.3, 1) 1, disappear '+ speed +'s cubic-bezier(0,.68,.29,1) 1'; + element.style.opacity = "0"; + } + + function resetSpinner(elementClass) { + // var element = document.querySelector(elementClass); + // // var speed = document.querySelector('#speed').value; // Get the speed from the input + // // var animationString = 'uponCompletion ' + speed + 's cubic-bezier(0.16, 1, 0.3, 1) 1, disappear '+ speed +'s cubic-bezier(0,.68,.29,1) 1'; // Use the correct @keyframes name here + + // var newElement = element.cloneNode(true); // Clone the element + // // newElement.style.animation = animationString; // Apply the new animation settings + // element.style.animation = 'none'; + // element.style.opacity = "1"; + // element.style.strokeDasharray = "50, 250"; + + // element.parentNode.replaceChild(newElement, element); // Replace the old element with the clone + // newElement.classList.add(toggleClass); // Add the toggleClass if necessary + + + + //copilot var element = document.querySelector(elementClass); var speed = document.querySelector('#speed').value; // Get the speed from the input - var animationString = 'uponCompletion ' + speed + 's cubic-bezier(0.16, 1, 0.3, 1) 1, disappear '+ speed +'s cubic-bezier(0,.68,.29,1) 1'; // Use the correct @keyframes name here - var newElement = element.cloneNode(true); // Clone the element - newElement.style.animation = animationString; // Apply the new animation settings - element.parentNode.replaceChild(newElement, element); // Replace the old element with the clone - newElement.classList.add(toggleClass); // Add the toggleClass if necessary + element.style.animation = 'none'; // Reset the animation + element.style.opacity = "1"; // Reset the opacity + element.style.strokeDasharray = "50, 250"; // Reset the stroke dash array + + // Trigger a reflow to apply the style changes immediately + element.offsetHeight; + + // element.style.animation = 'none'; // Apply the animation settings } window.onload = function() { - var button = document.querySelector('button'); + var playButton = document.querySelector('.play'); + var resetButton = document.querySelector('.reset') var dashlengthSlider = document.querySelector('#dashlength'); var gaplengthSlider = document.querySelector('#gaplength'); var completionButton = document.querySelector('#Complete'); - button.addEventListener('click', function() { - restartAnimation('.static circle', 'animate'); + playButton.addEventListener('click', function() { + playAnimation('.static circle'); }); + resetButton.addEventListener('click', function() { + resetSpinner('.static circle'); + }) + dashlengthSlider.addEventListener('input', function() { var dashlength = document.querySelector('#dashlength').value; var staticCircle = document.querySelector('.static circle'); @@ -81,7 +113,8 @@

Custom Spinner Animation

Current gaplength value: 250

- + +

Custom Spinner Animation

- - -

Current dashlength value: 50

- - -

Current gaplength value: 250

- - - - +
+ + +

Current value: 50

+
+
+ + +

Current value: 250

+
+
+ + + + +
+
+ + +
+
+

Presets:

+ +

Custom Spinner Animation

-
- - -

Current value: 50

-
-
- - -

Current value: 250

-
-
- - - - -
-
- - -
-
-

Presets:

- -
+ + +

Current dashlength value: 50

+ + +

Current gaplength value: 250

+ + + +