Skip to content

Commit

Permalink
correct sizing
Browse files Browse the repository at this point in the history
Fabricius Seifert committed Jun 6, 2024
1 parent eed2923 commit b825c6b
Showing 3 changed files with 132 additions and 64 deletions.
123 changes: 78 additions & 45 deletions src/components/ImgText.astro
Original file line number Diff line number Diff line change
@@ -4,27 +4,63 @@ import TeamBoundaries from "./teamBoundaries.astro";
---

<div class="mb-8">
<div class="md:flex items-center space-x-2">
<div class="lg:basis-1/4">
<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="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="SSR" />
</div>
<div class="basis-1/4">
<!--<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="examples">
<MFExample
title="Module Federation with ..."
lib1="images/lib.svg"
lib2="images/lib.svg"
lib3="images/lib.svg"
integration="Single SPA"
rendering="SSR"
/>

<MFExample
title="Svelte Example"
lib1="images/svelte.svg"
lib2="images/svelte.svg"
lib3="images/svelte.svg"
integration="SSI"
rendering="CSR"
/>

<MFExample
title="React & Vue Example"
lib1="images/react.svg"
lib2="images/react.svg"
lib3="images/vue.svg"
integration="Tailor"
rendering="SSR"
/><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.
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">
<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">
@@ -33,11 +69,13 @@ import TeamBoundaries from "./teamBoundaries.astro";
</div>
<div class="basis-1/4 md:pl-4 pt-4">
<p>
E-Commerce project with boundaries for three teams and use-cases for routing, integration and communication.
E-Commerce project with boundaries for three teams and use-cases for
routing, integration and communication.
</p>
</div>
</div>
</div>

<style>
.c_Button--size-normal {
--button-height: 50px;
@@ -55,12 +93,9 @@ import TeamBoundaries from "./teamBoundaries.astro";
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;
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;
@@ -70,7 +105,7 @@ import TeamBoundaries from "./teamBoundaries.astro";
}

.c_Button--primary {
--accent-color: #FF5A55;
--accent-color: #ff5a55;
color: #fff;
}

@@ -122,15 +157,12 @@ import TeamBoundaries from "./teamBoundaries.astro";
0deg,
rgba(0, 0, 0, 0.19),
rgba(255, 255, 255, 0.3)
),
var(--accent-color);
),
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;
transition: transform 0.3s, box-shadow 0.3s, background 0.1s 0.2s;
}

.c_Button__inner {
@@ -142,10 +174,7 @@ import TeamBoundaries from "./teamBoundaries.astro";
border-radius: inherit;
display: grid;
place-content: center;
transition:
transform 0.3s,
background 0.3s,
box-shadow 0.3s;
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;
@@ -155,29 +184,33 @@ import TeamBoundaries from "./teamBoundaries.astro";
.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);
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);
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;
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);
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;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2) inset,
0 -3px 3px rgba(255, 255, 255, 0.2) inset;
}
</style>

</style>
<style>
.examples {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 300px;
gap: 1rem;
}
</style>
71 changes: 53 additions & 18 deletions src/components/MFExample.astro
Original file line number Diff line number Diff line change
@@ -7,34 +7,69 @@ const { lib2 } = Astro.props;
const { lib3 } = Astro.props;
---

<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">
<section class="mfexample">
<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="c-shadow">
<div class="flex h-28 pb-3 space-x-1">
<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 drop-shadow-md c-border">
<img src={lib2} typeof="foaf:Image" class="m-auto size-6" />
</div>
<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 class="elements shadow">
<div class="element">
<img src={lib1} typeof="foaf:Image" class="m-auto size-6" />
</div>
<div class="element">
<img src={lib2} typeof="foaf:Image" class="m-auto size-6" />
</div>
<div class="element">
<img src={lib3} typeof="foaf:Image" class="m-auto size-6" />
</div>
<div class="element integration">
{integration}
</div>
<div class="p-1 text-center text-xs drop-shadow-md c-border">{integration}</div>
</div>
</section>

<style>
.c-shadow {
filter: drop-shadow(0px 0px 30px rgba(255, 90, 85, 0.4));
.mfexample {
border: 1px solid #ebeee2;
padding: 1.5rem;
display: grid;
grid-template-rows: auto 1fr;
border-radius: 24px;
overflow: hidden;
}
.elements {
display: grid;
gap: 0.5rem;
grid-template:
"microfrontend microfrontend microfrontend" 1fr
"integration integration integration" 40px / 1fr 1fr 1fr;
}

.element {
background-color: white;
border: 1px solid #ebeee2;
border-radius: 10px;
display: grid;
place-content: center;
}

.element.integration {
grid-column: span 3;
}

.shadow {
filter: drop-shadow(-3px -3px 3px rgba(255, 255, 255, 0.4))
drop-shadow(1px 2px 2px #edcdcd) drop-shadow(2px 4px 2px #edcdcd)
drop-shadow(0px 4px 40px rgba(255, 90, 85, 0.3));
transform: translateZ(0);
}
.c-border {
border: 1px solid #EEEBE2;
border: 1px solid #eeebe2;
border-radius: 0.5rem;
background: white;
}
</style>
</style>
2 changes: 1 addition & 1 deletion src/layouts/PageLayout.astro
Original file line number Diff line number Diff line change
@@ -28,7 +28,7 @@ import Footer from "../components/Footer.astro";
<FontAwesome />
</head>

<body class="max-w-4xl mx-auto min-h-screen px-6 sm:px-8">
<body class="max-w-7xl mx-auto min-h-screen px-6 sm:px-8">
<Header />
<main id="main">
<slot name="main" />

0 comments on commit b825c6b

Please sign in to comment.