From 86ac8edec957eb27801279fb9907645c57210a6e Mon Sep 17 00:00:00 2001
From: WeronikaHS <weronika.hantulska_schlemmer@neuland-bfi.de>
Date: Thu, 6 Jun 2024 10:19:50 +0200
Subject: [PATCH] style examples, add button styles, add info background
---
src/components/ImgText.astro | 171 +++++++++++++++++++++++++++++----
src/components/Info.astro | 34 ++++---
src/components/MFExample.astro | 23 +++--
src/styles/global.css | 14 ++-
4 files changed, 199 insertions(+), 43 deletions(-)
diff --git a/src/components/ImgText.astro b/src/components/ImgText.astro
index 7e3afb4..26770f2 100644
--- a/src/components/ImgText.astro
+++ b/src/components/ImgText.astro
@@ -4,35 +4,27 @@ import TeamBoundaries from "./teamBoundaries.astro";
---
<div class="mb-8">
- <!--<h3
- class="font-bold text-text-heading text-2xl md:text-3xl pt-4 pb-2 overflow-hidden"
- <span
- class="
- bg-gradient-to-bl bg-no-repeat bg-bottom bg-[length:110%_60%]
- from-orange-300 to-orange-600 dark:from-primary-blue dark:to-primary-blue
- "
- >
- Placeholder
- </span>
- >-->
- <h3 class="font-bold text-text-heading text-2xl md:text-3xl pt-4 pb-1 mb-2 w-fit overflow-hidden" data-annotate="underline">
- Placeholder
- </h3>
-
<div class="md:flex items-center space-x-2">
<div class="lg:basis-1/4">
- <MFExample title="Module Federation with ..." lib1="images/lib.svg" lib2="images/lib.svg" lib3="images/lib.svg" integration="Single SPA" rendering="client & server rendering" />
+ <MFExample title="Module Federation..." lib1="images/lib.svg" lib2="images/lib.svg" lib3="images/lib.svg" integration="Single SPA" rendering="SSR" />
</div>
<div class="lg:basis-1/4">
- <MFExample title="Svelte Example" lib1="images/svelte.svg" lib2="images/svelte.svg" lib3="images/svelte.svg" integration="SSI" rendering="client rendering" />
+ <MFExample title="Svelte Example" lib1="images/svelte.svg" lib2="images/svelte.svg" lib3="images/svelte.svg" integration="SSI" rendering="CSR" />
</div>
<div class="lg:basis-1/4">
- <MFExample title="React & Vue Example" lib1="images/react.svg" lib2="images/react.svg" lib3="images/vue.svg" integration="Tailor" rendering="client & server rendering" />
+ <MFExample title="React & Vue Example" lib1="images/react.svg" lib2="images/react.svg" lib3="images/vue.svg" integration="Tailor" rendering="SSR" />
</div>
<div class="basis-1/4">
<p class="md:text-right md:pr-4">
Same verticalized micro frontends application with different tech stacks and integration techniques.
</p>
+ <button class="mt-2 mb-2 c_Button c_Button--secondary c_Button--size-normal">
+ <span class="c_Button__inner">CONTRIBUTE</span>
+ </button>
+ <button class="mb-2 c_Button c_Button--primary c_Button--size-normal">
+ <span class="c_Button__inner">SEE ALL EXAMPLES</span>
+ </button>
+
</div>
</div>
<div class="md:flex items-center mt-8">
@@ -46,3 +38,146 @@ import TeamBoundaries from "./teamBoundaries.astro";
</div>
</div>
</div>
+<style>
+ .c_Button--size-normal {
+ --button-height: 50px;
+ }
+
+ .c_Button--size-small {
+ --button-height: 40px;
+ }
+
+ .c_Button {
+ display: block;
+ height: var(--button-height);
+ width: 100%;
+ border-radius: calc(var(--button-height) / 2);
+ padding: 2px;
+ border: 0;
+ background: linear-gradient(180deg, rgb(168, 168, 168), rgb(255, 255, 255)),
+ var(--accent-color);
+ box-shadow:
+ 0 -2px 3px rgb(229, 229, 229),
+ 0 2px 3px 2px rgb(255, 255, 255),
+ 0 0 25px rgba(0, 0, 0, 0.05),
+ 0 -10px 5px rgb(255, 255, 255) inset;
+ position: relative;
+ text-transform: uppercase;
+ letter-spacing: 0.3em;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ text-decoration: none;
+ font-size: 16px;
+ }
+
+ .c_Button--primary {
+ --accent-color: #FF5A55;
+ color: #fff;
+ }
+
+ .c_Button--secondary {
+ --accent-color: #ffffff;
+ color: #000;
+ }
+
+ .c_Button--rounded.c_Button--size-normal {
+ @media (max-width: 499px) {
+ --button-height: 40px;
+ }
+ @media (min-width: 500px) {
+ --button-height: 66px;
+ }
+ width: var(--button-height);
+ }
+
+ .c_Button--rounded.c_Button--size-small {
+ --button-height: 40px;
+
+ width: var(--button-height);
+ }
+
+ .c_Button--rounded .c_Button__inner {
+ padding: 0;
+ }
+
+ @media (max-width: 499px) {
+ .c_Button--rounded svg {
+ width: 20px;
+ height: 20px;
+ }
+ }
+
+ .c_Button[disabled] {
+ --accent-color: #d3d3d3;
+ pointer-events: none;
+ }
+
+ .c_Button::before {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ border-radius: inherit;
+ left: 0;
+ background: linear-gradient(
+ 0deg,
+ rgba(0, 0, 0, 0.19),
+ rgba(255, 255, 255, 0.3)
+ ),
+ var(--accent-color);
+ content: "";
+ box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.1);
+ display: block;
+ transition:
+ transform 0.3s,
+ box-shadow 0.3s,
+ background 0.1s 0.2s;
+ }
+
+ .c_Button__inner {
+ position: relative;
+ padding-left: 20px;
+ padding-right: 20px;
+ background-color: var(--accent-color);
+ height: calc(var(--button-height) - 4px);
+ border-radius: inherit;
+ display: grid;
+ place-content: center;
+ transition:
+ transform 0.3s,
+ background 0.3s,
+ box-shadow 0.3s;
+ -webkit-user-select: none; /* Safari */
+ -ms-user-select: none; /* IE 10 and IE 11 */
+ user-select: none;
+ white-space: nowrap;
+ }
+
+ .c_Button:hover .c_Button__inner,
+ .c_Button:focus .c_Button__inner {
+ background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
+ var(--accent-color);
+ }
+
+ .c_Button:active::before {
+ background: linear-gradient(0deg, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.16)),
+ var(--accent-color);
+ box-shadow:
+ 0 0 3px rgba(0, 0, 0, 0.6) inset,
+ 0 2px 1px -1px rgba(0, 0, 0, 0.1);
+ transform: scale(0.97);
+ transition:
+ all 0.1s,
+ background 0.05s;
+ }
+
+ .c_Button:active .c_Button__inner {
+ transform: scale(0.97);
+ background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
+ var(--accent-color);
+ transition: all 0.1s;
+ box-shadow:
+ 0 5px 5px rgba(0, 0, 0, 0.2) inset,
+ 0 -3px 3px rgba(255, 255, 255, 0.2) inset;
+ }
+
+</style>
\ No newline at end of file
diff --git a/src/components/Info.astro b/src/components/Info.astro
index 9c50146..80531d5 100644
--- a/src/components/Info.astro
+++ b/src/components/Info.astro
@@ -1,24 +1,26 @@
---
---
-<section class="mb-8 md:flex">
- <div class="md:basis-1/2 relative">
- <img src="images/screen1.svg" typeof="foaf:Image" class="z-0 size-72" />
- <img src="images/screen2.svg" typeof="foaf:Image" class="absolute z-10 top-32 left-16 size-72" />
- <img src="images/screen3.svg" typeof="foaf:Image" class="absolute z-20 top-64 left-32 size-72" />
- </div>
- <div class="md:basis-1/2 pl-6">
- <h3 class="font-bold text-text-heading text-2xl md:text-3xl pt-4 pb-2 w-fit overflow-hidden">
- TodoMVC for Micro Frontends
- </h3>
- <div>
- <p class="mb-5">
- A micro frontends architecture can be built in many ways. Custom crafted and tailored to your organization's specific needs or by following the rules of a specific micro frontends meta-framework. The final result is also affected by the technologies you choose and whether you want to render your application on the server and/or client.
+<section class="mb-8 c-background">
+ <div class="max-w-4xl mx-auto px-6 sm:px-8 md:flex">
+ <div class="md:basis-1/2 relative">
+ <img src="images/screen1.svg" typeof="foaf:Image" class="absolute z-0 hover:z-30 size-72" />
+ <img src="images/screen2.svg" typeof="foaf:Image" class="absolute z-10 hover:z-30 top-32 left-16 size-72" />
+ <img src="images/screen3.svg" typeof="foaf:Image" class="absolute z-20 top-64 left-32 size-72" />
+ </div>
+ <div class="md:basis-1/2 pl-6">
+ <h3 class="font-bold text-text-heading text-2xl md:text-3xl pt-4 pb-2 w-fit overflow-hidden">
+ TodoMVC for Micro Frontends
+ </h3>
+ <div>
+ <p class="mb-5">
+ A micro frontends architecture can be built in many ways. Custom crafted and tailored to your organization's specific needs or by following the rules of a specific micro frontends meta-framework. The final result is also affected by the technologies you choose and whether you want to render your application on the server and/or client.
- Making good choices is not always easy. Being able to look at real-world code and examples helps everyone involved to get a good understanding of your decisions and their implications.
+ Making good choices is not always easy. Being able to look at real-world code and examples helps everyone involved to get a good understanding of your decisions and their implications.
- The Tractor Store aims to be to micro frontends what TodoMVC was to the advent of JavaScript Frameworks in the late 2000s: An awesome collection of different implementations for the same application. A valuable learning resource for people new to this topic and also a good basis for advanced discussions.
- </p>
+ The Tractor Store aims to be to micro frontends what TodoMVC was to the advent of JavaScript Frameworks in the late 2000s: An awesome collection of different implementations for the same application. A valuable learning resource for people new to this topic and also a good basis for advanced discussions.
+ </p>
+ </div>
</div>
</div>
</section>
diff --git a/src/components/MFExample.astro b/src/components/MFExample.astro
index 48970a7..7798d5e 100644
--- a/src/components/MFExample.astro
+++ b/src/components/MFExample.astro
@@ -7,26 +7,33 @@ const { lib2 } = Astro.props;
const { lib3 } = Astro.props;
---
-<section class="p-5 border border-slate-300 rounded-lg overflow-hidden">
+<section class="relative p-5 overflow-hidden shadow-inner c-border">
+ <div class="absolute py-1 transform rotate-45 text-center text-xs right-[-30px] top-[10px] w-[120px] drop-shadow-sm c-border z-20">
+ {rendering}
+ </div>
<p class="pb-3 font-bold text-xs">{title}</p>
- <div class="custom_shadow">
+ <div class="c-shadow">
<div class="flex h-28 pb-3 space-x-1">
- <div class="basis-1/3 p-3 border border-slate-300 rounded-lg bg-white drop-shadow-md">
+ <div class="basis-1/3 p-3 drop-shadow-md c-border">
<img src={lib1} typeof="foaf:Image" class="m-auto size-6" />
</div>
- <div class="basis-1/3 p-3 border border-slate-300 rounded-lg bg-white drop-shadow-md">
+ <div class="basis-1/3 p-3 drop-shadow-md c-border">
<img src={lib2} typeof="foaf:Image" class="m-auto size-6" />
</div>
- <div class="basis-1/3 p-3 border border-slate-300 rounded-lg bg-white drop-shadow-md">
+ <div class="basis-1/3 p-3 drop-shadow-md c-border">
<img src={lib3} typeof="foaf:Image" class="m-auto size-6" />
</div>
</div>
- <div class="p-1 border border-slate-300 rounded-lg text-center bg-white drop-shadow-md">{integration}</div>
- <!--<p class="p-1 border border-slate-300 rounded-lg text-center bg-white">{rendering}</p>-->
+ <div class="p-1 text-center drop-shadow-md c-border">{integration}</div>
</div>
</section>
<style>
- .custom_shadow {
+ .c-shadow {
filter: drop-shadow(0px 0px 30px rgba(255, 90, 85, 0.4));
}
+ .c-border {
+ border: 1px solid #EEEBE2;
+ border-radius: 0.5rem;
+ background: white;
+ }
</style>
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index b68d153..61fbc7e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -210,6 +210,9 @@
.animated-link.show:after {
transform: translateZ(0) scale(1);
}
+ /* ------ REUSABLE UTILS - END ------ */
+
+ /* ------ CUSTOM STYLES - START ------ */
.svg-light {
fill: rgba(0, 0, 0, 0.3);
@@ -230,9 +233,18 @@
.text-decide {
color: #54FF90;
}
+
.text-checkout {
color: #FFDE54;
}
- /* ------ REUSABLE UTILS - END ------ */
+ .c-background {
+ position: relative;
+ background-color: rgba(238, 235, 226, 0.35);
+ width: 100vw;
+ left: calc(-50vw + 50%);
+ padding: 0 15vw;
+ }
+
+ /* ------ CUSTOM STYLES - END ------ */
}
\ No newline at end of file