Skip to content

Commit

Permalink
more work on index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@kfahn22
kfahn22 committed Oct 15, 2024
1 parent c3ef3bc commit acb9cb2
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 78 deletions.
Binary file added docs/assets/bk1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 6 additions & 47 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,84 +15,43 @@

<body>
<header id="index">
<h1>L-system Digital Pattern Creator Instructions</h1>
<nav id="myNavBar">
<!-- <div class="topNav">
<a href="https://kfahn22.github.io/l-system-playground/" id="design">Design Your Own Pattern</a>
<a href="" id="links">GitHub Repo</a>
<a href="https://kfahn22.github.io/l-system-examples/" id="links">See Examples</a>
<a href="./RULE-SETS/rule-sets.md" id="links">Learn More about L-system Rules</a>
<a href="./POLAR-SHAPES/polar-shapes.md" id="links">Learn More about Polar Shapes</a>
<a href="https://kfahn22.github.io/shape_playground/" id="polar-shapes">Experiment with Polar Shapes</a>
</div> -->
</nav>
<h1>L-system Digital Pattern Creator</h1>
</header>
<div>
<p>
<h2>Experiment with the Code</h2>
<a href="https://kfahn22.github.io/l-system-playground/"> <img class="img" src="./assets/lsys.jpg" alt="ADH231a Rule-set" style="margin-left:auto;margin-right:auto" width="1200" /><br /><sub><b><br/>Design Your Own Pattern</b></sub></a>
<a href="https://kfahn22.github.io/l-system-playground/"> <img class="img" src="./assets/lsys.jpg" alt="ADH231a Rule-set" /><br /><sub><b><br/>Design Your Own Pattern</b></sub></a>
</p>
</div>
<div>
<p>
<h2>Learn how the polar curve changes when the parameters are adjusted</h2>
<a href="https://kfahn22.github.io/shape_playground/"> <img class="img" src="./assets/shape-ui.jpg" alt="Experiment with polar-shapes" style="vertical-align:top;" width="600" /><br /><sub><b><br/>Experiment with polar shapes</b></sub></a>
<a href="https://kfahn22.github.io/shape_playground/"> <img class="img" src="./assets/shape-ui.jpg" alt="Experiment with polar-shapes" /><br /><sub><b><br/>Experiment with polar shapes</b></sub></a>
</p>
</div>
<div>
<p>
<h2>See What Is Possible</h2>
<a href="https://kfahn22.github.io/l-system-examples/"> <img class="img" src="./assets/examples.jpg" alt="ADH231a Rule-set" style="vertical-align:top;" width="600" /><br /><sub><b><br/>See Examples</b></sub></a>
<a href="https://kfahn22.github.io/l-system-examples/"> <img class="img" src="./assets/examples.jpg" alt="ADH231a Rule-set" /><br /><sub><b><br/>See Examples</b></sub></a>
</p>
</div>
<div>
<p>
<h2>Learn More</h2>
<p>
<h3>Learn More about Rule-sets</h3>
<a href="./RULE-SETS/rule-sets.md"> <img class="img" src="./assets/rulesets.jpg" alt="Learn More About L-system rules" style="vertical-align:top;" width="600" /><br /><sub><b><br/>Learn More About L-system rules</b></sub></a>
<a href="./RULE-SETS/rule-sets.md"> <img class="img" src="./assets/rulesets.jpg" alt="Learn More About L-system rules" /><br /><sub><b><br/>Learn More About L-system rules</b></sub></a>
</p>
<p>
<h3>Learn More about Polar Curves</h3>
<a href="./POLAR-SHAPES/polar-shapes.md"> <img class="img" src="./assets/shapes.jpg" alt="Learn More About Polar Shapes" style="vertical-align:top;" width="600" /><br /><sub><b><br/>Learn More About Polar Shapes</b></sub></a>
<a href="./POLAR-SHAPES/polar-shapes.md"> <img class="img" src="./assets/shapes.jpg" alt="Learn More About Polar Shapes" /><br /><sub><b><br/>Learn More About Polar Shapes</b></sub></a>
</p>

</p>
</div>


<!-- IMAGE-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- <table>
<tbody>
<tr>
<td align="center"><a href="https://kfahn22.github.io/l-system-playground/"> <img class="img" src="./assets/lsys.jpg" alt="ADH231a Rule-set" style="vertical-align:top;" width="1200" /><br /><sub><b><br/>Design Your Own Pattern</b></sub></a></td>
</tr>
<tr>
<td align="center"><a href="https://kfahn22.github.io/l-system-examples/"> <img class="img" src="./assets/examples.jpg" alt="ADH231a Rule-set" style="vertical-align:top;" width="600" /><br /><sub><b><br/>See Examples</b></sub></a></td>
<td align="center"><a href="https://kfahn22.github.io/shape_playground/"> <img class="img" src="./assets/shape-ui.jpg" alt="Experiment with polar-shapes" style="vertical-align:top;" width="600" /><br /><sub><b><br/>Experiment with polar shapes</b></sub></a></td>
</tr>
<tr>
<td align="center"><a href="./RULE-SETS/rule-sets.md"> <img class="img" src="./assets/rulesets.jpg" alt="Learn More About L-system rules" style="vertical-align:top;" width="600" /><br /><sub><b><br/>Learn More About L-system rules</b></sub></a></td>
<td align="center"><a href="./POLAR-SHAPES/polar-shapes.md"> <img class="img" src="./assets/shapes.jpg" alt="Learn More About Polar Shapes" style="vertical-align:top;" width="600" /><br /><sub><b><br/>Learn More About Polar Shapes</b></sub></a></td>
</tr> -->

<!-- </tbody>
</table> -->

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- IMAGE-LIST:END -->
<!-- <div id="bella">
<img align="center" src="assets/bella.png" alt="Bella" width="300" height="300"
style="border:5px solid black">
</div> -->
<!-- <p>
Hi, I'm Bella and I am the official mascot of this website. My human Kathy has created a digital pattern generator using L-system rules and a lot of different shapes - including ones you probably have never heard of! You can create your own digital artwork (and maybe learn something about L-systems and shapes in the process.) You can find the source code here
<a href="https://github.com/kfahn22/L-System-Pattern-Generator/tree/main/Streamlined_Lsystem">here.</a>
</p> -->

</div>
</div>
Expand Down
60 changes: 29 additions & 31 deletions docs/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
html,
body {
margin: 0vw;
/* padding: 2vw; */
background-color: #000;
margin: 1vw;
background-color: #595959;
}
header {
background-repeat: repeat-x;
background-size: cover;
background-image: url("./assets/bk1.jpg");
/* background-color: #def0ed; */
background-repeat: repeat-x;
background-size: cover;
Expand All @@ -17,7 +19,7 @@ header {
header #index {
height: 20vh;
margin-bottom: 10vh;
background-image: url("../assets/basic_patterns/hilbert-gear-raspberrry.jpg");
background-image: url("../assets/basic_patterns/bk.jpg");
}

/* p {
Expand All @@ -27,35 +29,22 @@ header #index {
font-size: x-large;
} */

div {
margin: auto;
div {
margin: auto;
width: 50%;
/* border: 3px solid rgb(188, 13, 153); */
padding: 10px;
padding: 2px;
}

li {
font-size: xx-large;
}

header #lsystem {
height: 15vh;
color: #fff;
/* background-color: black; */
background-image: url("assets/basic_patterns/krishna-anklet-gear2.jpg");
background-repeat: repeat-x;
background-size: cover;
font-size: 100%;
margin-bottom: 5%;
}

#links {
font-size: 25em;
margin: 10em;
background-color: #f1f1f1
font-size: 25em;
margin: 10em;
/* background-color: #f1f1f1; */
}


/* header img {
opacity: 0.25;
} */
Expand All @@ -73,13 +62,24 @@ h1 {
h2 {
font-family: Arial, Helvetica, sans-serif;
padding: 1%;
font-size: 200%;
font-size: 150%;
text-align: center;
text-transform: uppercase;
text-shadow: 2px 2px #0d1a44;
color: #ffffff;
}

h3 {
font-family: Arial, Helvetica, sans-serif;
padding: 1%;
font-size: 100%;
text-align: center;
text-transform: uppercase;
text-shadow: 2px 2px #0d1a44;
color: #ffffff;
}


#construction {
font-size: 300%;
text-align: center;
Expand All @@ -96,14 +96,16 @@ code {
/* max-width: 500px; */
}

img {
width: 100%;
}

/* div {
margin: 1vh;
padding: 1vw;
color: #fff;
} */



a:link,
a:visited {
color: black;
Expand All @@ -119,9 +121,6 @@ a:active {
background-color: #595959;
}




#demo {
margin-left: 2%;
margin-right: 2%;
Expand All @@ -135,7 +134,6 @@ a:active {
justify-content: space-between;
}


/* When the height of the screen is less than 450 pixels, change the font-size of
the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
Expand Down Expand Up @@ -297,4 +295,4 @@ This class makes the topnav look good on small screens (display the links vertic
.modal-content {
width: 100%;
}
}
}

0 comments on commit acb9cb2

Please sign in to comment.