mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 21:08:13 +01:00
Sticky footers
This commit is contained in:
Angelos Chalaris
parent
0d998340a6
commit
7abb30843a
2
dist/mini-default.css
vendored
2
dist/mini-default.css
vendored
@ -681,7 +681,7 @@ footer {
|
||||
footer a, footer a:visited {
|
||||
color: #039be5; }
|
||||
|
||||
footer.bottom {
|
||||
footer.sticky {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@ -371,6 +371,6 @@
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
@ -278,6 +278,6 @@
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
@ -263,6 +263,6 @@
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
@ -242,6 +242,6 @@
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
@ -123,6 +123,6 @@
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
@ -295,6 +295,6 @@
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
@ -524,6 +524,6 @@
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
@ -159,6 +159,6 @@
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
@ -282,6 +282,6 @@
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
@ -291,6 +291,6 @@
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
@ -1182,6 +1182,6 @@
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
@ -355,6 +355,6 @@
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
@ -555,6 +555,6 @@
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
@ -370,6 +370,6 @@
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
@ -756,3 +756,5 @@
|
||||
|
||||
- Added `$include-footer-bottom` flag, coded the necessary parts for absolute-bottom-aligned `footer` elements. - Resolved #42
|
||||
- Updated all pages to use the new `footer` absolute-alignment. Should solve some issues on different devices.
|
||||
- Changed the implementation of the new `footer` to `sticky`, instead of absolute.
|
||||
- Rolled back all pages that were affected. Should work like a charm now!
|
||||
|
||||
@ -113,7 +113,7 @@
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row cols-sm-12" style="padding-top: 20px">
|
||||
<div><h2>Quick-layout system</h2>
|
||||
<div><h2>Quick-layout system</h2></div>
|
||||
</div>
|
||||
<div class="row cols-sm-12 cols-md-6 cols-lg-4">
|
||||
<div><div class="box-colored"></div></div>
|
||||
@ -124,7 +124,7 @@
|
||||
<div><div class="box-colored"></div></div>
|
||||
</div>
|
||||
<div class="row cols-sm-12">
|
||||
<div><h2>Classic system</h2>
|
||||
<div><h2>Classic system</h2></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
|
||||
@ -136,6 +136,6 @@
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<footer class="bottom"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
<footer class="sticky"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> 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>
|
||||
@ -198,14 +198,14 @@ $footer-font-size: 85%; // Font size for <footer>
|
||||
$footer-margin: 18px 0 0; // Margin for <footer>
|
||||
$footer-padding: 22px 10px 12px; // Padding for <footer>
|
||||
$footer-link-fore-color: #039be5; // Text color for links in <footer>
|
||||
$include-footer-bottom: true; // Should the class that aligns <footer> elements to
|
||||
// the bottom of the page be included (`true`/`false`) [2]
|
||||
$footer-bottom-name: 'bottom'; // Class name for <footer> element with bottom alignment [2]
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be
|
||||
// included (`true`/`false`) [2]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
// [1] - If the value of $include-header-sticky is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <header> elements, using the value of $header-sticky-name for the name of the class.
|
||||
// [2] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for absolute positioning
|
||||
// of <footer> elements, using the value of $footer-bottom-name for the name of the class.
|
||||
// [2] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #eeeeee; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
|
||||
@ -118,7 +118,7 @@ nav {
|
||||
}
|
||||
}
|
||||
|
||||
$include-footer-bottom: false !default; // Should the class that aligns <footer> elements to the
|
||||
$include-footer-sticky: false !default; // Should the class that aligns <footer> elements to the
|
||||
// bottom of the page be included
|
||||
// Footer styling.
|
||||
footer {
|
||||
@ -143,8 +143,8 @@ footer {
|
||||
color: $footer-link-fore-color;
|
||||
}
|
||||
}
|
||||
@if $include-footer-bottom {
|
||||
footer.#{$footer-bottom-name}{
|
||||
@if $include-footer-sticky {
|
||||
footer.#{$footer-sticky-name}{
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user