Merge branch 'master' of github.com:1p22geo/schrodinger

Author: 1p22geo

static/index.html

@@ -25,10 +25,10 @@
     <div
       class="w-content mx-auto text-center font-sans flex flex-col items-center"
     >
-      <h2 class="text-xl float3S coolh">
+      <h2 class="text-xl coolh">
         Schrödinger's equation - a journey of physics simulation
       </h2>
-      <p class="m-8">
+      <p class="m-8 sidenote">
         DISCLAIMER: Yes, we know the difference between
         <code>Schrodinger</code> and <code>Schrödinger</code>. But, for
         simplicity (and typing speed), they will be used interchangably. I
@@ -38,14 +38,14 @@ <h2 class="text-xl float3S coolh">
         This project is not finished yet. And it is definitely not yet compliant
         with realistic physics standards. At least, we tried.
       </p>
-      <h2 class="text-xl m-4 mt-8">Majorly misunderstood explaination</h2>
-      <p class="m-8">
+      <h2 class="text-xl m-4 mt-8 coolh">Majorly misunderstood explaination</h2>
+      <p class="m-4 mb-0">
         According to a pretty modern theory, quantum mechanics, all matter in
         the universe is composed of tiny <code>particles</code>, the basic
         building blocks of the world. Now, we have something like a "periodic
         table" of particles. The standard model.
       </p>
-      <figure>
+      <figure class="cooldiv p-2 float3">
         <img
           src="./media/png/standard_model.png"
           alt="The Standard Model of Elementary particles"
@@ -60,7 +60,7 @@ <h2 class="text-xl m-4 mt-8">Majorly misunderstood explaination</h2>
           >
         </figcaption>
       </figure>
-      <p class="m-8">
+      <p class="m-4">
         But here's the thing. Particles are so small that we can't really
         measure where they are. And on this scale, when the particle size is
         noting compared to the uncertainty of its position (or momentum, for
@@ -71,7 +71,7 @@ <h2 class="text-xl m-4 mt-8">Majorly misunderstood explaination</h2>
         that there is a special equation - the
         <b>Heisenberg Uncertainty principle</b>, linking those values together.
       </p>
-      <figure class="flex flex-col items-center">
+      <figure class="flex flex-col items-center cooldiv p-4 float2S">
         <img
           src="./media/svg/heisenberg.svg"
           alt="Heisenberg's uncertainty principle"
@@ -115,15 +115,15 @@ <h2 class="text-xl m-4 mt-8">Majorly misunderstood explaination</h2>
         point implies... a function. The <b>wave function</b> is an object
         closest to the position of a subatomic particle.
       </p>
-      <h2 class="text-xl m-4 mt-8">Properties of the wave function</h2>
+      <h2 class="text-xl m-4 mt-8 coolh">Properties of the wave function</h2>
       <p class="m-8">
         The wave function assigns a complex number to each point in space and
         time. The square of this value is the propability density. It is a
         finite number, not infinitely small. The propability of the particle
         existing in a given range of space is a definite integral of the square
         of the absolute value of the wave function.
       </p>
-      <figure>
+      <figure class="cooldiv p-2 float4S">
         <img
           src="./media/hydrogen/level_1.png"
           alt="An electron in the hydrogen atom"
@@ -155,8 +155,8 @@ <h2 class="text-xl m-4 mt-8">Properties of the wave function</h2>
         and repeled from places where their wave function is lower than the
         potential around them.
       </p>
-      <h2 class="text-xl m-4 mt-8">Evolution in time</h2>
-      <figure>
+      <h2 class="text-xl m-4 mt-8 coolh">Evolution in time</h2>
+      <figure class="cooldiv p-6 float1">
         <img
           src="./media/svg/schrodinger.svg"
           alt="The Schrodinger's equation in its entirety."
@@ -187,7 +187,7 @@ <h2 class="text-xl m-4 mt-8">Evolution in time</h2>
         representation of how particles move. Actually respecting quantum
         physics.
       </p>
-      <figure>
+      <figure class="cooldiv float2S p-2">
         <img
           src="./media/gif/gauss_empty.gif"
           alt="A photon moving through vacuum"
@@ -204,7 +204,11 @@ <h2 class="text-xl m-4 mt-8">Evolution in time</h2>
           I made the graph myself too...
         </figcaption>
       </figure>
-      <h2 class="text-xl m-4 mt-8">Limitations</h2>
+      <div class="editornote bottom-10 left-80">
+        <p>Editor's note:</p>
+        <p>Stop before I start copyrighting these gradients</p>
+      </div>
+      <h2 class="text-xl m-4 mt-8 coolh">Limitations</h2>
       <p class="m-8">
         1. Relativity<br />
         Our library simulates only <b>non-relativistic</b> quantum physics. And
@@ -226,6 +230,7 @@ <h2 class="text-xl m-4 mt-8">Limitations</h2>
         instead of implementing the tiniest and newest releases in difficult
         physics papers.
       </p>
+      <p class="editornote top-[22px] left-[500px]">yeah im really smart huh</p>
       <p class="m-8">
         3. Quantum chromodynamics<br />
         My complete misunderstanding of quarks and hadrons, and color charge
@@ -252,7 +257,7 @@ <h2 class="text-xl m-4 mt-8">Limitations</h2>
         realism. If you need more realism, install a quantum physics Micro$oft
         Minecraft &reg;&copy; texture pack.
       </p>
-      <h6 class="text-xs">
+      <h6 class="text-xs sidenote">
         Yes, I will be refering to it as Micro$oft Minecraft &reg;&copy;. That
         company totally destroyed this game. I am an open-source supporter and
         you will not convince me otherwise.

static/path1.png

@@ -55,6 +55,10 @@ header:hover {
 }
 
 .authors {
+  border: 10px solid;
+  border-image-slice: 1;
+  border-width: 4px;
+  border-image-source: linear-gradient(to left, #b6c216, #3ba9b1);
   position: relative;
   width: fit-content;
   margin: auto;
@@ -74,7 +78,7 @@ header:hover {
   position: absolute;
   inset: -1px;
   transform: translate3d(6px, 6px, -1px);
-  background: linear-gradient(to left, #b7c216c7, #3ba9b1b7);
+  background: linear-gradient(to left, #b7c2165e, #3ba9b15f);
 }
 
 .coolerdiv {
@@ -89,6 +93,28 @@ header:hover {
   -webkit-transition: 0.5s;
   -moz-transition: 0.5s;
   transition: 0.5s;
+  background-image: url("path2.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+
+}
+
+.sidenote{
+  color: rgba(51, 51, 51, 0.601);
+  scale: 90%;
+}
+
+.editornote{
+  padding: 1rem;
+  border: 10px solid;
+  border-image-slice: 1;
+  border-width: 5px;
+  border-image-source: linear-gradient(to left, #c28616, #d1eb42);
+  position: relative;
+  scale: 90%;
+  background-color: rgb(255, 255, 255);
+  box-shadow: 10px 10px rgba(53, 53, 53, 0.089);
+  margin: -40px;
 }
 
 /* THE FLOATING */