Add projects and tutorials

2026-03-16 18:03:17 +00:00
parent fc54c3bd4e
commit 4e94902f01
132 changed files with 19170 additions and 65 deletions
--- a/tutorials/tsp/style.css
+++ b/tutorials/tsp/style.css
@@ -0,0 +1,160 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
+
+a{font-family: 'Roboto Condensed', sans-serif; font-size: 18pt;}
+
+h1 {
+  font-family: 'Roboto Condensed', sans-serif;
+  margin: 0;
+  padding: 0 0 15px 0;
+}
+
+h2 {
+  font-family: 'Roboto Condensed', sans-serif;
+  margin: 0;
+  padding: 0 0 15px 0;
+  text-align: center;
+  text-decoration: bold;
+}
+
+@media (min-width: 350px) {
+  h1 {font-size: 3.25em;}
+  img{height: 40px;}
+  p{font-size: 10px;}
+  h2{font-size: 17px;}
+}
+
+@media (min-width: 400px) {
+  h1 {font-size: 3.25em;}
+  img{height: 45px;}
+  p{font-size: 15px;}
+  h2{font-size: 17px;}
+}
+@media (min-width: 440px) {
+   h1 {font-size: 3.5em;}
+  img {height: 100px;}
+  p{font-size: 16px;}
+  h2{font-size: 18px;}
+}
+@media (min-width: 500px) {
+   h1 {font-size: 3.75em;}
+  img{height: 125px;}
+  p{font-size: 16px;}
+  h2{font-size: 19px;}
+}
+@media (min-width: 630px) {
+   h1 {font-size: 5em;}
+  img{height: 150px;}
+  p{font-size: 20px;}
+  h2{font-size: 24px;}
+}
+@media (min-width: 768px) {
+   h1 {
+    font-size: 5em;
+    padding-bottom: 30px;
+  }
+  img{height: 175px;}
+  p{font-size: 22px;}
+  h2{font-size: 26px;}
+}
+@media (min-width: 1200px) {
+  h1 {font-size: 8em;}
+  img{height: 250px;}
+  p{font-size: 24px;}
+  h2{font-size: 28px;}
+}
+
+p{
+  
+  font-family: 'Roboto Condensed', sans-serif;
+}
+
+h3{
+  text-align: center;
+  font-size: 30px;
+  font-family: 'Roboto Condensed', sans-serif;
+}
+
+footer{
+  padding: 20px;
+  background-color: #e0e0e0;
+  font-family: 'Roboto Condensed', sans-serif;
+}
+
+@keyframes dimImg{
+  from {opacity: 1;
+  filter: alpha(opacity=100);}
+  to {opacity: 0.4;
+  filter: alpha(opacity=50);}
+}
+
+@keyframes revealText{
+  from {opacity: 0.4;
+  filter: alpha(opacity=50);}
+  to {opacity: 1;
+  filter: alpha(opacity=100);}
+}
+
+.pictureContainer{
+  float: right; 
+  position: relative;
+}
+
+.pictureContainer a{
+  opacity: 0;
+  position: absolute;
+  text-align: center;
+  top: 5px;
+  left: 5px;
+}
+
+
+.pictureContainer:hover img{
+ 
+  animation-name: dimImg;
+  animation-duration: 1s;
+  opacity: 0.4;
+  filter: alpha(opacity=50);
+}
+
+.pictureContainer:hover a{
+  animation-name: revealText;
+  animation-duration: 1s;
+  opacity: 1;
+}
+
+.canvasText{
+  margin: 0px;
+  display: inline-block;
+
+  text-align: left;
+}
+
+#c1, #c2, #c3{
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+}
+
+.button{
+  padding: 16px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  -webkit-transition-duration: 0.4s; /* Safari */
+  transition-duration: 0.4s;
+  cursor: pointer;
+  background-color: white;
+  color: black;
+  border: 2px solid #555555;
+  float: right;
+}
+
+.button:hover {
+  background-color: #555555;
+  color: white;
+}
+
+