style: go dark

client/src/App.css

@@ -4,6 +4,6 @@
 }
 
 .App {
-  background-image: linear-gradient(rgb(20, 20, 20) 1.7%, rgb(48, 48, 48) 97%);
+  background: linear-gradient(90deg, #202020 0%, #121212 100%);
   height: 100vh;
 }

client/src/common/components/buttons/NextIconBtn.jsx

@@ -5,7 +5,8 @@ export default function NextIconBtn(props) {
   return (
     <IconButton
       icon={<FiSkipForward />}
-      colorScheme= 'blackAlpha'
+      colorScheme= 'whiteAlpha'
+      backgroundColor='#ffffff05'
       variant= 'outline'
       onClick={props.clickHandler}
       width={90}

client/src/common/components/buttons/PrevIconBtn.jsx

@@ -5,7 +5,8 @@ export default function PrevIconBtn(props) {
   return (
     <IconButton
       icon={<FiSkipBack />}
-      colorScheme= 'blackAlpha'
+      colorScheme= 'whiteAlpha'
+      backgroundColor='#ffffff05'
       variant= 'outline'
       onClick={props.clickHandler}
       width={90}

client/src/common/components/countdown/Countdown.module.css

@@ -22,5 +22,5 @@
   text-align: center;
   letter-spacing: 0.1em;
   font-weight: 600;
-  color: #333;
+  color: #fffffa;
 }

client/src/common/components/text/NumberedText.module.css

@@ -4,7 +4,8 @@
   color: white;
   font-weight: 600;
 
-  background-color: #319795;
+  background-color: #ff5b7e;
+  border: 1px solid rgba(255,255,255,0.47);
   width: 1.5em;
   border-radius: 1em;
 

client/src/common/input/EditableText.module.css

@@ -2,14 +2,14 @@
 .titleUnderlined {
   padding-left: 1em;
   font-size: 0.8em;
-  color: #888;
+  color: #aaa;
   display: inline-block;
   width: 6em;
   cursor: default;
 }
 
 .titleUnderlined {
-  border-bottom: 1px solid #0001;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
 }
 
 .block {
@@ -23,4 +23,4 @@
 .editable13 {
   width: '13em';
   min-width: '13em';
-}
+}

client/src/common/input/EditableTimer.module.css

@@ -1,6 +1,6 @@
 .time {
-  background-color: #fff8;
+  background-color: rgba(255, 255, 255, 0.05);
-  border: 1px solid #0001;
+  border: 1px solid rgba(255, 255, 255, 0.05);
   border-radius: 4px;
   width: 5em;
   height: fit-content;
@@ -9,19 +9,18 @@
 .editable,
 .delayedEditable {
   text-align: center;
+  border-radius: 4px;
 }
 
 .delayedEditable {
-  background-color: #ecc94b22;
+  border: 1px solid #ecc94b;
 }
 
 .delayValue {
-  font-size: 14px;
+  color: #fff;
-  line-height: 2em;
-  color: #555;
-  background-color: #ffeaa066;
   border-radius: 4px;
+  padding: 0.3em 0;
   text-align: center;
-  border: 1px solid #0001;
+  align-self: flex-start;
+  background-color: #d69e2e;
 }
-

client/src/common/input/TimeInput.jsx

@@ -4,7 +4,11 @@ import style from './TimeInput.module.css';
 
 const inputProps = {
   width: 20,
-  backgroundColor: '#fff5',
+  fontWeight: 400,
+  backgroundColor: 'rgba(0,0,0,0.05)',
+  color: '#fff',
+  border: '1px solid #ecc94b',
+  borderRadius: '4px',
   placeholder: '-',
   textAlign: 'center',
 };

client/src/common/input/TimeInput.module.css

@@ -4,6 +4,7 @@
 }
 
 .label {
-  color: #0005;
   padding-left: 0.8em;
+  align-self: center;
+  font-weight: 600;
 }

client/src/features/control/MessageControl.jsx

@@ -1,5 +1,4 @@
-import { FormControl } from '@chakra-ui/form-control';
+import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
-import { Input } from '@chakra-ui/input';
 import { useEffect, useState } from 'react';
 import { useSocket } from '../../app/context/socketContext';
 import VisibleIconBtn from '../../common/components/buttons/VisibleIconBtn';
@@ -80,60 +79,70 @@ export default function MessageControl() {
   };
 
   return (
-    <>
+    <div className={style.messageContainer}>
       <div className={style.inputContainer}>
-        <FormControl id='presenterMessage'>
+        <span className={style.label}>Presenter screen message</span>
-          <span className={style.label}>Presenter screen message</span>
+        <div className={style.inputItems}>
-          <Input
+          <Editable
-            placeholder='only the presenter screens see this'
             onChange={(event) =>
               messageControl('pres-text', event.target.value)
             }
+            placeholder='only the presenter screens see this'
+            className={style.inline}
+          >
+            <EditablePreview />
+            <EditableInput className={style.editable13} />
+          </Editable>
+          <VisibleIconBtn
+            active={pres.visible}
+            clickHandler={() => messageControl('toggle-pres-visible')}
             {...inputProps}
           />
-        </FormControl>
+        </div>
-        <VisibleIconBtn
-          active={pres.visible}
-          clickHandler={() => messageControl('toggle-pres-visible')}
-          {...inputProps}
-        />
       </div>
 
       <div className={style.inputContainerWGap}>
-        <FormControl id='generalMessage'>
+        <span className={style.label}>Public screen message</span>
-          <span className={style.label}>Public screen message</span>
+        <div className={style.inputItems}>
-          <Input
+          <Editable
-            placeholder='all screens will render this'
             onChange={(event) =>
               messageControl('publ-text', event.target.value)
             }
+            placeholder='all screens will render this'
+            className={style.inline}
+          >
+            <EditablePreview />
+            <EditableInput className={style.editable13} />
+          </Editable>
+          <VisibleIconBtn
+            active={publ.visible}
+            clickHandler={() => messageControl('toggle-publ-visible')}
             {...inputProps}
           />
-        </FormControl>
+        </div>
-        <VisibleIconBtn
-          active={publ.visible}
-          clickHandler={() => messageControl('toggle-publ-visible')}
-          {...inputProps}
-        />
       </div>
 
       <div className={style.inputContainerWGap}>
-        <FormControl id='lowerMessage'>
+        <span className={style.label}>Lower third message</span>
-          <span className={style.label}>Lower third message</span>
+        <div className={style.inputItems}>
-          <Input
+          <Editable
-            placeholder='visible in lower third screen'
             onChange={(event) =>
               messageControl('lower-text', event.target.value)
             }
+            placeholder='visible in lower third screen'
+            className={style.inline}
+          >
+            <EditablePreview />
+            <EditableInput />
+          </Editable>
+
+          <VisibleIconBtn
+            active={lower.visible}
+            clickHandler={() => messageControl('toggle-lower-visible')}
             {...inputProps}
           />
-        </FormControl>
+        </div>
-        <VisibleIconBtn
-          active={lower.visible}
-          clickHandler={() => messageControl('toggle-lower-visible')}
-          {...inputProps}
-        />
       </div>
-    </>
+    </div>
   );
 }

client/src/features/control/MessageControl.module.css

@@ -1,16 +1,34 @@
+.messageContainer {
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
+
 .inputContainer,
 .inputContainerWGap {
-  display: flex;
+  padding: 0.5em;
-  align-items: flex-end;
-  gap: 1em;
 }
 
 .inputContainerWGap {
   padding-top: 0.5em;
 }
 
+.inputItems {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 1em;
+}
+
 .label {
   padding: 0;
   margin: 0;
-  font-size: 14px;
+  font-size: 0.9em;
+  color: #ccc;
+}
+
+.inline {
+  padding-left: 0.5em;
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }

client/src/features/control/PlaybackControl.module.css

@@ -8,8 +8,9 @@
 
 .timeContainer,
 .playbackContainer {
-  border: 1px solid rgb(226, 232, 240);
+  background-color: rgba(0, 0, 0, 0.05);
-  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
   padding: 0.5em;
 }
 
@@ -37,12 +38,12 @@
 }
 
 .time {
-  color: #333;
+  color: #ccc;
   font-size: 1.1em;
 }
 
 .tag {
-  color: #666;
+  color: #aaa;
   font-size: 0.9em;
 }
 

client/src/features/editors/Editor.module.css

@@ -2,13 +2,13 @@
   width: 95%;
   margin: auto;
   height: 95vh;
+  color: #fffd;
 }
 
 .editor {
   height: 100%;
   margin-top: 1.5vh;
-  background-color: #fcfcfa;
+  background-color: rgba(255, 255, 255, 0.13);
-  /* 011627 */
   padding: 0.8em 1.5em;
 
   display: flex;

client/src/features/editors/list/Block.module.css

@@ -5,12 +5,11 @@
 .block,
 .delay {
   position: relative;
-  top: 1em;
   margin: 0.2em 0;
   width: 100%;
   border-radius: 8px;
   font-size: 15px;
-  border: 1px solid #0001;
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .block,
@@ -29,7 +28,7 @@
   align-content: center;
   align-self: center;
 
-  opacity: 0.6;
+  opacity: 0.8;
   transition: linear 0.1s;
 }
 
@@ -37,7 +36,7 @@
 .eventRowActive:hover > .actionOverlay,
 .block:hover > .actionOverlay,
 .delay:hover > .actionOverlay {
-  opacity: 0.85;
+  opacity: 1;
   transition: linear 0.1s;
 }
 
@@ -61,24 +60,26 @@
 }
 
 .eventRow {
-  background-color: #0001;
+  background-color: rgba(255, 255, 255, 0.02);
 }
 
 .eventRowActive {
-  background-color: #b2f5eaaa;
+  background-color: rgba(255, 255, 255, 0.36);
   background: linear-gradient(
-    0deg,
+    180deg,
-    #7aadffaa 5%,
+    #ff5b7e 0%,
-    #7aadff55 6%,
+    #ff7597 05%,
-    #7aadff55 95%,
+    #ff759733 06%,
-    #7aadffaa 96%
+    #ff759733 94%,
+    #ff7597 95%,
+    #ff5b7e 100%
   );
 }
 
 .titleContainer,
 .detailedContainer {
-  background-color: #fff8;
+  background-color: rgba(255, 255, 255, 0.05);
-  border: 1px solid #0001;
+  border: 1px solid rgba(255, 255, 255, 0.05);
   border-radius: 4px;
 }
 
@@ -101,24 +102,38 @@
 
 /* ============= BLOCK BLOCK ============= */
 .block {
-  background-color: #805ad5aa;
+  background-color: #805ad5;
-  background: linear-gradient(0deg, #805ad5aa 20%, #805ad555 21%);
+  /* background: linear-gradient(0deg, #6b46c1 20%, #805ad5 21%); */
+  background: linear-gradient(
+    0deg,
+    rgba(107, 70, 193, 1) 0%,
+    rgba(128, 90, 213, 1) 20%,
+    rgba(107, 70, 193, 0.15) 21%
+  );
+
   flex-direction: row-reverse;
 }
 
 /* ============= DELAY BLOCK ============= */
 .delay {
-  background-color: #ecc94baa;
+  background-color: #ecc94b;
-  background: linear-gradient(180deg, #ecc94baa 20%, #ecc94b55 21%);
+  /* background: linear-gradient(180deg, #d69e2e 20%, #ecc94b 21%); */
+  background: linear-gradient(
+    180deg,
+    rgba(214, 158, 46, 1) 0%,
+    rgba(236, 201, 75, 1) 20%,
+    rgba(214, 158, 46, 0.07) 21%
+  );
+
   justify-content: space-between;
 }
 
-.delayValue {
+/* .delayValue {
-  color: #222;
+  color: #ffa;
-  background-color: #fff5;
+  font-weight: 600;
   border-radius: 4px;
   padding: 0.2em;
   text-align: center;
   width: 6em;
-  border: 1px solid #0001;
+  border: 1px solid rgba(255,255,255,0.05);
-}
+} */

client/src/features/editors/list/List.module.css

@@ -0,0 +1,10 @@
+.eventContainer {
+  margin-top: 1em;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+  padding: 8px;
+}

client/src/features/menu/EventListMenu.jsx

@@ -15,6 +15,8 @@ export default function EventListMenu(props) {
   const buttonProps = {
     size: 'sm',
     variant: 'outline',
+    colorScheme: 'whiteAlpha',
+    backgroundColor: '#ffffff05'
   };
 
   const addHandler = () => {
@@ -25,7 +27,7 @@ export default function EventListMenu(props) {
     <div className={style.headerButtons}>
       <Menu>
         <ButtonGroup isAttached>
-          <Button size='sm' variant='outline'>
+          <Button {...buttonProps}>
             Upload
           </Button>
           <MenuButton as={Button} {...buttonProps}>
@@ -40,7 +42,7 @@ export default function EventListMenu(props) {
       <Menu>
         <ButtonGroup isAttached>
           <Button {...buttonProps}>Save</Button>
-          <MenuButton as={Button} {...buttonProps}>
+          <MenuButton as={Button} {...buttonProps} >
             <FiChevronDown />
           </MenuButton>
         </ButtonGroup>

client/src/features/viewers/backstage/StageManager.jsx

@@ -74,7 +74,11 @@ export default function StageManager() {
           <div className={style.info}>Have a nice day</div>
         </div>
         <div className={style.qr}>
-          <QRCode value='www.carlosvalente.com' size={180} level='L' />
+          <QRCode
+            value='www.carlosvalente.com'
+            size={window.innerWidth / 10}
+            level='L'
+          />
         </div>
       </div>
     </div>

client/src/features/viewers/backstage/StageManager.module.css

@@ -1,13 +1,12 @@
 .container__gray,
 .container__grayFinished {
   background: linear-gradient(90deg, #252525 0%, #121212 100%);
-  height: 100%;
+  height: 100vh;
   color: #fffd;
-  font-size: 16px;
   font-weight: 300;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 3vw 2fr 1vw;
-  grid-template-rows: 5em 1fr 1fr 1fr 1fr 1fr;
+  grid-template-rows: 5vh 1fr 1fr 1fr 1fr 1fr;
   grid-template-areas:
     ' titl titl titl . schd .'
     ' titl titl titl . schd .'
@@ -15,7 +14,7 @@
     ' next next .... . schd .'
     ' .... .... .... . info .'
     ' time clck pres . info .';
-  gap: 1em;
+  gap: 1vw;
 }
 
 .label {
@@ -27,8 +26,8 @@
   grid-area: titl;
   font-size: 5vw;
   font-weight: 600;
-  padding-top: 0.1em;
+  padding-top: 0.2vh;
-  padding-left: 0.5em;
+  padding-left: 2vw;
 }
 
 /* =================== TITLES ===================*/
@@ -39,29 +38,29 @@
 .clockContainer,
 .countdownContainer {
   background-color: rgba(255, 255, 255, 0.05);
-  padding: 1em 2.5em;
+  padding: 1vh 2vw;
 }
 
 .todayContainer,
 .infoContainer {
   background-color: rgba(255, 255, 255, 0.07);
-  padding: 1.5em 2.5em;
+  padding: 2.5vh 2vw;
 }
 
 .infoContainer,
 .todayContainer {
-  border-radius: 1em;
+  border-radius: 1vw;
 }
 
 .nowContainer {
   background-color: rgba(255, 255, 255, 0.09);
 
   grid-area: now;
-  border-radius: 0 2em 2em 0;
+  border-radius: 0 2vw 2vw 0;
 }
 .nextContainer {
   grid-area: next;
-  border-radius: 0 2em 2em 0;
+  border-radius: 0 2vw 2vw 0;
 }
 
 .nowTitle,
@@ -101,7 +100,7 @@
 .todayContainer {
   grid-area: schd;
   display: grid;
-  grid-template-rows: 3em 1fr 2em;
+  grid-template-rows: 5vh 1fr 3vh;
   margin-top: 3vh;
   height: 95%;
 }
@@ -109,30 +108,37 @@
 .entries {
   display: flex;
   flex-direction: column;
-  gap: 0.8em;
+  gap: 1.5vh;
 }
 
 .navItem,
 .navItemSelected {
   background-color: rgba(255, 255, 255, 0.39);
-  width: 16px;
+  width: 1vw;
-  height: 16px;
+  height: 1vw;
-  border-radius: 10px;
+  border-radius: 1vw;
 }
 
 .navItemSelected {
   background-color: rgba(255, 255, 255, 0.79);
 }
 
+.entryStart,
+.entryEnd {
+font-size: 1.5vw;
+}
+
+.entryTitle {
+  align-self: center;
+}
 .entryPast,
 .entryNow,
 .entryFuture {
   background-color: rgba(255, 255, 255, 0.03);
   display: flex;
-  gap: 1em;
+  gap: 1.5vw;
   font-size: 1.3vw;
-  padding: 0.2em 1em;
+  padding: 0.2vh 1vw;
-  border-radius: 8px;
 }
 
 .entryPast {
@@ -144,8 +150,9 @@
 .entryNow {
   font-size: 1.3vw;
   color: #fff;
-  line-height: 3em;
+  line-height: 7vh;
   background-color: rgba(255, 255, 255, 0.09);
+  border-bottom: 3px solid #ff7597aa;
 }
 
 /* =================== OVERLAY ===================*/
@@ -167,7 +174,7 @@
 
 .infoMessages {
   grid-area: info;
-  font-size: 2em;
+  font-size: 1.5vw;
 }
 
 .qr {
@@ -181,19 +188,19 @@
 .clockContainer {
   grid-area: time;
   margin-bottom: 2vh;
-  border-radius: 1em 0em 0em 1em;
+  border-radius: 1vw 0 0 1vw;
 }
 
 .countdownContainer {
   grid-area: clck;
   margin-bottom: 2vh;
-  border-radius: 0em 1em 1em 0em;
+  border-radius: 0 1vw 1vw 0;
 }
 
 .clock {
   font-size: 3vw;
   text-align: center;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.25vw;
   color: #ddd;
 }
 
@@ -201,6 +208,6 @@
   align-self: center;
   justify-self: flex-end;
   display: flex;
-  gap: 1em;
+  gap: 1vw;
   margin-bottom: auto;
 }

client/src/features/viewers/presenter/PresenterSimple.jsx

@@ -2,17 +2,17 @@ import style from './PresenterView.module.css';
 
 export default function PresenterSimple() {
   return (
-    <div className={style.container__gray}>
+    <div className={style.container__graySimple}>
-
       {/* <div className={style.messageOverlayActive}>
         <div className={style.message}>Remember to smile</div>
       </div> */}
 
-      <div className={style.mainContainer}>
+      <div className={style.timerContainer}>
         <div className={style.countdownBig}>01:03</div>
-        <div className={style.progress}>
+      </div>
-          <div className={style.progressed}></div>
+
-        </div>
+      <div className={style.progress}>
+        <div className={style.progressed}></div>
       </div>
 
       {/* <div className={style.mainContainer}>

client/src/features/viewers/presenter/PresenterView.jsx

@@ -21,15 +21,13 @@ export default function PresenterView() {
         <div className={style.message}>Remember to smile</div>
       </div> */}
 
-      <div className={style.mainContainer}>
+      <div className={style.timerContainer}>
         <div className={style.countdown}>01:03</div>
-        <div className={style.progress}>
+        {/* <div className={style.finished}>TIME UP</div> */}
-          <div className={style.progressed}></div>
-        </div>
       </div>
 
-      <div className={style.mainContainer}>
+      <div className={style.progress}>
-        <div className={style.finished}>TIME UP</div>
+        <div className={style.progressed}></div>
       </div>
 
       <div className={style.clockContainer}>

client/src/features/viewers/presenter/PresenterView.module.css

@@ -3,12 +3,33 @@
   background: radial-gradient(circle, #202020 0%, #121212 80%);
   height: 100vh;
   color: #fffd;
-  font-size: 16px;
+  display: grid;
-  padding: 1em;
+  grid-template-columns: 1fr 1fr 5vw 1fr 1fr;
+  grid-template-rows: auto 1fr auto auto;
+  grid-template-areas:
+    ' clck .... .... .... ....'
+    ' timr timr timr timr timr'
+    ' prog prog prog prog prog'
+    ' now  now  .... next next';
+  gap: 1vw;
+}
+.container__graySimple,
+.container__grayFinishedSimple {
+  background: radial-gradient(circle, #202020 0%, #121212 80%);
+  height: 100vh;
+  color: #fffd;
+  display: grid;
+  grid-template-columns: 1fr 1fr 5vw 1fr 1fr;
+  grid-template-rows: auto 1fr 30vh;
+  grid-template-areas:
+    ' clck .... .... .... ....'
+    ' timr timr timr timr timr'
+    ' prog prog prog prog prog';
+  gap: 1vw;
 }
 
 .label {
-  font-size: 1.5vw;
+  font-size: 1.3vw;
   color: #ff7597;
 }
 /* =================== TITLES ===================*/
@@ -16,30 +37,26 @@
 .nowContainer,
 .nextContainer {
   background-color: rgba(255, 255, 255, 0.05);
-  padding: 1em 3em;
+  padding: 1vh 2vw;
-  border-radius: 4px;
+  border-radius: 1vw;
-  width: 40vw;
 }
 
 .nowContainer {
-  position: absolute;
+  grid-area: now;
-  bottom: 1em;
-  left: 1em;
 }
 .nextContainer {
-  position: absolute;
+  grid-area: next;
-  bottom: 1em;
-  left: calc(50% + 1em);
 }
 
 .title {
   color: #ddd;
   font-size: 2.5vw;
 }
+
 .subtitle,
 .presenter {
   color: #aaa;
-  font-size: 1.8vw;
+  font-size: 2vw;
 }
 
 .title:after,
@@ -50,49 +67,12 @@
 
 /* =================== MAIN ===================*/
 
-.mainContainer,
+.timerContainer,
-.mainContainerFinished {
+.timerContainerFinished {
-  margin: auto;
+  grid-area: timr;
-  width: 100%;
+  justify-self: center;
-  text-align: center;
+  align-self: center;
-  position: absolute;
-  top: 40%;
-  left: 50%;
   color: white;
-  transform: translate(-50%, -50%);
-  -ms-transform: translate(-50%, -50%);
-}
-
-.countdown,
-.countdownBig {
-  line-height: 1em;
-  letter-spacing: 0.1em;
-}
-
-.countdown {
-  font-size: 25vw;
-}
-
-.countdownBig {
-  padding-top: 10vh;
-  font-size: 30vw;
-}
-
-.progress {
-  width: 80%;
-  margin: auto;
-  height: 1em;
-  background-color: #333;
-}
-
-.progressed {
-  width: 30%;
-  height: 1em;
-  background-color: #ddd;
-}
-
-.container__grayFinished {
-  border: 1em solid #ff5353;
 }
 
 .finished {
@@ -101,6 +81,41 @@
   color: #ff5353;
 }
 
+.countdown,
+.countdownBig {
+  letter-spacing: 4vw;
+}
+
+.countdown {
+  font-size: 23vw;
+  line-height: 23vw;
+}
+
+.countdownBig {
+  font-size: 30vw;
+  line-height: 30vw;
+}
+
+.progress {
+  grid-area: prog;
+  width: 80%;
+  margin: 0 auto;
+  height: 2vh;
+  background-color: rgba(255, 255, 255, 0.13);
+  border-radius: 4px;
+}
+
+.progressed {
+  width: 30%;
+  height: 2vh;
+  background-color: rgba(255, 255, 255, 0.79);
+  border-radius: 4px;
+}
+
+.container__grayFinished {
+  border: 1vw solid #ff5353;
+}
+
 /* =================== OVERLAY ===================*/
 
 .messageOverlay,
@@ -129,7 +144,7 @@
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   font-size: 15vw;
-  line-height: 1.1em;
+  line-height: 30vh;
   text-align: center;
   font-weight: 600;
 }
@@ -137,13 +152,12 @@
 /* =================== MAIN ===================*/
 
 .clockContainer {
-  position: absolute;
+  grid-area: clck;
-  top: 2em;
+  padding: 1vh 2vw;
-  left: 2em;
 }
 
 .clock {
   font-size: 4vw;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.4vw;
   color: #ddd;
 }