Skip to content

Commit

Permalink
Updates to card height for utilities and commands
Browse files Browse the repository at this point in the history
  • Loading branch information
@ehinrichs
ehinrichs committed Jan 14, 2025
1 parent ede7a40 commit 7e48961
Show file tree
Hide file tree
Showing 5 changed files with 123 additions and 81 deletions.
30 changes: 27 additions & 3 deletions docs/_site/assets/css/uikit_theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2226,8 +2226,7 @@ select.uk-form-width-xsmall {
.uk-card {
position: relative;
box-sizing: border-box;
transition: box-shadow .1s ease-in-out;
min-height: 350px; /* This controls the minimum height of cards */
transition: box-shadow .1s ease-in-out
}

.uk-card-body {
Expand Down Expand Up @@ -2300,7 +2299,8 @@ select.uk-form-width-xsmall {
.uk-card-default {
background: #fff;
color: #666;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08)
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
min-height: 350px; /* This controls the minimum height of cards */
}

.uk-card-default .uk-card-title {
Expand All @@ -2320,6 +2320,30 @@ select.uk-form-width-xsmall {
border-top: 1px solid #e5e5e5
}

.uk-card-command {
background: #fff;
color: #666;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
max-height: 200px; /* This controls the minimum height of cards */
}

.uk-card-command .uk-card-title {
color: #222
}

.uk-card-command.uk-card-hover:hover {
background-color: #fff;
box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16)
}

.uk-card-command .uk-card-header {
border-bottom: 1px solid #e5e5e5
}

.uk-card-command .uk-card-footer {
border-top: 1px solid #e5e5e5
}

.uk-card-primary {
background: #1e87f0;
color: #fff;
Expand Down
48 changes: 23 additions & 25 deletions docs/_site/pages/tutorial/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,8 @@ <h3 class="uk-card-title">Stratigraphic Hex to Tet Mesh Tutorial</h3>
</div>
<!-- End tutorial card -->

<!-- Begin Example cards - Order is controlled by height of the images and words. Default .uk-card card height is set at min-height of 350px in assets/uikit_theme.css -->
<!-- Begin Example cards - Order is controlled by height of the images and words. Default .uk-card-default card height is set at min-height of 350px -->
<!-- .uk-card-command card height is set at max-height of 200px and in assets/uikit_theme.css -->
<h1 class="uk-heading-line"><span>Examples</span></h1>
<!-- Types are tutorial, demo, utility, commands in order from most complex to simple -->

Expand Down Expand Up @@ -319,10 +320,7 @@ <h1 class="uk-heading-line"><span>Examples</span></h1>
<li data-color="utility">
<div>
<a href="https://meshing.lanl.gov/proj/examples/ex_quad_surface_prevent_crossing/index.html">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
<div class="uk-card-media-top">
<img style="max-height:200px;" src="https://meshing.lanl.gov/proj/examples/ex_quad_surface_prevent_crossing/03_output_modified_surface.png" alt="" />
</div>
<div class="uk-card uk-card-command uk-card-body uk-card-hover">
<p>Merge Intersecting Surfaces</p>
</div>
</a>
Expand All @@ -331,7 +329,7 @@ <h1 class="uk-heading-line"><span>Examples</span></h1>
<li data-color="utility">
<div>
<a href="/pages/docs/demos/extract_facesets.html">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
<div class="uk-card uk-card-command uk-card-body uk-card-hover">
<p> Extract Face and Node Sets <br /> with extract/surfmesh</p>
</div>
</a>
Expand All @@ -340,7 +338,7 @@ <h1 class="uk-heading-line"><span>Examples</span></h1>
<li data-color="utility">
<div>
<a href="/pages/tutorial/utility/convert_feet_to_meters.html">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
<div class="uk-card uk-card-command uk-card-body uk-card-hover">
<p>Convert <br /> Meters and Feet</p>
</div>
</a>
Expand All @@ -349,7 +347,7 @@ <h1 class="uk-heading-line"><span>Examples</span></h1>
<li data-color="utility">
<div>
<a href="/pages/tutorial/utility/reset_truncated_nodes_imt.html">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
<div class="uk-card uk-card-command uk-card-body uk-card-hover">
<p>Reset imt values <br /> for truncated mesh</p>
</div>
</a>
Expand All @@ -358,7 +356,7 @@ <h1 class="uk-heading-line"><span>Examples</span></h1>
<li data-color="utility">
<div>
<a href="/pages/tutorial/utility/cmo_addatt_vorvol.html">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
<div class="uk-card uk-card-command uk-card-body uk-card-hover">
<p>Voronoi node attribute </p>
</div>
</a>
Expand All @@ -367,82 +365,82 @@ <h1 class="uk-heading-line"><span>Examples</span></h1>
<!-- command cards alphabetical -->
<li data-color="command">
<a href="/pages/docs/demos/main_addmesh.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">addmesh</div>
<div class="uk-card uk-card-command uk-card-body">addmesh</div>
</a>
</li>
<li data-color="command">
<a href="/pages/docs/demos/main_2d_connect.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">connect 2D</div>
<div class="uk-card uk-card-command uk-card-body">connect 2D</div>
</a>
</li>
<li data-color="command">
<a href="/pages/docs/demos/description_connect.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">connect 3D</div>
<div class="uk-card uk-card-command uk-card-body">connect 3D</div>
</a>
</li>
<li data-color="command">
<a href="/pages/docs/demos/main_createpts.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">createpts</div>
<div class="uk-card uk-card-command uk-card-body">createpts</div>
</a>
</li>
<li data-color="command">
<a href="/pages/docs/demos/main_dump.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">dump</div>
<div class="uk-card uk-card-command uk-card-body">dump</div>
</a>
</li>
<li data-color="command">
<a href="/pages/docs/demos/description_hextet.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">grid2grid hextotet5</div>
<div class="uk-card uk-card-command uk-card-body">grid2grid hextotet5</div>
</a>
</li>
<li data-color="command">
<a href="/pages/docs/demos/main_rivara.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">negative_aij</div>
<div class="uk-card uk-card-command uk-card-body">negative_aij</div>
</a>
</li>
<li data-color="command">
<a href="/pages/docs/demos/main_pset.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">pset</div>
<div class="uk-card uk-card-command uk-card-body">pset</div>
</a>
</li>
<li data-color="command">
<a href="/pages/docs/demos/main_qual.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">quality</div>
<div class="uk-card uk-card-command uk-card-body">quality</div>
</a>
</li>
<li data-color="command">
<a href="/pages/docs/demos/main_2d_recon.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">recon 2D</div>
<div class="uk-card uk-card-command uk-card-body">recon 2D</div>
</a>
</li>
<li data-color="command">
<a href="/pages/docs/demos/main_regnpts.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">regnpts</div>
<div class="uk-card uk-card-command uk-card-body">regnpts</div>
</a>
</li>
<li data-color="command">
<a href="/pages/docs/demos/main_rmmat.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">rmmat</div>
<div class="uk-card uk-card-command uk-card-body">rmmat</div>
</a>
</li>
<li data-color="command">
<a href="/pages/docs/demos/description_rotatept.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">rotatept</div>
<div class="uk-card uk-card-command uk-card-body">rotatept</div>
</a>
</li>
<li data-color="command">
<a href="/pages/docs/demos/main_sort.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">sort</div>
<div class="uk-card uk-card-command uk-card-body">sort</div>
</a>
</li>
<li data-color="command">
<a href="/pages/docs/demos/main_trans.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">trans</div>
<div class="uk-card uk-card-command uk-card-body">trans</div>
</a>
</li>
<li data-color="command">
<a href="/pages/docs/demos/main_tri.html" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">triangulate</div>
<div class="uk-card uk-card-command uk-card-body">triangulate</div>
</a>
</li>
</ul>
Expand Down
48 changes: 23 additions & 25 deletions docs/_site/pages/tutorial/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@
</div>
<!-- End tutorial card -->

<!-- Begin Example cards - Order is controlled by height of the images and words. Default .uk-card card height is set at min-height of 350px in assets/uikit_theme.css -->
<!-- Begin Example cards - Order is controlled by height of the images and words. Default .uk-card-default card height is set at min-height of 350px -->
<!-- .uk-card-command card height is set at max-height of 200px and in assets/uikit_theme.css -->
<h1 class="uk-heading-line"><span>Examples</span></h1>
<!-- Types are tutorial, demo, utility, commands in order from most complex to simple -->

Expand Down Expand Up @@ -211,10 +212,7 @@ Select All, or by one of the categories:
<li data-color="utility">
<div>
<a href="https://meshing.lanl.gov/proj/examples/ex_quad_surface_prevent_crossing/index.html">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
<div class="uk-card-media-top">
<img style="max-height:200px;" src="https://meshing.lanl.gov/proj/examples/ex_quad_surface_prevent_crossing/03_output_modified_surface.png" alt="">
</div>
<div class="uk-card uk-card-command uk-card-body uk-card-hover">
<p>Merge Intersecting Surfaces</p>
</div>
</a>
Expand All @@ -223,7 +221,7 @@ Select All, or by one of the categories:
<li data-color="utility">
<div>
<a href="{{ "/pages/docs/demos/extract_facesets.html" | relative_url }}">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
<div class="uk-card uk-card-command uk-card-body uk-card-hover">
<p> Extract Face and Node Sets <br> with extract/surfmesh</p>
</div>
</a>
Expand All @@ -232,7 +230,7 @@ Select All, or by one of the categories:
<li data-color="utility">
<div>
<a href="{{ "/pages/tutorial/utility/convert_feet_to_meters.html" | relative_url }}">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
<div class="uk-card uk-card-command uk-card-body uk-card-hover">
<p>Convert <br> Meters and Feet</p>
</div>
</a>
Expand All @@ -241,7 +239,7 @@ Select All, or by one of the categories:
<li data-color="utility">
<div>
<a href="{{ "/pages/tutorial/utility/reset_truncated_nodes_imt.html" | relative_url }}">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
<div class="uk-card uk-card-command uk-card-body uk-card-hover">
<p>Reset imt values <br> for truncated mesh</p>
</div>
</a>
Expand All @@ -250,7 +248,7 @@ Select All, or by one of the categories:
<li data-color="utility">
<div>
<a href="{{ "/pages/tutorial/utility/cmo_addatt_vorvol.html" | relative_url }}">
<div class="uk-card uk-card-default uk-card-body uk-card-hover">
<div class="uk-card uk-card-command uk-card-body uk-card-hover">
<p>Voronoi node attribute </p>
</div>
</a>
Expand All @@ -259,82 +257,82 @@ Select All, or by one of the categories:
<!-- command cards alphabetical -->
<li data-color="command">
<a href="{{ "/pages/docs/demos/main_addmesh.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">addmesh</div>
<div class="uk-card uk-card-command uk-card-body">addmesh</div>
</a>
</li>
<li data-color="command">
<a href="{{ "/pages/docs/demos/main_2d_connect.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">connect 2D</div>
<div class="uk-card uk-card-command uk-card-body">connect 2D</div>
</a>
</li>
<li data-color="command">
<a href="{{ "/pages/docs/demos/description_connect.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">connect 3D</div>
<div class="uk-card uk-card-command uk-card-body">connect 3D</div>
</a>
</li>
<li data-color="command">
<a href="{{ "/pages/docs/demos/main_createpts.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">createpts</div>
<div class="uk-card uk-card-command uk-card-body">createpts</div>
</a>
</li>
<li data-color="command">
<a href="{{ "/pages/docs/demos/main_dump.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">dump</div>
<div class="uk-card uk-card-command uk-card-body">dump</div>
</a>
</li>
<li data-color="command">
<a href="{{ "/pages/docs/demos/description_hextet.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">grid2grid hextotet5</div>
<div class="uk-card uk-card-command uk-card-body">grid2grid hextotet5</div>
</a>
</li>
<li data-color="command">
<a href="{{ "/pages/docs/demos/main_rivara.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">negative_aij</div>
<div class="uk-card uk-card-command uk-card-body">negative_aij</div>
</a>
</li>
<li data-color="command">
<a href="{{ "/pages/docs/demos/main_pset.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">pset</div>
<div class="uk-card uk-card-command uk-card-body">pset</div>
</a>
</li>
<li data-color="command">
<a href="{{ "/pages/docs/demos/main_qual.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">quality</div>
<div class="uk-card uk-card-command uk-card-body">quality</div>
</a>
</li>
<li data-color="command">
<a href="{{ "/pages/docs/demos/main_2d_recon.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">recon 2D</div>
<div class="uk-card uk-card-command uk-card-body">recon 2D</div>
</a>
</li>
<li data-color="command">
<a href="{{ "/pages/docs/demos/main_regnpts.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">regnpts</div>
<div class="uk-card uk-card-command uk-card-body">regnpts</div>
</a>
</li>
<li data-color="command">
<a href="{{ "/pages/docs/demos/main_rmmat.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">rmmat</div>
<div class="uk-card uk-card-command uk-card-body">rmmat</div>
</a>
</li>
<li data-color="command">
<a href="{{ "/pages/docs/demos/description_rotatept.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">rotatept</div>
<div class="uk-card uk-card-command uk-card-body">rotatept</div>
</a>
</li>
<li data-color="command">
<a href="{{ "/pages/docs/demos/main_sort.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">sort</div>
<div class="uk-card uk-card-command uk-card-body">sort</div>
</a>
</li>
<li data-color="command">
<a href="{{ "/pages/docs/demos/main_trans.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">trans</div>
<div class="uk-card uk-card-command uk-card-body">trans</div>
</a>
</li>
<li data-color="command">
<a href="{{ "/pages/docs/demos/main_tri.html" | relative_url }}" style="font-weight: bold;">
<div class="uk-card uk-card-default uk-card-body">triangulate</div>
<div class="uk-card uk-card-command uk-card-body">triangulate</div>
</a>
</li>
</ul>
Expand Down
Loading

0 comments on commit 7e48961

Please sign in to comment.