Skip to content
Permalink
Browse files

Add a basic Mozilla theme

  • Loading branch information...
joewalker committed Aug 16, 2017
1 parent b70814d commit fa0471337b9a79da35c38fdc4665e7ff5808fb02
Showing with 139 additions and 0 deletions.
  1. +14 −0 _layouts/default.html
  2. +125 −0 assets/css/style.scss
@@ -0,0 +1,14 @@
<!doctype html>
<html lang="{{ site.lang | default: "en-US" }}">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="wrapper">
{{ content }}
</div>
<script src="{{ '/assets/js/scale.fix.js' | relative_url }}"></script>
</body>
</html>
@@ -0,0 +1,125 @@
---
---

@import "{{ site.theme }}";
@import url('https://fonts.googleapis.com/css?family=Zilla+Slab|Zilla+Slab+Highlight');

// Convert pixel units to rems, assuming a 16px base size
// Usage: remify(24px)
@function remify($pixels) {
$rems: $pixels / 16px;
@return #{$rems}rem;
}

@mixin font-size($size) {
// When unit is pixels, pass it through and convert to rem
@if (unit($size) == 'px') {
font-size: $size;
font-size: remify($size);
}

// When unit is not pixels, show an error
@else {
@error 'This mixin only accepts sizes in pixels. You declared `font-size(#{$size})`.';
}
}

@mixin font-size-huge { // For especially huge titles
@include font-size(50px);

@media screen and (min-width: 760px) {
@include font-size(90px);
}
}

@mixin font-size-level1 {
@include font-size(28px);

@media screen and (min-width: 760px) {
@include font-size(50px);
}
}

@mixin font-size-level2 {
@include font-size(21px);

@media screen and (min-width: 760px) {
@include font-size(38px);
}
}

@mixin font-size-level3 {
@include font-size(18px);

@media screen and (min-width: 760px) {
@include font-size(28px);
}
}

@mixin font-size-level4 {
@include font-size(16px);

@media screen and (min-width: 760px) {
@include font-size(21px);
}
}

body {
background: #fff;
font-size: 20px;
font-family: "Zilla Slab", "Open Sans", X-LocaleSpecific, sans-serif;
line-height: 1.5;
}

h1, h2, h3, h4, h5, h6, legend {
color: #000;
font-weight: bold;
line-height: 1.1;
margin: 0 0 .25em;
}

h1 {
@include font-size-level1;
}

h2 {
@include font-size-level2;
}

h3 {
@include font-size-level3;
}

h4 {
@include font-size-level4;
}

h5, h6 {
@include font-size(16px);
}

p,
ul,
ol,
dl,
table {
margin-bottom: 1.25em;
}

a {
color: #006688;
}

a:hover, a:focus, a:active, a:visited:hover, a:visited:focus, a:visited:active {
color: #0088aa;
font-weight: normal;
}

a:visited {
color: #004455;
}

.wrapper > section {
float: none;
width: 100%;
}

0 comments on commit fa04713

Please sign in to comment.
You can’t perform that action at this time.