Add all files

This commit is contained in:
Nishanth Shanmugham
2015-08-24 18:28:03 -05:00
commit d2264ad3f3
29 changed files with 2210 additions and 0 deletions

497
main.less Normal file
View File

@@ -0,0 +1,497 @@
// Font imports:
@import url(http://fonts.googleapis.com/css?family=Raleway:200);
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400italic,700,700italic);
@import url(http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
// Less variables
@base-font-size: 16px;
@vspacing: @base-font-size*2;
@monospace-font-stack: ~"'Ubuntu Mono', 'Menlo', monospace";
@body-font-stack: ~"'Proxima Nova', 'Helvetica Neue', 'Arial' sans-serif";
@heading-font-stack: ~"'Proxima Nova', 'Helvetica Neue', 'Arial' sans-serif";
@special-font-stack-1: ~"'Raleway', 'Helvetica Neue', 'Arial', sans-serif";
@black: #333;
@gray: #b7b7b7;
@accent: #21bB5b; // green
@white: #fefefe;
@milk: #fefefe;
@transition-speed-1: .1s;
@transition-speed-2: .25s;
@in-sine: cubic-bezier(0.47, 0, 0.75, 0.72);
// Utils and prefixing
@import 'flexbox-prefixes';
.heading(@font-size: 18px) {
font-size: @font-size;
font-family: @heading-font-stack;
letter-spacing: -0.005rem;
text-transform: uppercase;
font-weight: 700;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
color: @black;
}
.transition (@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
}
.user-select(@user-select) {
-webkit-user-select: @user-select;
-moz-user-select: @user-select;
-ms-user-select: @user-select;
user-select: @user-select;
}
.meta() {
font-size: 14px;
color: @gray;
}
// Slap-on utils
.dark {
color: @black !important;
}
.light {
color: @gray !important;
}
.accent {
color: @accent !important;
}
// General styles
*, *:before, *:after {
box-sizing: border-box;
}
a, a:visited, a:focus, a:active {
text-decoration: none;
}
html {
height: 100%;
font-size: @base-font-size;
}
body {
.flex-display();
.flex-direction(column); // vertically stack sections
.align-items(center); // horizontally center all sections
.justify-content(flex-start); // start sections at the top
width: 100%;
min-height: 100%;
font-weight: 400;
font-family: @body-font-stack;
color: @black;
line-height: 1.6;
text-rendering: optimizeLegibility !important;
// TODO: Uncomment when moz supports at subpixel level
// -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;
}
@media (min-width: 550px) {
body {
.justify-content(center); // vertically center all sections
}
}
// Ionicon classes
.icon {
// INFO: Comment out if you see performance issues, especially on mobile
text-rendering: geometricPrecision !important;
}
// * Sections the cornerstone of page elements
// * Container contains section contents
//
// Both classes are flex elements
.section {
.flex-display();
// Sections position their containers centrally, with spacing to the sides
// The containers can then move their children around as needed.
.justify-content(center);
.align-items(center);
width: 100%;
}
.container {
.flex-display();
width: 100%;
}
@media (min-width: 550px) {
.section {
padding: 0 20px;
margin-left: 100px;
margin-right: 100px;
max-width: 900px;
}
}
// Sections order
.section.header {
.flex-order(0);
}
.section.icons {
.flex-order(1);
}
.section.main {
.flex-order(2);
}
@media (min-width: 550px) {
.section.header {
.flex-order(0);
}
.section.icons {
.flex-order(2);
}
.section.main {
.flex-order(1);
}
}
// Styles for sections and contents
// Header section
.section.header {
background-color: @accent;
.container {
.align-items(center);
.justify-content(center);
}
.content {
.flex-display();
.flex-direction(column);
.align-items(center);
}
.name {
.heading();
color: @white;
}
nav {
font-size: 14px;
margin-bottom: floor(@vspacing/2);
// font-weight: 600;
ul {
list-style: none;
text-align: center;
.flex-display(inline-flex);
}
ul a {
margin-right: 12px;
&:last-child {
margin-right: 0;
}
}
ul li {
color: @milk;
.transition(~'color @{transition-speed-1} @{in-sine}');
&:hover {
color: @white
}
}
}
}
@media (min-width: 550px) {
.section.header {
background-color: transparent;
.container {
.justify-content(flex-start);
}
.content {
.align-items(flex-start);
}
.name {
color: @black;
}
nav {
margin-bottom: 0;
ul {
text-align: left;
}
ul li {
color: @gray;
&:hover {
color: @black;
}
}
}
}
}
// Icons
.section.icons {
background-color: @accent;
.container {
.align-items(center);
.justify-content(center);
}
.content {
a {
margin-right: 4px;
color: @milk;
.transition(~'color @{transition-speed-1} @{in-sine}');
&:last-child {
margin-right: 0;
}
&:hover {
color: @white;
}
.icon {
font-size: 16px;
&.larger {
font-size: 18px;
}
}
}
}
}
@media (min-width: 550px) {
.section.icons {
background-color: transparent;
.container {
.justify-content(flex-start);
}
.content {
a {
color: @gray;
&:hover {
color: @black;
}
}
}
}
}
// Main section
.section.main {
.container {
.align-items(center);
.justify-content(flex-start);
}
.content {
color: @black;
font-size: 16px;
.page-heading {
.heading();
margin-bottom: floor(@vspacing/2);
}
.front-matter {
.page-heading {
margin-bottom: 0;
}
.meta {
.meta();
.flex-display();
margin-bottom: @vspacing;
}
.date, .word-count, .reading-time .middot {
display: none;
}
.middot {
font-size: 6px;
margin: 0 6px;
display: inline;
vertical-align: middle;
&:before {
content: "•";
}
}
}
}
}
@media (min-width: 550px) {
.section.main {
.content {
.front-matter {
.date, .word-count, .reading-time .middot {
display: initial;
}
}
}
}
}
// 404 page
.section.main {
.container.f04 {
.justify-content(center);
.content {
.flex-display();
.flex-direction(column);
.align-items(center);
.num {
margin: 30px 0px 30px 0;
font-weight: 200;
font-family: @special-font-stack-1;
font-size: 50px;
}
.detail {
margin-bottom: 40px;
}
}
}
}
@media (min-width: 550px) {
.section.main {
.container.f04 {
.justify-content(flex-start);
.content {
.align-items(flex-start);
.num {
margin: 0 0 10px 0;
font-size: 32px;
}
.detail {
margin-bottom: 30px;
}
}
}
}
}
// Post item
.section.main {
.container {
.content {
.post-item {
.flex-display();
.align-items(center);
list-style: none;
.meta {
.meta();
min-width: 100px;
text-align: right;
margin-right: 20px;
}
}
}
}
}
// Spacing
.section {
padding: 0 20px;
}
.section.header {
padding-top: @vspacing;
padding-bottom: floor(@vspacing/2);
}
.section.icons {
padding-top: 0;
padding-bottom: @vspacing;
}
.section.main {
padding-top: @vspacing;
padding-bottom: @vspacing;
}
@media (min-width: 550px) {
@vspacing: 60px;
.container {
margin: 0 20px;
}
.section.header {
padding-top: @vspacing;
padding-bottom: @vspacing;
}
.section.icons {
padding-top: @vspacing;
padding-bottom: @vspacing;
}
.section.main {
padding-top: 0;
padding-bottom: 0;
}
.section.main.post {
padding-top: @vspacing;
padding-bottom: @vspacing;
}
}
a {
color: @accent;
}
@import 'markdown';