diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/css/custom.css | 23 | ||||
| -rw-r--r-- | src/index.html | 60 |
2 files changed, 53 insertions, 30 deletions
diff --git a/src/css/custom.css b/src/css/custom.css index e070193..8c0ce19 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,10 +1,33 @@ /* stylelint-disable selector-list-comma-newline-after */ +html, body { + background-color: #333333; +} + +.text-muted { + color: #cecece !important +} + +.text-unmuted { + color: #e6e6e6 !important; + border-bottom: 1px solid #fff !important; + padding-bottom: 3px !important; +} + +.dark-box { + background-color: #333333; + border: 1px solid #cecece; +} + .blog-header { line-height: 1; border-bottom: 1px solid #e5e5e5; } +.dark-footer { + background-color: #292929 !important; +} + .blog-header-logo { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: 2.25rem; diff --git a/src/index.html b/src/index.html index 5d6a1d0..df4b1ff 100644 --- a/src/index.html +++ b/src/index.html @@ -32,7 +32,7 @@ </div> <div class="col-4 text-center"> - <a class="blog-header-logo text-dark" href="/">Simulator</a> + <a class="blog-header-logo text-light" href="/">Simulator</a> </div> <div class="col-4 text-center"> @@ -64,7 +64,7 @@ <img class="img-fluid rounded" src="images/example_image_cropped_900x400.png" alt=""> </div> <!-- /.col-lg-8 --> - <div class="col-lg-4"> + <div class="col-lg-4 text-light"> <h1>Generation and Simulation</h1> <p>Generating star clusters and simulating the forces acting in them seemed like a good way to learn a lot of new programming concepts. You can find many of the results on this page and read the blogpost I update regularly by clicking on the button below.</p> <a class="btn btn-primary btn-lg" href="https://www.tildeho.me/generating-galaxies/">Read the Blogpost!</a> @@ -75,14 +75,14 @@ <!-- Row 1 --> <div class="row mb-2"> <div class="col-md-6"> - <div class="card flex-md-row mb-4 box-shadow h-md-250"> + <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-primary">Documentation</strong> <h3 class="mb-0"> - <a class="text-dark" href="#">Writeup</a> + <a class="text-light" href="#">Writeup</a> </h3> <div class="mb-1 text-muted">Feb 3 2019</div> - <p class="card-text mb-auto">The complete project is documented so that everybody can access + <p class="card-text text-light text-light mb-auto">The complete project is documented so that everybody can access and use it a a reference for other projects.</p> <a href="http://writeup.emile.space">Read the writeup</a> </div> @@ -90,14 +90,14 @@ </div> </div> <div class="col-md-6"> - <div class="card flex-md-row mb-4 box-shadow h-md-250"> + <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-primary">Tech</strong> <h3 class="mb-0"> - <a class="text-dark" href="#">Code</a> + <a class="text-light" href="#">Code</a> </h3> <div class="mb-1 text-muted">Feb 3 2019</div> - <p class="card-text mb-auto">The simulator is completely writting in + <p class="card-text text-light mb-auto">The simulator is completely writting in <a href="https://golang.org/">go</a> and can be found in the git. </p> <a href="http://code.emile.space">Read the code</a> @@ -110,14 +110,14 @@ <!-- Row 2 --> <div class="row mb-2"> <div class="col-md-6"> - <div class="card flex-md-row mb-4 box-shadow h-md-250"> + <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-primary">Tech</strong> <h3 class="mb-0"> - <a class="text-dark" href="#">Generator</a> + <a class="text-light" href="#">Generator</a> </h3> <div class="mb-1 text-muted">Feb 3 2019</div> - <p class="card-text mb-auto"> + <p class="card-text text-light mb-auto"> The generator generates stars using the NFW profile. </p> <a href="http://code.emile.space/generator-container">Read the code</a> @@ -126,14 +126,14 @@ </div> </div> <div class="col-md-6"> - <div class="card flex-md-row mb-4 box-shadow h-md-250"> + <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-primary">Storage</strong> <h3 class="mb-0"> - <a class="text-dark" href="#">Database</a> + <a class="text-light" href="#">Database</a> </h3> <div class="mb-1 text-muted">Feb 3 2019</div> - <p class="card-text mb-auto">A <a href="https://www.postgresql.org/">PostgreSQL</a> + <p class="card-text text-light mb-auto">A <a href="https://www.postgresql.org/">PostgreSQL</a> database is used to store the stars. </p> <a href="http://code.emile.space/database-container">Read the code</a> @@ -146,14 +146,14 @@ <!-- Row 3 --> <div class="row mb-2"> <div class="col-md-6"> - <div class="card flex-md-row mb-4 box-shadow h-md-250"> + <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-primary">Tech</strong> <h3 class="mb-0"> - <a class="text-dark" href="#">Manager</a> + <a class="text-light" href="#">Manager</a> </h3> <div class="mb-1 text-muted">Feb 3 2019</div> - <p class="card-text mb-auto"> + <p class="card-text text-light mb-auto"> The manager container distributes the stars that need to be processed by providing them to the simulation services. </p> @@ -163,14 +163,14 @@ </div> </div> <div class="col-md-6"> - <div class="card flex-md-row mb-4 box-shadow h-md-250"> + <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-primary">Tech</strong> <h3 class="mb-0"> - <a class="text-dark" href="#">Simulator</a> + <a class="text-light" href="#">Simulator</a> </h3> <div class="mb-1 text-muted">Feb 3 2019</div> - <p class="card-text mb-auto"> + <p class="card-text text-light mb-auto"> The simulator continer gets stars from the manager, calculates their new position and inserts them into the next timestep. </p> @@ -184,14 +184,14 @@ <!-- Row 4 --> <div class="row mb-2"> <div class="col-md-6"> - <div class="card flex-md-row mb-4 box-shadow h-md-250"> + <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-primary">Load balancing</strong> <h3 class="mb-0"> - <a class="text-dark" href="#">Traefik</a> + <a class="text-light" href="#">Traefik</a> </h3> <div class="mb-1 text-muted">Feb 3 2019</div> - <p class="card-text mb-auto"> + <p class="card-text text-light mb-auto"> Routing traffic is done using <a href="https://traefik.io">Traefik</a>, "A reverse proxy / load balancer that's easy, dynamic, automatic, fast [...]" </p> @@ -201,14 +201,14 @@ </div> </div> <div class="col-md-6"> - <div class="card flex-md-row mb-4 box-shadow h-md-250"> + <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-primary">Monitoring</strong> <h3 class="mb-0"> - <a class="text-dark" href="#">Grafana + Prometheus</a> + <a class="text-light" href="#">Grafana + Prometheus</a> </h3> <div class="mb-1 text-muted">Feb 3 2019</div> - <p class="card-text mb-auto"> + <p class="card-text text-light mb-auto"> The metrics are pushed to <a href="https://prometheus.io">prometheus</a> and displayed in a nice dashboard using <a href="https://grafana.com">grafana</a>. </p> @@ -222,14 +222,14 @@ <!-- Row 5 --> <div class="row mb-2"> <div class="col-md-6"> - <div class="card flex-md-row mb-4 box-shadow h-md-250"> + <div class="card flex-md-row mb-4 box-shadow h-md-250 dark-box"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-primary">Visualizing</strong> <h3 class="mb-0"> - <a class="text-dark" href="#">Manager</a> + <a class="text-light" href="#">Manager</a> </h3> <div class="mb-1 text-muted">Feb 3 2019</div> - <p class="card-text mb-auto"> + <p class="card-text text-light mb-auto"> The manager container distributes the stars that need to be processed by providing them to the simulation services. </p> @@ -241,7 +241,7 @@ </div> </div> - <footer class="blog-footer"> + <footer class="blog-footer dark-footer"> <p> Design adapted from the Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> <p> <a href="#">Back to top</a> |
