Skip to content

Commit

Permalink
Merge pull request #9 from teogor/bug/grid-flow-order
Browse files Browse the repository at this point in the history 
Elements inside grid are shown in order
  • Loading branch information
@teogor
teogor authored May 16, 2022
2 parents 064c6bd + 17ac347 commit 580b497
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 82 deletions.
67 changes: 1 addition & 66 deletions skills.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ <h2 class="font-extrabold text-4xl py-1 xl:mx-110 2xl:mx-128 text-white cursorHo

<div class="flex justify-center">

<div class="grid grid-rows-8 gap-2 sm:grid-cols-2 sm:grid-rows-5 sm:mx-14 sm:mt-12 lg:grid-col-3 lg:grid-rows-3 lg:grid-flow-col lg:gap-5 lg:ml-20">
<div class="grid grid-rows-2 gap-2 sm:grid-cols-3 sm:grid-rows-2 sm:mx-14 sm:mt-12 lg:grid-col-3 lg:grid-rows-2 lg:grid-flow-row lg:gap-5 lg:ml-20">

<div class="p-8 ml-5 md:ml-0 space-y-2 mt-12 w-96 h-56 sm:mt-0 text-left transtion-all duration-300 ease-in-out hover:shadow-[0_10px_20px_0_rgba(0,0,0,0.315),0_6px_6px_0_rgba(0,0,0,0.205)] cursorHover"
x-intersect="$el.classList.add('fadeInUp')">
Expand Down Expand Up @@ -173,71 +173,6 @@ <h2 class="text-2xl py-5 text-white font-semibold leading-6">OOP</h2>
style="width: 20%"></span>
</div>
</div>

<div class="p-8 ml-5 md:ml-0 space-y-2 mt-12 w-96 h-56 sm:mt-0 text-left transtion-all duration-300 ease-in-out hover:shadow-[0_10px_20px_0_rgba(0,0,0,0.315),0_6px_6px_0_rgba(0,0,0,0.205)] cursorHover"
x-intersect="$el.classList.add('fadeInUp')">

<h2 class="text-2xl py-5 text-white font-semibold leading-6">Module Bundler</h2>
<p class="text-lg text-slate-200">Webpack</p>
<div class="w-full max-w-[185px] h-1.5 bg-slate-200 rounded-[3px] overflow-hidden"
style="margin-top: 2rem;">
<span
class="h-full block bg-[linear-gradient] bg-[length:300%_100%] animate-[progress-animation_2s_linear_infinite]"
style="width: 30%"></span>
</div>
</div>

<div class="p-8 ml-5 md:ml-0 space-y-2 mt-12 w-96 h-56 sm:mt-0 text-left transtion-all duration-300 ease-in-out hover:shadow-[0_10px_20px_0_rgba(0,0,0,0.315),0_6px_6px_0_rgba(0,0,0,0.205)] cursorHover"
x-intersect="$el.classList.add('fadeInUp')">

<h2 class="text-2xl py-5 text-white font-semibold leading-6">Database Languages</h2>
<p class="text-lg text-slate-200">PL-SQL, SQL</p>
<div class="w-full max-w-[185px] h-1.5 bg-slate-200 rounded-[3px] overflow-hidden"
style="margin-top: 2rem;">
<span
class="h-full block bg-[linear-gradient] bg-[length:300%_100%] animate-[progress-animation_2s_linear_infinite]"
style="width: 85%"></span>
</div>
</div>

<div class="p-8 ml-5 md:ml-0 space-y-2 mt-12 w-96 h-56 sm:mt-0 text-left transtion-all duration-300 ease-in-out hover:shadow-[0_10px_20px_0_rgba(0,0,0,0.315),0_6px_6px_0_rgba(0,0,0,0.205)] cursorHover"
x-intersect="$el.classList.add('fadeInUp')">

<h2 class="text-2xl py-5 text-white font-semibold leading-6">JavaScript Framework</h2>
<p class="text-lg text-slate-200">Angular</p>
<div class="w-full max-w-[185px] h-1.5 bg-slate-200 rounded-[3px] overflow-hidden"
style="margin-top: 2rem;">
<span
class="h-full block bg-[linear-gradient] bg-[length:300%_100%] animate-[progress-animation_2s_linear_infinite]"
style="width: 55%"></span>
</div>
</div>

<div class="p-8 ml-5 md:ml-0 space-y-2 mt-12 w-96 h-56 sm:mt-0 text-left transtion-all duration-300 ease-in-out hover:shadow-[0_10px_20px_0_rgba(0,0,0,0.315),0_6px_6px_0_rgba(0,0,0,0.205)] cursorHover"
x-intersect="$el.classList.add('fadeInUp')">

<h2 class="text-2xl py-5 text-white font-semibold leading-6">JavaScript Framework</h2>
<p class="text-lg text-slate-200">React JS</p>
<div class="w-full max-w-[185px] h-1.5 bg-slate-200 rounded-[3px] overflow-hidden"
style="margin-top: 2rem;">
<span
class="h-full block bg-[linear-gradient] bg-[length:300%_100%] animate-[progress-animation_2s_linear_infinite]"
style="width: 45%"></span>
</div>
</div>

<div class="p-8 ml-5 md:ml-0 space-y-2 mt-12 w-96 h-56 sm:mt-0 text-left transtion-all duration-300 ease-in-out hover:shadow-[0_10px_20px_0_rgba(0,0,0,0.315),0_6px_6px_0_rgba(0,0,0,0.205)] cursorHover"
x-intersect="$el.classList.add('fadeInUp')">

<h2 class="text-2xl py-5 text-white font-semibold leading-6">Web Application</h2>
<p class="text-lg text-slate-200">Java</p>
<div class="w-full max-w-[185px] h-1.5 bg-slate-200 rounded-[3px] overflow-hidden"
style="margin-top: 2rem;">
<span
class="h-full block bg-[linear-gradient] bg-[length:300%_100%] animate-[progress-animation_2s_linear_infinite]"
style="width: 35%"></span>
</div>
</div>
<div class="hidden lg:block w-96 h-96 ml-174 pointer-events-none absolute border-2 border-gray-600 rounded-full">
</div>
</div>
Expand Down
56 changes: 52 additions & 4 deletions styles/tailwindoutput.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -603,12 +603,24 @@ Ensure the default browser behavior of the `hidden` attribute.
.cursor-none {
cursor: none;
}
.grid-rows-6 {
grid-template-rows: repeat(6, minmax(0, 1fr));
.grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-rows-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid-rows-4 {
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid-rows-5 {
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid-rows-6 {
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
Expand Down Expand Up @@ -1049,16 +1061,32 @@ a {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sm\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sm\:grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}

.sm\:grid-rows-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
}

.sm\:grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}

.sm\:grid-rows-4 {
grid-template-rows: repeat(4, minmax(0, 1fr));
}

.sm\:grid-rows-5 {
grid-template-rows: repeat(5, minmax(0, 1fr));
}

.sm\:grid-rows-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
.sm\:grid-rows-6 {
grid-template-rows: repeat(6, minmax(0, 1fr));
}

.sm\:gap-8 {
Expand Down Expand Up @@ -1217,10 +1245,30 @@ a {
grid-auto-flow: column;
}

.lg\:grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}

.lg\:grid-rows-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
}

.lg\:grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}

.lg\:grid-rows-4 {
grid-template-rows: repeat(4, minmax(0, 1fr));
}

.lg\:grid-rows-5 {
grid-template-rows: repeat(5, minmax(0, 1fr));
}

.lg\:grid-rows-6 {
grid-template-rows: repeat(6, minmax(0, 1fr));
}

.lg\:gap-12 {
gap: 3rem;
}
Expand Down
24 changes: 12 additions & 12 deletions works.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ <h2 class="font-extrabold text-2xl py-5 xl:mx-80 2xl:mx-110 text-white md:text-4

<div class="flex justify-center">

<div class="grid grid-rows-3 gap-2 sm:mt-12 sm:grid-cols-2 sm:grid-rows-2 sm:gap-6 lg:grid-col-2 lg:grid-flow-col lg:gap-8">
<div class="grid grid-rows-3 gap-2 grid-flow-row sm:mt-12 sm:grid-flow-row sm:grid-cols-2 sm:grid-rows-2 sm:gap-6 lg:grid-col-2 lg:grid-flow-row lg:gap-8">

<a href="https://github.com/teogor/teogor.github.io" target="_blank">
<div class="py-8 px-6 sm:h-72 sm:px-10 md:px-8 h-[17rem] bg-purple-600 hover:bg-purple-700 border-transparent rounded-md shadow-md space-y-2 mt-5 ml-4 w-11/12 sm:ml-0 sm:w-80 sm:mt-0 md:h-72 lg:h-64 lg:w-[32rem] text-left relative transtion-all duration-300 ease-in-out top-0 hover:-top-1 hover:shadow-xl"
Expand All @@ -140,17 +140,6 @@ <h2 class="text-2xl py-5 text-white font-semibold leading-6">Personal Portfolio<
</div>
</a>

<a href="https://play.google.com/store/apps/details?id=com.wave.keyboard" target="_blank">
<div class="py-8 px-6 sm:h-72 sm:px-10 md:px-8 h-[17rem] bg-purple-600 hover:bg-purple-700 border-transparent rounded-md shadow-md space-y-2 mt-5 ml-4 w-11/12 sm:ml-0 sm:w-80 sm:mt-0 md:h-72 lg:h-64 lg:w-[32rem] text-left relative transtion-all duration-300 ease-in-out top-0 hover:-top-1 hover:shadow-xl"
x-intersect="$el.classList.add('fadeInUp')">

<h2 class="text-2xl py-5 text-white font-semibold leading-6">Wave Keyboard</h2>
<p class="text-lg text-slate-200 py-1">Free unique super fancy themes, cool fonts, emoticons and
custom skins.</p>
<p class="text-lg text-slate-200 py-1 lg:py-2 w-11/12">Written with Java</p>
</div>
</a>

<a href="https://play.google.com/store/apps/details?id=com.wave.livewallpaper" target="_blank">
<div class="py-8 px-6 sm:h-72 sm:px-10 md:px-8 h-[16rem] bg-purple-600 hover:bg-purple-700 border-transparent rounded-md shadow-md space-y-2 mt-5 ml-4 w-11/12 sm:ml-0 sm:w-80 sm:mt-0 md:h-72 lg:h-64 lg:w-[32rem] text-left relative transtion-all duration-300 ease-in-out top-0 hover:-top-1 hover:shadow-xl"
x-intersect="$el.classList.add('fadeInUp')">
Expand All @@ -162,6 +151,17 @@ <h2 class="text-2xl py-5 text-white font-semibold leading-6">Wave Live Wallpaper
</div>
</a>

<a href="https://play.google.com/store/apps/details?id=com.wave.keyboard" target="_blank">
<div class="py-8 px-6 sm:h-72 sm:px-10 md:px-8 h-[17rem] bg-purple-600 hover:bg-purple-700 border-transparent rounded-md shadow-md space-y-2 mt-5 ml-4 w-11/12 sm:ml-0 sm:w-80 sm:mt-0 md:h-72 lg:h-64 lg:w-[32rem] text-left relative transtion-all duration-300 ease-in-out top-0 hover:-top-1 hover:shadow-xl"
x-intersect="$el.classList.add('fadeInUp')">

<h2 class="text-2xl py-5 text-white font-semibold leading-6">Wave Keyboard</h2>
<p class="text-lg text-slate-200 py-1">Free unique super fancy themes, cool fonts, emoticons and
custom skins.</p>
<p class="text-lg text-slate-200 py-1 lg:py-2 w-11/12">Written with Java</p>
</div>
</a>

<div
class="hidden lg:block w-96 h-96 ml-162 -z-10 pointer-events-none absolute border-2 border-gray-600 rounded-full">
</div>
Expand Down

0 comments on commit 580b497

Please sign in to comment.