mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-04-13 17:01:51 +02:00
Code Issues Releases Wiki Activity

Navigational elements complete

Browse Source
This commit is contained in:
Angelos Chalaris 2016-11-02 21:16:35 +02:00
parent 81d815f205
commit 70d0a4ee9c
6 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/v2/DEVLOG.md
View File

@ -265,3 +265,6 @@
- Added simple styling for `nav`. Created iteration builder for `sublink` and categories tree.
- Tested and optimized `nav`, added demo to `index`.
- Deployed demo page again.
- Added styling and variables for `footer`.
- Changed optimization for links in `footer` and `nav` to not distinguish between `:visited` links and normal ones, style needed reapplication.
- Tested `footer` component styling.

7
docs/v2/index.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<!-- Live demo styled as of 20161025 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/f5e087212966652f4a538d53a62feff21c1c63bd/flavors/v2/mini-default.min.css">
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/f5e087212966652f4a538d53a62feff21c1c63bd/flavors/v2/mini-default.min.css"> -->
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<meta charset="utf-8">
@ -381,11 +381,12 @@
</div>
</div>
</div><br>
<p>Finally, use the <code>&lt;footer&gt;</code> element to create your very own footer, the way you want it.</p>
<p>Finally, use the <code>&lt;footer&gt;</code> element to create your footer. Add links, images, credits. This element is not meant for main navigation, but many pages use it for some kind of navigation or other. Try to place the <code>&lt;footer&gt;</code> outside of the grid system for best results. Below is an example:</p>
<footer>&copy; 2016 mini.css | <a href="#">About</a> | <a href="#">Terms of use</a></footer><br>
</div>
</div>
</div>
</div>
<footer><strong>mini.css</strong> was designed and built by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>

13
flavors/v2/mini-default.css
View File

@ -652,15 +652,22 @@ nav {
border-radius: 1px;
margin: 2px;
padding: 4px 4px 4px 16px; }
nav a {
display: block; }
nav a, nav a:visited {
display: block;
color: #0277bd; }
nav .sublink-1 {
padding-left: 12px; }
nav .sublink-2 {
padding-left: 24px; }
footer {
display: block; }
display: block;
background: #263238;
color: #fafafa;
padding: 22px 10px 12px;
font-size: 85%; }
footer a, footer a:visited {
color: #039be5; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;

2
flavors/v2/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
flavors/v2/mini-default.scss
View File

@ -193,6 +193,12 @@ $nav-link-fore-color: $link-fore-color; // Text color for links in nav
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in nav
$nav-sublink-depth: 2; // Amount of subcategory classes to add
$nav-sublink-padding-left: 12px; // Left padding to add to subcategories
$footer-back-color: #263238; // Background color for footer
$footer-fore-color: $back-color; // Text color for footer
$footer-font-size: 85%; // Font size for footer
$footer-margin: 0; // Margin for footer
$footer-padding: 22px 10px 12px; // Padding for footer
$footer-link-fore-color: #039be5; // Text color for links in footer
// Variables for button elements
$button-back-color: #cfd8dc; // Back color for button elements
$button-back-opacity: 0.75; // Background opacity for button elements

18
scss/v2/mini-core/_navigation.scss
View File

@ -70,12 +70,10 @@ nav {
@if $nav-padding != 0 {
padding: $nav-padding;
}
a {
display: block;
@if $nav-link-fore-color != $link-fore-color {
a, a:visited {
display: block;
color: $nav-link-fore-color;
}
}
// Subcategories in navigation.
$nav-sublink-prefix: 'sublink' !default; // Prefix for the subcategory tabs in nav
$nav-sublink-depth: 2 !default; // Amount of subcategory classes to add
@ -89,4 +87,16 @@ $nav-sublink-padding-left: 12px !default; // Left padding to add to subcategori
// Footer styling.
footer {
display: block; // Correct display for older versions of IE.
background: $footer-back-color;
color: $footer-fore-color;
@if $footer-margin != 0 {
margin: $footer-margin;
}
@if $footer-padding != 0 {
padding: $footer-padding;
}
font-size: $footer-font-size;
a, a:visited {
color: $footer-link-fore-color;
}
}