Cube Layout Fixes (#38)

* improve list layout * fix z-index calculations + less transparency + better button size
chadsr · Dec 6, 2021 · b8c9a54 · b8c9a54
1 parent 67841fc
commit b8c9a54
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/src/stylesheets/style.scss b/src/stylesheets/style.scss
@@ -2,15 +2,15 @@
 $color-background: black;
 $color-content: rgba(45, 0, 61, 0.4);
 $color-content-highlight: #7600a1;
-$color-content-secondary: rgba(14, 13, 14, 0.8);
+$color-content-secondary: rgb(14, 13, 14);
 $color-content-secondary-highlight: $color-content-secondary;
 $color-text: white;
 $color-text-highlight: $color-text; /* Applies to all click-able text (buttons. links, etc) */
 $color-text-link-highlight: $color-content-highlight; /* Overrides the above, but only for text with class .link */
 $color-heading: $color-text;
 $color-text-placeholder: $color-text;
 $color-text-placeholder_highlight: $color-text-highlight;
-$color-title-banner: rgba(31, 31, 31, 0.8);
+$color-title-banner: rgb(31, 31, 31);
 $color-shadow: rgba(0, 0, 0, 0.4);
 $color-scrollbar: $color-content;
 $color-scrollbar_track: $color-content;
@@ -92,6 +92,7 @@ $width-icon-button: 50px;
     margin: 0;
     padding: 0;
     list-style: none;
+    box-sizing: border-box;
 }
 
 %form-layout {
@@ -791,12 +792,12 @@ header {
         transform-style: preserve-3d;
         will-change: transform;
         transition-property: transform;
-        background: $color-shadow;
         @extend %transition-cube;
         outline-offset: 0;
         @extend %outline-dotted;
 
         > .face-content {
+            display: flex;
             overflow-y: hidden;
             overflow-x: hidden;
             width: inherit;
@@ -807,10 +808,15 @@ header {
             filter: $filter-face-no-focus;
             transition-property: filter;
             pointer-events: none; // Disable all links until the face has .focus
-            overflow-wrap: break-word;
+            transform-style: flat;
             @extend %transition-ease-in-out;
 
             > .content-section {
+                flex: auto;
+                max-width: 100%;
+                word-wrap: break-word;
+                overflow-wrap: break-word;
+
                 ul.list {
                     display: block;
 
@@ -834,16 +840,17 @@ header {
                             &::before {
                                 @extend %macula;
                                 content: '>';
-                                margin: 0 8px 0 0;
+                                padding: 0 8px 0 0;
                                 font-size: 48px;
                             }
                         }
 
                         > ul {
-                            margin: 0 0 0 24px;
+                            padding: 0 0 0 24px;
+                            max-width: 100%;
 
                             > li {
-                                margin: 0 0 4px 0;
+                                padding: 0 0 8px 0;
 
                                 p::before {
                                     font-size: 32px;
@@ -863,6 +870,7 @@ header {
             z-index: 2;
 
             > .face-content {
+                transform: translateZ(0); // fixes incorrect z-index calculations due to 3d transforms
                 filter: none;
                 pointer-events: auto; // Enable links
                 @extend %scrollable;
@@ -873,12 +881,13 @@ header {
 
 .perspective {
     > button {
-        height: 32px;
+        height: 64px;
         width: 100%;
         margin: 42px 0 0 0;
         padding: 0;
         border: none;
         font-weight: bolder;
+        font-size: 1em;
         transform-style: preserve-3d;
         @extend %outline-dotted;
 

diff --git a/src/views/partials/about.hbs b/src/views/partials/about.hbs
@@ -14,10 +14,13 @@
             <p>Areas of interest include:</p>
             <ul>
                 <li>
-                    <p>Peer-to-Peer/Distributed Systems</p>
+                    <p>Distributed Systems</p>
                 </li>
                 <li>
-                    <p>Cryptography/Cryptology</p>
+                    <p>Peer-to-Peer Networks</p>
+                </li>
+                <li>
+                    <p>Cryptology</p>
                 </li>
                 <li>
                     <p>Information Security</p>