Space Tech UI Edit Example

To change in StoryInterface:
<div class="titleblock">
	<div class="titling" data-passage="Title-Block"></div>
	<div class="codexmenu" data-passage="codex"></div>
</div>

New passage to add: codex [or change -> data-passage="codex" <- to indicate the correct passage]

CSS to edit:
Note: these have not been checked for mobile. Some editing might be required.

.titleblock {
  	flex-grow: 1;
	display: flex;
	flex-direction: column;
}


.titling {
  box-shadow: inset #3c7fb0 0px 0px 10px;
  background-color: #060133;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Cpath fill='none' stroke-width='23.1' stroke-opacity='0.41' id='a' d='M0.74-509.63l485.39 352.65l-185.4 570.61h-599.97l-185.4-570.61L0.74-509.63 M0.74-510.87l-486.56 353.51l185.85 571.99h601.42L487.3-157.36L0.74-510.87L0.74-510.87z'/%3E%3C/defs%3E%3Cg transform='scale(0.316)' style='transform-origin:center'%3E%3Cg transform='rotate(26.64 0 0)' style='transform-origin:center'%3E%3Cg transform='rotate(-160 0 0)' style='transform-origin:center'%3E%3Cg transform='translate(1000 750)'%3E%3Cuse stroke='%230B31CC' href='%23a' transform='rotate(10 0 0) scale(1.1)'/%3E%3Cuse stroke='%230042d5' href='%23a' transform='rotate(20 0 0) scale(1.2)'/%3E%3Cuse stroke='%23004fdb' href='%23a' transform='rotate(30 0 0) scale(1.3)'/%3E%3Cuse stroke='%23005ade' href='%23a' transform='rotate(40 0 0) scale(1.4)'/%3E%3Cuse stroke='%230063df' href='%23a' transform='rotate(50 0 0) scale(1.5)'/%3E%3Cuse stroke='%23006bde' href='%23a' transform='rotate(60 0 0) scale(1.6)'/%3E%3Cuse stroke='%230073da' href='%23a' transform='rotate(70 0 0) scale(1.7)'/%3E%3Cuse stroke='%23007ad6' href='%23a' transform='rotate(80 0 0) scale(1.8)'/%3E%3Cuse stroke='%230080d0' href='%23a' transform='rotate(90 0 0) scale(1.9)'/%3E%3Cuse stroke='%230086c9' href='%23a' transform='rotate(100 0 0) scale(2)'/%3E%3Cuse stroke='%23008cc2' href='%23a' transform='rotate(110 0 0) scale(2.1)'/%3E%3Cuse stroke='%230091bb' href='%23a' transform='rotate(120 0 0) scale(2.2)'/%3E%3Cuse stroke='%230096b4' href='%23a' transform='rotate(130 0 0) scale(2.3)'/%3E%3Cuse stroke='%23009aad' href='%23a' transform='rotate(140 0 0) scale(2.4)'/%3E%3Cuse stroke='%23009fa8' href='%23a' transform='rotate(150 0 0) scale(2.5)'/%3E%3Cuse stroke='%2301A3A3' href='%23a' transform='rotate(160 0 0) scale(2.6)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 225%;
  background-position: center;
  border-radius: 40px;
  margin: 0.5% 0.4%;
  height: 75%;
  display: flex;
}

.codexmenu {
  text-align: center;
}