~wuz/wuz.sh

59c2e38a3e6ebb34d32c07999d67e43a668a9f0b — wuz 4 months ago c4c4202
Add new styles
M _includes/layouts/footer.njk => _includes/layouts/footer.njk +0 -2
@@ 1,5 1,3 @@
<black-lives></black-lives>

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {

M _includes/layouts/head.njk => _includes/layouts/head.njk +1 -2
@@ 5,10 5,9 @@
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="/css/main.css" />
    <script src="/js/black-lives.js" async></script>
    <script src="/js/main.js" async></script>
  </head>
  <body
    class="font:recursive bg:terminal-dreams text:snow-crash"
    class="font:recursive text:terminal-dreams bg:snow-crash"
  >


M _includes/styles/atoms/color.scss => _includes/styles/atoms/color.scss +24 -1
@@ 1,5 1,16 @@
$colors: (terminal-dreams, snow-crash, brand, brand-secondary, hacker-pink, electric-blue, purple-ping, relay-red);

$colors: (
	gray-haze,
	snow-crash,
	shadow-aura,
	terminal-dreams,
	purple-ping,
	relay-red,
	electric-blue,
	hacker-pink,
	brand,
	brand-secondary
);


@each $color in $colors {


@@ 15,6 26,18 @@ $colors: (terminal-dreams, snow-crash, brand, brand-secondary, hacker-pink, elec
		text-shadow: 0.02em 0.02em 0.1em var(--c-$color);
	}

	.shadow\:$color {
		box-shadow: 0.02em 0.02em 0.1em var(--c-$color));
	}

	.border\:1\:$color {
		border: 1px solid var(--c-$color);
	}

	.drop-shadow\:$color {
		filter: drop-shadow(0.25rem 0.25rem 0.1em var(--c-$color));
	}

	.text\:$color\:hov:hover {
		color: var(--c-$color);
	}

M _includes/styles/atoms/flex.scss => _includes/styles/atoms/flex.scss +12 -0
@@ 2,6 2,10 @@
  display: flex;
}

.flex\:column {
  flex-direction: column;
}

.ai\:center {
  align-items: center;
}


@@ 17,3 21,11 @@
.jc\:flex-end {
  justify-content: flex-end;
}

.jc\:space-around {
  justify-content: space-around;
}

.jc\:space-between {
  justify-content: space-between;
}

M _includes/styles/atoms/grid.scss => _includes/styles/atoms/grid.scss +3 -0
@@ 1,6 1,9 @@
.grid {
  display: grid;
  grid-gap: em(spacing(2));
}

.grid\:center {
  align-items: center;
}


M _includes/styles/generics/html.scss => _includes/styles/generics/html.scss +0 -12
@@ 8,18 8,6 @@ h6 {
	line-height: 1.1;
}

h1.hack {
	position: relative;
	overflow: hidden;
	padding-bottom: 40px;
	&:after {
		content: '================================================================================================================';
		position: absolute;
		bottom: 10px;
		left: 0;
	}
}

body {
	min-height: 100vh;
	font-size: var(--base-font-size);

M index.html => index.html +5 -5
@@ 5,7 5,7 @@ title: Howdy, I'm Wuz!

<main class="content">
	<header class="pos:rel">
		<h1 class="typescale:17 wght:900 text-gradient:hacker">Howdy, I'm Wuz.</h1>
		<h1 class="typescale:17 wght:900 text-gradient:hacker drop-shadow:gray-haze">Howdy, I'm Wuz.</h1>
	</header>
	<h2 class="typescale:8 margin:1:bottom">Software engineer working to help other engineers learn and grow.</h2>
	<div>


@@ 18,12 18,12 @@ title: Howdy, I'm Wuz!
	</div>
	<div>
		<h3 class="typescale:6">Recent Writing</h3>
		<ul>
		<ul class="grid grid:auto-fit">
			{%- for post in collections.writing reversed -%} {% if post.data.draft %} {% else %} {% if post.data.stage
			>= 2 %}
			<li>
				<a href="{{post.url}}">{{ post.data.title }}</a> |
				<time datetime="{{page.date}}"> {{ post.date | prettyDate }} </time>
			<li class="border:1:gray-haze padding:2 margin:1:top flex flex:column width:50p jc:space-between">
				<a href="{{post.url}}">{{ post.data.title }}</a>
				<time class="typescale:2" datetime="{{page.date}}"> {{ post.date | prettyDate }} </time>
			</li>
			{% endif %} {% endif %} {%- endfor -%}
		</ul>

M writing/developer_tools_ide.md => writing/developer_tools_ide.md +1 -6
@@ 2,9 2,4 @@
title: "What tools does a developer use?"
date: 2019-02-25T14:22:25.098Z
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6b50n5whypwviczdw9z0.png
---
# The Integrated Development Environment (IDE)

Finally, the last major tool I'd like to discuss is the IDE. An IDE is software that combines many of the previously discussed tools into a single suite of tools. This has its pros and cons, but the major point is: by bundling all your tools together, you have a great cohesion between your tools but it can be hard to replace any single tool you don't like. Think of an IDE like buying a prefilled toolbox from the store - it will have everything you need for a while, but eventually, you might need something that doesn't fit in the box and that could be a pain.

I hope this introduction was helpful! Check back tomorrow for the post on operating systems! Comment with questions and comments and [come discuss with me on Twitter](https://twitter.com/CallMeWuz)!
\ No newline at end of file
---
\ No newline at end of file