codebytere/codebytere.github.io

Update Ideas

Closed this issue · 1 comments

I know you haven't put any updates out for your personal website in a long time. I just thought I would suggest some changes when you have time, and if you want to make them.

Fullscreen shouldn't completely remove the frame.

Remove position fixed from terminal window

.terminal-window.fullscreen {
  ...
  /* position: fixed; */
  ...
}

Remove top 0 from terminal window

.terminal-window.fullscreen #terminal {
  /* top: 0; */
}

Animate the window resizing

.terminal-window {
  ...
  transition: all 0.5s ease;
}

Adding functionality to the minimize button

Add css minimized state

.terminal-window.minimized {
    height: 30px;
    top: calc(100vh - 38px);
    width: 250px;
}

Add the pointer while hovering the minimized button

.terminal-window header .button.yellow {
    ...
    cursor: pointer;
}

Add functionality to the button

  ...
  const registerMinimizedToggle = () => {
      $('.button.yellow').click(() => {
        $('.terminal-window').toggleClass('minimized')
      })
    }
  ...
  $(() => {
    ...
    registerMinimizedToggle()
    ...
  }

Footer looks nice when it matches the sitewide font.

Change Lato for Menlo, add enough room from the bottom for the minimized state, and also make your position absolute so that the footer is actually centered and not off by a wee bit.

.footer {
      position: absolute;
      bottom: 40px;
      left: 0;
      right: 0;
      text-align: center;
      line-height: 0.1px;
      color: white;
      font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier";
}

Closed in 4868416.