newtone

// viewport stuff
var targetWidth = 960;
var deviceWidth = 'device-width';
var viewport = $('meta[name="viewport"]');

// check to see if local storage value is set on page load

  localStorage.isResponsive = (localStorage.isResponsive === undefined) ? 'true' : localStorage.isResponsive;
  localStorage.showBrowserSwitcher = (localStorage.showBrowserSwitcher === undefined) ? 'true' : localStorage.showBrowserSwitcher;

newtone

const name = (firstName, lastName) => {
  console.log(`${firstName} ${lastName}`);
};

newtone

.parent::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.child {
  display: inline-block;
  vertical-align: middle;

newtone

{
  /* midpoint defaults to 50% */
  background: linear-gradient(#fff, #bbf);

  /* midpoint set to 80% */
  background: linear-gradient(#fff, 80%, #bbf);
}

newtone

# Remove old kernels
#
alias purge-old-kernels='dpkg -l '\''linux-*'\'' | sed '\''/^ii/!d;/'\''"$(uname -r | sed "s/\(.*\)-\([^0-9]\+\)/\1/")"'\''/d;s/^[^ ]* [^ ]* \([^ ]*\).*/\1/;/[0-9]/!d'\'' | xargs sudo apt-get -y purge'

newtone

.link {
  background-size: 0 3px;
  background-repeat: repeat-x;
  background-position: 0 95%, 100% 95%, 0 95%;

  &:hover {
    background-size: 100% 3px;
    background-image: linear-gradient(to right, color-one, color-two);
  }
}

newtone

<h1>Some Text</h1>

<div class="split-text-container">
	<h1 data-text="Split Colors">Split Colors</h1>
</div>

newtone

Alt + 5: [
Alt + 6: ]
Alt + 7: |
Alt + 8: {
Alt + 9: }

newtone

// new css structure -> as seen in https://matthiasott.com/notes/how-i-structure-my-css

/scss/
├── 1-settings
│   └── _global.scss
├── 2-design-tokens
│   ├── _colors.scss
│   ├── _fonts.scss
│   ├── _media-queries.scss
│   ├── _spacing.scss

newtone

* {
	box-sizing: border-box;
}

:root {
	--color: rgba(0, 0, 0, 0.55);
}

body {
	margin: 0;