Enhance line

.idea/workspace.xml

@@ -2,26 +2,16 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/src/framework/helper/animations/animations.scss" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/framework/index.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/framework/cache.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/animations.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/framework/helper/animations.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/animations/animations.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/framework/helper/random.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/random.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/framework/polyfills.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/polyfills.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/framework/primitives/implementations/anchor.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/anchor.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/page/background/background.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/page/footer/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.html.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/style/a.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/a.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/style/fonts.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/fonts.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/style/mixins.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/mixins.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/style/vars.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/vars.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
     </list>
-    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -43,6 +33,11 @@
   <component name="ProjectLevelVcsManager" settingsEditedManually="true">
     <ConfirmationsSetting value="2" id="Add" />
   </component>
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showExcludedFiles" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
   <component name="PropertiesComponent">
     <property name="ASKED_ADD_EXTERNAL_FILES" value="true" />
     <property name="DefaultHtmlFileTemplate" value="HTML File" />
@@ -56,33 +51,33 @@
     <property name="nodejs_package_manager_path" value="npm" />
     <property name="prettierjs.PrettierConfiguration.Package" value="/usr/local/lib/node_modules/prettier" />
     <property name="run.code.analysis.last.selected.profile" value="pProject Default" />
-    <property name="settings.editor.selected.configurable" value="watcher.settings" />
+    <property name="settings.editor.selected.configurable" value="preferences.updates" />
     <property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
   </component>
   <component name="RecentsManager">
-    <key name="MoveFile.RECENT_KEYS">
-      <recent name="$PROJECT_DIR$/src/framework/helper" />
-      <recent name="$PROJECT_DIR$/src/framework/primitives/implementations" />
-      <recent name="C:\Projects\portfolio\CompiledCV\src\static\fonts" />
-      <recent name="C:\Projects\portfolio\CompiledCV\src\static\cv" />
-      <recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
-    </key>
     <key name="CopyFile.RECENT_KEYS">
       <recent name="C:\Projects\portfolio\CompiledCV\src\page\background" />
       <recent name="C:\Projects\portfolio\CompiledCV\src\static" />
       <recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
       <recent name="$PROJECT_DIR$" />
     </key>
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/framework/helper/animations" />
+      <recent name="$PROJECT_DIR$/src/framework/helper" />
+      <recent name="$PROJECT_DIR$/src/framework/primitives/implementations" />
+      <recent name="C:\Projects\portfolio\CompiledCV\src\static\fonts" />
+      <recent name="C:\Projects\portfolio\CompiledCV\src\static\cv" />
+    </key>
   </component>
-  <component name="RunDashboard">
+  <component name="ServiceViewManager">
-    <option name="ruleStates">
+    <option name="viewStates">
       <list>
-        <RuleState>
+        <serviceView>
-          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
+          <treeState>
-        </RuleState>
+            <expand />
-        <RuleState>
+            <select />
-          <option name="name" value="StatusDashboardGroupingRule" />
+          </treeState>
-        </RuleState>
+        </serviceView>
       </list>
     </option>
   </component>
@@ -127,7 +122,9 @@
       <workItem from="1578383579118" duration="5883000" />
       <workItem from="1578391423465" duration="34000" />
       <workItem from="1578392333248" duration="21735000" />
-      <workItem from="1578472848376" duration="13628000" />
+      <workItem from="1578472848376" duration="13670000" />
+      <workItem from="1578556192921" duration="3098000" />
+      <workItem from="1578559306201" duration="30000" />
     </task>
     <servers />
   </component>

src/framework/helper/animations/animations.scss

@@ -0,0 +1,9 @@
+html[animations='off'] {
+  &,
+  *,
+  *::before,
+  *::after {
+    transition: none !important;
+    animation: none !important;
+  }
+}

src/framework/index.scss

@@ -0,0 +1,2 @@
+@import 'primitives/primitives';
+@import 'helper/animations/animations';

src/page/theme-switcher/theme-switcher.ts

@@ -11,7 +11,7 @@ import { EventBroadcaster } from '../../framework/event-broadcaster';
 import {
   turnOffAnimations,
   turnOnAnimations,
-} from '../../framework/helper/animations';
+} from '../../framework/helper/animations/animations';
 
 export class PageThemeSwitcher extends PageElement {
   private static readonly LOCAL_STORAGE_KEY = 'dark-mode';

src/page/timeline/timeline-element/timeline-element.html.ts

@@ -9,7 +9,8 @@ export const generate = (
   showLess: string
 ): html => `
     <section class="timeline-element">
-        <div class="line">
+        <div class="line-container">
+            <div class="line"></div>
             <p class="date">${date}</p>
         </div>
         <div class="card">

src/page/timeline/timeline-element/timeline-element.scss

@@ -1,33 +1,66 @@
 @import '../../../style/mixins';
 @import '../../../style/vars';
 
+@mixin q-dependent-line-container($vars, $q) {
+  .line {
+    height: calc(#{$q} - #{map_get($vars, $icon-size)} / 2);
+
+    &:before {
+      height: calc(100% - #{$q} - #{map_get($vars, $icon-size)} / 2);
+    }
+    &:after {
+      top: calc(#{$q} - #{map_get($vars, $icon-size)} / 2);
+    }
+  }
+  .date {
+    top: calc(#{$q} - 0.5ch);
+  }
+}
+
 @include responsive() using ($vars) {
   .timeline-element {
     display: flex;
     width: map_get($vars, $body-width);
     margin: auto;
 
-    .line {
+    .line-container {
       position: relative;
-      border-left: map_get($vars, $line-width) solid
+      @include q-dependent-line-container($vars, 33%);
-        map_get($vars, $accent-color);
+      min-width: 160px;
 
-      &:before {
+      .line {
-        content: '';
+        border-left: map_get($vars, $line-width) solid
-        @include square(map_get($vars, $icon-size));
+          map_get($vars, $accent-color);
-        box-sizing: content-box;
+
-        position: absolute;
+        &:before {
-        left: calc(
+          content: '';
-          -0.5 * #{map_get($vars, $icon-size)} -
+          position: absolute;
-            (1.5 * #{map_get($vars, $line-width)})
+          left: 0;
-        );
+          bottom: 0;
-        border: map_get($vars, $line-width) solid map_get($vars, $accent-color);
+          border-left: map_get($vars, $line-width) solid
-        border-radius: 100%;
+            map_get($vars, $accent-color);
-        background: map_get($vars, $background);
+        }
+
+        &:after {
+          content: '';
+          @include square(map_get($vars, $icon-size));
+          border-radius: 1000px;
+          border: map_get($vars, $line-width) solid
+            map_get($vars, $accent-color);
+          position: absolute;
+          left: -1 * map_get($vars, $icon-size) / 2 +
+            map_get($vars, $line-width) / 2;
+        }
       }
 
       .date {
         @include special-text-font($vars);
+        position: absolute;
+        transform-origin: left center;
+        transform: rotate(30deg)
+          translateX(map_get($vars, $icon-size) / 2 + 6px) translateY(-10%);
+
+        padding-right: map_get($vars, $normal-margin);
       }
     }
 
@@ -35,42 +68,20 @@
       &:not(:first-of-type) .card {
         margin-top: map_get($vars, $large-margin);
       }
-
-      .line {
-        &:before {
-          top: calc(33% - #{map_get($vars, $icon-size)} / 2);
-        }
-
-        .date {
-          position: relative;
-          top: calc(33% + #{map_get($vars, $icon-size)} / 2 + 1ch);
-          transform: rotate(30deg);
-          margin: 0 map_get($vars, $normal-margin) 0
-            calc(#{map_get($vars, $line-width)} + 1ex);
-          width: 100px;
-        }
-      }
     }
 
     @include on-small-screen {
       flex-direction: column;
       align-items: center;
 
-      &:before {
+      .line-container {
-        top: calc(50% - #{map_get($vars, $icon-size)} / 2);
+        @include q-dependent-line-container($vars, 50%);
-      }
-
-      .line {
-        @include center-children();
-        justify-content: flex-start;
         height: 150px;
         width: 50%;
 
         .date {
-          margin-left: calc(
+          transform: translateX(map_get($vars, $icon-size) / 2 + 12px)
-            #{map_get($vars, $icon-size)} / 2 + #{map_get($vars, $small-margin)}
+            translateY(-10%);
-          );
-          width: 200px;
         }
       }
     }

src/styles.scss

@@ -1,7 +1,7 @@
 @import 'style/vars';
 @import 'style/mixins';
 @import 'style/a';
-@import 'framework/primitives/primitives';
+@import 'framework/index';
 
 @include responsive() using ($vars) {
   & {
@@ -13,16 +13,6 @@
     @include on-small-screen {
       font-size: 0.8em;
     }
-
-    &[animations='off'] {
-      &,
-      *,
-      *::before,
-      *::after {
-        transition: none !important;
-        animation: none !important;
-      }
-    }
   }
 
   body {

webpack.config.js

@@ -16,7 +16,7 @@ module.exports = {
   },
   devServer: {
     host: '0.0.0.0',
-    disableHostCheck: true,
+    // disableHostCheck: true,
   },
   optimization: {
     minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],