feat(ui): full-width section functionality

codenomnom · Oct 5, 2023 · daa57fc · daa57fc
1 parent 49d1ce1
commit daa57fc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/content/quirks/thirdpost.md b/content/quirks/thirdpost.md
@@ -16,6 +16,8 @@ Leverage agile frameworks to provide a robust synopsis for high level overviews.
 
 Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
 
+<div class="full-width">full width</div>
+
 ```js
 // this is a command
 function myCommand() {

diff --git a/public/css/deferred/post.css b/public/css/deferred/post.css
@@ -19,3 +19,14 @@ h5:hover a.header-anchor,
 h6:hover a.header-anchor {
   visibility: visible;
 }
+
+:root {
+  --full-width: 74vw;
+}
+
+.full-width {
+  position: relative;
+  width: clamp(100%, var(--full-width), var(--full-width));
+  left: min(0px, calc(var(--full-width) * -1 / 2) + 50%);
+  border: 1px solid red;
+}