stoicism.design

index.html

<h1 class="heading">
  stoicism.design
</h1>

<form action="https://schoeyfield.us6.list-manage.com/subscribe/post?u=552ab950f555406e7dd967eda&amp;id=a25468faca" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="form validate" novalidate>  <div class="form__group">
    <input class="form__input" id="mce-EMAIL" name="EMAIL" type="text" required>  
        <label class="form__label" for="mce-EMAIL">Your email</label>
  </div>
  
  <input type="hidden" name="b_552ab950f555406e7dd967eda_a25468faca" tabindex="-1" value="">
  
  <button class="form__button" type="submit">Subscribe</button>
</form>

<p>
  A brief morning email every day about applying the practice of <strong>stoicism</strong> to your design work as a means to benchmark the day, get your head right, and craft virtuously.
</p>

<p><span class="fa fa-twitter"></span> <a class="link" href="https://twitter.com/schoeyfield">Michael Schofield</a></p>

stoicism-design.markdown

stoicism.design

A Pen by Michael Schofield on CodePen.

License.

style.scss

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);

$background: lighten(#b3aca7, 20%);
$color: #e2dedb;

* {
  box-sizing: border-box;
}

body {
  background-color: $background;
  font-family: 'Lato', sans-serif;
  margin: 0 auto;
  max-width: 500px;
}

.heading {
  color: darken($background, 50%);
  font-size: 3.5rem;
  font-weight: 300;
  margin-bottom: .4rem;
  text-align: right;
}

p, .link {
  color: darken($background, 50%);
  font-size: 1rem;
  line-height: 1.5rem;
}

.link {
  font-family: Lato, sans-serif;
}

.form {
  border: 1px solid #b3aca7;
  display: flex;
  transition: all .2s ease-in-out;

  &__button {
    background-color: darken($background, 20%);
    border: none;
    box-shadow: none;
    color: $color;
    cursor: pointer;
    font-size: 80%;
    transition: all .2s ease-in-out;
    width: 33%;
    
    &:hover, &:focus {
      background-color: darken($background, 30%);
    }
  }

  &__button,
  &__input {
    display: block;
    padding: 1rem;
    outline: none;
  }
  
  &__input {
    background-color: $background;
    border: none;
    transition: all .2s ease-in-out;
    width: 100%;
  }

  &__group {
    position: relative;
    width: 67%;
  }
  
  &__label {
    color: darken($background, 50%);
    left: -75px;
    font-size: 80%;
    font-weight: 700;
    position: absolute;
    top: 25%;
    transition: all .1s ease-in-out;
  }
  
  &__input:hover,
  &__input:active,
  &__input:focus {
    background-color: lighten($background, 15%);
    box-shadow: none;
    outline: none;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />