Skip to content

Commit

Permalink
updating features and some styles
Browse files Browse the repository at this point in the history
  • Loading branch information
alex-rakowski committed Oct 3, 2023
1 parent be633a0 commit 1f2c66f
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 20 deletions.
146 changes: 127 additions & 19 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -64,33 +64,43 @@
</script>


<section class="hidden">
<h1 class="hero" font-size="3em">py4DSTEM</h1>
<p>Some text here and there asdpasd asd laksnd klmwelkqwe klqwe nklamd aklsmd laskdm aslkdm aslkd malkd</p>
<section class="hidden first">
<h1 class="intro_header first" font-size="3em">py4DSTEM</h1>
<p class="intro_paragraph first"><strong>py4DSTEM</strong> is an open source set of python tools for processing and analysis of four-dimensional scanning transmission electron microscopy (4D-STEM) data. </p>
<img class="hero"
src="./images/py4DSTEM_logo_54_export.png"
/>
</section>
<!-- <div class="wave-spacer wave1"></div> -->

<section class="hidden first">
<h2>hidden top</h2>
<p>some more text about something maybe or maybe not.</p>
<h2 class="intro_header">Intro to 4D-STEM</h2>
<p class="intro_paragraph">4D-STEM is a fast and powerful electron microscopy technique that captures a full 2D diffraction pattern at each pixel position in a STEM map. This creates a 4D data cube that can be used to study a wide range of materials properties, including crystal structure, strain, defect dynamics, and electronic structure.

<p class="intro_paragraph">4D-STEM is still in its early stages of development, but it is rapidly being adopted by researchers in a variety of fields. It is expected to play a major role in the advancement of our understanding of materials and their properties at the nanoscale.</p>
<p class="intro_paragraph"> .... image is a place holder for colin's 4D-STEM gif .</p>
<img class="hero"
src="./images/waveprop_test_04.gif"
/>

</section>

<!-- </section>
<div class="wave-spacer wave2"></div>
<!-- <div class="wave-spacer wave2"></div>
<div class="hero">
<img class="hero" src="./images/waveprop_test_04.gif" />
</div>
<div class="wave-spacer wave9"></div> -->
<div class="wave-spacer wave9"></div> -->
<!-- </section> -->


<!-- Features -->
<section class="hidden card-list">
<h1 style="font-size: 3em;">Features</h1>
<div class="features">
<!-- Disk Detection -->
<article class="card">
<header class="card-header">
<a href="./site/New_Test/new_index_test.html"><h2>Strain Mapping</h2></a>
<a href="./site/New_Test/new_index_test.html"><h2>Disk Detection</h2></a>
<p>Some paragrah text that isn't too long but still takes up room </p>
</header>
<img
Expand All @@ -101,6 +111,7 @@ <h1 style="font-size: 3em;">Features</h1>
<a href="#">dev</a>
</div>
</article>
<!-- strain mapping -->
<article class="card">
<header class="card-header">
<a href="./site/New_Test/new_index_test.html"><h2>Strain Mapping</h2></a>
Expand All @@ -114,9 +125,41 @@ <h1 style="font-size: 3em;">Features</h1>
<a href="#">dev</a>
</div>
</article>

<!-- Bloch Wave Simulations -->
<article class="card">
<header class="card-header">
<a href="./site/New_Test/new_index_test.html"><h2>Bloch Wave Diffraction Simulations</h2></a>
<p>Some paragrah text that isn't too long but still takes up room </p>
</header>
<img
src="./images/4D-STEM_paper_Figure.png"
alt="strain mapping" />
<div class="tags">
<a href="#">main</a>
<a href="#">dev</a>
</div>
</article>

<!-- I/O -->
<article class="card">
<header class="card-header">
<a href="./site/New_Test/new_index_test.html"><h2>I/O</h2></a>
<p>Some paragrah text that isn't too long but still takes up room </p>
</header>
<img
src="./images/4D-STEM_paper_Figure.png"
alt="strain mapping" />
<div class="tags">
<a href="#">main</a>
<a href="#">dev</a>
</div>
</article>

<!-- Orientation Mapping -->
<article class="card">
<header class="card-header">
<h2><a href="./site/New_Test/new_index_test.html">Bragg Disk Detection Mapping</a></h2>
<a href="./site/New_Test/new_index_test.html"><h2>Orientation Mapping</h2></a>
<p>Some paragrah text that isn't too long but still takes up room </p>
</header>
<img
Expand All @@ -127,9 +170,71 @@ <h2><a href="./site/New_Test/new_index_test.html">Bragg Disk Detection Mapping</
<a href="#">dev</a>
</div>
</article>

<!-- Flowlines -->
<article class="card">
<header class="card-header">
<h2><a href="./site/New_Test/new_index_test.html">Strain Mapping</a></h2>
<a href="./site/New_Test/new_index_test.html"><h2>Flowlines</h2></a>
<p>Some paragrah text that isn't too long but still takes up room </p>
</header>
<img
src="./images/4D-STEM_paper_Figure.png"
alt="strain mapping" />
<div class="tags">
<a href="#">main</a>
<a href="#">dev</a>
</div>
</article>

<!-- ptychography -->
<article class="card">
<header class="card-header">
<a href="./site/New_Test/new_index_test.html"><h2>Ptychography</h2></a>
<p>Some paragrah text that isn't too long but still takes up room </p>
</header>
<img
src="./images/4D-STEM_paper_Figure.png"
alt="strain mapping" />
<div class="tags">
<a href="#">main</a>
<a href="#">dev</a>
</div>
</article>

<!-- Vritual Imaging -->
<article class="card">
<header class="card-header">
<a href="./site/New_Test/new_index_test.html"><h2>Virtual Imaging</h2></a>
<p>Some paragrah text that isn't too long but still takes up room </p>
</header>
<img
src="./images/4D-STEM_paper_Figure.png"
alt="strain mapping" />
<div class="tags">
<a href="#">main</a>
<a href="#">dev</a>
</div>
</article>

<!-- Amorphous -->
<article class="card">
<header class="card-header">
<a href="./site/New_Test/new_index_test.html"><h2>Amorphous</h2></a>
<p>Some paragrah text that isn't too long but still takes up room </p>
</header>
<img
src="./images/4D-STEM_paper_Figure.png"
alt="strain mapping" />
<div class="tags">
<a href="#">main</a>
<a href="#">dev</a>
</div>
</article>

<!-- GUI -->
<article class="card">
<header class="card-header">
<a href="./site/New_Test/new_index_test.html"><h2>GUI data 4D Browser</h2></a>
<p>Some paragrah text that isn't too long but still takes up room </p>
</header>
<img
Expand All @@ -144,11 +249,11 @@ <h2><a href="./site/New_Test/new_index_test.html">Strain Mapping</a></h2>
</div>
</section>

<div class="spacer layer1"></div>
<div class="spacer layer2"></div>
<!-- <div class="spacer layer1"></div>
<div class="spacer layer2"></div> -->

<!-- Papers -->
<section class="hidden card-list">
<section class="hidden first card-list">
<h1 style="font-size: 3em;">Papers</h1>
<div class="features">

Expand Down Expand Up @@ -197,8 +302,8 @@ <h2>4D-STEM but a much longer title: think this is supposed to looked like a pap
</div>
</div>
<div class="tags">
<a href="#">main</a>
<a href="#">dev</a>
<a href="#">pytcho</a>
<a href="#">strain</a>
</div>
</article>
<article class="card paper">
Expand Down Expand Up @@ -259,11 +364,14 @@ <h2>4D-STEM</h2>
</div>
</section>


<section class="hidden install">
<!-- Install instructions -->
<section class="hidden install first">
<h1>Installation Instructions</h1>
<p> Available as pip and conda packages and can be easily installed</p>
<code>
pip install py4DSTEM
pip install py4dstem
or
conda install py4dstem
</code>
</section>
<!-- <section class="hidden">
Expand Down
Empty file.
19 changes: 18 additions & 1 deletion site/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,22 @@ canvas{
top: 0;
transform: rotate(180deg);
}
.intro_paragraph {
width: 50vw
}

.intro_header {
background: linear-gradient(90deg,#ff8a00, #e52e71 20%, #2e49e5);
text-shadow: none;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
font-size: 5em;
}

h2.intro_header {
font-size: 3em;
}
a, a:link, a:visited {
color: inherit;
text-decoration: none;
Expand All @@ -54,7 +69,7 @@ iframe {
img.hero {
border-radius: 60px;
width: auto;
max-height: 40vw;
max-height: 30vw;
display: block;
}
h1.hero {
Expand Down Expand Up @@ -144,6 +159,8 @@ h1.hero {
margin-left: -130px;
}



.card-author {
margin: auto 0 0;
display: grid;
Expand Down

0 comments on commit 1f2c66f

Please sign in to comment.