emsAlpha CSS
emsAlpha CSS is a computer instruction set tagged with CSS.Introduction
In this document I explain the design philosophy and implementation of my emsAlpha CSS theme.
emsAlpha
Implementation
/* http://emsenn.net/style.css
*/
html {
color: rgba(44,44,44,1); background-color: rgba(242,242,242,1);
hyphens: auto;
font-family: sans-serif;
letter-spacing: 0.025em; word-spacing: 0.045em;
transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}
body {
max-width: 40rem;
margin: auto;
padding-top: 1em;
}
main {
animation: animation-drop-in 0.5s;
}
h1 { font-weight: normal; font-size: 2em; margin: 0.5em 0 0 0; }
h2 { text-align: center; font-weight: normal; }
footer {
font-size: .8em; letter-spacing: 0em; word-spacing: 0em;
color: rgba(117,117,117,1);
text-align: right;
}
sup.ordinal { font-style: italic; }
a {
color: rgba(117,117,117,1);
display: inline-block;
position: relative;
text-decoration: none;
transition: color 0.3s;
background: linear-gradient(to left, rgba(242,242,242,1) 50%, rgba(117,117,117,0.2) 50%);
background-size: 200% 100%;
background-position:right bottom;
transition: background 0.3s;
}
a:before {
background: rgba(117,117,117,1);
content: "";
display: block;
position: absolute;
bottom: -0.1em;
height: 0.1em;
width: 100%;
transition: all 0.3s;
}
a:visited {
color: rgba(88,88,88,1);
}
a:hover {
outline-style: none;
animation-delay: 0.3s;
animation: animation-pulse 0.8s infinite;
background-position:left bottom;
}
a:hover:before, a:focus:before {
width: 0em;
}
a:focus {
outline-style: none;
animation-delay: 0.3s;
background: none;
animation: animation-pulse-heavy 1.2s infinite;
}
::selection {
color: rgba(44,44,44,01); background-color: rgba(117,117,117,0.5);
}
.blockquote {
margin: 1em 2em;
padding: 1em;
font-size: 0.8em;
border-left: 0.2em solid rgba(117,117,117,1);
}
.blockquote li { margin-left: 2em;}
.verbose { font-size: 0.8em; margin-left: 2em; margin-right: 2em;}
.letter{
text-align: justify;
margin: 0 2em 0 2em;
font-size: 1.3em;
}
.letter__complimentary {
font-size: 1.5em;
}
.letter__signature {
font-size: 2.2em;
margin: 0.5em;
margin-left: 2em;
}
.timeline {
border-left: 0.1em solid rgba(44,44,44,1);
margin-left: 2em;
padding-left: 1.75em;
}
.timeline__entry {
position: relative;
margin-bottom: 1.2em;
}
.timeline__mark {
width: 1em; height: 1em;
position: absolute;
border: 0.2em solid rgba(117,117,117,1);
left: -2.5em;
background-color: rgba(242,242,242,1);
border-radius: 50%;
}
.timeline__title{
font-size: 1em;
letter-spacing: 0;
font-weight: bold;
margin-left: -0.5em;
}
.timeline__period {
font-style: italic;
font-size: 0.5em;
}
.timeline__details {
font-size: 0.8em;
}
.table {
width: 100%;
}
.table__header {
background: rgba(44,44,44,1);
color: rgba(242,242,242,1);
text-align: center;
font-size: 1em;
}
.table__row {
display: table-row;
}
.table__cell {
display: table-cell;
vertical-align: middle;
padding: 1em 0;
}
.table__cell[data-title="brief"] {
float: right;
}
.footer__meta {
float: left;
}
@keyframes animation-drop-in {
0% {
transform: translateY(50vw) scale(0.7);
opacity: 0;
}
40% { transform: translatey(0) scale(0.7); opacity: 0.05; }
80% { transform: scale(0.7); opacity: 1; }
100% {
transform: scale(1);
}
}
@keyframes animation-pulse {
from, 50%,
to { background-color: rgba(117,117,117,0.2)); }
50% { background-color: rgba(117,117,117,0.1); }
}
@keyframes animation-pulse-heavy {
from, 50%,
to { background-color: rgba(117,117,117,0.3)); }
50% { background-color: rgba(117,117,117,0.2); }
}
@media (max-width: 512px) {
body { padding: 1.2em; }
section { padding: 0.3em; }
.history__timeline__details {
margin-left: -2em;
}
.letter { margin: 0 0.5em 0 0.5em; text-align: left; }
}
@media (min-width: 512px) { html { font-size: large; } }
@media (min-width: 1200px) { .content { max-width: 1024px; } }
Supplements
Example Texts
Example HTML Document
<!DOCTYPE html>
<html>
<head>
<title>emsenn</title>
<meta charset="UTF-8">
<meta name="description" content="emsenn is a writer & developer. This is their website.">
<meta name="keywords" content="emsenn, morgan sennhauser">
<meta name="author" content="emsenn">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/emsalpha.css">
<!-- <base href="https://emsenn.net/" target="_blank"> -->
</head>
<body>
<div class="page-wrapper">
<main class="content">
<h1>
My name is emsenn.
</h1>
<div class="letter">
<p>
I have an interest in the things that shape our interaction with technology, like software documentation and project governance.
</p>
<p>
I want to contribute to projects aligned with this interest. This includes helping businesses develop, implement, and document their technical and operational processes.
</p>
<p>
<a class="cta" href="offer/">Click here to learn if we should work together.</a>
</p>
</div>
<footer>
<div class="footer__stamp">
This document was last updated June 25<sup>th</sup>, 2018.
</div>
</footer>
</main>
</div>
</body>
</html>
Index
emsAlpha :
CSS :
HTML :