jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-16 13:56:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update the theme to match branding better (#33462)

Browse Source 
Co-authored-by: Franck Nijhof <git@frenck.dev>
This commit is contained in:
Madelena Mak 2024-06-30 07:47:01 -04:00 committed by GitHub
parent 6c42ffaba5
commit d4c03fe1be
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
533 changed files with 3359 additions and 6896 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Gemfile.lock
View File

@ -130,8 +130,9 @@ GEM
ruby2_keywords (0.0.5)
safe_yaml (1.0.5)
sass (3.4.25)
sass-embedded (1.77.5-x86_64-linux-gnu)
sass-embedded (1.77.5)
google-protobuf (>= 3.25, < 5.0)
rake (>= 13)
sass-globbing (1.1.5)
sass (>= 3.1)
sassc (2.1.0-x86_64-linux)

83
plugins/alerts.rb Normal file
View File

@ -0,0 +1,83 @@
module Jekyll
module HomeAssistant
class AlertBlock < Liquid::Block
def initialize(tag_name, args, tokens)
super
raise SyntaxError, <<~MSG unless args.strip =~ SYNTAX
Syntax error in alert block while parsing the following options:
#{args}
Valid syntax:
{% <note|tip|important|warning|caution> [title="Extra title"] [icon="mdi:alert"] %}
MSG
@type = tag_name
@options = Regexp.last_match(1)
end
def render(context)
# We parse on render, as we now have context
options = parse_options(@options, context)
contents = super(context)
title = @type.capitalize
if options.include? :title
title += ": #{options[:title]}"
end
if options.include? :icon
icon = options[:icon]
elsif @type == 'tip'
icon = "mdi:lightbulb-outline"
elsif @type == 'important'
icon = "mdi:message-alert-outline"
elsif @type == 'warning'
icon = "mdi:alert-outline"
elsif @type == 'caution'
icon = "mdi:alert-circle-outline"
else
icon = "mdi:information-outline"
end
<<~MARKUP
<div class="alert alert-#{@type}">
<p class="alert-title"><iconify-icon inline icon='#{icon}'></iconify-icon> #{title}</p>
<p class="alert-content">
#{contents}
</p>
</div>
MARKUP
end
private
SYNTAX = /^((\s+\w+(=([\w.]+?|".+?"))?)*)$/
OPTIONS_REGEX = /(?:\w="[^"]*"|\w=[\w.]+|\w)+/
def parse_options(input, context)
options = {}
return options if input.empty?
# Split along 3 possible forms: key="value", key=value, or just key
input.scan(OPTIONS_REGEX) do |opt|
key, value = opt.split('=')
unless value.nil?
if value&.include?('"')
value.delete!('"')
else
value = context[value]
end
end
options[key.to_sym] = value || true
end
options
end
end
end
end
Liquid::Template.register_tag('note', Jekyll::HomeAssistant::AlertBlock)
Liquid::Template.register_tag('tip', Jekyll::HomeAssistant::AlertBlock)
Liquid::Template.register_tag('important', Jekyll::HomeAssistant::AlertBlock)
Liquid::Template.register_tag('warning', Jekyll::HomeAssistant::AlertBlock)
Liquid::Template.register_tag('caution', Jekyll::HomeAssistant::AlertBlock)

10
plugins/configuration.rb
View File

@ -64,7 +64,7 @@ module Jekyll
result << vars.map do |key, attr|
markup = Array.new
# There are spaces around the "{key}", to improve double-click selection in Chrome.
markup << "<div class='config-vars-item'><div class='config-vars-label'><a name='#{slug(key)}' class='title-link' href='\##{slug(key)}'></a> <span class='config-vars-label-name'> #{key} </span>"
markup << "<div class='config-vars-item'><div class='config-vars-label'><span class='config-vars-label-name'> #{key} </span>"
if attr.key? 'type'
@ -121,7 +121,7 @@ module Jekyll
markup << "<span class='config-vars-required'>#{startSymbol}<span class='#{attr['required'].to_s}'>#{required_value(attr['required'])}</span><span class='default'>#{shortDefaultValue}</span>#{endSymbol}</span>"
end
markup << "</div><div class='config-vars-description-and-children'>"
markup << "<a name='#{slug(key)}' class='title-link' href='\##{slug(key)}'></a></div><div class='config-vars-description-and-children'>"
if attr.key? 'description'
markup << "<span class='config-vars-description'>#{converter.convert(attr['description'].to_s)}</span>"
@ -168,9 +168,9 @@ module Jekyll
<<~MARKUP
<div class="config-vars">
<h3>
<a class="title-link" name="configuration-variables" href="#configuration-variables"></a> Configuration Variables
</h3>
<h4>
Configuration Variables <a class="title-link" name="configuration-variables" href="#configuration-variables"></a>
</h4>
<div class="configuration-link">
<a href="/docs/configuration/" target="_blank">Looking for your configuration file?</a>
</div>

2
plugins/configuration_basic.rb
View File

@ -15,7 +15,7 @@ module Jekyll
result << vars.map do |key, attr|
markup = Array.new
markup << "<div class='config-vars-item'><div class='config-vars-label'><a name='#{slug(key)}' class='title-link' href='\##{slug(key)}'></a> <span class='config-vars-label-name'>#{key}</span></div><div class='config-vars-description-and-children'>"
markup << "<div class='config-vars-item'><div class='config-vars-label'><span class='config-vars-label-name'>#{key}</span><a name='#{slug(key)}' class='title-link' href='\##{slug(key)}'></a></div><div class='config-vars-description-and-children'>"
if attr.key? 'description'
markup << "<span class='config-vars-description'>#{converter.convert(attr['description'].to_s)}</span>"

59
plugins/details.rb
View File

@ -1,27 +1,44 @@
module Jekyll
class DetailsBlock < Liquid::Block
def initialize(tag_name, title, tokens)
def initialize(tag_name, args, tokens)
super
@title = title
@details_idx = 1
raise SyntaxError, <<~MSG unless args.strip =~ SYNTAX
Syntax error in tag 'details' while parsing the following options:
#{args}
Valid syntax:
{% details <title> [icon="iconify icon identifier"] %}
MSG
@title = Regexp.last_match(1)
@options = Regexp.last_match(2)
end
def render(context)
# We parse on render, as we now have context
options = parse_options(@options, context)
contents = super(context)
if @title.nil? || @title.empty? then
title = "More info"
title = if @title.nil? || @title.empty? then
"More information"
else
title = @title
@title
end
title = title.to_s.delete("\"")
idx = context["details_idx"]
if idx.nil? then
idx = 0
end
idx = 0 if idx.nil?
context["details_idx"] = idx + 1
icon = ""
if options.include? :icon
icon = "<iconify-icon inline icon='#{options[:icon]}'></iconify-icon> "
end
<<~MARKUP
<script>
function showDetails(el) {
@ -38,7 +55,7 @@ module Jekyll
<div class="details-block">
<div class='details-block-item'>
<button class='details-block-title' onclick='showDetails(this)' aria-controls="content_#{idx}" aria-expanded="false">
#{title}
<span>#{icon}#{title}</span>
<div class='details-block-arrow'>
<svg id="down" style="display: block;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
<svg id="up" style="display: none;" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg>
@ -49,6 +66,30 @@ module Jekyll
</div>
MARKUP
end
private
SYNTAX = /^(".+?")((\s+\w+(=([\w\.]+?|".+?"))?)*)$/
OPTIONS_REGEX = /(?:\w="[^"]*"|\w=[\w\.]+|\w)+/
def parse_options(input, context)
options = {}
return options if input.empty?
# Split along 3 possible forms: key="value", key=value, or just key
input.scan(OPTIONS_REGEX) do |opt|
key, value = opt.split("=")
unless value.nil?
if value&.include?('"')
value.delete!('"')
else
value = context[value]
end
end
options[key.to_sym] = value || true
end
options
end
end
end

9
plugins/my.rb
View File

@ -65,10 +65,10 @@ module Jekyll
raise ArgumentError, "No default icon for redirect #{@redirect}" \
if !!options[:icon] == options[:icon] and ! DEFAULT_ICONS.include?(@redirect)
icon = !!options[:icon] == options[:icon] ? DEFAULT_ICONS[@redirect] : @options[:icon]
icon = "<i class='#{icon}' /> "
icon = "<iconify-icon inline icon='#{icon}'></iconify-icon> "
end
"#{icon}<a href='#{uri}' class='my' target='_blank'>#{title}</a>"
"<a href='#{uri}' class='my' target='_blank'>#{icon}#{title}</a>"
end
end
@ -79,8 +79,9 @@ module Jekyll
# Default icons when used in in-line text
DEFAULT_ICONS = {
"config_flow_start" => "icon-plus-sign",
"config" => "icon-cog",
"config_flow_start" => "mdi:plus",
"config" => "mdi:cog",
"integrations" => "mdi:devices",
}
# Default title used for in-line text

14
plugins/output_modder.rb
View File

@ -21,8 +21,18 @@ module Jekyll
# All external links start with 'http', skip when this one does not
next unless link.get_attribute('href') =~ /\Ahttp/i
# Play nice with our own links
# Append an external link icon, if there isn't an icon already
next if link.get_attribute('href') =~ /\Ahttps?:\/\/\w*.?home-assistant.io/i
next if link.css('iconify-icon').any?
icon = Nokogiri::XML::Node.new('iconify-icon', dom)
icon['inline'] = true
icon['icon'] = 'tabler:external-link'
icon['class'] = 'external-link'
link.add_child(icon)
# Play nice with our own links
next if link.get_attribute('href') =~ /\Ahttps?:\/\/(?:\w+\.)?(?:home-assistant\.io|esphome\.io|nabucasa\.com|openhomefoundation\.org)/i
# Play nice with links that already have a rel attribute set
rel.unshift(link.get_attribute('rel'))
@ -39,7 +49,7 @@ module Jekyll
title = header.content
slug = title.downcase.strip.gsub(' ', '-').gsub(/[^\w-]/, '')
header.children = "<a class='title-link' name='#{slug}' href='\##{slug}'></a> #{title}"
header.children = "#{title} <a class='title-link' name='#{slug}' href='\##{slug}'></a>"
end
dom.to_s

2
plugins/terminology_tooltip.rb
View File

@ -34,7 +34,7 @@ module Jekyll
if glossary.key?("link")
rendered_link = Liquid::Template.parse(glossary["link"]).render(context).strip
link = "<small><a class='terminology-link' href='#{rendered_link}' target='_blank'>[Learn more]</a></small>"
link = "<small><a class='terminology-link' href='#{rendered_link}'>[Learn more]</a></small>"
end
tooltip = "<span class='terminology-tooltip'>#{definition}#{link || ""}</span>"

5
sass/_base.scss
View File

@ -1,5 +0,0 @@
@import "base/utilities";
@import "base/solarized";
@import "base/theme";
@import "base/typography";
@import "base/layout";

8
sass/_partials.scss
View File

@ -1,8 +0,0 @@
@import "partials/header";
@import "partials/navigation";
@import "partials/blog";
@import "partials/sharing";
// @import "partials/syntax";
@import "partials/archive";
@import "partials/sidebar";
@import "partials/footer";

192
sass/base/_layout.scss
View File

@ -1,192 +0,0 @@
$max-width: 1200px !default;
// Padding used for layout margins
$pad-min: 18px !default;
$pad-narrow: 25px !default;
$pad-medium: 35px !default;
$pad-wide: 55px !default;
// Sidebar widths used in media queries
$sidebar-width-medium: 240px !default;
$sidebar-pad-medium: 15px !default;
$sidebar-pad-wide: 20px !default;
$sidebar-width-wide: 300px !default;
$indented-lists: false !default;
$header-font-size: 1em !default;
$header-padding-top: 1.5em !default;
$header-padding-bottom: 1.5em !default;
.group { @include pie-clearfix; }
@mixin collapse-sidebar {
float: none;
width: auto;
clear: left;
margin: 0;
padding: 0 $pad-medium 1px;
background-color: lighten($sidebar-bg, 2);
border-top: 1px solid lighten($sidebar-border, 4);
section {
&.odd, &.even { float: left; width: 48%; }
&.odd { margin-left: 0; }
&.even { margin-left: 4%; }
}
&.thirds section {
width: 30%;
margin-left: 5%;
&.first {
margin-left: 0;
clear: both;
}
}
}
body {
-webkit-text-size-adjust: none;
max-width: $max-width;
position: relative;
margin: 0 auto;
> header, > nav, > footer, #content > article, #content > div > article, #content > div > section {
@extend .group;
padding-left: $pad-min;
padding-right: $pad-min;
@media only screen and (min-width: 480px) {
padding-left: $pad-narrow;
padding-right: $pad-narrow;
}
@media only screen and (min-width: 768px) {
padding-left: $pad-medium;
padding-right: $pad-medium;
}
@media only screen and (min-width: 992px) {
padding-left: $pad-wide;
padding-right: $pad-wide;
}
}
div.pagination {
@extend .group;
margin-left: $pad-min;
margin-right: $pad-min;
@media only screen and (min-width: 480px) {
margin-left: $pad-narrow;
margin-right: $pad-narrow;
}
@media only screen and (min-width: 768px) {
margin-left: $pad-medium;
margin-right: $pad-medium;
}
@media only screen and (min-width: 992px) {
margin-left: $pad-wide;
margin-right: $pad-wide;
}
}
> header {
font-size: $header-font-size;
padding-top: $header-padding-top;
padding-bottom: $header-padding-bottom;
}
}
#content {
overflow: hidden;
> div, > article { width: 100%; }
}
aside.sidebar {
float: none;
padding: 0 $pad-min 1px;
background-color: lighten($sidebar-bg, 2);
border-top: 1px solid $sidebar-border;
@extend .group;
}
.flex-content { max-width: 100%; height: auto; }
.basic-alignment {
&.left { float: left; margin-right: 1.5em; }
&.right { float: right; margin-left: 1.5em; }
&.center { display:block; margin: 0 auto 1.5em; }
&.left, &.right { margin-bottom: .8em; }
}
.toggle-sidebar { &, .no-sidebar & { display: none; }}
body.sidebar-footer {
@media only screen and (min-width: 750px) {
aside.sidebar{ @include collapse-sidebar; }
}
#content { margin-right: 0px; }
.toggle-sidebar { display: none; }
}
@media only screen and (min-width: 550px) {
body > header { font-size: $header-font-size; }
}
@media only screen and (min-width: 750px) {
aside.sidebar { @include collapse-sidebar; }
}
#main, #content, .sidebar {
@extend .group;
}
@media only screen and (min-width: 768px) {
body { -webkit-text-size-adjust: auto; }
body > header { font-size: $header-font-size * 1.2; }
#main {
padding: 0;
margin: 0 auto;
}
#content {
overflow: visible;
margin-right: $sidebar-width-medium;
position: relative;
.no-sidebar & { margin-right: 0; border-right: 0; }
.collapse-sidebar & { margin-right: 20px; }
> div, > article {
padding-top: $pad-medium/2;
padding-bottom: $pad-medium/2;
float: left;
}
}
aside.sidebar {
width: $sidebar-width-medium - $sidebar-pad-medium*2;
padding: 0 $sidebar-pad-medium $sidebar-pad-medium;
background: none;
clear: none;
float: left;
margin: 0 -100% 0 0;
section {
width: auto; margin-left: 0;
&.odd, &.even { float: none; width: auto; margin-left: 0; }
}
.collapse-sidebar & {
@include collapse-sidebar;
}
}
}
@media only screen and (min-width: 992px) {
body > header { font-size: $header-font-size * 1.3; }
#content { margin-right: $sidebar-width-wide; }
#content {
> div, > article {
padding-top: $pad-wide/2;
padding-bottom: $pad-wide/2;
}
}
aside.sidebar {
width: $sidebar-width-wide - $sidebar-pad-wide*2;
padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
.collapse-sidebar & {
padding: { left: $pad-wide; right: $pad-wide; }
}
}
}
@if $indented-lists == false {
@media only screen and (min-width: 768px) {
ul, ol { margin-left: 0; }
}
}

46
sass/base/_solarized.scss
View File

@ -1,46 +0,0 @@
$base03: #002b36 !default; //darkest blue
$base02: #073642 !default; //dark blue
$base01: #586e75 !default; //darkest gray
$base00: #657b83 !default; //dark gray
$base0: #839496 !default; //medium gray
$base1: #93a1a1 !default; //medium light gray
$base2: #eee8d5 !default; //cream
$base3: #fdf6e3 !default; //white
$solar-yellow: #b58900 !default;
$solar-orange: #cb4b16 !default;
$solar-red: #dc322f !default;
$solar-magenta: #d33682 !default;
$solar-violet: #6c71c4 !default;
$solar-blue: #268bd2 !default;
$solar-cyan: #2aa198 !default;
$solar-green: #859900 !default;
$solarized: dark !default;
@if $solarized == light {
$_base03: $base03;
$_base02: $base02;
$_base01: $base01;
$_base00: $base00;
$_base0: $base0;
$_base1: $base1;
$_base2: $base2;
$_base3: $base3;
$base03: $_base3;
$base02: $_base2;
$base01: $_base1;
$base00: $_base0;
$base0: $_base00;
$base1: $_base01;
$base2: $_base02;
$base3: $_base03;
}
/* non highlighted code colors */
$pre-bg: $base03 !default;
$pre-border: darken($base02, 5) !default;
$pre-color: $base1 !default;

85
sass/base/_theme.scss
View File

@ -1,85 +0,0 @@
$noise-bg: image-url('noise.png') top left !default;
$img-border: inline-image('dotted-border.png') !default;
// Main Link Colors
$link-color: #1abcf2 !default;
$link-color-hover: adjust-color($link-color, $lightness: 10, $saturation: 25) !default;
$link-color-visited: adjust-color($link-color, $hue: 80, $lightness: -4) !default;
$link-color-active: adjust-color($link-color-hover, $lightness: -15) !default;
// Main Section Colors
$main-bg: #f8f8f8 !default;
$page-bg: #252525 !default;
$article-border: #eeeeee !default;
$header-bg: #333 !default;
$header-border: lighten($header-bg, 15) !default;
$title-color: #f2f2f2 !default;
$subtitle-color: #aaa !default;
$text-color: #222 !default;
$text-color-light: #aaa !default;
$type-border: #ddd !default;
/* Navigation */
$nav-bg: #ccc !default;
$nav-bg-front: image-url('noise.png') !default;
$nav-bg-back: linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11)) !default;
$nav-color: darken($nav-bg, 38) !default;
$nav-color-hover: darken($nav-color, 25) !default;
$nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default;
$nav-border: darken($nav-bg, 10) !default;
$nav-border-top: lighten($nav-bg, 15) !default;
$nav-border-bottom: darken($nav-bg, 25) !default;
$nav-border-left: darken($nav-bg, 11) !default;
$nav-border-right: lighten($nav-bg, 7) !default;
/* Sidebar colors */
$sidebar-bg: #f2f2f2 !default;
$sidebar-link-color: $text-color !default;
$sidebar-link-color-hover: $link-color-hover !default;
$sidebar-link-color-active: $link-color-active !default;
$sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default;
$sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default;
$sidebar-border-hover: darken($sidebar-bg, 7) !default;
$sidebar-link-color-subdued: lighten($sidebar-color, 20) !default;
$sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default;
$footer-color: #888 !default;
$footer-bg: #ccc !default;
$footer-bg-front: image-url('noise.png') !default;
$footer-bg-back: linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11)) !default;
$footer-color: darken($footer-bg, 38) !default;
$footer-color-hover: darken($footer-color, 10) !default;
$footer-border-top: lighten($footer-bg, 15) !default;
$footer-border-bottom: darken($footer-bg, 15) !default;
$footer-link-color: darken($footer-bg, 38) !default;
$footer-link-color-hover: darken($footer-color, 25) !default;
$page-border-bottom: darken($footer-bg, 5) !default;
/* Core theme application */
a {
@include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active);
}
aside.sidebar a {
@include link-colors($sidebar-link-color, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active);
}
a {
@include transition(color .3s);
}
html {
background: $page-bg image-url('line-tile.png') top left;
}
body {
> div {
background: $sidebar-bg $noise-bg;
border-bottom: 1px solid $page-border-bottom;
> div {
background: $main-bg $noise-bg;
border-right: 1px solid $sidebar-border;
}
}
}

276
sass/base/_typography.scss
View File

@ -1,276 +0,0 @@
$blockquote: $type-border !default;
$sans: "PT Sans", "Helvetica Neue", Arial, sans-serif !default;
$serif: "PT Serif", Georgia, Times, "Times New Roman", serif !default;
$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !default;
$heading-font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif !default;
$header-title-font-family: $heading-font-family !default;
$header-subtitle-font-family: $heading-font-family !default;
// Fonts
.heading {
font-family: $heading-font-family;
}
.sans {
font-family: $sans;
}
.serif {
font-family: $serif;
}
.mono {
font-family: $mono;
}
body > header h1 {
font-size: 2.2em;
@extend .heading;
font-family: $header-title-font-family;
font-weight: normal;
line-height: 1.2em;
margin-bottom: 0.6667em;
}
body > header h2 {
font-family: $header-subtitle-font-family;
}
body {
line-height: 1.5em;
color: $text-color;
@extend .serif;
}
h1 {
font-size: 2.2em;
line-height: 1.2em;
}
@media only screen and (min-width: 992px) {
body {
font-size: 1.15em;
}
h1 {
font-size: 2.6em;
line-height: 1.2em;
}
}
#{headings()} {
@extend .heading;
text-rendering: optimizelegibility;
margin-bottom: 1em;
font-weight: bold;
}
h2,
section h1 {
font-size: 1.5em;
}
h3,
section h2,
section section h1 {
font-size: 1.3em;
}
h4,
section h3,
section section h2,
section section section h1 {
font-size: 1em;
}
h5,
section h4,
section section h3 {
font-size: 0.9em;
}
h6,
section h5,
section section h4,
section section section h3 {
font-size: 0.8em;
}
p,
article blockquote,
ul,
ol {
margin-bottom: 1.5em;
}
ul {
list-style-type: disc;
ul {
list-style-type: circle;
margin-bottom: 0px;
ul {
list-style-type: square;
margin-bottom: 0px;
}
}
}
ol {
list-style-type: decimal;
ol {
list-style-type: lower-alpha;
margin-bottom: 0px;
ol {
list-style-type: lower-roman;
margin-bottom: 0px;
}
}
}
ul,
ol {
&,
ul,
ol {
margin-left: 1.3em;
}
}
ul,
ol {
ul,
ol {
margin-bottom: 0em;
}
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
sup,
sub {
font-size: 0.75em;
position: relative;
display: inline-block;
padding: 0 0.2em;
line-height: 0.8em;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.5em;
}
a[rev="footnote"] {
font-size: 0.75em;
padding: 0 0.3em;
line-height: 1;
}
q {
font-style: italic;
&:before {
content: '"';
}
&:after {
content: '"';
}
}
em,
dfn {
font-style: italic;
}
strong,
dfn {
font-weight: bold;
}
del,
s {
text-decoration: line-through;
}
abbr,
acronym {
border-bottom: 1px dotted;
cursor: help;
}
pre,
code,
tt {
@extend .mono;
}
hr {
margin-bottom: 0.2em;
}
small {
font-size: 0.8em;
}
big {
font-size: 1.2em;
}
article blockquote {
$bq-margin: 1.2em;
font-style: italic;
position: relative;
font-size: 1.2em;
line-height: 1.5em;
padding-left: 1em;
border-left: 4px solid rgba($text-color-light, 0.5);
cite {
font-style: italic;
a {
color: $text-color-light !important;
word-wrap: break-word;
}
&:before {
content: "\2014";
padding: {
right: 0.3em;
left: 0.3em;
}
color: $text-color-light;
}
}
@media only screen and (min-width: 992px) {
padding-left: 1.5em;
border-left-width: 4px;
}
}
.pullquote-right:before,
.pullquote-left:before {
/* Reset metrics. */
padding: 0;
border: none;
/* Content */
content: attr(data-pullquote);
/* Pull out to the right, modular scale based margins. */
float: right;
width: 45%;
margin: 0.5em 0 1em 1.5em;
/* Baseline correction */
position: relative;
top: 7px;
font-size: 1.4em;
line-height: 1.45em;
}
.pullquote-left:before {
/* Make left pullquotes align properly. */
float: left;
margin: 0.5em 1.5em 1em 0;
}
/* @extend this to force long lines of continuous text to wrap */
.force-wrap {
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
}

28
sass/base/_utilities.scss
View File

@ -1,28 +0,0 @@
@mixin mask-image($img, $repeat: no-repeat){
@include experimental(mask-image, image-url($img), -webkit, -moz, -o, -ms);
@include experimental(mask-repeat, $repeat, -webkit, -moz, -o, -ms);
width: image-width($img);
height: image-height($img);
}
@mixin shadow-box($border: #fff .5em solid, $shadow: rgba(#000, .15) 0 1px 4px, $border-radius: .3em) {
@include border-radius($border-radius);
@include box-shadow($shadow);
@include box-sizing(border-box);
border: $border;
}
@mixin selection($bg, $color: inherit, $text-shadow: none){
* {
&::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
&::-webkit-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
&::selection { background: $bg; color: $color; text-shadow: $text-shadow; }
}
}
@function text-color($color, $dark: dark, $light: light){
$text-color: ( (red($color)*299) + (green($color)*587) + (blue($color)*114) ) / 1000;
$text-color: if($text-color >= 150, $dark, $light);
@return $text-color;
}

83
sass/custom/_layout.scss
View File

@ -1,83 +0,0 @@
// Here you can easily change your sites's layout.
// To give it a try, uncomment some of the lines below, make changes, rebuild your blog, and see how it works.
//$header-font-size: 1em;
//$header-padding-top: 1.5em;
//$header-padding-bottom: 1.5em;
//$max-width: 1350px;
//$indented-lists: true;
// Padding used for layout margins
//$pad-min: 18px;
//$pad-narrow: 25px;
//$pad-medium: 35px;
//$pad-wide: 55px;
// Sidebar widths used in media queries
//$sidebar-width-medium: 240px;
//$sidebar-pad-medium: 15px;
//$sidebar-pad-wide: 20px;
//$sidebar-width-wide: 300px;
html {
overflow-y: hidden;
}
.page-content {
display: inline-block;
height: calc(100% - 68px);;
margin-top: 68px;
overflow-y: scroll;
padding-top: 32px;
width: 100%;
}
#sidebar {
.grid {
position: fixed;
width: 350px;
.brand-logo-container {
margin-top: 0;
}
}
}
.site-header {
position: fixed;
width: 100%;
z-index: 999;
}
table {
table-layout: fixed;
width: 100%;
th,td {
word-wrap: break-word;
}
}
@media only screen and (max-width: $lap-end) {
#sidebar {
.grid {
position: initial;
width: 100%;
}
}
.site-header {
.pull-right {
position: fixed;
}
}
.hero {
> .grid-wrapper {
z-index: 0;
}
img {
margin-bottom: 8px;
}
}
}

129
sass/fontawesome/_core.scss vendored
View File

@ -1,129 +0,0 @@
/* FONT AWESOME CORE
* -------------------------- */
[class^="icon-"],
[class*=" icon-"] {
@include icon-FontAwesome();
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
text-decoration: inherit;
display: inline-block;
speak: none;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
vertical-align: -10%;
font-size: (4em/3);
}
/* makes sure icons active on rollover in links */
a {
[class^="icon-"],
[class*=" icon-"] {
display: inline;
}
}
/* increased font size for icon-large */
[class^="icon-"],
[class*=" icon-"] {
&.icon-fixed-width {
display: inline-block;
width: (16em/14);
text-align: right;
padding-right: (4em/14);
&.icon-large {
width: (20em/14);
}
}
}
.icons-ul {
margin-left: $icons-li-width;
list-style-type: none;
> li { position: relative; }
.icon-li {
position: absolute;
left: -$icons-li-width;
width: $icons-li-width;
text-align: center;
line-height: inherit;
}
}
// allows usage of the hide class directly on font awesome icons
[class^="icon-"],
[class*=" icon-"] {
&.hide {
display: none;
}
}
.icon-muted { color: $iconMuted; }
.icon-light { color: $iconLight; }
.icon-dark { color: $iconDark; }
// Icon Borders
// -------------------------
.icon-border {
border: solid 1px $borderColor;
padding: .2em .25em .15em;
@include border-radius(3px);
}
// Icon Sizes
// -------------------------
.icon-2x {
font-size: 2em;
&.icon-border {
border-width: 2px;
@include border-radius(4px);
}
}
.icon-3x {
font-size: 3em;
&.icon-border {
border-width: 3px;
@include border-radius(5px);
}
}
.icon-4x {
font-size: 4em;
&.icon-border {
border-width: 4px;
@include border-radius(6px);
}
}
.icon-5x {
font-size: 5em;
&.icon-border {
border-width: 5px;
@include border-radius(7px);
}
}
// Floats & Margins
// -------------------------
// Quick floats
.pull-right { float: right; }
.pull-left { float: left; }
[class^="icon-"],
[class*=" icon-"] {
&.pull-left {
margin-right: .3em;
}
&.pull-right {
margin-left: .3em;
}
}

93
sass/fontawesome/_extras.scss vendored
View File

@ -1,93 +0,0 @@
/* EXTRAS
* -------------------------- */
/* Stacked and layered icon */
@include icon-stack();
/* Animated rotating icon */
.icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
/* Prevent stack and spinners from being taken inline when inside a link */
a .icon-stack,
a .icon-spin {
display: inline-block;
text-decoration: none;
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
/* Icon rotations and mirroring */
.icon-rotate-90:before {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.icon-rotate-180:before {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.icon-rotate-270:before {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.icon-flip-horizontal:before {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.icon-flip-vertical:before {
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
/* ensure rotation occurs inside anchor tags */
a {
.icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical {
&:before { display: inline-block; }
}
}

32
sass/fontawesome/_font-awesome.scss vendored
View File

@ -1,32 +0,0 @@
/*!
* Font Awesome 3.2.1
* the iconic font designed for Bootstrap
* ------------------------------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation can be
* found at http://fontawesome.io. Stay up to date on Twitter at
* http://twitter.com/fontawesome.
*
* License
* ------------------------------------------------------------------------------
* - The Font Awesome font is licensed under SIL OFL 1.1 -
* http://scripts.sil.org/OFL
* - Font Awesome CSS, LESS, and SASS files are licensed under MIT License -
* http://opensource.org/licenses/mit-license.html
* - Font Awesome documentation licensed under CC BY 3.0 -
* http://creativecommons.org/licenses/by/3.0/
* - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
* "Font Awesome by Dave Gandy - http://fontawesome.io"
*
* Author - Dave Gandy
* ------------------------------------------------------------------------------
* Email: dave@fontawesome.io
* Twitter: http://twitter.com/davegandy
* Work: Lead Product Designer @ Kyruus - http://kyruus.com
*/
@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "extras";
@import "icons";

381
sass/fontawesome/_icons.scss vendored
View File

@ -1,381 +0,0 @@
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
* readers do not read off random characters that represent icons */
.icon-glass:before { content: $glass; }
.icon-music:before { content: $music; }
.icon-search:before { content: $search; }
.icon-envelope-alt:before { content: $envelope-alt; }
.icon-heart:before { content: $heart; }
.icon-star:before { content: $star; }
.icon-star-empty:before { content: $star-empty; }
.icon-user:before { content: $user; }
.icon-film:before { content: $film; }
.icon-th-large:before { content: $th-large; }
.icon-th:before { content: $th; }
.icon-th-list:before { content: $th-list; }
.icon-ok:before { content: $ok; }
.icon-remove:before { content: $remove; }
.icon-zoom-in:before { content: $zoom-in; }
.icon-zoom-out:before { content: $zoom-out; }
.icon-power-off:before,
.icon-off:before { content: $off; }
.icon-signal:before { content: $signal; }
.icon-gear:before,
.icon-cog:before { content: $cog; }
.icon-trash:before { content: $trash; }
.icon-home:before { content: $home; }
.icon-file-alt:before { content: $file-alt; }
.icon-time:before { content: $time; }
.icon-road:before { content: $road; }
.icon-download-alt:before { content: $download-alt; }
.icon-download:before { content: $download; }
.icon-upload:before { content: $upload; }
.icon-inbox:before { content: $inbox; }
.icon-play-circle:before { content: $play-circle; }
.icon-rotate-right:before,
.icon-repeat:before { content: $repeat; }
.icon-refresh:before { content: $refresh; }
.icon-list-alt:before { content: $list-alt; }
.icon-lock:before { content: $lock; }
.icon-flag:before { content: $flag; }
.icon-headphones:before { content: $headphones; }
.icon-volume-off:before { content: $volume-off; }
.icon-volume-down:before { content: $volume-down; }
.icon-volume-up:before { content: $volume-up; }
.icon-qrcode:before { content: $qrcode; }
.icon-barcode:before { content: $barcode; }
.icon-tag:before { content: $tag; }
.icon-tags:before { content: $tags; }
.icon-book:before { content: $book; }
.icon-bookmark:before { content: $bookmark; }
.icon-print:before { content: $print; }
.icon-camera:before { content: $camera; }
.icon-font:before { content: $font; }
.icon-bold:before { content: $bold; }
.icon-italic:before { content: $italic; }
.icon-text-height:before { content: $text-height; }
.icon-text-width:before { content: $text-width; }
.icon-align-left:before { content: $align-left; }
.icon-align-center:before { content: $align-center; }
.icon-align-right:before { content: $align-right; }
.icon-align-justify:before { content: $align-justify; }
.icon-list:before { content: $list; }
.icon-indent-left:before { content: $indent-left; }
.icon-indent-right:before { content: $indent-right; }
.icon-facetime-video:before { content: $facetime-video; }
.icon-picture:before { content: $picture; }
.icon-pencil:before { content: $pencil; }
.icon-map-marker:before { content: $map-marker; }
.icon-adjust:before { content: $adjust; }
.icon-tint:before { content: $tint; }
.icon-edit:before { content: $edit; }
.icon-share:before { content: $share; }
.icon-check:before { content: $check; }
.icon-move:before { content: $move; }
.icon-step-backward:before { content: $step-backward; }
.icon-fast-backward:before { content: $fast-backward; }
.icon-backward:before { content: $backward; }
.icon-play:before { content: $play; }
.icon-pause:before { content: $pause; }
.icon-stop:before { content: $stop; }
.icon-forward:before { content: $forward; }
.icon-fast-forward:before { content: $fast-forward; }
.icon-step-forward:before { content: $step-forward; }
.icon-eject:before { content: $eject; }
.icon-chevron-left:before { content: $chevron-left; }
.icon-chevron-right:before { content: $chevron-right; }
.icon-plus-sign:before { content: $plus-sign; }
.icon-minus-sign:before { content: $minus-sign; }
.icon-remove-sign:before { content: $remove-sign; }
.icon-ok-sign:before { content: $ok-sign; }
.icon-question-sign:before { content: $question-sign; }
.icon-info-sign:before { content: $info-sign; }
.icon-screenshot:before { content: $screenshot; }
.icon-remove-circle:before { content: $remove-circle; }
.icon-ok-circle:before { content: $ok-circle; }
.icon-ban-circle:before { content: $ban-circle; }
.icon-arrow-left:before { content: $arrow-left; }
.icon-arrow-right:before { content: $arrow-right; }
.icon-arrow-up:before { content: $arrow-up; }
.icon-arrow-down:before { content: $arrow-down; }
.icon-mail-forward:before,
.icon-share-alt:before { content: $share-alt; }
.icon-resize-full:before { content: $resize-full; }
.icon-resize-small:before { content: $resize-small; }
.icon-plus:before { content: $plus; }
.icon-minus:before { content: $minus; }
.icon-asterisk:before { content: $asterisk; }
.icon-exclamation-sign:before { content: $exclamation-sign; }
.icon-gift:before { content: $gift; }
.icon-leaf:before { content: $leaf; }
.icon-fire:before { content: $fire; }
.icon-eye-open:before { content: $eye-open; }
.icon-eye-close:before { content: $eye-close; }
.icon-warning-sign:before { content: $warning-sign; }
.icon-plane:before { content: $plane; }
.icon-calendar:before { content: $calendar; }
.icon-random:before { content: $random; }
.icon-comment:before { content: $comment; }
.icon-magnet:before { content: $magnet; }
.icon-chevron-up:before { content: $chevron-up; }
.icon-chevron-down:before { content: $chevron-down; }
.icon-retweet:before { content: $retweet; }
.icon-shopping-cart:before { content: $shopping-cart; }
.icon-folder-close:before { content: $folder-close; }
.icon-folder-open:before { content: $folder-open; }
.icon-resize-vertical:before { content: $resize-vertical; }
.icon-resize-horizontal:before { content: $resize-horizontal; }
.icon-bar-chart:before { content: $bar-chart; }
.icon-twitter-sign:before { content: $twitter-sign; }
.icon-facebook-sign:before { content: $facebook-sign; }
.icon-camera-retro:before { content: $camera-retro; }
.icon-key:before { content: $key; }
.icon-gears:before,
.icon-cogs:before { content: $cogs; }
.icon-comments:before { content: $comments; }
.icon-thumbs-up-alt:before { content: $thumbs-up-alt; }
.icon-thumbs-down-alt:before { content: $thumbs-down-alt; }
.icon-star-half:before { content: $star-half; }
.icon-heart-empty:before { content: $heart-empty; }
.icon-signout:before { content: $signout; }
.icon-linkedin-sign:before { content: $linkedin-sign; }
.icon-pushpin:before { content: $pushpin; }
.icon-external-link:before { content: $external-link; }
.icon-signin:before { content: $signin; }
.icon-trophy:before { content: $trophy; }
.icon-github-sign:before { content: $github-sign; }
.icon-upload-alt:before { content: $upload-alt; }
.icon-lemon:before { content: $lemon; }
.icon-phone:before { content: $phone; }
.icon-unchecked:before,
.icon-check-empty:before { content: $check-empty; }
.icon-bookmark-empty:before { content: $bookmark-empty; }
.icon-phone-sign:before { content: $phone-sign; }
.icon-twitter:before { content: $twitter; }
.icon-facebook:before { content: $facebook; }
.icon-github:before { content: $github; }
.icon-unlock:before { content: $unlock; }
.icon-credit-card:before { content: $credit-card; }
.icon-rss:before { content: $rss; }
.icon-hdd:before { content: $hdd; }
.icon-bullhorn:before { content: $bullhorn; }
.icon-bell:before { content: $bell; }
.icon-certificate:before { content: $certificate; }
.icon-hand-right:before { content: $hand-right; }
.icon-hand-left:before { content: $hand-left; }
.icon-hand-up:before { content: $hand-up; }
.icon-hand-down:before { content: $hand-down; }
.icon-circle-arrow-left:before { content: $circle-arrow-left; }
.icon-circle-arrow-right:before { content: $circle-arrow-right; }
.icon-circle-arrow-up:before { content: $circle-arrow-up; }
.icon-circle-arrow-down:before { content: $circle-arrow-down; }
.icon-globe:before { content: $globe; }
.icon-wrench:before { content: $wrench; }
.icon-tasks:before { content: $tasks; }
.icon-filter:before { content: $filter; }
.icon-briefcase:before { content: $briefcase; }
.icon-fullscreen:before { content: $fullscreen; }
.icon-group:before { content: $group; }
.icon-link:before { content: $link; }
.icon-cloud:before { content: $cloud; }
.icon-beaker:before { content: $beaker; }
.icon-cut:before { content: $cut; }
.icon-copy:before { content: $copy; }
.icon-paperclip:before,
.icon-paper-clip:before { content: $paper-clip; }
.icon-save:before { content: $save; }
.icon-sign-blank:before { content: $sign-blank; }
.icon-reorder:before { content: $reorder; }
.icon-list-ul:before { content: $list-ul; }
.icon-list-ol:before { content: $list-ol; }
.icon-strikethrough:before { content: $strikethrough; }
.icon-underline:before { content: $underline; }
.icon-table:before { content: $table; }
.icon-magic:before { content: $magic; }
.icon-truck:before { content: $truck; }
.icon-pinterest:before { content: $pinterest; }
.icon-pinterest-sign:before { content: $pinterest-sign; }
.icon-google-plus-sign:before { content: $google-plus-sign; }
.icon-google-plus:before { content: $google-plus; }
.icon-money:before { content: $money; }
.icon-caret-down:before { content: $caret-down; }
.icon-caret-up:before { content: $caret-up; }
.icon-caret-left:before { content: $caret-left; }
.icon-caret-right:before { content: $caret-right; }
.icon-columns:before { content: $columns; }
.icon-sort:before { content: $sort; }
.icon-sort-down:before { content: $sort-down; }
.icon-sort-up:before { content: $sort-up; }
.icon-envelope:before { content: $envelope; }
.icon-linkedin:before { content: $linkedin; }
.icon-rotate-left:before,
.icon-undo:before { content: $undo; }
.icon-legal:before { content: $legal; }
.icon-dashboard:before { content: $dashboard; }
.icon-comment-alt:before { content: $comment-alt; }
.icon-comments-alt:before { content: $comments-alt; }
.icon-bolt:before { content: $bolt; }
.icon-sitemap:before { content: $sitemap; }
.icon-umbrella:before { content: $umbrella; }
.icon-paste:before { content: $paste; }
.icon-lightbulb:before { content: $lightbulb; }
.icon-exchange:before { content: $exchange; }
.icon-cloud-download:before { content: $cloud-download; }
.icon-cloud-upload:before { content: $cloud-upload; }
.icon-user-md:before { content: $user-md; }
.icon-stethoscope:before { content: $stethoscope; }
.icon-suitcase:before { content: $suitcase; }
.icon-bell-alt:before { content: $bell-alt; }
.icon-coffee:before { content: $coffee; }
.icon-food:before { content: $food; }
.icon-file-text-alt:before { content: $file-text-alt; }
.icon-building:before { content: $building; }
.icon-hospital:before { content: $hospital; }
.icon-ambulance:before { content: $ambulance; }
.icon-medkit:before { content: $medkit; }
.icon-fighter-jet:before { content: $fighter-jet; }
.icon-beer:before { content: $beer; }
.icon-h-sign:before { content: $h-sign; }
.icon-plus-sign-alt:before { content: $plus-sign-alt; }
.icon-double-angle-left:before { content: $double-angle-left; }
.icon-double-angle-right:before { content: $double-angle-right; }
.icon-double-angle-up:before { content: $double-angle-up; }
.icon-double-angle-down:before { content: $double-angle-down; }
.icon-angle-left:before { content: $angle-left; }
.icon-angle-right:before { content: $angle-right; }
.icon-angle-up:before { content: $angle-up; }
.icon-angle-down:before { content: $angle-down; }
.icon-desktop:before { content: $desktop; }
.icon-laptop:before { content: $laptop; }
.icon-tablet:before { content: $tablet; }
.icon-mobile-phone:before { content: $mobile-phone; }
.icon-circle-blank:before { content: $circle-blank; }
.icon-quote-left:before { content: $quote-left; }
.icon-quote-right:before { content: $quote-right; }
.icon-spinner:before { content: $spinner; }
.icon-circle:before { content: $circle; }
.icon-mail-reply:before,
.icon-reply:before { content: $reply; }
.icon-github-alt:before { content: $github-alt; }
.icon-folder-close-alt:before { content: $folder-close-alt; }
.icon-folder-open-alt:before { content: $folder-open-alt; }
.icon-expand-alt:before { content: $expand-alt; }
.icon-collapse-alt:before { content: $collapse-alt; }
.icon-smile:before { content: $smile; }
.icon-frown:before { content: $frown; }
.icon-meh:before { content: $meh; }
.icon-gamepad:before { content: $gamepad; }
.icon-keyboard:before { content: $keyboard; }
.icon-flag-alt:before { content: $flag-alt; }
.icon-flag-checkered:before { content: $flag-checkered; }
.icon-terminal:before { content: $terminal; }
.icon-code:before { content: $code; }
.icon-reply-all:before { content: $reply-all; }
.icon-mail-reply-all:before { content: $mail-reply-all; }
.icon-star-half-full:before,
.icon-star-half-empty:before { content: $star-half-empty; }
.icon-location-arrow:before { content: $location-arrow; }
.icon-crop:before { content: $crop; }
.icon-code-fork:before { content: $code-fork; }
.icon-unlink:before { content: $unlink; }
.icon-question:before { content: $question; }
.icon-info:before { content: $info; }
.icon-exclamation:before { content: $exclamation; }
.icon-superscript:before { content: $superscript; }
.icon-subscript:before { content: $subscript; }
.icon-eraser:before { content: $eraser; }
.icon-puzzle-piece:before { content: $puzzle-piece; }
.icon-microphone:before { content: $microphone; }
.icon-microphone-off:before { content: $microphone-off; }
.icon-shield:before { content: $shield; }
.icon-calendar-empty:before { content: $calendar-empty; }
.icon-fire-extinguisher:before { content: $fire-extinguisher; }
.icon-rocket:before { content: $rocket; }
.icon-maxcdn:before { content: $maxcdn; }
.icon-chevron-sign-left:before { content: $chevron-sign-left; }
.icon-chevron-sign-right:before { content: $chevron-sign-right; }
.icon-chevron-sign-up:before { content: $chevron-sign-up; }
.icon-chevron-sign-down:before { content: $chevron-sign-down; }
.icon-html5:before { content: $html5; }
.icon-css3:before { content: $css3; }
.icon-anchor:before { content: $anchor; }
.icon-unlock-alt:before { content: $unlock-alt; }
.icon-bullseye:before { content: $bullseye; }
.icon-ellipsis-horizontal:before { content: $ellipsis-horizontal; }
.icon-ellipsis-vertical:before { content: $ellipsis-vertical; }
.icon-rss-sign:before { content: $rss-sign; }
.icon-play-sign:before { content: $play-sign; }
.icon-ticket:before { content: $ticket; }
.icon-minus-sign-alt:before { content: $minus-sign-alt; }
.icon-check-minus:before { content: $check-minus; }
.icon-level-up:before { content: $level-up; }
.icon-level-down:before { content: $level-down; }
.icon-check-sign:before { content: $check-sign; }
.icon-edit-sign:before { content: $edit-sign; }
.icon-external-link-sign:before { content: $external-link-sign; }
.icon-share-sign:before { content: $share-sign; }
.icon-compass:before { content: $compass; }
.icon-collapse:before { content: $collapse; }
.icon-collapse-top:before { content: $collapse-top; }
.icon-expand:before { content: $expand; }
.icon-euro:before,
.icon-eur:before { content: $eur; }
.icon-gbp:before { content: $gbp; }
.icon-dollar:before,
.icon-usd:before { content: $usd; }
.icon-rupee:before,
.icon-inr:before { content: $inr; }
.icon-yen:before,
.icon-jpy:before { content: $jpy; }
.icon-renminbi:before,
.icon-cny:before { content: $cny; }
.icon-won:before,
.icon-krw:before { content: $krw; }
.icon-bitcoin:before,
.icon-btc:before { content: $btc; }
.icon-file:before { content: $file; }
.icon-file-text:before { content: $file-text; }
.icon-sort-by-alphabet:before { content: $sort-by-alphabet; }
.icon-sort-by-alphabet-alt:before { content: $sort-by-alphabet-alt; }
.icon-sort-by-attributes:before { content: $sort-by-attributes; }
.icon-sort-by-attributes-alt:before { content: $sort-by-attributes-alt; }
.icon-sort-by-order:before { content: $sort-by-order; }
.icon-sort-by-order-alt:before { content: $sort-by-order-alt; }
.icon-thumbs-up:before { content: $thumbs-up; }
.icon-thumbs-down:before { content: $thumbs-down; }
.icon-youtube-sign:before { content: $youtube-sign; }
.icon-youtube:before { content: $youtube; }
.icon-xing:before { content: $xing; }
.icon-xing-sign:before { content: $xing-sign; }
.icon-youtube-play:before { content: $youtube-play; }
.icon-dropbox:before { content: $dropbox; }
.icon-stackexchange:before { content: $stackexchange; }
.icon-instagram:before { content: $instagram; }
.icon-flickr:before { content: $flickr; }
.icon-adn:before { content: $adn; }
.icon-bitbucket:before { content: $bitbucket; }
.icon-bitbucket-sign:before { content: $bitbucket-sign; }
.icon-tumblr:before { content: $tumblr; }
.icon-tumblr-sign:before { content: $tumblr-sign; }
.icon-long-arrow-down:before { content: $long-arrow-down; }
.icon-long-arrow-up:before { content: $long-arrow-up; }
.icon-long-arrow-left:before { content: $long-arrow-left; }
.icon-long-arrow-right:before { content: $long-arrow-right; }
.icon-apple:before { content: $apple; }
.icon-windows:before { content: $windows; }
.icon-android:before { content: $android; }
.icon-linux:before { content: $linux; }
.icon-dribbble:before { content: $dribbble; }
.icon-skype:before { content: $skype; }
.icon-foursquare:before { content: $foursquare; }
.icon-trello:before { content: $trello; }
.icon-female:before { content: $female; }
.icon-male:before { content: $male; }
.icon-gittip:before { content: $gittip; }
.icon-sun:before { content: $sun; }
.icon-moon:before { content: $moon; }
.icon-archive:before { content: $archive; }
.icon-bug:before { content: $bug; }
.icon-vk:before { content: $vk; }
.icon-weibo:before { content: $weibo; }
.icon-renren:before { content: $renren; }

48
sass/fontawesome/_mixins.scss vendored
View File

@ -1,48 +0,0 @@
// Mixins
// --------------------------
@mixin icon($icon) {
@include icon-FontAwesome();
content: $icon;
}
@mixin icon-FontAwesome() {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em; // fixes ie7 issues
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
@mixin icon-stack($width: 2em, $height: 2em, $top-font-size: 1em, $base-font-size: 2em) {
.icon-stack {
position: relative;
display: inline-block;
width: $width;
height: $height;
line-height: $width;
vertical-align: -35%;
[class^="icon-"],
[class*=" icon-"] {
display: block;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
font-size: $top-font-size;
line-height: inherit;
*line-height: $height;
}
.icon-stack-base {
font-size: $base-font-size;
*line-height: #{$height / $base-font-size}em;
}
}
}

15
sass/fontawesome/_path.scss vendored
View File

@ -1,15 +0,0 @@
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('#{$FontAwesomePath}/fontawesome-webfont.eot?v=#{$FontAwesomeVersion}');
src: url('#{$FontAwesomePath}/fontawesome-webfont.eot?#iefix&v=#{$FontAwesomeVersion}') format('embedded-opentype'),
url('#{$FontAwesomePath}/fontawesome-webfont.woff?v=#{$FontAwesomeVersion}') format('woff'),
url('#{$FontAwesomePath}/fontawesome-webfont.ttf?v=#{$FontAwesomeVersion}') format('truetype'),
url('#{$FontAwesomePath}/fontawesome-webfont.svg#fontawesomeregular?v=#{$FontAwesomeVersion}') format('svg');
// src: url('#{$FontAwesomePath}/FontAwesome.otf') format('opentype'); // used when developing fonts
font-weight: normal;
font-style: normal;
font-display: swap;
}

734
sass/fontawesome/_variables.scss vendored
View File

@ -1,734 +0,0 @@
// Variables
// --------------------------
$FontAwesomePath: "../font" !default;
$FontAwesomeVersion: "3.2.1" !default;
$borderColor: #eeeeee !default;
$iconMuted: #eeeeee !default;
$iconLight: white !default;
$iconDark: #333333 !default;
$icons-li-width: (30em/14);
$glass: "\f000";
$music: "\f001";
$search: "\f002";
$envelope-alt: "\f003";
$heart: "\f004";
$star: "\f005";
$star-empty: "\f006";
$user: "\f007";
$film: "\f008";
$th-large: "\f009";
$th: "\f00a";
$th-list: "\f00b";
$ok: "\f00c";
$remove: "\f00d";
$zoom-in: "\f00e";
$zoom-out: "\f010";
$off: "\f011";
$signal: "\f012";
$cog: "\f013";
$trash: "\f014";
$home: "\f015";
$file-alt: "\f016";
$time: "\f017";
$road: "\f018";
$download-alt: "\f019";
$download: "\f01a";
$upload: "\f01b";
$inbox: "\f01c";
$play-circle: "\f01d";
$repeat: "\f01e";
$refresh: "\f021";
$list-alt: "\f022";
$lock: "\f023";
$flag: "\f024";
$headphones: "\f025";
$volume-off: "\f026";
$volume-down: "\f027";
$volume-up: "\f028";
$qrcode: "\f029";
$barcode: "\f02a";
$tag: "\f02b";
$tags: "\f02c";
$book: "\f02d";
$bookmark: "\f02e";
$print: "\f02f";
$camera: "\f030";
$font: "\f031";
$bold: "\f032";
$italic: "\f033";
$text-height: "\f034";
$text-width: "\f035";
$align-left: "\f036";
$align-center: "\f037";
$align-right: "\f038";
$align-justify: "\f039";
$list: "\f03a";
$indent-left: "\f03b";
$indent-right: "\f03c";
$facetime-video: "\f03d";
$picture: "\f03e";
$pencil: "\f040";
$map-marker: "\f041";
$adjust: "\f042";
$tint: "\f043";
$edit: "\f044";
$share: "\f045";
$check: "\f046";
$move: "\f047";
$step-backward: "\f048";
$fast-backward: "\f049";
$backward: "\f04a";
$play: "\f04b";
$pause: "\f04c";
$stop: "\f04d";
$forward: "\f04e";
$fast-forward: "\f050";
$step-forward: "\f051";
$eject: "\f052";
$chevron-left: "\f053";
$chevron-right: "\f054";
$plus-sign: "\f055";
$minus-sign: "\f056";
$remove-sign: "\f057";
$ok-sign: "\f058";
$question-sign: "\f059";
$info-sign: "\f05a";
$screenshot: "\f05b";
$remove-circle: "\f05c";
$ok-circle: "\f05d";
$ban-circle: "\f05e";
$arrow-left: "\f060";
$arrow-right: "\f061";
$arrow-up: "\f062";
$arrow-down: "\f063";
$share-alt: "\f064";
$resize-full: "\f065";
$resize-small: "\f066";
$plus: "\f067";
$minus: "\f068";
$asterisk: "\f069";
$exclamation-sign: "\f06a";
$gift: "\f06b";
$leaf: "\f06c";
$fire: "\f06d";
$eye-open: "\f06e";
$eye-close: "\f070";
$warning-sign: "\f071";
$plane: "\f072";
$calendar: "\f073";
$random: "\f074";
$comment: "\f075";
$magnet: "\f076";
$chevron-up: "\f077";
$chevron-down: "\f078";
$retweet: "\f079";
$shopping-cart: "\f07a";
$folder-close: "\f07b";
$folder-open: "\f07c";
$resize-vertical: "\f07d";
$resize-horizontal: "\f07e";
$bar-chart: "\f080";
$twitter-sign: "\f081";
$facebook-sign: "\f082";
$camera-retro: "\f083";
$key: "\f084";
$cogs: "\f085";
$comments: "\f086";
$thumbs-up-alt: "\f087";
$thumbs-down-alt: "\f088";
$star-half: "\f089";
$heart-empty: "\f08a";
$signout: "\f08b";
$linkedin-sign: "\f08c";
$pushpin: "\f08d";
$external-link: "\f08e";
$signin: "\f090";
$trophy: "\f091";
$github-sign: "\f092";
$upload-alt: "\f093";
$lemon: "\f094";
$phone: "\f095";
$check-empty: "\f096";
$bookmark-empty: "\f097";
$phone-sign: "\f098";
$twitter: "\f099";
$facebook: "\f09a";
$github: "\f09b";
$unlock: "\f09c";
$credit-card: "\f09d";
$rss: "\f09e";
$hdd: "\f0a0";
$bullhorn: "\f0a1";
$bell: "\f0a2";
$certificate: "\f0a3";
$hand-right: "\f0a4";
$hand-left: "\f0a5";
$hand-up: "\f0a6";
$hand-down: "\f0a7";
$circle-arrow-left: "\f0a8";
$circle-arrow-right: "\f0a9";
$circle-arrow-up: "\f0aa";
$circle-arrow-down: "\f0ab";
$globe: "\f0ac";
$wrench: "\f0ad";
$tasks: "\f0ae";
$filter: "\f0b0";
$briefcase: "\f0b1";
$fullscreen: "\f0b2";
$group: "\f0c0";
$link: "\f0c1";
$cloud: "\f0c2";
$beaker: "\f0c3";
$cut: "\f0c4";
$copy: "\f0c5";
$paper-clip: "\f0c6";
$save: "\f0c7";
$sign-blank: "\f0c8";
$reorder: "\f0c9";
$list-ul: "\f0ca";
$list-ol: "\f0cb";
$strikethrough: "\f0cc";
$underline: "\f0cd";
$table: "\f0ce";
$magic: "\f0d0";
$truck: "\f0d1";
$pinterest: "\f0d2";
$pinterest-sign: "\f0d3";
$google-plus-sign: "\f0d4";
$google-plus: "\f0d5";
$money: "\f0d6";
$caret-down: "\f0d7";
$caret-up: "\f0d8";
$caret-left: "\f0d9";
$caret-right: "\f0da";
$columns: "\f0db";
$sort: "\f0dc";
$sort-down: "\f0dd";
$sort-up: "\f0de";
$envelope: "\f0e0";
$linkedin: "\f0e1";
$undo: "\f0e2";
$legal: "\f0e3";
$dashboard: "\f0e4";
$comment-alt: "\f0e5";
$comments-alt: "\f0e6";
$bolt: "\f0e7";
$sitemap: "\f0e8";
$umbrella: "\f0e9";
$paste: "\f0ea";
$lightbulb: "\f0eb";
$exchange: "\f0ec";
$cloud-download: "\f0ed";
$cloud-upload: "\f0ee";
$user-md: "\f0f0";
$stethoscope: "\f0f1";
$suitcase: "\f0f2";
$bell-alt: "\f0f3";
$coffee: "\f0f4";
$food: "\f0f5";
$file-text-alt: "\f0f6";
$building: "\f0f7";
$hospital: "\f0f8";
$ambulance: "\f0f9";
$medkit: "\f0fa";
$fighter-jet: "\f0fb";
$beer: "\f0fc";
$h-sign: "\f0fd";
$plus-sign-alt: "\f0fe";
$double-angle-left: "\f100";
$double-angle-right: "\f101";
$double-angle-up: "\f102";
$double-angle-down: "\f103";
$angle-left: "\f104";
$angle-right: "\f105";
$angle-up: "\f106";
$angle-down: "\f107";
$desktop: "\f108";
$laptop: "\f109";
$tablet: "\f10a";
$mobile-phone: "\f10b";
$circle-blank: "\f10c";
$quote-left: "\f10d";
$quote-right: "\f10e";
$spinner: "\f110";
$circle: "\f111";
$reply: "\f112";
$github-alt: "\f113";
$folder-close-alt: "\f114";
$folder-open-alt: "\f115";
$expand-alt: "\f116";
$collapse-alt: "\f117";
$smile: "\f118";
$frown: "\f119";
$meh: "\f11a";
$gamepad: "\f11b";
$keyboard: "\f11c";
$flag-alt: "\f11d";
$flag-checkered: "\f11e";
$terminal: "\f120";
$code: "\f121";
$reply-all: "\f122";
$mail-reply-all: "\f122";
$star-half-empty: "\f123";
$location-arrow: "\f124";
$crop: "\f125";
$code-fork: "\f126";
$unlink: "\f127";
$question: "\f128";
$info: "\f129";
$exclamation: "\f12a";
$superscript: "\f12b";
$subscript: "\f12c";
$eraser: "\f12d";
$puzzle-piece: "\f12e";
$microphone: "\f130";
$microphone-off: "\f131";
$shield: "\f132";
$calendar-empty: "\f133";
$fire-extinguisher: "\f134";
$rocket: "\f135";
$maxcdn: "\f136";
$chevron-sign-left: "\f137";
$chevron-sign-right: "\f138";
$chevron-sign-up: "\f139";
$chevron-sign-down: "\f13a";
$html5: "\f13b";
$css3: "\f13c";
$anchor: "\f13d";
$unlock-alt: "\f13e";
$bullseye: "\f140";
$ellipsis-horizontal: "\f141";
$ellipsis-vertical: "\f142";
$rss-sign: "\f143";
$play-sign: "\f144";
$ticket: "\f145";
$minus-sign-alt: "\f146";
$check-minus: "\f147";
$level-up: "\f148";
$level-down: "\f149";
$check-sign: "\f14a";
$edit-sign: "\f14b";
$external-link-sign: "\f14c";
$share-sign: "\f14d";
$compass: "\f14e";
$collapse: "\f150";
$collapse-top: "\f151";
$expand: "\f152";
$eur: "\f153";
$gbp: "\f154";
$usd: "\f155";
$inr: "\f156";
$jpy: "\f157";
$cny: "\f158";
$krw: "\f159";
$btc: "\f15a";
$file: "\f15b";
$file-text: "\f15c";
$sort-by-alphabet: "\f15d";
$sort-by-alphabet-alt: "\f15e";
$sort-by-attributes: "\f160";
$sort-by-attributes-alt: "\f161";
$sort-by-order: "\f162";
$sort-by-order-alt: "\f163";
$thumbs-up: "\f164";
$thumbs-down: "\f165";
$youtube-sign: "\f166";
$youtube: "\f167";
$xing: "\f168";
$xing-sign: "\f169";
$youtube-play: "\f16a";
$dropbox: "\f16b";
$stackexchange: "\f16c";
$instagram: "\f16d";
$flickr: "\f16e";
$adn: "\f170";
$bitbucket: "\f171";
$bitbucket-sign: "\f172";
$tumblr: "\f173";
$tumblr-sign: "\f174";
$long-arrow-down: "\f175";
$long-arrow-up: "\f176";
$long-arrow-left: "\f177";
$long-arrow-right: "\f178";
$apple: "\f179";
$windows: "\f17a";
$android: "\f17b";
$linux: "\f17c";
$dribbble: "\f17d";
$skype: "\f17e";
$foursquare: "\f180";
$trello: "\f181";
$female: "\f182";
$male: "\f183";
$gittip: "\f184";
$sun: "\f185";
$moon: "\f186";
$archive: "\f187";
$bug: "\f188";
$vk: "\f189";
$weibo: "\f18a";
$renren: "\f18b";

44
sass/homeassistant/_homeassistant.scss Normal file
View File

@ -0,0 +1,44 @@
@import "variables";
@import "mixins";
@import "../inuitcss/_inuit";
@import "base/global";
@import "base/grid";
@import "base/header";
@import "base/navigation";
@import "base/footer";
@import "base/syntax";
@import "base/post";
@import "base/archive_list";
@import "base/print";
@import "plugins/alert";
@import "plugins/details";
@import "plugins/tabbed_block";
@import "plugins/terminology_tooltip";
@import "plugins/integration_alert";
@import "base/sidebar";
@import "aside/recent_posts";
@import "aside/github";
@import "aside/pinboard";
@import "aside/social";
@import "homepage/home";
@import "homepage/hero_unit";
@import "homepage/features";
@import "pages/landingpage";
@import "pages/component_page";
@import "pages/getting_started";
@import "helpers/classes";
@import "helpers/grid-fix";
@import "external/search";
// This file overrides all kinds of stuff, it is the old "paulus.scss" file
// Most of what is in here should be moved to the correct file and remoted
// from here.
@import "overrides";

0
sass/oscailte/_mixins.scss → sass/homeassistant/_mixins.scss
View File

623
sass/custom/_paulus.scss → sass/homeassistant/_overrides.scss
View File

@ -1,6 +1,118 @@
@charset "UTF-8";
$primary-color: #1abcf2;
.page h1.title.indent {
font-size: 3.125em;
}
.title.delta, .title.epsilon {
border-bottom: none;
margin-bottom: .75rem;
text-transform: uppercase;
letter-spacing: .05em;
color: $gray;
}
.title.indent {
&::before {
content: "";
color: $primary-color;
}
}
@media only screen and (max-width: $menu-collapse) {
html {
font-size: .95em;
}
.page h1.title.indent {
font-size: 2.875em;
overflow-wrap: break-word;
hyphens: auto;
}
}
// Rounded background for numbered lists
article> {
ol {
counter-reset: my-awesome-counter;
list-style: none;
margin-left: 3rem;
}
ol>li {
margin-left: -0.25rem;
counter-increment: my-awesome-counter;
position: relative;
}
ol>li::before {
content: counter(my-awesome-counter);
color: white;
font-size: 1.25rem;
font-weight: 600;
position: absolute;
left: -2.75rem;
top: -.1rem;
line-height: 2rem;
width: 2rem;
height: 2rem;
background: $grayLight;
border-radius: 50%;
text-align: center;
transition: background 1s;
}
ol:hover>li::before {
background: $link-color;
}
ol:hover>li:hover::before {
background: $primary-color;
}
}
ul, ol, dd {
margin-left: 2rem;
}
// Better looking menu
.menu li {
a {
@include box-sizing(border-box);
display: block;
padding: 29px 0px 12px;
margin: 0 14px 27px;
text-decoration: none;
font-size: 14px;
line-height: 1;
}
iconify-icon {
height: 14px;
margin-top: -2px;
}
ul {
iconify-icon {
height: 16px;
padding-top: 2px;
padding-right: 8px;
}
}
}
.menu > li > a {
font-weight: 500;
transition: box-shadow .33s;
}
.menu > li > a:hover,
.menu > li > a:focus {
background: none;
box-shadow: inset 0px -5px $primary-color;
color: $navigation-color;
padding-bottom: 12px;
margin-bottom: 27px;
}
.dark .menu > li > a:hover,
.dark .menu > li > a:focus {
box-shadow: inset 0px -5px rgba($white, .5);
}
.site-header {
position: relative;
@ -10,132 +122,183 @@ $primary-color: #1abcf2;
align-items: center;
font-weight: normal;
}
}
.docsearch {
.DocSearch-Button {
padding: 0px;
margin-top: 16px;
margin-left: 0px;
margin-right: 0px;
background: none;
&:hover {
box-shadow: none;
}
}
.DocSearch-Button-Placeholder {
display: none;
}
.DocSearch-Button-Keys {
display: none;
}
.DocSearch-Search-Icon {
margin-right: 8px;
color: $primary-color;
// Page breadcrumbs
header .breadcrumbs {
color: $grayLight;
font-size: .9rem;
padding-bottom: 24px;
a {
color: $grayLight;
text-decoration: none !important;
font-weight: 600;
}
}
.DocSearch-Container {
z-index: 1000;
}
.integration-alert-container {
margin: -1em 0;
}
// Integrations page filter
a.integration-alert {
margin: 1em 0;
background-color: wheat;
padding: 8px;
text-decoration: none !important;
display: flex;
align-items: center;
color: black;
svg {
width: 24px;
margin-right: 8px;
}
.content {
flex: 1;
}
.learn-more {
padding: 4px 6px;
border-radius: 2px;
font-size: .8em;
&:hover {
background-color: rgba(0, 0, 0, .12);
@media only screen and (min-width: $desk-start) {
#components-page {
.filter-button-group {
max-height: calc(100vh - 200px);
overflow: auto;
}
}
}
.count {
font-size: .8rem;
background: $grayLighter;
color: $gray;
padding: 1px 4px;
border-radius: 8px;
}
// Footer
.page-content>footer {
margin-top: 194px !important;
.skyline.grid{
position: relative;
.grid__item {
background-image: url(/images/footer-skyline.svg);
background-repeat: no-repeat;
background-size: 740px auto;
background-position-x: 24px;
position: absolute;
top: -130px;
height: 130px;
width: calc(100% + 24px);
}
}
.footer-nav {
padding: 40px 0;
margin: 0 -24px;
text-align: left;
h4 {
text-transform: uppercase;
font-size: .9rem;
letter-spacing: 0.005em;
margin-bottom: 8px;
}
ul {
padding-bottom: 24px;
}
.company {
padding-bottom: 24px;
.title {
font-size: 1.5em;
padding-bottom: 24px;
}
img {
vertical-align: middle;
height: 72px;
}
}
.socials {
.icons {
margin: -16px 0 16px 0;
iconify-icon {
font-size: 2em;
margin-top: 12px;
padding-right: 8px;
}
}
@media only screen and (min-width: $desk-start) {
.web-notice {
text-align: right;
p {
color: $gray;
font-size: .8rem;
line-height: 1.25;
margin-bottom: 16px;
}
}
}
}
ul {
margin: 0;
list-style: none;
li {
padding-bottom: 4px;
}
}
}
}
@media only screen and (max-width: $menu-collapse) {
.feedback {
margin-bottom: 32px;
}
}
.hero {
background-color: #038fc7;
padding-bottom: 0;
.lead {
margin-bottom: 16px;
}
.hero-buttons a {
color: white;
text-transform: uppercase;
white-space: nowrap;
display: inline-block;
font-weight: 500;
}
img {
display: block;
}
}
// Material Card
.material-card {
background-color: #fefefe;
border-radius: 8px;
position: relative;
background-color: $white;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, .12);
box-shadow: rgba(0,0,0,0.06) 0 0 10px;
transition: box-shadow .5s;
h1 {
font-family: Roboto, Noto, sans-serif;
font-family: $heading-font;
-webkit-font-smoothing: antialiased;
font-size: 24px;
font-weight: 400;
font-size: 1.33rem;
font-weight: 600;
letter-spacing: -0.012em;
line-height: 40px;
color: #212121;
padding: 20px 16px 12px;
text-transform: capitalize;
margin: 0;
margin: -8px 0 0;
}
&.text {
padding: 16px;
padding: 24px;
h1 {
padding: 4px 0px 12px;
padding: 0px 0px 12px;
}
&>svg {
margin-top: -8px;
margin-right: -8px;
}
}
.links {
margin-top: 8px;
margin-left: -8px;
margin-top: 12px;
margin-right: -8px;
font-size: .9rem;
text-align: right;
a {
background: #e8edf0;
font-family: $heading-font;
text-decoration: none;
font-weight: 500;
font-weight: 650;
text-transform: uppercase;
display: inline-block;
margin: 0 8px;
margin: 4px;
padding: 6px 16px;
border-radius: 16px;
}
}
@ -146,6 +309,12 @@ a.integration-alert {
}
}
a.material-card:hover {
z-index: 2;
box-shadow: 0 0 1px rgba(0,0,0,.5), 0 -4px 8px hsla(180, 100%, 50%, .10), 0 32px 64px hsla(207, 100%, 10%, 0.5);
}
.feedback {
h4 {
margin: 0 0 8px !important;
@ -181,17 +350,19 @@ a.integration-alert {
.button {
position: relative;
cursor: pointer;
font-size: 14px;
font-weight: bold;
padding: 8px 28px;
color: #fff;
background-color: #03a9f4;
border: none;
text-decoration: none !important;
border-radius: 4px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
position: relative;
cursor: pointer;
font-family: $heading-font;
font-size: 1.1rem;
font-weight: 650;
padding: 12px 24px;
color: $link-color;
background-color: #e8edf0;
border: none;
text-decoration: none !important;
border-radius: 24px;
margin: 8px 0;
transition: box-shadow .33s;
&::before {
content: " ";
@ -204,7 +375,7 @@ a.integration-alert {
border-radius: 4px;
}
&:hover {
box-shadow: 0 4px 8px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12), 0 3px 1px -1px rgba(0,0,0,.2);
box-shadow: 0 0 1px rgba(0,0,0,.5), 0 -1px 2px hsla(180, 100%, 50%, .05), 0 12px 24px hsla(207, 100%, 10%, 0.20);
}
&:hover::before {
background-color: rgba(255,255,255,.8);
@ -235,12 +406,6 @@ a.integration-alert {
margin-bottom: 24px;
}
.current-version {
.release-date {
white-space: nowrap;
}
}
.recent-posts {
.blog-date {
white-space: nowrap;
@ -412,8 +577,6 @@ a.integration-alert {
}
// https://fortawesome.github.io/Font-Awesome/3.2.1/icons/
h1:hover a.title-link,
h2:hover a.title-link,
h3:hover a.title-link,
@ -421,34 +584,11 @@ h4:hover a.title-link,
h5:hover a.title-link,
h6:hover a.title-link,
dt:hover a.title-link {
position: relative;
text-decoration: none;
&::before {
position: absolute;
top: 5px;
left: -25px;
padding-right: 10px;
padding-left: 5px;
font-family: "FontAwesome";
font-size: 15px;
margin-left: 4px;
color: #999;
content: "\f0c1";
}
}
.ha-title {
display: inline-flex;
height: 100%;
white-space: nowrap;
img {
border-radius: 3px;
height: 36px;
margin-right: 10px;
}
a>* {
vertical-align: middle;
content: "\00B6"; /* pilcrow */
}
}
@ -472,16 +612,20 @@ dt:hover a.title-link {
}
}
// Article formatting
article.post,
article.page,
article.listing {
font-size: 1.125em;
line-height: 1.6;
overflow: hidden;
img,
table {
border-radius: 3px;
box-shadow: rgba(0, 0, 0, 0.06) 0 0 10px;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.5) 0 0 1px;
vertical-align: middle;
}
@ -501,11 +645,13 @@ article.listing {
p.img {
background-color: #fff;
border-radius: 5px;
border-radius: 8px;
border-width: 8px;
text-align: center;
padding-bottom: 3px;
font-size: 0.9rem;
box-shadow: rgba(0, 0, 0, 0.06) 0 0 10px;
box-shadow: rgba(0, 0, 0, 0.5) 0 0 1px;
border: 0;
img {
display: block;
@ -515,7 +661,8 @@ article.listing {
}
li {
margin-bottom: 10px;
margin-top: 4px;
margin-bottom: 8px;
&>p:last-child {
margin-bottom: 0;
@ -525,45 +672,41 @@ article.listing {
margin-bottom: 0;
}
}
&>ol>li {
margin-bottom: 16px;
}
a {
text-decoration: underline;
overflow-wrap: break-word;
&.btn {
text-decoration: none;
transition: box-shadow .33;
&:hover {
box-shadow: 0 0 1px rgba(0,0,0,.5), 0 -4px 8px hsla(180, 100%, 50%, .10), 0 32px 64px hsla(207, 100%, 10%, 0.5);
}
}
}
h1 {}
h2 {
font-size: 1.5em;
margin-top: 2em;
// Future re-design
// margin: 1.5em 0 1rem;
//
// border: 0;
// border-top: 1px solid $primary-color;
// padding-top: 1.4rem;
margin-top: 1.75em;
}
h3 {
text-transform: uppercase;
letter-spacing: 0.125rem;
font-size: 1.2rem;
letter-spacing: 0.05rem;
font-size: 1.375rem;
margin-top: 2em;
// Future re-design
// margin: 2em 0 1rem;
}
h4 {
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 0.05rem;
font-size: 1.1875rem;
margin-top: 2em;
// Future re-design
// margin: 1.5em 0 1rem;
color: $gray;
}
details {
@ -571,106 +714,40 @@ article.listing {
}
}
p.note,
div.note {
position: relative;
background: #e7f2fa;
padding: 40px 12px 6px 12px;
margin-bottom: 24px;
box-shadow: rgba(0, 0, 0, 0.06) 0 0 10px;
p {
margin-bottom: 0px;
}
&::before {
font-family: "FontAwesome", sans-serif;
content: "\f05a"" Note " attr(data-title);
background-color: #6ab0de;
color: white;
font-weight: bold;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding: 6px 14px;
line-height: 1.5em;
position: absolute;
top: 0;
left: 0;
right: 0;
}
&.warning {
background-color: #f7f9e1;
&::before {
background-color: rgb(187, 185, 13);
content: "\f071"" Warning " attr(data-title);
}
}
}
.copyright {
text-align: left;
.company {
.title {
font-size: 1.5em;
}
img {
vertical-align: middle;
height: 120px;
}
i {
font-size: 2em;
padding: 0 5px;
}
.icons {
display: flex;
align-items: center;
svg {
height: 48px;
padding: 10px 4px;
fill: currentColor;
}
}
}
ul {
margin: 0;
list-style: none;
}
}
.aside-module {
background: white;
border-radius: 16px;
margin: 0 0 24px 0px;
padding: 4px 24px 8px;
.section {
margin-bottom: 10px;
ul.section-nav {
&>ul {
margin-left: 0px;
li.toc-entry {
&>li.toc-entry:first-child{
padding-top: 0;
}
&>li.toc-entry {
list-style-type: none;
}
li.toc-entry, li.faq-entry {
padding: 3px 0;
font-size: .85rem;
li {
list-style-type: circle;
margin-left: 1em;
list-style-type: disc;
margin-left: .5em;
}
ul {
margin-left: 1em;
margin: 3px 0 -3px 1em;
}
}
}
}
.brand-logo-container {
@ -678,9 +755,10 @@ div.note {
margin-top: 50px;
display: grid;
justify-items: center;
padding: 12px 16px;
img {
max-height: 67px;
max-height: 64px;
}
a.my img {
@ -689,6 +767,18 @@ div.note {
}
}
.codeowner-avatar {
position: relative;
width: 48px;
height: 48px;
border-radius: 24px;
vertical-align: middle;
margin: 4px 8px 4px 0;
border: 2px solid rgba(0,0,0,.1);
}
lite-youtube {
position: relative;
display: block;
@ -763,14 +853,18 @@ twitter-widget,
// Configuration variables
div.config-vars {
padding-bottom: 16px;
background: $white;
border: 1px solid rgba(0, 0, 0, 0.12);
padding: 24px;
border-radius: 16px;
h3 {
margin-bottom: 0;
h3, h4 {
margin: 0;
}
.configuration-link {
font-size: 13px;
margin-bottom: 24px;
a {
color: #8792a2;
@ -783,6 +877,15 @@ div.config-vars {
border-bottom: 1px solid #d9dbde;
padding-top: 16px;
padding-bottom: 16px;
&:first-child {
padding-top: 0;
}
&:last-child {
border: none;
padding-bottom: 0;
}
}
.nested .config-vars-item:last-child {
@ -792,16 +895,14 @@ div.config-vars {
.config-vars-label {
padding-bottom: 4px;
position: relative;
a.title-link {
text-decoration: none;
}
&:hover a.title-link::before {
position: absolute;
top: 5px;
left: -25px;
padding-right: 40px;
font-family: "FontAwesome";
font-size: 15px;
margin-left: 4px;
color: #999;
content: "";
content: "\00B6"; /* pilcrow */
}
}
@ -858,10 +959,11 @@ div.config-vars {
code {
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 0.8em;
color: #1990b8;
color: $primary-color;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
overflow-wrap: break-word;
-moz-tab-size: 4;
-o-tab-size: 4;
@ -880,9 +982,12 @@ code {
background-attachment: local;
border: 1px solid #ddd;
border-radius: 0.4em;
border-radius: 16px;
padding: 0.1em 0.4em;
}
pre[class*="language-"]:before, pre[class*="language-"]:after {
box-shadow: none;
}
@media only screen and (max-width: $menu-collapse) {
@ -942,3 +1047,9 @@ a.my {
top: -100px;
visibility: hidden;
}
.site-header {
position: fixed;
width: 100%;
z-index: 999;
}

22
sass/oscailte/_variables.scss → sass/homeassistant/_variables.scss
View File

@ -5,7 +5,15 @@ $use-gridfix: true;
// Fonts & Font Families
$serif: Georgia, 'Times New Roman', Times, serif !default;
$sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$sans-serif: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$heading-font: "Figtree", "Helvetica Neue", Arial, sans-serif !default;
$h1-size: 40px;
$h2-size: 28px;
$h3-size: 22px;
$h4-size: 19px;
$h5-size: 16px;
$h6-size: 14px;
// Grays
// -------------------------
@ -53,12 +61,16 @@ $footer-height: 100px;
$primary-color: $blue;
$secondary-color: $green;
// -------------------------
$site-background: #F5F5F5;
$header-background: $white;
$footer-background: $header-background;
$site-background: #FBFBFB;
$header-background: rgba(251,251,251,.8);
$footer-background: #f2f4f9;
$text-color: $grayDarker;
$title-color: $primary-color;
$link-color: $primary-color;
$link-color: #007fa8;
$button-color: $primary-color;
$button-text: $white;
$navigation-color: $link-color;
$brand-round: 16px;
$brand-face: $heading-font;
$brand-color: $primary-color;

0
sass/oscailte/aside/_github.scss → sass/homeassistant/aside/_github.scss
View File

0
sass/oscailte/aside/_pinboard.scss → sass/homeassistant/aside/_pinboard.scss
View File

0
sass/oscailte/aside/_recent_posts.scss → sass/homeassistant/aside/_recent_posts.scss
View File

0
sass/oscailte/aside/_social.scss → sass/homeassistant/aside/_social.scss
View File

0
sass/oscailte/base/_archive_list.scss → sass/homeassistant/base/_archive_list.scss
View File

2
sass/oscailte/base/_footer.scss → sass/homeassistant/base/_footer.scss
View File

@ -9,9 +9,7 @@
}
body > footer, .page-content > footer {
@include box-shadow(0 0 3px rgba(0, 0, 0, 0.25));
background-color: $footer-background;
// height: $footer-height;
margin-top: 3em;
}

47
sass/oscailte/base/_global.scss → sass/homeassistant/base/_global.scss
View File

@ -1,3 +1,8 @@
html {
overflow-y: auto;
scroll-snap-type: y proximity;
}
body, html {
background-color: $site-background;
color: $text-color;
@ -5,6 +10,32 @@ body, html {
height: 100%;
}
.page-content {
display: inline-block;
height: 100%;
margin-top: 0;
padding-top: 88px;
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-family: $heading-font;
font-weight: 650;
letter-spacing: -.005em;
}
h1 {font-weight: 800;}
h3, h4 {font-weight: 700;}
p, li {
letter-spacing: .005em;
}
article.page header+p, p.lead {
line-height: 1.6;
font-size: 1.4rem;
}
a {
color: $link-color;
text-decoration: none;
@ -13,6 +44,22 @@ a {
}
}
a.external-link iconify-icon,
iconify-icon.external-link {
font-size: 1.0rem;
vertical-align: middle;
padding: 0 0 2px 3px;
}
table {
table-layout: fixed;
width: 100%;
th,td {
word-wrap: break-word;
}
}
.gist {
font-size: 0.75em;
}

0
sass/oscailte/base/_grid.scss → sass/homeassistant/base/_grid.scss
View File

63
sass/homeassistant/base/_header.scss Normal file
View File

@ -0,0 +1,63 @@
body > header {
background-color: $header-background;
margin-bottom: 2em;
backdrop-filter: blur(24px);
.site-title {
color: rgba(229, 229, 229, 0.8);
font-size: 1.7em;
font-weight: bold;
line-height: 2.5em;
}
.release-date {
font-size: 10px;
margin: 29.5px 0 0;
padding: 0 4px 0 4px;
background: #e8edf0;
height: fit-content;
color: $link-color;
font-weight: 500;
border-radius: 4px;
letter-spacing: .025rem;
}
&.dark {
background-color: rgba(255,255,255,0);
backdrop-filter: none;
// transition: background-color 1s;
@media only screen and (min-width: $desk-start) {
.menu>li>a, .docsearch .DocSearch-Search-Icon {
color: $white;
}
}
.ha-title {
.logo {
background-image: url('/images/home-assistant-logo-white.svg');
}
}
}
}
.ha-title {
display: inline-flex;
height: 100%;
white-space: nowrap;
.logo {
border-radius: 0;
width: 226px;
height: 32px;
margin-right: 10px;
background-image: url('/images/home-assistant-logo.svg');
background-repeat: no-repeat;
background-size: contain;
}
a>* {
vertical-align: middle;
}
}

42
sass/oscailte/base/_navigation.scss → sass/homeassistant/base/_navigation.scss
View File

@ -76,6 +76,7 @@ $menu-collapse: 1024px;
/* support for submenus */
ul.menu li {
position: relative;
margin: 0;
&:hover ul {
display: block;
@ -90,6 +91,8 @@ ul.menu li {
margin-left: 0;
background-color: white;
border-radius: 16px;
box-shadow: 0 0 1px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.1);
li {
white-space: nowrap;
@ -97,8 +100,10 @@ ul.menu li {
a {
display: block;
padding: 20px 10px;
padding: 16px 16px;
min-width: 150px;
margin: 8px;
border-radius: 8px;
&:hover,
&:focus {
@ -134,7 +139,7 @@ header .grid {
.menu > li > a:hover,
.menu > li > a:focus {
background: $site-background;
box-shadow: inset 0px 5px $navigation-color;
box-shadow: inset 0px 5px $primary-color;
color: $navigation-color;
padding-bottom: 32px;
}
@ -146,8 +151,9 @@ header .grid {
@media only screen and (max-width: $menu-collapse) {
.menu {
background: $white;
border-top: 1px solid $navigation-color;
border-bottom: 4px solid $navigation-color;
box-shadow: 0px 64px 32px rgba(0,0,0,.1);
max-height: 100vh;
overflow-y: auto;
}
.menu,
@ -157,40 +163,42 @@ header .grid {
}
.menu li a {
padding: 15px 15px !important;
margin: 0 !important;
padding: 20px 24px !important;
}
.menu li a:hover,
.menu li a:focus {
background: $grayLighter;
box-shadow: inset 5px 0px $navigation-color;
box-shadow: inset 5px 0px $primary-color;
padding: 15px 15px 15px 25px;
}
.toggle {
position: absolute;
top: 15px;
right: 10px;
top: 17px;
right: 17px;
}
.toggle::after {
@include border-radius(2px);
@include box-sizing(border-box);
@include transition(all 0.5s linear);
font-family: "FontAwesome";
content: "\f0c9";
content: "☰";
display: inline-block;
width: 100%;
padding: 10px 15px;
background: $navigation-color;
width: 32px;
height: 32px;
padding: 4px 9px;
background: $primary-color;
text-align: center;
font-size: 12px;
font-family: $sans-serif;
font-size: 16px;
color: $white;
white-space: nowrap;
border-radius: 24px;
}
.toggle:hover::after {
background: darken($navigation-color, 7%);
background: darken($primary-color, 25%);
}
#toggle:checked + .toggle::after {
@ -202,5 +210,7 @@ header .grid {
display: block;
position: relative;
top: 0;
box-shadow: none;
margin-left: 24px;
}
}

16
sass/oscailte/base/_post.scss → sass/homeassistant/base/_post.scss
View File

@ -5,7 +5,7 @@ article {
@extend .clearfix;
border-left: 2px solid $primary-color;
color: lighten($text-color, 15%);
font-family: $serif;
font-family: $sans-serif;
font-size: 1.25em;
font-style: italic;
padding-left: 15px;
@ -35,7 +35,7 @@ article {
color: $primary-color;
content: "\201C"attr(data-pullquote) "\201D";
float: right;
font-family: $serif;
font-family: $sans-serif;
font-size: 1.4em;
font-style: italic;
line-height: 1.45em;
@ -81,8 +81,7 @@ article {
}
.comments::before {
content: "\f075";
font-family: "FontAwesome";
content: "💬";
padding-right: 3px;
}
}
@ -91,14 +90,14 @@ article {
&.listing {
margin-bottom: 20px;
h1 {
margin-bottom: 0;
margin-bottom: .5em;
a {
color: $title-color;
text-decoration: none;
}
}
.entry-content {
margin: 10px 0;
margin: 1em 0;
}
+ hr {
border: none;
@ -114,11 +113,10 @@ article {
}
}
h1 {
margin-bottom: 0;
margin-bottom: 0.5em;
}
.meta {
border-bottom: 1px solid $primary-color;
margin-bottom: 20px;
margin-bottom: 3em;
}
}
}

0
sass/custom/_print.scss → sass/homeassistant/base/_print.scss
View File

66
sass/homeassistant/base/_sidebar.scss Normal file
View File

@ -0,0 +1,66 @@
.aside-module {
.title {
border-bottom: 1px solid $blue;
color: $grayDark;
margin: 1em 0 0.5em;
padding-bottom: 5px;
.btn {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 5px 10px;
text-decoration: none;
}
}
.loading {
display: block;
font-size: 2em;
text-align: center;
}
}
#sidebar {
position: sticky;
top: 88px;
max-height: calc(100vh - 104px);
overflow-y: auto;
scrollbar-width: none;
border-radius: 16px;
.aside-module:last-child {
margin-bottom: 0;
}
.grid {
position: fixed;
width: 350px;
display: contents;
.brand-logo-container {
margin-top: 16px;
}
}
}
@media only screen and (max-width: $lap-end) {
#sidebar {
.grid {
position: initial;
width: 100%;
}
}
.site-header {
.pull-right {
position: fixed;
}
}
.hero {
> .grid-wrapper {
z-index: 0;
}
img {
margin-bottom: 8px;
}
}
}

0
sass/custom/_syntax.scss → sass/homeassistant/base/_syntax.scss
View File

35
sass/homeassistant/external/_search.scss vendored Normal file
View File

@ -0,0 +1,35 @@
.docsearch {
.DocSearch-Button {
@media only screen and (max-width: $lap-end) {
padding: 0px;
margin: 8px 24px;
}
@media only screen and (min-width: $desk-start) {
padding: 0px;
margin-top: 16px;
margin-left: 8px;
margin-right: 0px;
}
background: none;
&:hover {
box-shadow: none;
}
}
.DocSearch-Button-Placeholder {
display: none;
}
.DocSearch-Button-Keys {
display: none;
}
.DocSearch-Search-Icon {
margin-right: 8px;
color: $link-color;
}
}
.DocSearch-Container {
z-index: 1000;
}

5
sass/oscailte/helpers/_classes.scss → sass/homeassistant/helpers/_classes.scss
View File

@ -54,12 +54,11 @@ ol {
.btn {
@include gradient-vertical;
@include box-shadow(0 0 3px rgba(0, 0, 0, 0.25));
border-radius: 3px;
border-radius: 24px;
color: $button-text;
display: inline-block;
padding: 7px 15px;
padding: 6px 20px 8px;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
&:hover {
text-decoration: underline;
}

0
sass/oscailte/helpers/_grid-fix.scss → sass/homeassistant/helpers/_grid-fix.scss
View File

8
sass/custom/_features.scss → sass/homeassistant/homepage/_features.scss
View File

@ -19,11 +19,9 @@
padding-bottom: 8px;
height: 62px;
i {
height: 62px;
min-width: 62px;
text-align: center;
font-size: 39px;
iconify-icon {
font-size: 2.5rem;
margin-right: 8px;
}
}

137
sass/homeassistant/homepage/_hero_unit.scss Normal file
View File

@ -0,0 +1,137 @@
// Front page hero section
.hero {
position: relative;
background: rgb(24,188,242);
background: linear-gradient(0deg, hsl(195, 89%, 52%) 0%, hsla(195, 89%, 52%, 0.8) 100%);
padding-bottom: 0;
margin-top: -88px;
margin-bottom: 24px;
padding-top: 88px;
overflow: hidden;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
max-height: 1080px;
height: 100vh;
align-content: center;
min-height: 720px;
// scroll-snap-align: start;
color: $white;
> .grid-wrapper {
position: relative;
z-index: 7;
}
h1 {
font-size: 6em;
line-height: .8;
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, hsl(174.86, 100%, 75%) 100%);
background-clip: text;
color: transparent;
.line2 {
line-height: 1.25;
}
}
p {
small {
color: $grayLighter;
font-size: .65em;
}
.lead {
font-size: 1.25rem;
margin-bottom: 24px;
}
}
.hero-buttons a {
font-family: $heading-font;
font-size: 1.1rem;
color: white;
text-transform: uppercase;
white-space: nowrap;
display: inline-block;
font-weight: 600;
padding: 8px 24px 8px 0;
margin: 0 4px 0 0;
border-radius: 32px;
&.primary {
background-color: $link-color;
font-size: 2rem;
font-weight: 700;
padding: 8px 24px;
margin-bottom: 16px;
}
}
#HAdemoScreenshot {
display: none;
img {
display: block;
}
}
#HAdemo {
width: 100%;
height: 800px;
border-radius: 48px;
border: 12px double white;
box-shadow: 24px 64px 64px hsla(220, 100%, 25%, .5);
// animation-name: box-shadow-color;
// animation-duration: 3s;
// animation-iteration-count: infinite;
// animation-direction: alternate;
@media only screen and (max-height: 720px) {
border-bottom: 0;
margin-bottom: -8px;
border-radius: 48px 48px 0 0;
height: 640px;
}
}
}
@keyframes box-shadow-color {
from {
box-shadow: 24px 64px 64px hsla(240, 100%, 25%, .5);
}
to {
box-shadow: 24px 64px 64px hsla(200, 100%, 25%, .5);
}
}
@media only screen and (max-width: $lap-end) {
.hero {
h1 {
font-size: 4rem;
}
.lead {
font-size: 1.15rem;
}
.hero-buttons a {
&.primary {
font-size: 1.25rem;
}
}
}
}
@media only screen and (max-width: $palm-end) {
.hero {
#HAdemo {
display: none;
}
#HAdemoScreenshot {
display: block;
}
}
}

1
sass/oscailte/homepage/_home.scss → sass/homeassistant/homepage/_home.scss
View File

@ -25,7 +25,6 @@
line-height: 3em;
margin: 0;
text-align: center;
text-transform: capitalize;
+ hr {
margin: 0;

287
sass/custom/_component_page.scss → sass/homeassistant/pages/_component_page.scss
View File

@ -1,4 +1,14 @@
#components-page {
.filter-button-group {
label {
font-size: .75rem;
font-weight: 500;
letter-spacing: .005em;
color: $gray;
text-transform: uppercase;
padding-top: 8px;
}
}
.component-search {
margin-bottom: 24px;
@ -7,44 +17,202 @@
padding: 10px;
background-color: #fefefe;
border-radius: 2px;
border-radius: 8px;
border: 1px solid;
border-color: #7c7c7c #c3c3c3 #ddd;
}
}
select {
font-family: $sans-serif;
border: 0;
background-color: $grayLighter;
border-radius: 16px;
padding: 4px 16px;
}
.category_select {
display: none;
}
}
// styles for the cards
.hass-option-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
margin: -10px; // grid trick, has to match option-card's margin
div.alert, p.alert-content {
width: 100%;
}
.option-card {
flex: 0 0 auto;
min-width: 192px;
height: 192px;
display: inline-block;
background-color: #f8f8f8;
margin: 10px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, .12);
padding: 8px;
text-align: center;
text-decoration: none;
align-content: center;
transition: box-shadow .33s;
.img-container {
height: 64px;
margin: 12px 16px;
font: 0/0 a;
border-radius: 0;
&:before {
/* create a full-height inline block pseudo=element */
content: " ";
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
img {
max-width: 100%;
max-height: 64px;
box-shadow: none;
border: none;
border-radius: 0;
vertical-align: middle;
}
}
.title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-decoration: none;
font-size: 16px;
color: #000;
line-height: 1.25em;
height: 40px;
margin-top: 20px;
padding: 0 8px;
}
}
// fade-in animation
&.show-items .option-card {
opacity: 0;
-webkit-animation: new-item-animation 0.2s linear forwards;
-o-animation: new-item-animation 0.2s linear forwards;
animation: new-item-animation 0.2s linear forwards;
}
// fade-out animation
&.remove-items .option-card {
-webkit-animation: removed-item-animation 0.2s
cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards;
-o-animation: removed-item-animation 0.2s
cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards;
animation: removed-item-animation 0.2s cubic-bezier(0.55, -0.04, 0.91, 0.94)
forwards;
}
}
a.option-card:hover {
z-index: 2;
box-shadow: 0 -2px 4px hsla(180, 100%, 50%, .05), 0 12px 24px hsla(207, 100%, 10%, 0.25);
}
@for $i from 1 through 40 {
.option-card:nth-child(#{$i}) {
animation-delay: #{$i * 0.04}s !important;
}
}
@media only screen and (max-width: $palm-end) {
.hass-option-cards {
.option-card {
width: calc(100% - 24px) !important;
flex-direction: row;
display: flex;
align-items: center;
height: 80px;
margin: 8px;
.img-container {
margin: 8px;
img {
max-width: 48px;
max-height: 48px;
}
}
.title {
height: auto;
margin: 8px;
}
}
}
#components-page {
.hass-option-cards {
grid-template-columns: 1fr;
.option-card {
width: 100%;
width: calc(50% - 24px);
}
}
.category_select {
display: block;
}
.category_list {
display: none;
}
}
}
@media only screen and (max-width: $lap-end) {
#components-page {
.filter-button-group {
display: flex;
flex-wrap: wrap;
margin-bottom: 16px;
align-items: flex-end;
&>div {
margin-right: 8px;
}
.btn {
display: inline-block;
margin-right: 8px;
margin-bottom: 8px;
margin-right: 4px;
margin-bottom: 0;
padding: 4px 16px;
font-size: 1rem;
background: $grayLighter;
box-shadow: none;
color: $link-color;
&.current {
background-color: #3a5561;
background-image: linear-gradient(to bottom, #3a5561, #3f6b7d);
&.active {
font-weight: bold;
}
}
}
.category_select {
display: block;
}
.category_list {
display: none;
}
}
}
@media only screen and (min-width: $desk-start) {
#components-page {
.filter-button-group {
.active {
font-weight: bold;
@ -69,6 +237,7 @@
box-shadow: none;
text-shadow: none;
padding: 2px;
border-radius: 0;
&.current {
font-weight: bold;
@ -78,102 +247,10 @@
}
}
// styles for the cards
.hass-option-cards {
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
margin: -4px; // grid trick, has to match option-card's margin
p.note {
width: 100%;
}
.option-card {
flex: 0 0 auto;
width: 210px;
height: 142px;
display: inline-block;
background-color: #fefefe;
margin: 4px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, .12);
box-shadow: rgba(0,0,0,0.06) 0 0 10px;
padding: 8px;
text-align: center;
text-decoration: none;
.img-container {
height: 50px;
margin: 12px 0;
font: 0/0 a;
&:before {
/* create a full-height inline block pseudo=element */
content: " ";
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
img {
max-width: 100%;
max-height: 50px;
box-shadow: none;
border: none;
vertical-align: middle;
}
}
.title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-decoration: none;
font-size: 18px;
color: #000;
line-height: 1.3em;
height: 2.6em;
margin-top: 20px;
}
}
// fade-in animation
&.show-items .option-card {
opacity: 0;
-webkit-animation: new-item-animation 0.2s linear forwards;
-o-animation: new-item-animation 0.2s linear forwards;
animation: new-item-animation 0.2s linear forwards;
}
// fade-out animation
&.remove-items .option-card {
-webkit-animation: removed-item-animation 0.2s
cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards;
-o-animation: removed-item-animation 0.2s
cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards;
animation: removed-item-animation 0.2s cubic-bezier(0.55, -0.04, 0.91, 0.94)
forwards;
}
}
// animations for fade-in and fade-out effects of option-cards
@keyframes new-item-animation {
from {
opacity: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
@ -186,8 +263,6 @@
@-webkit-keyframes new-item-animation {
from {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
@ -198,8 +273,6 @@
@-o-keyframes new-item-animation {
from {
opacity: 0;
-o-transform: scale(0);
transform: scale(0);
}
to {
opacity: 1;
@ -236,10 +309,6 @@
transform: scale(1);
}
to {
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
@ -250,8 +319,6 @@
transform: scale(1);
}
to {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}
@ -262,8 +329,6 @@
transform: scale(1);
}
to {
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
}
}

4
sass/custom/_getting_started.scss → sass/homeassistant/pages/_getting_started.scss
View File

@ -1,8 +1,4 @@
#getting_started {
.intro {
padding-bottom: 16px;
font-size: 24px;
}
.installations {
.label {

2
sass/custom/_landingpage.scss → sass/homeassistant/pages/_landingpage.scss
View File

@ -4,8 +4,6 @@ $ha__primary_color: #03a9f4;
#landingpage {
$landingpage__hero_height: 670px;
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
.site-header {
.grid-wrapper {
max-width: 1100px !important;

55
sass/homeassistant/plugins/_alert.scss Normal file
View File

@ -0,0 +1,55 @@
div.alert {
position: relative;
background: #e7f2fa;
padding: 20px 24px 20px 24px;
margin-bottom: 24px;
border-radius: 16px;
p {
margin-bottom: 0px;
&.alert-title {
font-weight: bold;
line-height: 1.5em;
}
&.alert-content {
padding: 6px;
}
}
&.alert-note {
p.alert-title {
color: #6ab0de;
}
background-color: #e7f2fa;
}
&.alert-tip {
p.alert-title {
color: #4caf50;
}
background-color: #e6f4ea;
}
&.alert-important {
p.alert-title {
color: #7e57c2;
}
background-color: #ede7f6;
}
&.alert-warning {
p.alert-title {
color: rgb(187, 185, 13);
}
background-color: #f7f9e1;
}
&.alert-caution {
p.alert-title {
color: #d32f2f;
}
background-color: #fdecea;
}
}

14
sass/custom/_details.scss → sass/homeassistant/plugins/_details.scss
View File

@ -4,12 +4,11 @@ div.details-block {
margin: 0 0 1.5em 0;
.details-block-item {
background-color: white;
padding: 4px 16px;
margin: 8px;
background-color: #f8f8f8;
padding: 4px 24px;
margin: 8px 0;
border: 1px solid rgba(0, 0, 0, .12);
box-shadow: rgba(0,0,0,0.06) 0 0 10px;
border-radius: 8px;
border-radius: 16px;
.details-block-title {
font-weight: bold;
@ -20,12 +19,13 @@ div.details-block {
justify-content: space-between;
display: flex;
align-items: center;
background-color: white;
background-color: #f8f8f8;
border: 0px;
width: 100%;
padding: 0;
}
.details-block-content {
margin: 4px 32px 12px 0;
margin: 4px 0 12px 0;
}
}
}

34
sass/homeassistant/plugins/_integration_alert.scss Normal file
View File

@ -0,0 +1,34 @@
.integration-alert-container {
margin: 0;
}
a.integration-alert {
margin: 1em 0;
background-color: wheat;
padding: 16px 24px;
text-decoration: none !important;
display: flex;
align-items: center;
color: black;
border-radius: 16px;
svg {
width: 24px;
margin-right: 8px;
}
.content {
flex: 1;
}
.learn-more {
font-weight: 600;
padding: 4px 12px;
border-radius: 16px;
font-size: 0.8em;
&:hover {
background-color: rgba(0, 0, 0, 0.12);
}
}
}

0
sass/custom/_tabbed_block.scss → sass/homeassistant/plugins/_tabbed_block.scss
View File

0
sass/custom/_terminology_tooltip.scss → sass/homeassistant/plugins/_terminology_tooltip.scss
View File

26
sass/oscailte/_oscailte.scss
View File

@ -1,26 +0,0 @@
@import "variables";
@import "mixins";
@import "../inuitcss/_inuit";
@import "../fontawesome/font-awesome";
@import "base/global";
@import "base/grid";
@import "base/header";
@import "base/navigation";
@import "base/footer";
@import "base/post";
@import "base/archive_list";
@import "base/solarized";
@import "base/sidebar";
@import "aside/recent_posts";
@import "aside/github";
@import "aside/pinboard";
@import "aside/social";
@import "homepage/home";
@import "homepage/hero_unit";
@import "helpers/classes";
@import "helpers/grid-fix";

12
sass/oscailte/base/_header.scss
View File

@ -1,12 +0,0 @@
body > header {
@include box-shadow(0 0 3px rgba(0, 0, 0, 0.25));
background-color: $header-background;
margin-bottom: 2em;
.site-title {
color: $grayDarker;
font-size: 1.7em;
font-weight: bold;
line-height: 2.5em;
}
}

46
sass/oscailte/base/_sidebar.scss
View File

@ -1,46 +0,0 @@
// #sidebar {
// .title {
// border-bottom: 1px solid $blue;
// color: $grayDark;
// margin: 1em 0 0.5em;
// padding-bottom: 5px;
// }
// .social {
// ul {
// @include content-columns(2, 10px);
// }
// }
// @media only screen and (min-width: $desk-start){
// section:first-child {
// h3 {margin-top: 0;}
// }
// }
// }
.aside-module {
@media only screen and (min-width: $desk-start){
&:first-child {
.title {margin-top: 0;}
}
}
.title {
border-bottom: 1px solid $blue;
color: $grayDark;
margin: 1em 0 0.5em;
padding-bottom: 5px;
.btn {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 5px 10px;
text-decoration: none;
}
}
.loading {
display: block;
font-size: 2em;
text-align: center;
}
}

333
sass/oscailte/base/_solarized.scss
View File

@ -1,333 +0,0 @@
// // This file is just a butchered version of the one included in the default Octopress theme.
// // It could most definitely do with some cleaning up in the future.
// @mixin selection($bg, $color: inherit, $text-shadow: none){
// * {
// &::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
// &::-webkit-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
// &::selection { background: $bg; color: $color; text-shadow: $text-shadow; }
// }
// }
// $base03: #002b36 !default; //darkest blue
// $base02: #073642 !default; //dark blue
// $base01: #586e75 !default; //darkest gray
// $base00: #657b83 !default; //dark gray
// $base0: #839496 !default; //medium gray
// $base1: #93a1a1 !default; //medium light gray
// $base2: #eee8d5 !default; //cream
// $base3: #fdf6e3 !default; //white
// $solar-yellow: #b58900 !default;
// $solar-orange: #cb4b16 !default;
// $solar-red: #dc322f !default;
// $solar-magenta: #d33682 !default;
// $solar-violet: #6c71c4 !default;
// $solar-blue: #268bd2 !default;
// $solar-cyan: #2aa198 !default;
// $solar-green: #859900 !default;
// $solarized: dark !default;
// @if $solarized == light {
// $_base03: $base03;
// $_base02: $base02;
// $_base01: $base01;
// $_base00: $base00;
// $_base0: $base0;
// $_base1: $base1;
// $_base2: $base2;
// $_base3: $base3;
// $base03: $_base3;
// $base02: $_base2;
// $base01: $_base1;
// $base00: $_base0;
// $base0: $_base00;
// $base1: $_base01;
// $base2: $_base02;
// $base3: $_base03;
// }
// /* non highlighted code colors */
// $pre-bg: $base03 !default;
// $pre-border: darken($base02, 5) !default;
// $pre-color: $base1 !default;
// $noise-bg: image-url('noise.png') top left !default;
// $sans: "Helvetica Neue", Arial, sans-serif !default;
// $mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace !default;
// .sans { font-family: $sans; }
// .mono { font-family: $mono; }
// .highlight {
// table {margin-bottom: 0;}
// .gutter, .code {
// padding: 0;
// }
// .gutter {
// .line-number {
// display: block;
// }
// }
// }
// .highlight, html .gist .gist-file .gist-syntax .gist-highlight {
// table td.code { width: 100%; }
// border: 1px solid $pre-border !important;
// }
// .highlight .line-numbers, html .gist .gist-file .gist-syntax .highlight .line_numbers {
// text-align: right;
// font-size: 13px;
// line-height: 1.45em;
// @if $solarized == light {
// background: lighten($base03, 1) $noise-bg !important;
// border-right: 1px solid darken($base02, 2) !important;
// @include box-shadow(lighten($base03, 2) -1px 0 inset);
// text-shadow: lighten($base02, 2) 0 -1px;
// } @else {
// background: $base02 $noise-bg !important;
// border-right: 1px solid darken($base03, 2) !important;
// @include box-shadow(lighten($base02, 2) -1px 0 inset);
// text-shadow: darken($base02, 10) 0 -1px;
// }
// span { color: $base01 !important; }
// padding: .8em !important;
// @include border-radius(0);
// }
// figure.code, .gist-file, pre {
// @include box-shadow(rgba(#000, .06) 0 0 10px);
// .highlight pre { @include box-shadow(none); }
// }
// .gist .highlight, figure.code .highlight {
// @include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px);
// }
// html .gist .gist-file {
// margin-bottom: 1.8em;
// position: relative;
// border: none;
// padding-top: image-height("code_bg.png") !important;
// .highlight {
// margin-bottom: 0;
// }
// .gist-syntax {
// border-bottom: 0 !important;
// background: none !important;
// .gist-highlight {
// background: $base03 !important;
// }
// .highlight pre {
// @extend .pre-code;
// padding: 0;
// }
// }
// .gist-meta {
// padding: .6em 0.8em;
// border: 1px solid lighten($base02, 2) !important;
// color: $base01;
// font-size: .7em !important;
// @if $solarized == light {
// background: lighten($base03, 2) $noise-bg;
// border: 1px solid $pre-border !important;
// border-top: 1px solid lighten($base03, 2) !important;
// } @else {
// background: $base02 $noise-bg;
// }
// @extend .sans;
// line-height: 1.5em;
// a {
// color: mix($base1, $base01) !important;
// &:hover { color: $base1 !important; }
// }
// a[href*='#file'] {
// position: absolute; top: 0; left:0; right:-10px;
// color: #474747 !important;
// @extend .code-title;
// &:hover { color: $link-color !important; }
// }
// a[href*=raw]{
// @extend .download-source;
// top: .4em;
// }
// }
// }
// pre {
// background: $pre-bg $noise-bg;
// @include border-radius(.4em);
// @extend .mono;
// border: 1px solid $pre-border;
// line-height: 1.45em;
// font-size: 13px;
// margin-bottom: 2.1em;
// padding: .8em 1em;
// color: $pre-color;
// overflow: auto;
// }
// h3.filename {
// @extend .code-title;
// + pre { @include border-radius(0px); }
// }
// p, li {
// code {
// @extend .mono;
// display: inline-block;
// white-space: no-wrap;
// background: #fff;
// font-size: .8em;
// line-height: 1.5em;
// color: #555;
// border: 1px solid #ddd;
// @include border-radius(.4em);
// padding: 0 .3em;
// margin: -1px 0;
// }
// pre code { font-size: 1em !important; background: none; border: none; }
// }
// .pre-code {
// font-family: $mono !important;
// overflow: scroll;
// overflow-y: hidden;
// display: block;
// padding: .8em;
// overflow-x: auto;
// line-height: 1.45em;
// background: $base03 $noise-bg !important;
// color: $base1 !important;
// span { color: $base1 !important; }
// span { font-style: normal !important; font-weight: normal !important; }
// .c { color: $base01 !important; font-style: italic !important; } /* Comment */
// .cm { color: $base01 !important; font-style: italic !important; } /* Comment.Multiline */
// .cp { color: $base01 !important; font-style: italic !important; } /* Comment.Preproc */
// .c1 { color: $base01 !important; font-style: italic !important; } /* Comment.Single */
// .cs { color: $base01 !important; font-weight: bold !important; font-style: italic !important; } /* Comment.Special */
// .err { color: $solar-red !important; background: none !important; } /* Error */
// .k { color: $solar-orange !important; } /* Keyword */
// .o { color: $base1 !important; font-weight: bold !important; } /* Operator */
// .p { color: $base1 !important; } /* Operator */
// .ow { color: $solar-cyan !important; font-weight: bold !important; } /* Operator.Word */
// .gd { color: $base1 !important; background-color: mix($solar-red, $base03, 25%) !important; display: inline-block; } /* Generic.Deleted */
// .gd .x { color: $base1 !important; background-color: mix($solar-red, $base03, 35%) !important; display: inline-block; } /* Generic.Deleted.Specific */
// .ge { color: $base1 !important; font-style: italic !important; } /* Generic.Emph */
// //.gr { color: #aa0000 } /* Generic.Error */
// .gh { color: $base01 !important; } /* Generic.Heading */
// .gi { color: $base1 !important; background-color: mix($solar-green, $base03, 20%) !important; display: inline-block; } /* Generic.Inserted */
// .gi .x { color: $base1 !important; background-color: mix($solar-green, $base03, 40%) !important; display: inline-block; } /* Generic.Inserted.Specific */
// //.go { color: #888888 } /* Generic.Output */
// //.gp { color: #555555 } /* Generic.Prompt */
// .gs { color: $base1 !important; font-weight: bold !important; } /* Generic.Strong */
// .gu { color: $solar-violet !important; } /* Generic.Subheading */
// //.gt { color: #aa0000 } /* Generic.Traceback */
// .kc { color: $solar-green !important; font-weight: bold !important; } /* Keyword.Constant */
// .kd { color: $solar-blue !important; } /* Keyword.Declaration */
// .kp { color: $solar-orange !important; font-weight: bold !important; } /* Keyword.Pseudo */
// .kr { color: $solar-magenta !important; font-weight: bold !important; } /* Keyword.Reserved */
// .kt { color: $solar-cyan !important; } /* Keyword.Type */
// .n { color: $solar-blue !important; }
// .na { color: $solar-blue !important; } /* Name.Attribute */
// .nb { color: $solar-green !important; } /* Name.Builtin */
// .nc { color: $solar-magenta !important;} /* Name.Class */
// .no { color: $solar-yellow !important; } /* Name.Constant */
// //.ni { color: #800080 } /* Name.Entity */
// .nl { color: $solar-green !important; }
// .ne { color: $solar-blue !important; font-weight: bold !important; } /* Name.Exception */
// .nf { color: $solar-blue !important; font-weight: bold !important; } /* Name.Function */
// .nn { color: $solar-yellow !important; } /* Name.Namespace */
// .nt { color: $solar-blue !important; font-weight: bold !important; } /* Name.Tag */
// .nx { color: $solar-yellow !Important; }
// //.bp { color: #999999 } /* Name.Builtin.Pseudo */
// //.vc { color: #008080 } /* Name.Variable.Class */
// .vg { color: $solar-blue !important; } /* Name.Variable.Global */
// .vi { color: $solar-blue !important; } /* Name.Variable.Instance */
// .nv { color: $solar-blue !important; } /* Name.Variable */
// //.w { color: #bbbbbb } /* Text.Whitespace */
// .mf { color: $solar-cyan !important; } /* Literal.Number.Float */
// .m { color: $solar-cyan !important; } /* Literal.Number */
// .mh { color: $solar-cyan !important; } /* Literal.Number.Hex */
// .mi { color: $solar-cyan !important; } /* Literal.Number.Integer */
// //.mo { color: #009999 } /* Literal.Number.Oct */
// .s { color: $solar-cyan !important; } /* Literal.String */
// //.sb { color: #d14 } /* Literal.String.Backtick */
// //.sc { color: #d14 } /* Literal.String.Char */
// .sd { color: $solar-cyan !important; } /* Literal.String.Doc */
// .s2 { color: $solar-cyan !important; } /* Literal.String.Double */
// .se { color: $solar-red !important; } /* Literal.String.Escape */
// //.sh { color: #d14 } /* Literal.String.Heredoc */
// .si { color: $solar-blue !important; } /* Literal.String.Interpol */
// //.sx { color: #d14 } /* Literal.String.Other */
// .sr { color: $solar-cyan !important; } /* Literal.String.Regex */
// .s1 { color: $solar-cyan !important; } /* Literal.String.Single */
// //.ss { color: #990073 } /* Literal.String.Symbol */
// //.il { color: #009999 } /* Literal.Number.Integer.Long */
// div { .gd, .gd .x, .gi, .gi .x { display: inline-block; width: 100%; }}
// }
// .highlight, .gist-highlight {
// pre { background: none; @include border-radius(0px); border: none; padding: 0; margin-bottom: 0; }
// margin-bottom: 1.8em;
// background: $base03;
// overflow-y: hidden;
// overflow-x: auto;
// }
// $solar-scroll-bg: rgba(#fff, .15);
// $solar-scroll-thumb: rgba(#fff, .2);
// @if $solarized == light {
// $solar-scroll-bg: rgba(#000, .15);
// $solar-scroll-thumb: rgba(#000, .15);
// }
// pre, .highlight, .gist-highlight {
// &::-webkit-scrollbar { height: .5em; background: $solar-scroll-bg; }
// &::-webkit-scrollbar-thumb:horizontal { background: $solar-scroll-thumb; -webkit-border-radius: 4px; border-radius: 4px }
// }
// .highlight code {
// @extend .pre-code; background: #000;
// }
// figure.code {
// background: none;
// padding: 0;
// border: 0;
// margin-bottom: 1.5em;
// pre { margin-bottom: 0; }
// figcaption {
// position: relative;
// @extend .code-title;
// a { @extend .download-source; }
// }
// .highlight {
// margin-bottom: 0;
// }
// }
// .code-title {
// text-align: center;
// font-size: 13px;
// line-height: 2em;
// text-shadow: #cbcccc 0 1px 0;
// color: #474747;
// font-weight: normal;
// margin-bottom: 0;
// @include border-radius(5px 5px 0 0);
// font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;
// background: #aaaaaa image-url("code_bg.png") top repeat-x;
// border: 1px solid #565656;
// border-top-color: #cbcbcb;
// border-left-color: #a5a5a5;
// border-right-color: #a5a5a5;
// border-bottom: 0;
// }
// .download-source {
// position: absolute; right: .8em;
// color: #666 !important;
// z-index: 1;
// font-size: 13px;
// text-shadow: #cbcccc 0 1px 0;
// padding-left: 3em;
// }

75
sass/oscailte/homepage/_hero_unit.scss
View File

@ -1,75 +0,0 @@
.hero {
background-color: rgb(11, 107, 148);
background-position: 0 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border-bottom: 1px solid $white;
color: $white;
margin-top: -2em;
margin-bottom: 1.5em;
padding: 50px 0;
position: relative;
// &::before {
// background: url("../images/matrix.png") 0 0 rgba(0, 0, 0, 0.35);
// box-shadow: inset 0 0 5px $black;
// content: "";
// display: block;
// position: absolute;
// top: 0; right: 0; bottom: 0; left: 0;
// z-index: 5;
// }
> .grid-wrapper {
position: relative;
z-index: 7;
}
.credit {
font-size: 0.75em;
font-style: italic;
position: absolute;
bottom: 0; right: 10px;
z-index: 7;
a {
border-bottom: 1px solid;
color: $white;
text-decoration: none;
}
.licence {
border: none;
}
}
.avatar {
@media only screen and (max-width: $lap-end){
margin-bottom: 30px;
}
text-align: center;
img {
@include border-radius(100%);
border: 10px solid $primary-color;
}
}
h1 {
font-size: 3.5em;
line-height: 1em;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.75);
}
hr {
@extend .divider;
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
}
p {
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
small {
color: $grayLighter;
font-size: .65em;
}
}
}

72
sass/partials/_archive.scss
View File

@ -1,72 +0,0 @@
#archive {
#content > div { &, > article { padding-top: 0; } }
}
#blog-archives {
article {
padding: 1em 0 1em;
position: relative;
background: $img-border bottom left repeat-x;
&:last-child {
background: none;
}
footer { padding: 0; margin: 0;}
}
h1 { color: $text-color; margin-bottom: .3em; }
h2 { display: none; }
h1 {
font-size: 1.5em;
a {
@include hover-link;
color: inherit;
&:hover { color: $link-color-hover; }
font-weight: normal;
display: inline-block;
}
}
a.category, time {
@extend .sans;
color: $text-color-light;
}
color: $text-color-light;
.entry-content { display: none; }
time {
font-size: .9em;
line-height: 1.2em;
.month, .day { display: inline-block; }
.month { text-transform: uppercase; }
}
p { margin-bottom: 1em; }
&, .entry-content { a { @include link-colors(inherit, $link-color-hover); }}
a:hover { color: $link-color-hover; }
@media only screen and (min-width: 550px) {
article { margin-left: 5em; }
h2 {
margin-bottom: .3em;
font-weight: normal;
display: inline-block;
position: relative; top: -1px;
float: left;
&:first-child { padding-top: .75em; }
}
time {
position: absolute;
text-align: right;
left: 0em;
top: 1.8em;
}
.year { display: none; }
article {
padding:{left: 4.5em; bottom: .7em;}
}
a.category {
line-height: 1.1em;
}
}
}
#content > .category {
article {
margin-left: 0;
padding-left: 6.8em;
}
.year { display: inline; }
}

141
sass/partials/_blog.scss
View File

@ -1,141 +0,0 @@
article {
padding-top: 1em;
a { @extend .force-wrap; }
header {
position: relative;
padding-top: 2em;
padding-bottom: 1em;
margin-bottom: 1em;
background: $img-border bottom left repeat-x;
h1 {
margin: 0;
a { text-decoration: none;
&:hover { text-decoration: underline; } }
}
p {
font-size: .9em;
color: $text-color-light;
margin: 0;
&.meta {
@extend .sans;
text-transform: uppercase;
position: absolute; top: 0;
}
}
@media only screen and (min-width: 768px) {
margin-bottom: 1.5em;
padding-bottom: 1em;
background: $img-border bottom left repeat-x;
}
}
h2 {
padding-top: 0.8em;
background: $img-border top left repeat-x;
}
.entry-content & h2:first-child, header + h2 { padding-top: 0; }
h2:first-child, header + h2 { background: none; }
.feature {
padding-top: .5em;
margin-bottom: 1em;
padding-bottom: 1em;
background: $img-border bottom left repeat-x;
font-size: 2.0em; font-style: italic;
line-height: 1.3em;
}
img, video, .flash-video {
@extend .flex-content;
@extend .basic-alignment;
@include shadow-box;
}
video, .flash-video { margin: 0 auto 1.5em; }
video { display: block; width: 100%; }
.flash-video {
> div {
position: relative;
display: block;
padding-bottom: 56.25%;
padding-top: 1px;
height: 0;
overflow: hidden;
iframe, object, embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
> footer {
padding-bottom: 2.5em;
margin-top: 2em;
@extend .sans;
p.meta {
margin-bottom: .8em;
font-size: .85em;
clear: both;
overflow: hidden;
}
.byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
@extend .separator;
}
}
}
article + article {
.blog-index & {
background: $img-border top left repeat-x;
}
}
#content .blog-index {
padding: { top: 0; bottom: 0; }
article { padding-top: 2em; }
article header { background: none; padding-bottom: 0; }
article h1 {
font-size: 2.2em;
a { color: inherit; &:hover { color: $link-color-hover; } }
}
a[rel=full-article] {
background: darken($main-bg, 5);
display: inline-block;
padding: .4em .8em;
margin-right: .5em;
text-decoration: none;
color: mix($text-color, $text-color-light);
@extend .serif;
@include transition(background-color .5s);
&:hover {
background: $link-color-hover;
text-shadow: none;
color: $main-bg;
}
}
footer {
@extend .sans;
margin-top: 1em;
}
}
.separator {
content: "\2022 ";
padding: 0 .4em 0 .2em;
display: inline-block;
}
#content div.pagination {
text-align: center;
font-size: .95em;
position: relative;
background: $img-border top left repeat-x;
padding: {top: 1.5em; bottom: 1.5em;}
a {
text-decoration: none;
color: $text-color-light;
&.prev { position: absolute; left: 0; }
&.next { position: absolute; right: 0; }
&:hover { color: $link-color-hover; }
&[href*=archive] {
&:before, &:after { content: '\2014'; padding: 0 .3em; }
}
}
}

19
sass/partials/_footer.scss
View File

@ -1,19 +0,0 @@
body > footer {
@extend .sans;
font-size: .8em;
color: $footer-color;
text-shadow: lighten($footer-bg, 5) 0 1px;
background-color: $footer-bg;
@include background($footer-bg-front, $footer-bg-back);
border-top: 1px solid $footer-border-top;
position: relative;
padding-top: 1em;
padding-bottom: 1em;
margin-bottom: 3em;
@include border-bottom-radius(.4em);
z-index: 1;
a {
@include link-colors($footer-link-color, $footer-link-color-hover, $visited: $footer-link-color);
}
p:last-child { margin-bottom: 0; }
}

18
sass/partials/_header.scss
View File

@ -1,18 +0,0 @@
body > header {
background: $header-bg;
h1 {
display: inline-block;
margin: 0;
a, a:hover {
color: $title_color;
text-decoration: none;
}
}
h2 {
margin: .2em 0 0;
@extend .sans;
font-size: 1em;
color: $subtitle-color;
font-weight: normal;
}
}

137
sass/partials/_navigation.scss
View File

@ -1,137 +0,0 @@
body > nav {
position: relative;
background-color: $nav-bg;
@include background($nav-bg-front, $nav-bg-back);
border: {
top: 1px solid $nav-border-top;
bottom: 1px solid $nav-border-bottom; }
padding-top: .35em;
padding-bottom: .35em;
form {
@include background-clip(padding-box);
margin: 0; padding: 0;
.search {
padding: .3em .5em 0;
font-size: .85em;
font-family: $sans;
line-height: 1.1em;
width: 95%;
@include border-radius(.5em);
@include background-clip(padding-box);
@include box-shadow(lighten($nav-bg, 2) 0 1px);
background-color: lighten($nav-bg, 15);
border: 1px solid $nav-border;
color: #888;
&:focus {
color: #444;
border-color: #80b1df;
@include box-shadow(#80b1df 0 0 4px, #80b1df 0 0 3px inset);
background-color: #fff;
outline: none;
}
}
}
fieldset[role=search]{ float: right; width: 48%; }
fieldset.mobile-nav{ float: left; width: 48%;
select{ width: 100%; font-size: .8em; border: 1px solid #888;}
}
ul { display: none; }
@media only screen and (min-width: 550px) {
font-size: .9em;
ul {
@include horizontal-list(0);
float: left;
display: block;
padding-top: .15em;
}
ul.subscription {
margin-left: .8em;
float: right;
li:last-child a { padding-right: 0; }
}
ul li {
margin: 0;
}
a {
@include link-colors($nav-color, $nav-color-hover, $visited: $nav-color);
font-family: $sans;
text-shadow: lighten($nav-bg, 12) 0 1px;
float: left;
text-decoration: none;
font-size: 1.1em;
padding: .1em 0;
line-height: 1.5em;
}
li + li {
border-left: 1px solid $nav-border-left;
margin-left: .8em;
a {
padding-left: .8em;
border-left: 1px solid $nav-border-right;
}
}
form {
float: right;
text-align: left;
padding-left: .8em;
width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium + 20px;
.search {
width: 93%;
font-size: .95em;
line-height: 1.2em;
}
}
ul[data-subscription$=email] + form {
width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 58px;
.search { width: 91%; }
}
fieldset.mobile-nav { display: none; }
fieldset[role=search]{ width: 99%; }
}
@media only screen and (min-width: 992px) {
form {
width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 10px;
}
ul[data-subscription$=email] + form {
width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 58px;
}
}
}
.no-placeholder {
body > nav .search {
background: lighten($nav-bg, 15) image-url('search.png') .3em .25em no-repeat;
text-indent: 1.3em;
}
}
@mixin mask-subscription-nav($feed: 'rss.png'){
position: relative; top: 0px;
text-indent: -999999em;
background-color: $nav-border-right;
border: 0;
padding: 0;
&,&:after { @include mask-image($feed); }
&:after {
content: "";
position: absolute; top: -1px; left: 0;
background-color: lighten($nav-color, 25);
}
&:hover:after { background-color: lighten($nav-color, 20); }
}
.maskImage {
body > nav {
@media only screen and (min-width: 550px) {
ul[data-subscription$=email] + form {
width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 32px;
}
}
@media only screen and (min-width: 992px) {
ul[data-subscription$=email] + form {
width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 32px;
}
}
}
ul.subscription { position: relative; top: .2em; li, a { border: 0; padding: 0; }}
a[rel=subscribe-rss]{ @include mask-subscription-nav('rss.png'); }
a[rel=subscribe-email]{ @include mask-subscription-nav('email.png'); }
}

6
sass/partials/_sharing.scss
View File

@ -1,6 +0,0 @@
.sharing {
p.meta + & {
padding: { top: 1em; left: 0; }
background: $img-border top left repeat-x;
}
}

3
sass/partials/_sidebar.scss
View File

@ -1,3 +0,0 @@
@import "sidebar/base";
@import "sidebar/pinboard";
@import "sidebar/delicious";

261
sass/partials/_syntax.scss
View File

@ -1,261 +0,0 @@
.highlight, html .gist .gist-file .gist-syntax .gist-highlight {
table td.code { width: 100%; }
border: 1px solid $pre-border !important;
}
.highlight .line-numbers, html .gist .gist-file .gist-syntax .highlight .line_numbers {
text-align: right;
font-size: 13px;
line-height: 1.45em;
@if $solarized == light {
background: lighten($base03, 1) $noise-bg !important;
border-right: 1px solid darken($base02, 2) !important;
@include box-shadow(lighten($base03, 2) -1px 0 inset);
text-shadow: lighten($base02, 2) 0 -1px;
} @else {
background: $base02 $noise-bg !important;
border-right: 1px solid darken($base03, 2) !important;
@include box-shadow(lighten($base02, 2) -1px 0 inset);
text-shadow: darken($base02, 10) 0 -1px;
}
span { color: $base01 !important; }
padding: .8em !important;
@include border-radius(0);
}
figure.code, .gist-file, pre {
@include box-shadow(rgba(#000, .06) 0 0 10px);
.highlight pre { @include box-shadow(none); }
}
.gist .highlight, figure.code .highlight {
@include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px);
}
html .gist .gist-file {
margin-bottom: 1.8em;
position: relative;
border: none;
padding-top: image-height("code_bg.png") !important;
.highlight {
margin-bottom: 0;
}
.gist-syntax {
border-bottom: 0 !important;
background: none !important;
.gist-highlight {
background: $base03 !important;
}
.highlight pre {
@extend .pre-code;
padding: 0;
}
}
.gist-meta {
padding: .6em 0.8em;
border: 1px solid lighten($base02, 2) !important;
color: $base01;
font-size: .7em !important;
@if $solarized == light {
background: lighten($base03, 2) $noise-bg;
border: 1px solid $pre-border !important;
border-top: 1px solid lighten($base03, 2) !important;
} @else {
background: $base02 $noise-bg;
}
@extend .sans;
line-height: 1.5em;
a {
color: mix($base1, $base01) !important;
@include hover-link;
&:hover { color: $base1 !important; }
}
a[href*='#file'] {
position: absolute; top: 0; left:0; right:-10px;
color: #474747 !important;
@extend .code-title;
&:hover { color: $link-color !important; }
}
a[href*=raw]{
@extend .download-source;
top: .4em;
}
}
}
pre {
background: $pre-bg $noise-bg;
@include border-radius(.4em);
@extend .mono;
border: 1px solid $pre-border;
line-height: 1.45em;
font-size: 13px;
margin-bottom: 2.1em;
padding: .8em 1em;
color: $pre-color;
overflow: auto;
}
h3.filename {
@extend .code-title;
+ pre { @include border-top-radius(0px); }
}
p, li {
code {
@extend .mono;
display: inline-block;
white-space: no-wrap;
background: #fff;
font-size: .8em;
line-height: 1.5em;
color: #555;
border: 1px solid #ddd;
@include border-radius(.4em);
padding: 0 .3em;
margin: -1px 0;
}
pre code { font-size: 1em !important; background: none; border: none; }
}
.pre-code {
font-family: $mono !important;
overflow: scroll;
overflow-y: hidden;
display: block;
padding: .8em;
overflow-x: auto;
line-height: 1.45em;
background: $base03 $noise-bg !important;
color: $base1 !important;
span { color: $base1 !important; }
span { font-style: normal !important; font-weight: normal !important; }
.c { color: $base01 !important; font-style: italic !important; } /* Comment */
.cm { color: $base01 !important; font-style: italic !important; } /* Comment.Multiline */
.cp { color: $base01 !important; font-style: italic !important; } /* Comment.Preproc */
.c1 { color: $base01 !important; font-style: italic !important; } /* Comment.Single */
.cs { color: $base01 !important; font-weight: bold !important; font-style: italic !important; } /* Comment.Special */
.err { color: $solar-red !important; background: none !important; } /* Error */
.k { color: $solar-orange !important; } /* Keyword */
.o { color: $base1 !important; font-weight: bold !important; } /* Operator */
.p { color: $base1 !important; } /* Operator */
.ow { color: $solar-cyan !important; font-weight: bold !important; } /* Operator.Word */
.gd { color: $base1 !important; background-color: mix($solar-red, $base03, 25%) !important; display: inline-block; } /* Generic.Deleted */
.gd .x { color: $base1 !important; background-color: mix($solar-red, $base03, 35%) !important; display: inline-block; } /* Generic.Deleted.Specific */
.ge { color: $base1 !important; font-style: italic !important; } /* Generic.Emph */
//.gr { color: #aa0000 } /* Generic.Error */
.gh { color: $base01 !important; } /* Generic.Heading */
.gi { color: $base1 !important; background-color: mix($solar-green, $base03, 20%) !important; display: inline-block; } /* Generic.Inserted */
.gi .x { color: $base1 !important; background-color: mix($solar-green, $base03, 40%) !important; display: inline-block; } /* Generic.Inserted.Specific */
//.go { color: #888888 } /* Generic.Output */
//.gp { color: #555555 } /* Generic.Prompt */
.gs { color: $base1 !important; font-weight: bold !important; } /* Generic.Strong */
.gu { color: $solar-violet !important; } /* Generic.Subheading */
//.gt { color: #aa0000 } /* Generic.Traceback */
.kc { color: $solar-green !important; font-weight: bold !important; } /* Keyword.Constant */
.kd { color: $solar-blue !important; } /* Keyword.Declaration */
.kp { color: $solar-orange !important; font-weight: bold !important; } /* Keyword.Pseudo */
.kr { color: $solar-magenta !important; font-weight: bold !important; } /* Keyword.Reserved */
.kt { color: $solar-cyan !important; } /* Keyword.Type */
.n { color: $solar-blue !important; }
.na { color: $solar-blue !important; } /* Name.Attribute */
.nb { color: $solar-green !important; } /* Name.Builtin */
.nc { color: $solar-magenta !important;} /* Name.Class */
.no { color: $solar-yellow !important; } /* Name.Constant */
//.ni { color: #800080 } /* Name.Entity */
.nl { color: $solar-green !important; }
.ne { color: $solar-blue !important; font-weight: bold !important; } /* Name.Exception */
.nf { color: $solar-blue !important; font-weight: bold !important; } /* Name.Function */
.nn { color: $solar-yellow !important; } /* Name.Namespace */
.nt { color: $solar-blue !important; font-weight: bold !important; } /* Name.Tag */
.nx { color: $solar-yellow !Important; }
//.bp { color: #999999 } /* Name.Builtin.Pseudo */
//.vc { color: #008080 } /* Name.Variable.Class */
.vg { color: $solar-blue !important; } /* Name.Variable.Global */
.vi { color: $solar-blue !important; } /* Name.Variable.Instance */
.nv { color: $solar-blue !important; } /* Name.Variable */
//.w { color: #bbbbbb } /* Text.Whitespace */
.mf { color: $solar-cyan !important; } /* Literal.Number.Float */
.m { color: $solar-cyan !important; } /* Literal.Number */
.mh { color: $solar-cyan !important; } /* Literal.Number.Hex */
.mi { color: $solar-cyan !important; } /* Literal.Number.Integer */
//.mo { color: #009999 } /* Literal.Number.Oct */
.s { color: $solar-cyan !important; } /* Literal.String */
//.sb { color: #d14 } /* Literal.String.Backtick */
//.sc { color: #d14 } /* Literal.String.Char */
.sd { color: $solar-cyan !important; } /* Literal.String.Doc */
.s2 { color: $solar-cyan !important; } /* Literal.String.Double */
.se { color: $solar-red !important; } /* Literal.String.Escape */
//.sh { color: #d14 } /* Literal.String.Heredoc */
.si { color: $solar-blue !important; } /* Literal.String.Interpol */
//.sx { color: #d14 } /* Literal.String.Other */
.sr { color: $solar-cyan !important; } /* Literal.String.Regex */
.s1 { color: $solar-cyan !important; } /* Literal.String.Single */
//.ss { color: #990073 } /* Literal.String.Symbol */
//.il { color: #009999 } /* Literal.Number.Integer.Long */
div { .gd, .gd .x, .gi, .gi .x { display: inline-block; width: 100%; }}
}
.highlight, .gist-highlight {
pre { background: none; @include border-radius(0px); border: none; padding: 0; margin-bottom: 0; }
margin-bottom: 1.8em;
background: $base03;
overflow-y: hidden;
overflow-x: auto;
}
$solar-scroll-bg: rgba(#fff, .15);
$solar-scroll-thumb: rgba(#fff, .2);
@if $solarized == light {
$solar-scroll-bg: rgba(#000, .15);
$solar-scroll-thumb: rgba(#000, .15);
}
pre, .highlight, .gist-highlight {
&::-webkit-scrollbar { height: .5em; background: $solar-scroll-bg; }
&::-webkit-scrollbar-thumb:horizontal { background: $solar-scroll-thumb; -webkit-border-radius: 4px; border-radius: 4px }
}
.highlight code {
@extend .pre-code; background: #000;
}
figure.code {
background: none;
padding: 0;
border: 0;
margin-bottom: 1.5em;
pre { margin-bottom: 0; }
figcaption {
position: relative;
@extend .code-title;
a { @extend .download-source; }
}
.highlight {
margin-bottom: 0;
}
}
.code-title {
text-align: center;
font-size: 13px;
line-height: 2em;
text-shadow: #cbcccc 0 1px 0;
color: #474747;
font-weight: normal;
margin-bottom: 0;
@include border-top-radius(5px);
font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;
background: #aaaaaa image-url("code_bg.png") top repeat-x;
border: 1px solid #565656;
border-top-color: #cbcbcb;
border-left-color: #a5a5a5;
border-right-color: #a5a5a5;
border-bottom: 0;
}
.download-source {
position: absolute; right: .8em;
@include hover-link;
color: #666 !important;
z-index: 1;
font-size: 13px;
text-shadow: #cbcccc 0 1px 0;
padding-left: 3em;
}

106
sass/partials/sidebar/_base.scss
View File

@ -1,106 +0,0 @@
.side-shadow-border {
@include box-shadow(lighten($sidebar-bg, 5) 0 1px);
}
aside.sidebar {
overflow: hidden;
color: $sidebar-color;
text-shadow: lighten($sidebar-bg, 8) 0 1px;
a { @extend .force-wrap; }
section {
@extend .sans;
font-size: .8em;
line-height: 1.4em;
margin-bottom: 1.5em;
h1 {
margin: 1.5em 0 0;
padding-bottom: .2em;
border-bottom: 1px solid $sidebar-border;
@extend .side-shadow-border;
+ p {
padding-top: .4em;
}
}
}
img {
@extend .flex-content;
@extend .basic-alignment;
@include shadow-box($border: #fff .3em solid);
}
ul {
margin-bottom: 0.5em;
margin-left: 0;
}
li {
list-style: none;
padding: .5em 0;
margin: 0;
border-bottom: 1px solid $sidebar-border;
@extend .side-shadow-border;
p:last-child {
margin-bottom: 0;
}
}
a {
color: inherit;
@include transition(color .5s);
}
&:hover a {
color: $sidebar-link-color;
&:hover { color: $sidebar-link-color-hover; }
}
}
.aside-alt-link {
color: $sidebar-link-color-subdued;
&:hover {
color: $sidebar-link-color-subdued-hover;
}
}
@media only screen and (min-width: 768px) {
.toggle-sidebar {
outline: none;
position: absolute; right: -10px; top: 0; bottom: 0;
display: inline-block;
text-decoration: none;
color: mix($text-color-light, $sidebar-bg);
width: 9px;
cursor: pointer;
&:hover {
background: mix($sidebar-border, $sidebar-bg);
@include background(linear-gradient(left, rgba($sidebar-border, .5), rgba($sidebar-border, 0)));
}
&:after {
position: absolute; right: -11px; top: 0;
width: 20px;
font-size: 1.2em;
line-height: 1.1em;
padding-bottom: .15em;
@include border-bottom-right-radius(.3em);
text-align: center;
background: $main-bg $noise-bg;
border-bottom: 1px solid $sidebar-border;
border-right: 1px solid $sidebar-border;
content: "\00BB";
text-indent: -1px;
}
.collapse-sidebar & {
text-indent: 0px;
right: -20px;
width: 19px;
&:hover {
background: mix($sidebar-border, $sidebar-bg);
}
&:after {
border-left: 1px solid $sidebar-border;
text-shadow: #fff 0 1px;
content: "\00AB";
left: 0px; right: 0;
text-align: center;
text-indent: 0;
border: 0;
border-right-width: 0;
background: none;
}
}
}
}

4
sass/partials/sidebar/_delicious.scss
View File

@ -1,4 +0,0 @@
.delicious-posts {
a.delicious-link { margin-bottom: .5em; display: block; }
p { font-size: 1em; }
}

12
sass/partials/sidebar/_pinboard.scss
View File

@ -1,12 +0,0 @@
#pinboard_linkroll {
.pin-title, .pin-description {
display: block;
margin-bottom: .5em;
}
.pin-tag {
@include hover-link;
@extend .aside-alt-link;
&:after { content: ','; }
&:last-child:after { content: ''; }
}
}

6
sass/plugins/_plugins.scss
View File

@ -1,6 +0,0 @@
/*
Add plugin stylesheets to this directory and they will be automatically
Imported. Load order is alphabetical and styles can be overridden in
custom/_style.scss which is loaded after all plugin stylesheets.
*/

13
sass/screen.scss
View File

@ -1,12 +1 @@
@import 'oscailte/oscailte';
@import 'custom/paulus';
@import 'custom/landingpage';
@import 'custom/features';
@import 'custom/component_page';
@import 'custom/syntax';
@import 'custom/details';
@import 'custom/print';
@import 'custom/layout';
@import 'custom/getting_started';
@import 'custom/tabbed_block';
@import 'custom/terminology_tooltip';
@import 'homeassistant/homeassistant';

5
source/_dashboards/iframe.markdown
View File

@ -24,9 +24,10 @@ The webpage card is used on the [Webpage dashboard](/dashboards/dashboards/#webp
All options for this card can be configured via the user interface.
Note that not every webpage can be embedded due to security restrictions that some sites have in place. These restrictions are enforced by your browser and prevent embedding them into a Home Assistant dashboard.
<div class='note warning'>
{% important %}
You can't embed sites using HTTP if you are using HTTPS for your Home Assistant.
</div>
{% endimportant %}
## YAML configuration

18
source/_dashboards/map.markdown
View File

@ -75,17 +75,15 @@ hours_to_show:
default: 0
{% endconfiguration %}
<div class='note'>
Only entities that have latitude and longitude attributes will be displayed on the map.
</div>
{% important %}
Only entities that have latitude and longitude attributes will be displayed on the map.
{% endimportant %}
<div class="note">
The `default_zoom` value will be ignored if it is set higher than the current zoom level
after fitting all visible entity markers in the map window. In other words, this can only
be used to zoom the map _out_ by default.
</div>
{% note %}
The `default_zoom` value will be ignored if it is set higher than the current zoom level
after fitting all visible entity markers in the map window. In other words, this can only
be used to zoom the map _out_ by default.
{% endnote %}
## Options for entities

7
source/_dashboards/sections.markdown
View File

@ -27,9 +27,10 @@ You can group cards without using horizontal or vertical stack cards.
A fully populated dashboard in Sections view layout
</p>
<div class='note notice'>
<p>The sections view was released beginning of March 2024 and is experimental! Do not build your daily dashboard on top of it yet! We are still collecting feedback.</p><br><p>It is not possible to migrate dashboards into sections view.</p>
</div>
{% note %}
The sections view was released beginning of March 2024 and is experimental! Do not build your daily dashboard on top of it yet! We are still collecting feedback.<br>
It is not possible to migrate dashboards into sections view.
{% endnote %}
## Creating a sections view

9
source/_dashboards/weather-forecast.markdown
View File

@ -36,11 +36,10 @@ Theme:
description: Name of any loaded theme to be used for this card. For more information about themes, see the [frontend documentation](/integrations/frontend/).
{% endconfiguration_basic %}
<div class="note">
This card works only with platforms that define a `weather` entity.
E.g., it works with [OpenWeatherMap](https://www.home-assistant.io/integrations/openweathermap/#weather) but not [OpenWeatherMap Sensor](https://www.home-assistant.io/integrations/openweathermap/#sensor)
{% important %}
This card works only with platforms that define a `weather` entity.
E.g., it works with [OpenWeatherMap](/integrations/openweathermap/#weather) but not [OpenWeatherMap Sensor](/integrations/openweathermap/#sensor)
{% endimportant %}
</div>

10
source/_docs/asterisk_mbox.markdown
View File

@ -14,9 +14,9 @@ Both parts are necessary for Asterisk voicemail integration.
The server installation is documented below. The client is [integrated inside Home Assistant](/integrations/asterisk_mbox)
<div class='note'>
{% note %}
Currently this module can only monitor a single Asterisk PBX mailbox.
</div>
{% endnote %}
### Prerequisites
@ -99,8 +99,6 @@ Before beginning make sure that you have the following:
WantedBy=multi-user.target
```
<div class='note'>
{% note %}
This assumes that your Asterisk PBX server is using `systemd` for init handling. If not, you will need to create the appropriate configuration files yourself.
</div>
{% endnote %}

14
source/_docs/authentication.markdown
View File

@ -18,13 +18,13 @@ When you start Home Assistant for the first time, the _owner_ user account is cr
- Create and manage other user accounts.
- Configure integrations and other settings (coming soon).
<div class='note'>
{% warning %}
For the moment, other user accounts will have the same access as the owner account. In the future, non-owner accounts will be able to have restrictions applied.
</div>
{% endwarning %}
<div class="note">
{% note %}
If you want to manage users and you're an owner but you do not see "Users" in your main configuration menu, make sure that **Advanced Mode** is enabled for your user in your profile.
</div>
{% endnote %}
### Your account profile
@ -41,11 +41,9 @@ You can:
- Define language and other locale settings.
- Log out of Home Assistant.
<div class="note">
{% note %}
Unused refresh tokens will be automatically removed. A refresh token is considered unused if it has not been used for a login within 90 days. If you need a permanent token, then we recommend using [Long Lived Access Tokens](https://developers.home-assistant.io/docs/auth_api/#long-lived-access-token).
</div>
{% endnote %}
### Securing your login

16
source/_docs/authentication/multi-factor-auth.markdown
View File

@ -42,9 +42,9 @@ Click _Enable_ and a new secret key will be generated. Go to your phone app and
<img src='/images/docs/authentication/mfa.png' alt='Screenshot of setting up multi-factor authentication' style='border: 0;box-shadow: none;'>
<div class='note warning'>
{% caution %}
Please treat the secret key like a password - never expose it to others.
</div>
{% endcaution %}
Your phone app will now start generating a different six-digit code every thirty seconds or so. Enter one of these into Home Assistant under the QR code where it asks for a _Code_. Home Assistant and your phone app are now in sync and you can now use the code displayed in the app to log in.
@ -52,11 +52,9 @@ Your phone app will now start generating a different six-digit code every thirty
Once TOTP is enabled, Home Assistant requires the latest code from your phone app before you can log in.
<div class='note'>
{% note %}
TOTP is _time based_ so it relies on your Home Assistant clock being accurate. If the verification keeps failing, make sure the clock on Home Assistant is correct.
</div>
{% endnote %}
### Notify multi-factor authentication module
@ -105,10 +103,8 @@ Try logging out, then logging in again. You will be asked for the six-digit one-
If the validation failed, a new one-time password will be sent again.
<div class='note'>
{% note %}
The Notify MFA module can't tell if the one-time password was delivered successfully. If you don't get the notification, you won't be able to log in.
You can disable the Notify MFA module by editing or removing the file `[your_config_dir]/.storage/auth_module.notify`.
</div>
{% endnote %}

28
source/_docs/authentication/providers.markdown
View File

@ -6,21 +6,21 @@ related:
title: configuration.yaml file
---
<div class='note warning'>
{% caution %}
This is an advanced feature.
</div>
{% endcaution %}
When you log in, an _auth provider_ checks your credentials to make sure you are an authorized user.
## Configuring auth providers
<div class='note warning'>
{% warning %}
Home Assistant automatically configures the standard auth providers so you don't need to specify `auth_providers` in your {% term "`configuration.yaml`" %} file unless you are configuring more than one. Specifying `auth_providers` will disable all auth providers that are not listed, so you could reduce your security or create difficulties logging in if it is not configured correctly.
If you decide to use `trusted_networks` as your `auth_provider` there won't be a way to authenticate for a device outside of your listed trusted network. To overcome this ensure you add the default `auth_provider` with `type: homeassistant` back in manually. This will then present you with the default auth login screen when trusted network authentication fails as expected from outside your LAN.
</div>
{% endwarning %}
Authentication providers are configured in your {% term "`configuration.yaml`" %} file under the `homeassistant:` block.
If you are moving configuration to packages, this particular configuration must stay within 'configuration.yaml'. See Issue 16441 in the warning block at the bottom of this page.
@ -63,17 +63,13 @@ The trusted networks auth provider defines a range of IP addresses for which no
When you log in from one of these networks, you will be asked which user account to use and won't need to enter a password.
<div class='note info'>
{% note %}
The [multi-factor authentication module](/docs/authentication/multi-factor-auth/) will not participate in the login process if you are using this auth provider.
{% endnote %}
</div>
<div class='note info'>
{% important %}
You cannot trust a network that you are using in any [trusted_proxies](/integrations/http/#reverse-proxies). The `trusted_networks` authentication will fail with the message: Your computer is not allowed
</div>
{% endimportant %}
Here is an example in {% term "`configuration.yaml`" %} to set up Trusted Networks:
@ -191,10 +187,10 @@ Leading and trailing whitespace, as well as lines starting with `#` are ignored.
Stderr is not read at all and just passed through to that of the Home Assistant process, hence you can use it for status messages or suchlike.
<div class='note'>
{% note %}
Any leading and trailing whitespace is stripped from usernames before they're passed to the configured command. For instance, " hello " will be rewritten to just "hello".
</div>
{% endnote %}
<div class='note'>
{% note %}
For now, meta variables are only respected the first time a particular user is authenticated. Upon subsequent authentications of the same user, the previously created user object with the old values is reused.
</div>
{% endnote %}

4
source/_docs/automation/action.markdown
View File

@ -3,7 +3,9 @@ title: "Automation actions"
description: "Automations result in action."
---
The action of an automation rule is what is being executed when a rule fires. The action part follows the [script syntax](/docs/scripts/) which can be used to interact with anything via services or events. For {% term services %}, you can specify the entity_id that it should apply to and optional service parameters (to specify for example the brightness).
The action of an automation rule is what is being executed when a rule fires. The action part follows the [script syntax](/docs/scripts/) which can be used to interact with anything via services or events.
For {% term services %}, you can specify the `entity_id` that it should apply to and optional service parameters (to specify for example the brightness).
You can also call the {% term service %} to activate [a scene](/integrations/scene/) which will allow you to define how you want your devices to be and have Home Assistant call the right services.

4
source/_docs/automation/basics.markdown
View File

@ -21,9 +21,9 @@ The second part is the [condition](/docs/automation/condition/). Conditions are
The third part is the [action](/docs/automation/action/), which will be performed when a rule is triggered and all conditions are met. For example, it can turn a light on, set the temperature on your thermostat or activate a scene.
<div class='note'>
{% note %}
The difference between a condition and a trigger can be confusing as they are very similar. Triggers look at the actions, while conditions look at the current state: turning a light on versus a light being on.
</div>
{% endnote %}
## Exploring the internal state

4
source/_docs/automation/condition.markdown
View File

@ -3,7 +3,9 @@ title: "Automation conditions"
description: "Automations can test conditions when invoked."
---
Conditions are an optional part of an automation rule. They can be used to prevent the automation's actions from being run. After a {% term trigger %} occurred, all conditions will be checked. If any of them do not return true, the automation will stop executing. Conditions look very similar to triggers, but they are very different &mdash; a trigger will look at events happening in the system, while a condition only looks at how the system looks right now. A trigger can observe that a switch is being turned on. A condition can only see if a switch is currently on or off.
Conditions are an optional part of an automation rule. They can be used to prevent the automation's actions from being run. After a {% term trigger %} occurred, all conditions will be checked. If any of them do not return true, the automation will stop executing.
Conditions look very similar to triggers, but they are very different &mdash; a trigger will look at events happening in the system, while a condition only looks at how the system looks right now. A trigger can observe that a switch is being turned on. A condition can only see if a switch is currently on or off.
The available conditions for an automation are the same as for the script syntax so see that page for a [full list of available conditions](/docs/scripts/conditions/).

4
source/_docs/automation/editor.markdown
View File

@ -3,7 +3,9 @@ title: "Automation editor"
description: "Instructions on how to use the automation editor."
---
The automation editor is an easy way of creating and editing automations from the UI. This page uses the [Random sensor](/integrations/random#sensor) as an example, though any other sensor with a numeric value can be used as well.
The automation editor is an easy way of creating and editing automations from the UI.
This page uses the [Random sensor](/integrations/random#sensor) as an example, though any other sensor with a numeric value can be used as well.
From the UI, choose **{% my config %}** which is located in the sidebar, then click on **{% my automations %}** to go to the automation editor. Press the **Create Automation** button in the lower right corner to get started. You can create an automation based on a [blueprint](/docs/automation/using_blueprints/) or start from scratch. Select **Create new automation**.

74
source/_docs/automation/trigger.markdown
View File

@ -118,11 +118,9 @@ automation:
It's also possible to use [limited templates](/docs/configuration/templating/#limited-templates) in the `event_type`, `event_data` and `context` options.
<div class='note'>
{% important %}
The `event_type`, `event_data` and `context` templates are only evaluated when setting up the trigger, they will not be reevaluated for every event.
</div>
{% endimportant %}
{% raw %}
@ -151,11 +149,9 @@ automation:
event: start
```
<div class='note'>
{% note %}
Automations triggered by the `shutdown` event have 20 seconds to run, after which they are stopped to continue with the shutdown.
</div>
{% endnote %}
## MQTT trigger
@ -189,11 +185,9 @@ automation:
It's also possible to use [limited templates](/docs/configuration/templating/#limited-templates) in the `topic` and `payload` options.
<div class='note'>
{% note %}
The `topic` and `payload` templates are only evaluated when setting up the trigger, they will not be re-evaluated for every incoming MQTT message.
</div>
{% endnote %}
{% raw %}
@ -217,10 +211,10 @@ automation:
Fires when the numeric value of an entity's state (or attribute's value if using the `attribute` property, or the calculated value if using the `value_template` property) **crosses** a given threshold (equal excluded). On state change of a specified entity, attempts to parse the state as a number and fires if the value is changing from above to below or from below to above the given threshold (equal excluded).
<div class='note'>
{% note %}
Crossing the threshold means that the trigger only fires if the state wasn't previously within the threshold.
If the current state of your entity is `50` and you set the threshold to `below: 75`, the trigger would not fire if the state changed to e.g. `49` or `72` because the threshold was never crossed. The state would first have to change to e.g. `76` and then to e.g. `74` for the trigger to fire.
</div>
{% endnote %}
{% raw %}
@ -292,10 +286,10 @@ automation:
{% endraw %}
<div class='note'>
{% note %}
Listing above and below together means the numeric_state has to be between the two values.
In the example above, the trigger would fire a single time if a numeric_state goes into the 17.1-24.9 range (above 17 and below 25). It will only fire again, once it has left the defined range and enters it again.
</div>
{% endnote %}
Number helpers (`input_number` entities), `number`, `sensor`, and `zone` entities
that contain a numeric value, can be used in the `above` and `below` thresholds,
@ -355,24 +349,20 @@ automation:
The `for` template(s) will be evaluated when an entity changes as specified.
<div class='note warning'>
{% important %}
Use of the `for` option will not survive Home Assistant restart or the reload of automations. During restart or reload, automations that were awaiting `for` the trigger to pass, are reset.
If for your use case this is undesired, you could consider using the automation to set an [`input_datetime`](/integrations/input_datetime) to the desired time and then use that [`input_datetime`](/integrations/input_datetime) as an automation trigger to perform the desired actions at the set time.
</div>
{% endimportant %}
## State trigger
Fires when the state of any of given entities changes. If only `entity_id` is given, the trigger will fire for all state changes, even if only state attributes change.
If at least one of `from`, `to`, `not_from`, or `not_to` are given, the trigger will fire on any matching state change, but not if only attributes change. To trigger on all state changes, but not on changed attributes, set at least one of `from`, `to`, `not_from`, or `not_to` to `null`.
<div class='note'>
{% note %}
The values you see in your overview will often not be the same as the actual state of the entity. For instance, the overview may show `Connected` when the underlying entity is actually `on`. You should check the state of the entity by looking in the _States_ menu under _Developer tools_.
</div>
{% endnote %}
```yaml
automation:
@ -534,19 +524,15 @@ automation:
The `for` template(s) will be evaluated when an entity changes as specified.
<div class='note warning'>
{% tip %}
Use quotes around your values for `from` and `to` to avoid the YAML parser from interpreting values as booleans.
{% endtip %}
</div>
<div class='note warning'>
{% important %}
Use of the `for` option will not survive Home Assistant restart or the reload of automations. During restart or reload, automations that were awaiting `for` the trigger to pass, are reset.
If for your use case this is undesired, you could consider using the automation to set an [`input_datetime`](/integrations/input_datetime) to the desired time and then use that [`input_datetime`](/integrations/input_datetime) as an automation trigger to perform the desired actions at the set time.
</div>
{% endimportant %}
## Sun trigger
@ -556,11 +542,9 @@ Fires when the sun is setting or rising, i.e., when the sun elevation reaches 0
An optional time offset can be given to have it fire a set time before or after the sun event (e.g., 45 minutes before sunset). A negative value makes it fire before sunrise or sunset, a positive value afterwards. The offset needs to be specified in number of seconds, or in a hh:mm:ss format.
<div class='note'>
{% tip %}
Since the duration of twilight is different throughout the year, it is recommended to use [sun elevation triggers][sun_elevation_trigger] instead of `sunset` or `sunrise` with a time offset to trigger automations during dusk or dawn.
</div>
{% endtip %}
[sun_elevation_trigger]: /docs/automation/trigger/#sun-elevation-trigger
@ -688,13 +672,11 @@ The `for` template(s) will be evaluated when the `value_template` becomes 'true'
Templates that do not contain an entity will be rendered once per minute.
<div class='note warning'>
{% important %}
Use of the `for` option will not survive Home Assistant restart or the reload of automations. During restart or reload, automations that were awaiting `for` the trigger to pass, are reset.
If for your use case this is undesired, you could consider using the automation to set an [`input_datetime`](/integrations/input_datetime) to the desired time and then use that [`input_datetime`](/integrations/input_datetime) as an automation trigger to perform the desired actions at the set time.
</div>
{% endimportant %}
## Time trigger
@ -805,11 +787,9 @@ automation 3:
minutes: "/5"
```
<div class='note warning'>
{% note %}
Do not prefix numbers with a zero - using `'01'` instead of `'1'` for example will result in errors.
</div>
{% endnote %}
## Persistent notification trigger
@ -894,11 +874,9 @@ automation:
Geolocation trigger fires when an entity is appearing in or disappearing from a zone. Entities that are created by a [Geolocation](/integrations/geo_location/) platform support reporting GPS coordinates.
Because entities are generated and removed by these platforms automatically, the entity ID normally cannot be predicted. Instead, this trigger requires the definition of a `source`, which is directly linked to one of the Geolocation platforms.
<div class='note'>
{% tip %}
This isn't for use with `device_tracker` entities. For those look above at the `zone` trigger.
</div>
{% endtip %}
```yaml
automation:

4
source/_docs/backend/database.markdown
View File

@ -3,7 +3,9 @@ title: "Database"
description: "Details about the database used by Home Assistant."
---
Home Assistant uses databases to store {% term events %} and parameters for history and tracking. The default database used is [SQLite](https://www.sqlite.org/) and the database file is stored in your [configuration directory](/getting-started/configuration/) (e.g., `<path to config dir>/home-assistant_v2.db`); however, other databases can be used. If you prefer to run a database server (e.g., PostgreSQL), use the [`recorder`](/integrations/recorder/) integration.
Home Assistant uses databases to store {% term events %} and parameters for history and tracking. The default database used is [SQLite](https://www.sqlite.org/).
The database file is stored in your [configuration directory](/getting-started/configuration/) (e.g., `<path to config dir>/home-assistant_v2.db`); however, other databases can be used. If you prefer to run a database server (e.g., PostgreSQL), use the [`recorder`](/integrations/recorder/) integration.
To work with SQLite database manually from the command-line, you will need an [installation](https://www.sqlitetutorial.net/download-install-sqlite/) of `sqlite3`. Alternatively [DB Browser for SQLite](https://sqlitebrowser.org/) provides a viewer for exploring the database data and an editor for executing SQL commands.
First load your database with `sqlite3`:

4
source/_docs/blueprint/schema.markdown
View File

@ -153,9 +153,9 @@ allows an optional description, and optionally allows for collapsing those input
A section is differentiated from an input by the presence of an additional `input` key within that section.
<div class='note warning'>
{% caution %}
Input sections are a new feature in version 2024.6. Set the `min_version` for the blueprint to at least this version if using input sections. Otherwise, the blueprint will generate errors on older versions.
</div>
{% endcaution %}
The full configuration for a section is below:

4
source/_docs/blueprint/selectors.markdown
View File

@ -1365,7 +1365,7 @@ entity:
required: false
{% endconfiguration %}
<div class='note'>
{% important %}
Targets are meant to be used with the `target` property of a service call in
a script sequence. For example:
@ -1376,7 +1376,7 @@ action:
target: !input lights
```
</div>
{% endimportant %}
### Example target selectors <!-- omit from toc -->

10
source/_docs/blueprint/tutorial.markdown
View File

@ -19,11 +19,9 @@ related:
title: Using automation blueprints
---
<div class='note'>
{% tip %}
While the tutorial only shows how to create an automation blueprint, {% term scripts %} also support blueprints in the same way.
</div>
{% endtip %}
## Creating an automation blueprint
@ -256,9 +254,9 @@ action:
1. To configure your blueprint via the UI, go to {% my blueprints title="**Settings** > **Automations & Scenes** > **Blueprints**" %}.
2. Find the **Motion Light Tutorial** blueprint and select **Create Automation**.
<div class='note'>
{% important %}
Don't forget to reload automations after you make changes to your blueprint to have the UI and the automation integration pick up the latest blueprint changes.
</div>
{% endimportant %}
![Screenshot of the blueprint UI](/images/blueprints/tutorial-ui.png)

4
source/_docs/configuration.markdown
View File

@ -20,7 +20,9 @@ related:
title: Troubleshooting the configuration
---
While you can configure most of Home Assistant from the user interface, for some integrations, you need to edit the `configuration.yaml` file. This file contains {% term integrations %} to be loaded along with their configurations. Throughout the documentation, you will find snippets that you can add to your configuration file to enable specific functionality.
While you can configure most of Home Assistant from the user interface, for some integrations, you need to edit the `configuration.yaml` file.
This file contains {% term integrations %} to be loaded along with their configurations. Throughout the documentation, you will find snippets that you can add to your configuration file to enable specific functionality.
<p class='img'>
<img src='/images/docs/configuration/config-yaml_via-file-editor.png' alt='Screenshot of an example of a configuration.yaml file, accessed using the File editor add-on on a Home Assistant Operating System installation.'>

4
source/_docs/configuration/events.markdown
View File

@ -3,7 +3,9 @@ title: "Events"
description: "Describes all there is to know about events in Home Assistant."
---
The core of Home Assistant is the event bus. The event bus allows any integration to fire or listen for events. It is the core of everything. For example, any state change will be announced on the event bus as a `state_changed` event containing the previous and the new state of an entity.
The core of Home Assistant is the event bus. The event bus allows any integration to fire or listen for events. It is the core of everything.
For example, any state change will be announced on the event bus as a `state_changed` event containing the previous and the new state of an entity.
Home Assistant contains a few built-in events that are used to coordinate between various integrations.

10
source/_docs/configuration/packages.markdown
View File

@ -68,9 +68,9 @@ There are some rules for packages that will be merged:
3. Any integration that is not a platform [1], or dictionaries with Entity ID keys [2] can only be merged if its keys, except those for lists, are solely defined once.
<div class='note tip'>
{% tip %}
Integrations inside packages can only specify platform entries using configuration style 1, where all the platforms are grouped under the integration name.
</div>
{% endtip %}
## Create a packages folder
@ -114,10 +114,8 @@ homeassistant:
```
<div class='note warning'>
{% important %}
If you are moving configuration to packages, `auth_providers` must stay within ‘configuration.yaml’. See the general documentation for [Authentication Providers](/docs/authentication/providers/#configuring-auth-providers).
This is because Home Assistant processes the authentication provided early in the start-up process, even before packages are processed.
</div>
{% endimportant %}

4
source/_docs/configuration/platform_options.markdown
View File

@ -3,9 +3,9 @@ title: "Entity integration platform options"
description: "Shows how to customize polling interval for any integration via configuration.yaml."
---
<div class='note info'>
{% important %}
These options are being phased out and are only available for single platform integrations.
</div>
{% endimportant %}
Some integrations or platforms (those that are based on the [entity](https://github.com/home-assistant/home-assistant/blob/dev/homeassistant/helpers/entity.py) class) allow various extra options to be set.

12
source/_docs/configuration/remote.markdown
View File

@ -10,11 +10,9 @@ related:
If you're interested in logging in to Home Assistant while away, you'll have to make your instance remotely accessible. Below are a few options to do this.
<div class='note warning'>
{% tip %}
Remember to follow the [securing checklist](/docs/configuration/securing/) before doing this.
</div>
{% endtip %}
## Home Assistant Cloud
@ -36,11 +34,9 @@ A problem with making a port accessible is that some Internet Service Providers
If you cannot access your Home Assistant installation remotely, remember to check if your ISP provides you with a dedicated IP, instead of one shared with other users via a [CG-NAT](https://en.wikipedia.org/wiki/Carrier-grade_NAT). This is becoming fairly common nowadays due to the shortage of IPv4 addresses. Some, if not most ISPs will require you to pay an extra fee to be assigned a dedicated IPv4 address.
<div class='note'>
{% caution %}
Just putting a port up is not secure. You should definitely consider encrypting your traffic if you are accessing your Home Assistant installation remotely. For details, please check the [set up encryption using Let's Encrypt](/blog/2017/09/27/effortless-encryption-with-lets-encrypt-and-duckdns/) blog post or this [detailed guide](https://community.home-assistant.io/t/certificate-authority-and-self-signed-certificate-for-ssl-tls/196970) to using Let's Encrypt with Home Assistant.
</div>
{% endcaution %}
## Adding a remote URL to Home Assistant

4
source/_docs/configuration/secrets.markdown
View File

@ -10,7 +10,9 @@ related:
title: Securing your instance
---
The {% term "`configuration.yaml`" %} file is a plain-text file, thus it is readable by anyone who has access to the file. The file contains passwords and API tokens which need to be redacted if you want to share your configuration. By using `!secret` you can remove any private information from your configuration files. This separation can also help you to keep easier track of your passwords and API keys, as they are all stored at one place and no longer spread across the {% term "`configuration.yaml`" %} file or even multiple YAML files if you [split up your configuration](/docs/configuration/splitting_configuration/).
The {% term "`configuration.yaml`" %} file is a plain-text file, thus it is readable by anyone who has access to the file. The file contains passwords and API tokens which need to be redacted if you want to share your configuration.
By using `!secret` you can remove any private information from your configuration files. This separation can also help you to keep easier track of your passwords and API keys, as they are all stored at one place and no longer spread across the {% term "`configuration.yaml`" %} file or even multiple YAML files if you [split up your configuration](/docs/configuration/splitting_configuration/).
## Using `secrets.yaml`

41
source/_docs/configuration/templating.markdown
View File

@ -121,11 +121,9 @@ Not supported in [limited templates](#limited-templates).
- `is_state_attr('device_tracker.paulus', 'battery', 40)` will test if the given entity attribute is the specified state (in this case, a numeric value). Note that the attribute can be `None` and you want to check if it is `None`, you need to use `state_attr('sensor.my_sensor', 'attr') is none` or `state_attr('sensor.my_sensor', 'attr') == None` (note the difference in the capitalization of none in both versions).
- `has_value('sensor.my_sensor')` will test if the given entity is not unknown or unavailable. Can be used as a filter or a test.
<div class='note warning'>
{% warning %}
Avoid using `states.sensor.temperature.state`, instead use `states('sensor.temperature')`. It is strongly advised to use the `states()`, `is_state()`, `state_attr()` and `is_state_attr()` as much as possible, to avoid errors and error message when the entity isn't ready yet (e.g., during Home Assistant startup).
</div>
{% endwarning %}
#### States examples
@ -699,15 +697,13 @@ Examples using `iif`:
{{ (states('light.kitchen') == 'on') | iif('Yes', 'No') }}
```
<div class='note warning'>
{% endraw %}
{% warning %}
The immediate if filter does not short-circuit like you might expect with a typical conditional statement. The `if_true`, `if_false` and `if_none` expressions will all be evaluated and the filter will simply return one of the resulting values. This means you cannot use this filter to prevent executing an expression which would result in an error.
For example, if you wanted to select a field from `trigger` in an automation based on the platform you might go to make this template: `trigger.platform == 'event' | iif(trigger.event.data.message, trigger.to_state.state)`. This won't work because both expressions will be evaluated and one will fail since the field doesn't exist. Instead you have to do this `trigger.event.data.message if trigger.platform == 'event' else trigger.to_state.state`. This form of the expression short-circuits so if the platform is `event` the expression `trigger.to_state.state` will never be evaluated and won't cause an error.
</div>
{% endraw %}
{% endwarning%}
### Time
@ -768,14 +764,11 @@ A precision of 0 returns all available units, default is 1.
- Filter `timestamp_utc(default)` converts a UNIX timestamp to the ISO format string representation representation as date/time in UTC timezone. If that fails, returns the `default` value, or if omitted raises an error. If a custom string format is needed in the string, use `timestamp_custom` instead.
- Filter `timestamp_custom(format_string, local=True, default)` converts an UNIX timestamp to its string representation based on a custom format, the use of a local timezone is the default. If that fails, returns the `default` value, or if omitted raises an error. Supports the standard [Python time formatting options](https://docs.python.org/3/library/time.html#time.strftime).
<div class='note'>
{% tip %}
[UNIX timestamp](https://en.wikipedia.org/wiki/Unix_time) is the number of seconds that have elapsed since 00:00:00 UTC on 1 January 1970. Therefore, if used as a function's argument, it can be substituted with a numeric value (`int` or `float`).
{% endtip %}
</div>
<div class='note warning'>
{% important %}
If your template is returning a timestamp that should be displayed in the frontend (e.g., as a sensor entity with `device_class: timestamp`), you have to ensure that it is the ISO 8601 format (meaning it has the "T" separator between the date and time portion). Otherwise, frontend rendering on macOS and iOS devices will show an error. The following value template would result in such an error:
{% raw %}
@ -792,7 +785,7 @@ To fix it, enforce the ISO conversion via `isoformat()`:
{% endraw %}
</div>
{% endimportant %}
{% raw %}
@ -1017,7 +1010,7 @@ Some examples:
Some of these functions can also be used in a [filter](https://jinja.palletsprojects.com/en/latest/templates/#id11). This means they can act as a normal function like this `sqrt(2)`, or as part of a filter like this `2|sqrt`.
<div class='note'>
{% note %}
The numeric functions and filters raise an error if the input is not a valid number, optionally a default value can be specified which will be returned instead. The `is_number` function and filter can be used to check if a value is a valid number. Errors can be caught by the `default` filter.
@ -1030,7 +1023,7 @@ The numeric functions and filters raise an error if the input is not a valid num
{% endraw %}
</div>
{% endnote %}
- `float(value, default)` function will attempt to convert the input to a `float`. If that fails, returns the `default` value, or if omitted raises an error.
- `float(default)` filter will attempt to convert the input to a `float`. If that fails, returns the `default` value, or if omitted raises an error.
@ -1102,7 +1095,7 @@ See: [Python struct library documentation](https://docs.python.org/3/library/str
- Filter `value | unpack(format_string, offset=0)` will try to convert a `bytes` object into a native Python object. The `offset` parameter defines the offset position in bytes from the start of the input `bytes` based buffer. This will call function `struct.unpack_from(format_string, value, offset=offset)`. Returns `None` if an error occurs or when `format_string` is invalid. Note that the filter `unpack` will only return the first `bytes` object, despite the function `struct.unpack_from` supporting to return multiple objects (e.g. with `format_string` being `">hh"`.
- Function `unpack(value, format_string, offset=0)` will try to convert a `bytes` object into a native Python object. The `offset` parameter defines the offset position in bytes from the start of the input `bytes` based buffer. This will call function `struct.unpack_from(format_string, value, offset=offset)`. Returns `None` if an error occurs or when `format_string` is invalid. Note that the function `unpack` will only return the first `bytes` object, despite the function `struct.unpack_from` supporting to return multiple objects (e.g. with `format_string` being `">hh"`.
<div class='note'>
{% note %}
Some examples:
{% raw %}
@ -1114,7 +1107,7 @@ Some examples:
{% endraw %}
</div>
{% endnote %}
### String filters
@ -1247,7 +1240,7 @@ The [MQTT integration](/integrations/mqtt/) relies heavily on templates. Templat
For incoming data a value template translates incoming JSON or raw data to a valid payload.
Incoming payloads are rendered with possible JSON values, so when rendering the `value_json` can be used access the attributes in a JSON based payload.
<div class='note'>
{% note %}
Example value template:
@ -1261,13 +1254,13 @@ Template {% raw %}`{{ value_json.temperature | round(1) }}`{% endraw %} renders
Additional the MQTT entity attributes `entity_id`, `name` and `this` can be used as variables in the template. The `this` attribute refers to the [entity state](/docs/configuration/state_object) of the MQTT item.
</div>
{% endnote %}
#### Using command templates with MQTT
For service calls command templates are defined to format the outgoing MQTT payload to the device. When a service call is executed `value` can be used to generate the correct payload to the device.
<div class='note'>
{% note %}
Example command template:
@ -1281,7 +1274,7 @@ With given value `21.9` template {% raw %}`{"temperature": {{ value }} }`{% endr
Additional the MQTT entity attributes `entity_id`, `name` and `this` can be used as variables in the template. The `this` attribute refers to the [entity state](/docs/configuration/state_object) of the MQTT item.
</div>
{% endnote %}
## Some more things to keep in mind

4
source/_docs/configuration/troubleshooting.markdown
View File

@ -88,9 +88,9 @@ Contents of `sensors.yaml`:
...
```
<div class='note'>
{% note %}
Whenever you report an issue, be aware that we are volunteers who do not have access to every single device in the world nor unlimited time to fix every problem out there.
</div>
{% endnote %}
### Entity names

32
source/_docs/frontend/icons.markdown
View File

@ -32,11 +32,9 @@ The most common way you can find icons is by using the icon picker built right i
<img src='/images/screenshots/icon-picker.png' alt='Icon Picker in Home Assistant' />
</p>
<div class='note info'>
The icon picker will filter by icon name and by aliases applied to the icon by the MDI project. For example, typing "user" will show you most "account"-named icons.
</div>
{% tip %}
The icon picker will filter by icon name and by aliases applied to the icon by the MDI project. For example, typing "user" will show you most "account"-named icons.
{% endtip %}
For more detailed steps on customizing entities, including their icon, refer to [customizing entities](/docs/configuration/customizing-devices/).
@ -48,31 +46,25 @@ The easiest way to browse and find icons outside of Home Assistant is with the o
<img src='/images/screenshots/mdi-picker.png' alt='Material Design Icons Picker' />
</p>
<div class='note info'>
Not all icons that appear in the MDI Picker Browser Extension may be available in Home Assistant (yet!). While the browser extension is updated as MDI releases new packages, Home Assistant may lag behind until its next release.
</div>
{% note %}
Not all icons that appear in the MDI Picker Browser Extension may be available in Home Assistant (yet!). While the browser extension is updated as MDI releases new packages, Home Assistant may lag behind until its next release.
{% endnote %}
### Material design icons on the Pictogrammers website
The last way to browse through available icons is by viewing the library on the Pictogrammers website, [https://pictogrammers.com/library/mdi/](https://pictogrammers.com/library/mdi/). Select an icon you'd like to use, then click "Home Assistant" to see an example of its usage.
<div class='note info'>
The Pictogrammers website will always show the latest release of the material design icons library. However, you may find icons that may not yet be available in Home Assistant (yet!). Watch the Home Assistant release notes for announcements on upgrades of the Material Design Icons library.
</div>
{% note %}
The Pictogrammers website will always show the latest release of the material design icons library. However, you may find icons that may not yet be available in Home Assistant (yet!). Watch the Home Assistant release notes for announcements on upgrades of the Material Design Icons library.
{% endnote %}
## Suggesting or contributing new icons
Being open-source like Home Assistant, the material design icons library is always accepting suggestions and contributions to expand the library.
<div class='note info'>
Before suggesting or creating a new icon, it is very important that you [search the current library](https://pictogrammers.com/library/mdi/) and [search all issues](https://github.com/Templarian/MaterialDesign/issues?q=is%3Aissue), open and closed, on their GitHub. Try searching with different terms that might mean the same thing. (e.g. "user", "person", "account")
</div>
{% note %}
Before suggesting or creating a new icon, it is very important that you [search the current library](https://pictogrammers.com/library/mdi/) and [search all issues](https://github.com/Templarian/MaterialDesign/issues?q=is%3Aissue), open and closed, on their GitHub. Try searching with different terms that might mean the same thing. (e.g. "user", "person", "account")
{% endnote %}
### Suggesting a new icon

4
source/_docs/organizing.markdown
View File

@ -12,7 +12,9 @@ related:
title: Categories
---
Once you have more devices, you may want to target entire groups of devices in automations. It also becomes more challenging to find items in lists. There are a few tools to group your assets: [Areas](#areas), [floors](#floors), [labels](#labels), and [categories](#categories).
Once you have more devices, you may want to target entire groups of devices in automations. It also becomes more challenging to find items in lists.
There are a few tools to group your assets: [Areas](#areas), [floors](#floors), [labels](#labels), and [categories](#categories).
| Taxonomy | Automation target | Entity can have multiple |
| -------- | ----------------- | ------------------------ |

Some files were not shown because too many files have changed in this diff Show More