lucavi | CODE ✦ LEGACY [UPDATED APR23].

ENCOM GLOBALISATION

ET2-506B

ENCRYPTED FILE

Handbook of Robotics, 56th E. — 2058 A.D.

I, Robot is a fixup (compilation) novel of science fiction short stories or essays by American writer Isaac Asimov. The stories originally appeared in the American magazines Super Science Stories and Astounding Science Fiction between 1940 and 1950 and were then compiled into a book for stand-alone (single issue / special edition) publication by Gnome Press in 1950, in an initial edition of 5,000 copies. The stories are woven together by a framing narrative in which the fictional Dr. Susan Calvin tells each story to a reporter (who serves as the narrator) in the 21st century. Although the stories can be read separately, they share a theme of the interaction of humans, robots, and morality, and when combined they tell a larger story of Asimov's fictional history of robotics.

THIS IS A SECTION TITLE.

SYS | ADM

Several of the stories feature the character of Dr. Calvin, chief robopsychologist at U.S. Robots and Mechanical Men, Inc., the major manufacturer of robots. Upon their publication in this collection, Asimov wrote a framing sequence presenting the stories as Calvin's reminiscences during an interview with her about her life's work, chiefly concerned with aberrant behaviour of robots and the use of "robopsychology" to sort out what is happening in their positronic brain. The book also contains the short story in which Asimov's Three Laws of Robotics first appear, which had large influence on later science fiction and had impact on thought on ethics of artificial intelligence as well. Other characters that appear in these short stories are Powell and Donovan, a field-testing team which locates flaws in USRMM's prototype models.^{[citation needed]}

NAVIGATION_SYSTEM

ver1.618033988749895...

NAV_ITEM

Inspired by Tron: Legacy, a movie I haven't seen in a million years. Legacy is:

✓ RESPONSIVE (MOBILE FRIENDLY)
✓ COMMENT FRIENDLY
✓ CUSTOMISABLE
✗ NOT EMAIL-FRIENDLY / EMAIL-TESTED

NEW EDIT: APRIL 8TH: code has been rehauled to be super customise-friendly! Now all you need to do is change colour codes at the very top of the code, and it'll reflect across everything! No more having to CTRL+F and replace every single pesky line of hex. Hooray! Areas to change include:

✦ --text--Main:; default is set to #efefef. This determines the general body text colour.
✦ --text--Glow:; default is set to #fff. This determines the faint glow colour of the title bar text.
✦ --navlink--Background:; default is set to #000000b3. This determines the colour of the navlink squares. I decided to make this customisable because I thought it was a little hard to look at in the first version.
✦ --box--Background:; default is set to #1d1d1d. This determines the colour of the code's general background.
✦ --colour--Primary:; default is set to #75cad7. This determines the main colour theme of the code, which is default a light blue.
✦ --warning--Text:; default is set to #1d1d1d. This determines the text colour of the "ENCRYPTED" tag in the image module.
✦ --warning--Background:; default is set to #ffd900. This determines the background colour of the "ENCRYPTED" tag in the image module.
✦ **IMAGE_URL**; URL of the image you want displayed in the block should go there. This one does need to be CTRL+F'd.

If you want the full entire code as it is, you can find it all in the textbox below:

THE FULL HAUL (EXAMPLE ABOVE)

<raw-code><div style="display:flex; justify-content:center; padding:5px 0;
  --colour--Primary: #75cad7;
  --text--Main: #efefef;
  --text--Glow: #fff;
  --navlink--Background: #000000b3;
  --box--Background: #1d1d1d;
  --warning--Text: #1d1d1d;
  --warning--Background: #ffd900;">

<div style="display:flex; justify-content:center; width:100%; max-width:850px; padding:10px 5px; font:normal 14px/1.25 'Andale Mono', 'Lucida', monospace; letter-spacing:0.01rem; color:var(--text--Main); background:var(--box--Background); border:3px solid var(--colour--Primary); border-radius:5px; box-shadow:0 0 3px var(--colour--Primary);">
<div style="display:flex; flex-flow:column nowrap; justify-content:center; gap:15px; width:100%; padding:10px; border:2px solid var(--colour--Primary); border-radius:5px; box-shadow: 0 0 3px var(--text--Glow);">

<div style="display:flex; flex-flow:row wrap; justify-content:space-between; gap:0 10px; width:100%; margin-bottom:5px; padding:0 0 5px; font-size:clamp(18px,2.5vw,24px); font-weight:600; color:var(--colour--Primary); border-bottom:2px solid var(--colour--Primary); text-shadow:0 0 2px var(--text--Glow);">
  <div>ENCOM GLOBALISATION</div>
  <div>ET2-506B</div>
</div>
<! --- TITLE SECTION END // --->

<div style="display:flex; flex-flow:row wrap; gap:10px; padding:10px;">
  <div name="LEFTSIDE" style="display:flex; flex-flow:column nowrap; gap:10px; flex:1 150px; align-self:start;">
    <div style="display:inline-block; width:fit-content; padding:5px 10px; font-size:125%; font-weight:600; color:var(--warning--Text); background:var(--warning--Background);">ENCRYPTED FILE</div>
    <div style="width:100%; aspect-ratio:1; border:2px solid var(--colour--Primary);
                background:transparent url('**IMAGE_URL**') no-repeat center; background-size:75%;">
    </div>
  </div>
  <div name="RIGHTSIDE" style="display:flex; flex-flow:column nowrap; gap:10px; flex:3 0 250px; align-self:start;">
    <h3 style="margin:0 0 3px; padding-bottom:5px; font:600 150%/1.1 'Andale Mono', monospace; color:var(--colour--Primary); text-align:initial; text-transform:uppercase; border-bottom:2px dotted var(--colour--Primary);">
      Handbook of Robotics, 56th E. — 2058 A.D.
    </h3>
    <p>I, Robot is a fixup (compilation) novel of science fiction short stories or essays by American writer Isaac Asimov. The stories originally appeared in the American magazines Super Science Stories and Astounding Science Fiction between 1940 and 1950 and were then compiled into a book for stand-alone (single issue / special edition) publication by Gnome Press in 1950, in an initial edition of 5,000 copies. The stories are woven together by a framing narrative in which the fictional Dr. Susan Calvin tells each story to a reporter (who serves as the narrator) in the 21st century. Although the stories can be read separately, they share a theme of the interaction of humans, robots, and morality, and when combined they tell a larger story of Asimov's fictional history of robotics.</p>
  </div>
</div>


<div>
  <div style="display:flex; flex-flow:row wrap; justify-content:space-between; gap:0 10px; padding:5px; font-weight:600; border-top:2px solid var(--colour--Primary); border-bottom:2px solid var(--colour--Primary);">
    <div>THIS IS A SECTION TITLE.</div>
    <div style="align-self:center; font-size:85%; color:var(--colour--Primary);">SYS | ADM</div>
  </div>
  <div name="PLAINTEXT_SEGMENT" style="padding:10px 0 0;">
  <p>Several of the stories feature the character of Dr. Calvin, chief robopsychologist at U.S. Robots and Mechanical Men, Inc., the major manufacturer of robots. Upon their publication in this collection, Asimov wrote a framing sequence presenting the stories as Calvin's reminiscences during an interview with her about her life's work, chiefly concerned with aberrant behaviour of robots and the use of "robopsychology" to sort out what is happening in their positronic brain. The book also contains the short story in which Asimov's Three Laws of Robotics first appear, which had large influence on later science fiction and had impact on thought on ethics of artificial intelligence as well. Other characters that appear in these short stories are Powell and Donovan, a field-testing team which locates flaws in USRMM's prototype models.<sup>[citation needed]</sup></p>
  </div>
</div>


<div name="4COL GALLERY" style="display:flex; flex-flow:row wrap; justify-content:center; gap:10px;">

  <div style="display:flex; flex-flow:row wrap; gap:10px;">
    <div name="COL_1" style="flex:1; width:150px; aspect-ratio:1; box-shadow:2px 2px var(--colour--Primary);
         background:transparent url('**IMAGE_URL**') no-repeat center; background-size:cover;"></div>
    <div name="COL_2" style="flex:1; width:150px; aspect-ratio:1; box-shadow:2px 2px var(--colour--Primary);
         background:transparent url('**IMAGE_URL**') no-repeat center; background-size:cover;"></div>
  </div>
  
  <div style="display:flex; flex-flow:row wrap; gap:10px;">
    <div name="COL_3" style="flex:1; width:150px; aspect-ratio:1; box-shadow:2px 2px var(--colour--Primary);
         background:transparent url('**IMAGE_URL**') no-repeat center; background-size:cover;"></div>
    <div name="COL_4" style="flex:1; width:150px; aspect-ratio:1; box-shadow:2px 2px var(--colour--Primary);
         background:transparent url('**IMAGE_URL**') no-repeat center; background-size:cover;"></div>
  </div>
</div>

<div style="padding:15px 0 0 0;">
<div style="display:flex; flex-flow:row nowrap; justify-content:space-between; gap:0 10px; padding:5px 0 10px; font-size:75%; font-weight:600; border-top:2px dotted var(--colour--Primary);">
  <div>NAVIGATION_SYSTEM</div>
  <div style="color:var(--colour--Primary);">ver1.618033988749895...</div>
</div>
<div style="display:flex; flex-flow:row wrap; justify-content:flex-start; gap:10px 15px; font-weight:600;">

<a href="" style="text-decoration:none; color:var(--colour--Primary);">
    <div style="margin-bottom:3px; background:var(--navlink--Background); padding:7px 0; border:2px solid var(--colour--Primary); border-radius:3px;"></div>
    <span>NAV_ITEM</span>
  </a>
  <a href="" style="text-decoration:none; color:var(--colour--Primary);">
    <div style="margin-bottom:3px; background:var(--navlink--Background); padding:7px 0; border:2px solid var(--colour--Primary); border-radius:3px;"></div>
    <span>NAV_ITEM</span>
  </a>
  <a href="" style="text-decoration:none; color:var(--colour--Primary);">
    <div style="margin-bottom:3px; background:var(--navlink--Background); padding:7px 0; border:2px solid var(--colour--Primary); border-radius:3px;"></div>
    <span>NAV_ITEM</span>
  </a>
  <a href="" style="text-decoration:none; color:var(--colour--Primary);">
    <div style="margin-bottom:3px; background:var(--navlink--Background); padding:7px 0; border:2px solid var(--colour--Primary); border-radius:3px;"></div>
    <span>NAV_ITEM</span>
  </a>
  <a href="" style="text-decoration:none; color:var(--colour--Primary);">
    <div style="margin-bottom:3px; background:var(--navlink--Background); padding:7px 0; border:2px solid var(--colour--Primary); border-radius:3px;"></div>
    <span>NAV_ITEM</span>
  </a>
  <a href="" style="text-decoration:none; color:var(--colour--Primary);">
    <div style="margin-bottom:3px; background:var(--navlink--Background); padding:7px 0; border:2px solid var(--colour--Primary); border-radius:3px;"></div>
    <span>NAV_ITEM</span>
  </a>
</div>
</div>
</div>
</div>
</div></raw-code>

To use it modularly, you'll need to at minimum have the barebones code below, as it provides essentially the entire foundation of the code. It comes with the title and navigation footer area as well. Simply place additional parts you want in the specified area within the code.

BAREBONES

SUBHEADER & TEXT

<div>
  <div style="display:flex; flex-flow:row wrap; justify-content:space-between; gap:0 10px; padding:5px; font-weight:600; border-top:2px solid var(--colour--Primary); border-bottom:2px solid var(--colour--Primary);">
    <div>THIS IS A SECTION TITLE.</div>
    <div style="align-self:center; font-size:85%; color:var(--colour--Primary);">SYS | ADM</div>
  </div>
  <div name="PLAINTEXT_SEGMENT" style="padding:10px 0 0;">
  <p>Several of the stories feature the character of Dr. Calvin, chief robopsychologist at U.S. Robots and Mechanical Men, Inc., the major manufacturer of robots. Upon their publication in this collection, Asimov wrote a framing sequence presenting the stories as Calvin's reminiscences during an interview with her about her life's work, chiefly concerned with aberrant behaviour of robots and the use of "robopsychology" to sort out what is happening in their positronic brain. The book also contains the short story in which Asimov's Three Laws of Robotics first appear, which had large influence on later science fiction and had impact on thought on ethics of artificial intelligence as well. Other characters that appear in these short stories are Powell and Donovan, a field-testing team which locates flaws in USRMM's prototype models.<sup>[citation needed]</sup></p>
  </div>
</div>

IMAGE ON LEFT SECTION

4-IMAGE GALLERY

<div name="4COL GALLERY" style="display:flex; flex-flow:row wrap; justify-content:center; gap:10px;">

  <div style="display:flex; flex-flow:row wrap; gap:10px;">
    <div name="COL_1" style="flex:1; width:150px; aspect-ratio:1; box-shadow:2px 2px var(--colour--Primary);
         background:transparent url('**IMG_URL**') no-repeat center; background-size:cover;"></div>
    <div name="COL_2" style="flex:1; width:150px; aspect-ratio:1; box-shadow:2px 2px var(--colour--Primary);
         background:transparent url('**IMG_URL**') no-repeat center; background-size:cover;"></div>
  </div>
  
  <div style="display:flex; flex-flow:row wrap; gap:10px;">
    <div name="COL_3" style="flex:1; width:150px; aspect-ratio:1; box-shadow:2px 2px var(--colour--Primary);
         background:transparent url('**IMG_URL**') no-repeat center; background-size:cover;"></div>
    <div name="COL_4" style="flex:1; width:150px; aspect-ratio:1; box-shadow:2px 2px var(--colour--Primary);
         background:transparent url('**IMG_URL**') no-repeat center; background-size:cover;"></div>
  </div>
</div>