Skip to content
Snippets Groups Projects
Commit 042eb374 authored by squidfunk's avatar squidfunk Committed by Martin Donath
Browse files

Slight facelift

parent 823347fc
Branches
Tags
No related merge requests found
Showing
with 107 additions and 108 deletions
Source diff could not be displayed: it is too large. Options to address this: view the blob.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
...@@ -46,9 +46,9 @@ ...@@ -46,9 +46,9 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-6e761e1b0b.css"> <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-63c41eb78d.css">
{% if palette.primary or palette.accent %} {% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-23f75ab9c7.palette.css"> <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-34bd9d9ec8.palette.css">
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block libs %} {% block libs %}
...@@ -162,7 +162,7 @@ ...@@ -162,7 +162,7 @@
{% endblock %} {% endblock %}
</div> </div>
{% block scripts %} {% block scripts %}
<script src="{{ base_url }}/assets/javascripts/application-3545abc56a.js"></script> <script src="{{ base_url }}/assets/javascripts/application-23f8e48ddb.js"></script>
{% if lang.t("search.language") != "en" %} {% if lang.t("search.language") != "en" %}
{% set languages = lang.t("search.language").split(",") %} {% set languages = lang.t("search.language").split(",") %}
{% if languages | length and languages[0] != "" %} {% if languages | length and languages[0] != "" %}
......
...@@ -16,14 +16,7 @@ ...@@ -16,14 +16,7 @@
<div class="md-flex__cell md-flex__cell--stretch"> <div class="md-flex__cell md-flex__cell--stretch">
<span class="md-flex__ellipsis md-header-nav__title"> <span class="md-flex__ellipsis md-header-nav__title">
{% block site_name %} {% block site_name %}
{% if page %} {{ config.site_name }}
{% for parent in page.ancestors %}
<span class="md-header-nav__parent">
{{ parent.title }}
</span>
{% endfor %}
{% endif %}
{{ page.title | default(config.site_name, true) }}
{% endblock %} {% endblock %}
</span> </span>
</div> </div>
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
{% else %} {% else %}
<input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}"> <input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}">
{% endif %} {% endif %}
<label class="md-nav__link" for="{{ path }}" tabindex="0"> <label class="md-nav__link" for="{{ path }}">
{{ nav_item.title }} {{ nav_item.title }}
</label> </label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="{{ level }}"> <nav class="md-nav" data-md-component="collapsible" data-md-level="{{ level }}">
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
{{ nav_item.title }} {{ nav_item.title }}
</label> </label>
{% endif %} {% endif %}
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active" tabindex="0"> <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active">
{{ nav_item.title }} {{ nav_item.title }}
</a> </a>
{% if toc_ | first is defined %} {% if toc_ | first is defined %}
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
</li> </li>
{% else %} {% else %}
<li class="{{ class }}"> <li class="{{ class }}">
<a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link" tabindex="0"> <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link">
{{ nav_item.title }} {{ nav_item.title }}
</a> </a>
</li> </li>
......
...@@ -76,7 +76,7 @@ button[data-md-color-accent] { ...@@ -76,7 +76,7 @@ button[data-md-color-accent] {
"green": $clr-green-500, "green": $clr-green-500,
"light-green": $clr-light-green-600, "light-green": $clr-light-green-600,
"lime": $clr-lime-600, "lime": $clr-lime-600,
"yellow": $clr-yellow-800, "yellow": $clr-yellow-600,
"amber": $clr-amber-600, "amber": $clr-amber-600,
"orange": $clr-orange-600, "orange": $clr-orange-600,
"deep-orange": $clr-deep-orange-400, "deep-orange": $clr-deep-orange-400,
...@@ -146,15 +146,55 @@ button[data-md-color-accent] { ...@@ -146,15 +146,55 @@ button[data-md-color-accent] {
// Tabs with outline // Tabs with outline
.md-tabs { .md-tabs {
background: mix($color, $md-color-black, 75%);
// Fade-out tabs background upon scrolling
&[data-md-state="hidden"] {
background: $color; background: $color;
} }
} }
} }
} }
// Overrides for white color
[data-md-color-primary="white"] {
// Application header (stays always on top)
.md-header {
background-color: $md-color-white;
color: $md-color-black;
}
// Search input
.md-search__input {
background-color: $md-color-black--lightest;
// Search input placeholder
&::placeholder {
color: $md-color-black--light;
}
}
// [tablet portrait -]: Layered navigation
@include break-to-device(tablet portrait) {
// Repository containing source
.md-nav__source {
background-color: $md-color-black--lightest;
color: $md-color-black;
}
}
// [tablet -]: Layered navigation
@include break-to-device(tablet) {
// Site title in main navigation
html & .md-nav--primary .md-nav__title--site {
background-color: $md-color-white;
color: $md-color-black;
}
}
// Table of contents
.md-nav--secondary {
border-left: 0.4rem solid $md-color-black--light;
}
} }
// Build accent colors // Build accent colors
......
...@@ -39,8 +39,8 @@ ...@@ -39,8 +39,8 @@
// Targeted anchor // Targeted anchor
&:target::before { &:target::before {
margin-top: -(5.6rem + 2.4rem + 1.8rem); margin-top: -(4.8rem + 2.4rem + 1.8rem);
padding-top: (5.6rem + 2.4rem + 1.8rem); padding-top: (4.8rem + 2.4rem + 1.8rem);
} }
} }
...@@ -71,8 +71,8 @@ ...@@ -71,8 +71,8 @@
// Targeted footnote // Targeted footnote
&:target::before { &:target::before {
margin-top: -(5.6rem + 2.4rem + 1rem); margin-top: -(4.8rem + 2.4rem + 1rem);
padding-top: (5.6rem + 2.4rem + 1rem); padding-top: (4.8rem + 2.4rem + 1rem);
pointer-events: none; pointer-events: none;
} }
......
...@@ -72,10 +72,10 @@ ...@@ -72,10 +72,10 @@
content: ""; content: "";
} }
// Targeted anchor (56px from header, 24px from sidebar offset) // Targeted anchor (48px from header, 24px from sidebar offset)
&:target::before { &:target::before {
margin-top: -(5.6rem + 2.4rem + $delta); margin-top: -(4.8rem + 2.4rem + $delta);
padding-top: (5.6rem + 2.4rem + $delta); padding-top: (4.8rem + 2.4rem + $delta);
} }
// Make permalink visible on hover // Make permalink visible on hover
......
...@@ -106,7 +106,7 @@ hr { ...@@ -106,7 +106,7 @@ hr {
display: table; display: table;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-top: 5.6rem; padding-top: 4.8rem;
table-layout: fixed; table-layout: fixed;
} }
......
...@@ -26,23 +26,26 @@ ...@@ -26,23 +26,26 @@
// Application header (stays always on top) // Application header (stays always on top)
.md-header { .md-header {
@include z-depth(2);
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
height: 5.6rem; height: 4.8rem;
transition: background-color 0.25s; transition: background-color 0.25s;
background-color: $md-color-primary; background-color: $md-color-primary;
color: $md-color-white; color: $md-color-white;
box-shadow:
0 0 0.4rem rgba(0, 0, 0, 0.14),
0 0.4rem 0.8rem rgba(0, 0, 0, 0.28);
z-index: 2; z-index: 2;
// Hack: putting the header on the GPU avoids unnecessary repaints // Hack: putting the header on the GPU avoids unnecessary repaints
backface-visibility: hidden; backface-visibility: hidden;
// Always show shadow, in case JavaScript is not available // Always show shadow, in case JavaScript is not available
.no-js & { .no-js & {
@include z-depth(2); box-shadow:
0 0 0.4rem rgba(0, 0, 0, 0.14),
0 0.4rem 0.8rem rgba(0, 0, 0, 0.28);
} }
// [screen +]: Show shadow depending on scroll offset // [screen +]: Show shadow depending on scroll offset
...@@ -51,7 +54,9 @@ ...@@ -51,7 +54,9 @@
// Show and animate shadow // Show and animate shadow
&[data-md-state="shadow"] { &[data-md-state="shadow"] {
@include z-depth(2); box-shadow:
0 0 0.4rem rgba(0, 0, 0, 0.14),
0 0.4rem 0.8rem rgba(0, 0, 0, 0.28);
} }
} }
...@@ -63,7 +68,7 @@ ...@@ -63,7 +68,7 @@
// Navigation within header // Navigation within header
.md-header-nav { .md-header-nav {
padding: 0.4rem; padding: 0 0.4rem;
// Icon buttons // Icon buttons
&__button { &__button {
...@@ -124,23 +129,6 @@ ...@@ -124,23 +129,6 @@
line-height: 4.8rem; line-height: 4.8rem;
} }
// Parent page title
&__parent {
color: $md-color-white--light;
// Ancestor separator
&::after {
display: inline;
color: $md-color-white--lighter;
content: "/";
}
// [mobile portrait -]: Hide on very small screens
@include break-to-device(mobile portrait) {
display: none;
}
}
// Repository containing source // Repository containing source
&__source { &__source {
display: none; display: none;
......
...@@ -294,7 +294,7 @@ ...@@ -294,7 +294,7 @@
.md-nav__link { .md-nav__link {
position: relative; position: relative;
margin-top: 0; margin-top: 0;
padding: 1.6rem; padding: 1.2rem 1.6rem;
// Rotate icon // Rotate icon
&::after { &::after {
...@@ -407,7 +407,7 @@ ...@@ -407,7 +407,7 @@
// Repository containing source // Repository containing source
&__source { &__source {
display: block; display: block;
padding: 0.4rem; padding: 0 0.4rem;
background-color: mix($md-color-primary, $md-color-black, 75%); background-color: mix($md-color-primary, $md-color-black, 75%);
color: $md-color-white; color: $md-color-white;
} }
......
...@@ -55,8 +55,8 @@ $md-toggle__search--checked: ...@@ -55,8 +55,8 @@ $md-toggle__search--checked:
position: absolute; position: absolute;
top: 0.4rem; top: 0.4rem;
left: 0.4rem; left: 0.4rem;
width: 4rem; width: 3.6rem;
height: 4rem; height: 3.6rem;
transform-origin: center; transform-origin: center;
transition: transition:
transform 0.3s 0.1s, transform 0.3s 0.1s,
...@@ -155,6 +155,7 @@ $md-toggle__search--checked: ...@@ -155,6 +155,7 @@ $md-toggle__search--checked:
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
position: relative; position: relative;
width: 23rem; width: 23rem;
padding: 0.2rem 0;
float: right; float: right;
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1); transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
} }
...@@ -210,27 +211,31 @@ $md-toggle__search--checked: ...@@ -210,27 +211,31 @@ $md-toggle__search--checked:
// [tablet portrait -]: Full-screen search bar // [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
width: 100%; width: 100%;
height: 5.6rem; height: 4.8rem;
font-size: 1.8rem; font-size: 1.8rem;
} }
// [tablet landscape +]: Header-embedded search // [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
width: 100%; width: 100%;
height: 4rem; height: 3.6rem;
padding-left: 4.8rem; padding-left: 4.4rem;
transition: transition:
background-color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1), background-color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1),
color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1); color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
border-radius: 0.2rem; border-radius: 0.2rem;
background-color: $md-color-black--lighter; background-color: $md-color-black--lighter;
color: $md-color-white; color: inherit;
font-size: ms(0); font-size: ms(0);
// Icon color
+ .md-search__icon {
color: inherit;
}
// Placeholder color // Placeholder color
+ .md-search__icon,
&::placeholder { &::placeholder {
color: $md-color-white; color: $md-color-white--light;
} }
// Hovered search field // Hovered search field
...@@ -271,8 +276,8 @@ $md-toggle__search--checked: ...@@ -271,8 +276,8 @@ $md-toggle__search--checked:
// Search icon // Search icon
&[for="search"] { &[for="search"] {
top: $md-icon-padding; top: 0.6rem;
left: $md-icon-padding + $md-icon-margin; left: 1rem;
// Set search icon on pseudo class, so it can be overridden for mobile // Set search icon on pseudo class, so it can be overridden for mobile
// and tablet when the search is rendered in an overlay // and tablet when the search is rendered in an overlay
...@@ -282,7 +287,7 @@ $md-toggle__search--checked: ...@@ -282,7 +287,7 @@ $md-toggle__search--checked:
// [tablet portrait -]: Full-screen search bar // [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
top: 1.6rem; top: 1.2rem;
left: 1.6rem; left: 1.6rem;
// Show back arrow instead of search icon // Show back arrow instead of search icon
...@@ -294,8 +299,8 @@ $md-toggle__search--checked: ...@@ -294,8 +299,8 @@ $md-toggle__search--checked:
// Reset button // Reset button
&[type="reset"] { &[type="reset"] {
top: $md-icon-padding; top: 0.6rem;
right: $md-icon-padding + $md-icon-margin; right: 1rem;
transform: scale(0.125); transform: scale(0.125);
transition: transition:
transform 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), transform 0.15s cubic-bezier(0.1, 0.7, 0.1, 1),
...@@ -304,7 +309,7 @@ $md-toggle__search--checked: ...@@ -304,7 +309,7 @@ $md-toggle__search--checked:
// [tablet portrait -]: Full-screen search bar // [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
top: 1.6rem; top: 1.2rem;
right: 1.6rem; right: 1.6rem;
} }
...@@ -331,13 +336,13 @@ $md-toggle__search--checked: ...@@ -331,13 +336,13 @@ $md-toggle__search--checked:
// [tablet portrait -]: Full-screen search bar // [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
top: 5.6rem; top: 4.8rem;
bottom: 0; bottom: 0;
} }
// [tablet landscape +]: Header-embedded search // [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
top: 4rem; top: 3.8rem;
transition: opacity 0.4s; transition: opacity 0.4s;
opacity: 0; opacity: 0;
...@@ -353,27 +358,7 @@ $md-toggle__search--checked: ...@@ -353,27 +358,7 @@ $md-toggle__search--checked:
// Wrapper for scrolling on overflow // Wrapper for scrolling on overflow
&__scrollwrap { &__scrollwrap {
height: 100%; height: 100%;
// Pure CSS scrolling shadows, taken from
// http://lea.verou.me/2012/04/background-attachment-local/
background:
linear-gradient(
to bottom,
$md-color-white 10%,
$md-color-white--transparent
),
linear-gradient(
to bottom,
$md-color-black--lighter,
$md-color-black--lightest 35%,
$md-color-black--transparent 60%
);
background-attachment: local, scroll;
background-color: $md-color-white; background-color: $md-color-white;
background-repeat: no-repeat;
background-size: 100% 2rem, 100% 1rem;
// End of scrolling shadow definition
box-shadow: 0 0.1rem 0 $md-color-black--lightest inset; box-shadow: 0 0.1rem 0 $md-color-black--lightest inset;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
...@@ -427,11 +412,11 @@ $md-toggle__search--checked: ...@@ -427,11 +412,11 @@ $md-toggle__search--checked:
background-color: $md-color-black--lightest; background-color: $md-color-black--lightest;
color: $md-color-black--light; color: $md-color-black--light;
font-size: ms(-1); font-size: ms(-1);
line-height: 4rem; line-height: 3.6rem;
// [tablet landscape +]: Increase left indent // [tablet landscape +]: Increase left indent
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
padding-left: 4.8rem; padding-left: 4.4rem;
} }
} }
...@@ -480,7 +465,7 @@ $md-toggle__search--checked: ...@@ -480,7 +465,7 @@ $md-toggle__search--checked:
// [tablet landscape +]: Increase left indent // [tablet landscape +]: Increase left indent
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
padding-left: 4.8rem; padding-left: 4.4rem;
} }
// Document // Document
...@@ -492,6 +477,7 @@ $md-toggle__search--checked: ...@@ -492,6 +477,7 @@ $md-toggle__search--checked:
position: absolute; position: absolute;
left: 0; left: 0;
margin: 0.2rem;
transition: opacity 0.25s; transition: opacity 0.25s;
color: $md-color-black--light; color: $md-color-black--light;
content: "\E880"; // find_in_page content: "\E880"; // find_in_page
...@@ -504,7 +490,7 @@ $md-toggle__search--checked: ...@@ -504,7 +490,7 @@ $md-toggle__search--checked:
// Title // Title
.md-search-result__title { .md-search-result__title {
margin: 1.3rem 0; margin: 1.1rem 0;
font-size: ms(0); font-size: ms(0);
font-weight: 400; font-weight: 400;
line-height: 1.4; line-height: 1.4;
......
...@@ -47,7 +47,7 @@ $md-toggle__drawer--checked: ...@@ -47,7 +47,7 @@ $md-toggle__drawer--checked:
// Lock sidebar to container height (account for fixed header) // Lock sidebar to container height (account for fixed header)
&[data-md-state="lock"] { &[data-md-state="lock"] {
position: fixed; position: fixed;
top: 5.6rem; top: 4.8rem;
} }
// [tablet -]: Convert navigation to drawer // [tablet -]: Convert navigation to drawer
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
.md-tabs { .md-tabs {
width: 100%; width: 100%;
transition: background 0.25s; transition: background 0.25s;
background: mix($md-color-primary, $md-color-black, 75%); background: $md-color-primary;
overflow: auto; overflow: auto;
// [tablet -]: Hide tabs for tablet and below, as they don't make any sense // [tablet -]: Hide tabs for tablet and below, as they don't make any sense
...@@ -86,7 +86,6 @@ ...@@ -86,7 +86,6 @@
// Fade-out tabs background upon scrolling // Fade-out tabs background upon scrolling
&[data-md-state="hidden"] { &[data-md-state="hidden"] {
background: $md-color-primary;
pointer-events: none; pointer-events: none;
// Hide tabs upon scrolling - disable transition to minimizes repaints whilte // Hide tabs upon scrolling - disable transition to minimizes repaints whilte
......
...@@ -51,14 +51,7 @@ ...@@ -51,14 +51,7 @@
<div class="md-flex__cell md-flex__cell--stretch"> <div class="md-flex__cell md-flex__cell--stretch">
<span class="md-flex__ellipsis md-header-nav__title"> <span class="md-flex__ellipsis md-header-nav__title">
{% block site_name %} {% block site_name %}
{% if page %} {{ config.site_name }}
{% for parent in page.ancestors %}
<span class="md-header-nav__parent">
{{ parent.title }}
</span>
{% endfor %}
{% endif %}
{{ page.title | default(config.site_name, true) }}
{% endblock %} {% endblock %}
</span> </span>
</div> </div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment