mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
(Update) Footer: Layout / Responsive / mediaQueries / matchHeight.js (#9)
* (Update) Home: Adjust section spacing * (Feature) Mediaqueries: Add mq mixin * (Update) Layout/JS: move javascript to bottom of page (performance!) * (Update) Footer: general styling + responsive styles
This commit is contained in:
0xfff
Perry Woodin
parent
65bcd78cb0
commit
db93e035b5
6 changed files with 248 additions and 43 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<nav class="content">
|
||||
<section>
|
||||
<nav class="footer__nav content">
|
||||
<section class="footer__section col-lg-2 col-md-4 col-sm-6" data-mh="footer">
|
||||
{% t nav.get-dash %}
|
||||
<ul>
|
||||
<li><a href="#">{% t nav.download %}</a></li>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section class="footer__section col-lg-2 col-md-4 col-sm-6" data-mh="footer">
|
||||
{% t nav.participate %}
|
||||
<ul>
|
||||
<li><a href="#">{% t nav.mining %}</a></li>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section class="footer__section col-lg-2 col-md-4 col-sm-6" data-mh="footer">
|
||||
{% t nav.currency %}
|
||||
<ul>
|
||||
<li><a href="#">{% t nav.exchange %}</a></li>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section class="footer__section col-lg-2 col-md-4 col-sm-6" data-mh="footer">
|
||||
{% t nav.community %}
|
||||
<ul>
|
||||
<li><a href="#">{% t nav.discussion %}</a></li>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section class="footer__section col-lg-2 col-md-4 col-sm-6" data-mh="footer">
|
||||
{% t nav.project %}
|
||||
<ul>
|
||||
<li><a href="#">{% t nav.help %}</a></li>
|
||||
|
|
@ -50,9 +50,9 @@
|
|||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<section class="footer__section col-lg-2 col-md-4 col-sm-6" data-mh="footer">
|
||||
{% t nav.social %}
|
||||
<ul class="footer--social">
|
||||
<ul class="footer__social">
|
||||
<li><a href="#">{% t nav.blog %}</a></li>
|
||||
<li><a href="#">{% t nav.reddit %}</a></li>
|
||||
<li><a href="#">{% t nav.twitter %}</a></li>
|
||||
|
|
@ -65,15 +65,15 @@
|
|||
</ul>
|
||||
</section>
|
||||
</nav>
|
||||
<div class="footer--menu content">
|
||||
<div class="footer--languagePicker"></div>
|
||||
<div class="footer__menu content">
|
||||
<div class="footer__languagePicker"></div>
|
||||
<a href="#">Terms of Use</a>
|
||||
<a href="#">Contact</a>
|
||||
<a href="#">Sitemap</a>
|
||||
<a href="#">Contact</a>
|
||||
</div>
|
||||
<div class="footer--legal">
|
||||
<div class="footer__legal">
|
||||
<div class="content">
|
||||
<span class="footer--copyright">© {{ site.time | date: "%Y" }} The Dash Network</span>
|
||||
<a href="#">Github Source</a>
|
||||
<span class="footer__copyright">© {{ site.time | date: "%Y" }} The Dash Network</span>
|
||||
<!-- <a href="#">Github Source</a> -->
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,10 +15,6 @@
|
|||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="{{ base }}/assets/css/style.css">
|
||||
<!-- JavaScript -->
|
||||
<script src="//cdn.jsdelivr.net/lodash/4.12.0/lodash.min.js"></script>
|
||||
<script src="{{ base }}/assets/js/moment.min.js"></script>
|
||||
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -26,7 +22,7 @@
|
|||
{{ content }}
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<footer class="footer">
|
||||
{% include footer.html %}
|
||||
</footer>
|
||||
|
||||
|
|
@ -36,6 +32,11 @@
|
|||
{% include nav-mobile.html %}
|
||||
</div>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="//cdn.jsdelivr.net/lodash/4.12.0/lodash.min.js"></script>
|
||||
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js'></script>
|
||||
<script src="{{ base }}/assets/js/moment.min.js"></script>
|
||||
<script src="{{ base }}/assets/js/full-menu.js"></script>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -14,31 +14,62 @@ footer
|
|||
a
|
||||
*/
|
||||
|
||||
footer {
|
||||
.footer {
|
||||
background-color: #333333;
|
||||
color: #717171;
|
||||
padding-top: 4em;
|
||||
padding-bottom: 3em;
|
||||
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
> nav {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
> section {
|
||||
display: table-cell;
|
||||
> ul {
|
||||
margin: 1em 0 0;
|
||||
padding: 0;
|
||||
> li {
|
||||
list-style: none;
|
||||
}
|
||||
&__nav {
|
||||
@extend %clearfix;
|
||||
}
|
||||
|
||||
&__section {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
padding: 20px;
|
||||
// display: table-cell;
|
||||
> ul {
|
||||
margin: 1em 0 0;
|
||||
padding: 0;
|
||||
> li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&__menu {
|
||||
padding: 20px 20px 10px;
|
||||
a {
|
||||
color: #717171;
|
||||
padding: 0 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer--social {
|
||||
column-count: 2;
|
||||
&__legal,
|
||||
&__copyright,
|
||||
&__menu {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include mq($to: extrasmall) {
|
||||
&__section {
|
||||
display: inline-block;
|
||||
padding: 20px;
|
||||
}
|
||||
&__nav {
|
||||
display: block;
|
||||
}
|
||||
&__legal {
|
||||
padding: 0 20px 20px 0;
|
||||
}
|
||||
&__copyright {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
$homeSectionPaddingTop: 40px;
|
||||
|
||||
|
||||
.page-home {
|
||||
> section {
|
||||
padding: 40px 0;
|
||||
padding: $homeSectionPaddingTop 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
|
@ -13,12 +16,9 @@
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
.features-collection {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 40px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -26,6 +26,16 @@
|
|||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.features-collection {
|
||||
text-align: center;
|
||||
h2 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
p {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
@media (min-width: 768px) {
|
||||
|
|
@ -101,16 +111,16 @@
|
|||
@media (min-width: 768px) {
|
||||
z-index: 1;
|
||||
> img {
|
||||
top: -40px;
|
||||
bottom: -40px;
|
||||
top: -$homeSectionPaddingTop;
|
||||
bottom: -$homeSectionPaddingTop;
|
||||
max-width: none;
|
||||
max-height: calc(100% + 80px);
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
bottom: -40px;
|
||||
top: -$homeSectionPaddingTop;
|
||||
bottom: -$homeSectionPaddingTop;
|
||||
width: 200%;
|
||||
background: linear-gradient(to left, $white 50%, rgba($white, 0) 87.5%);
|
||||
}
|
||||
|
|
|
|||
162
_sass/_mediaqueries.scss
Normal file
162
_sass/_mediaqueries.scss
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
/**
|
||||
* Inspired from https://github.com/guardian/sass-mq.git
|
||||
*/
|
||||
|
||||
/**
|
||||
* // To enable support for browsers that do not support @media queries,
|
||||
* (IE <= 8, Firefox <= 3, Opera <= 9) set $mqResponsive to false
|
||||
* Create a separate stylesheet served exclusively to these browsers,
|
||||
* meaning @media queries will be rasterized, relying on the cascade itself
|
||||
*/
|
||||
$mqResponsive: true;
|
||||
|
||||
/**
|
||||
* Name your breakpoints in a way that creates a ubiquitous language
|
||||
* across team members. It will improve communication between
|
||||
* stakeholders, designers, developers, and testers.
|
||||
*/
|
||||
$mqBreakpoints: (
|
||||
extrasmall: 480px,
|
||||
small: 768px,
|
||||
medium: 992px,
|
||||
large: 1200px
|
||||
);
|
||||
|
||||
/**
|
||||
* Define the breakpoint from the $mqBreakpoints list that should
|
||||
* be used as the target width when outputting a static stylesheet
|
||||
* (i.e. when $mqResponsive is set to 'false').
|
||||
*/
|
||||
$mqStaticBreakpoint: small;
|
||||
|
||||
/**
|
||||
* If you want to display the currently active breakpoint in the top
|
||||
* right corner of your site during development, add the breakpoints
|
||||
* to this list, ordered by width, e.g. (mobile, tablet, desktop).
|
||||
*/
|
||||
$mqShowBreakpoints: (small, medium, large);
|
||||
|
||||
|
||||
@function mqGetBreakpointWidth($name) {
|
||||
@if(map-has-key($mqBreakpoints, $name)) {
|
||||
@return map-get($mqBreakpoints, $name);
|
||||
} @else {
|
||||
@warn "Breakpoint #{$name} does not exist";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Media Query mixin
|
||||
* Usage:
|
||||
* .element {
|
||||
* @include mq($from: mobile) {
|
||||
* color: red;
|
||||
* }
|
||||
* @include mq($to: tablet) {
|
||||
* color: blue;
|
||||
* }
|
||||
* @include mq(mobile, tablet) {
|
||||
* color: green;
|
||||
* }
|
||||
* @include mq($from: tablet, $and: '(orientation: landscape)') {
|
||||
* color: teal;
|
||||
* }
|
||||
* @include mq(950px) {
|
||||
* color: hotpink;
|
||||
* }
|
||||
* }
|
||||
*/
|
||||
|
||||
@mixin mq($from: false, $to: false, $and: false, $height: false) {
|
||||
|
||||
// Initialize variables
|
||||
$minSize: 0;
|
||||
$maxSize: 0;
|
||||
$mediaQuery: '';
|
||||
$axis: if($height, 'height', 'width');
|
||||
|
||||
// From: this breakpoint (inclusive)
|
||||
@if $from {
|
||||
@if type-of($from) == number {
|
||||
$minSize: $from;
|
||||
} @else {
|
||||
$minSize: mqGetBreakpointWidth($from);
|
||||
}
|
||||
}
|
||||
|
||||
// To: that breakpoint (exclusive)
|
||||
@if $to {
|
||||
@if type-of($to) == number {
|
||||
$maxSize: $to - 1px;
|
||||
} @else {
|
||||
$maxSize: mqGetBreakpointWidth($to) - 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive support is disabled, rasterize the output outside @media blocks
|
||||
// The browser will rely on the cascade itself.
|
||||
@if ($mqResponsive == false) {
|
||||
$staticBreakpointWidth: mqGetBreakpointWidth($mqStaticBreakpoint);
|
||||
@if type-of($staticBreakpointWidth) == number {
|
||||
$targetWidth: $staticBreakpointWidth;
|
||||
// Output only rules that start at or span our target width
|
||||
@if ($and == false and ($minSize <= $targetWidth) and (($to == false) or ($maxSize >= $targetWidth))) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
// Throw a warning if $mqStaticBreakpoint is not in the $mqBreakpoints list
|
||||
@warn "No static styles will be output: #{$staticBreakpointWidth}";
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive support is enabled, output rules inside @media queries
|
||||
@else {
|
||||
@if $minSize != 0 { $mediaQuery: '#{$mediaQuery} and (min-#{$axis}: #{$minSize})'; }
|
||||
@if $maxSize != 0 { $mediaQuery: '#{$mediaQuery} and (max-#{$axis}: #{$maxSize})'; }
|
||||
@if $and { $mediaQuery: '#{$mediaQuery} and #{$and}'; }
|
||||
|
||||
$mediaQuery: unquote(#{$mediaQuery});
|
||||
|
||||
@media #{all + $mediaQuery} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a breakpoint
|
||||
* Usage: $mqBreakpoints: mqAddBreakpoint(tvscreen, 1920px);
|
||||
*/
|
||||
@function mqAddBreakpoint($name, $breakpoint) {
|
||||
$newBreakpoint: ($name: $breakpoint);
|
||||
@return map-merge($mqBreakpoints, $newBreakpoint);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create JSON string of map of breakpoints
|
||||
*/
|
||||
@function mqGetBreakpointsJSON($breakpoints: $mqBreakpoints) {
|
||||
$JSON: '{';
|
||||
|
||||
@each $name in map-keys($breakpoints) {
|
||||
$value: map-get($breakpoints, $name);
|
||||
|
||||
$JSON: $JSON + '"#{$name}":"#{$value}",';
|
||||
}
|
||||
|
||||
// Remove last ","
|
||||
$JSON: str-slice($JSON, 1, str-length($JSON) - 1);
|
||||
|
||||
// Close JSON string
|
||||
$JSON: $JSON + '}';
|
||||
|
||||
@return $JSON;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Create JSON string of single breakpoint
|
||||
*/
|
||||
@function mqGetBreakpointJSON($name, $value) {
|
||||
@return "{\"name\":\"#{$name}\",\"value\":\"#{$value}\"}";
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
@import "grid";
|
||||
@import "colors";
|
||||
@import "typography";
|
||||
@import "mediaqueries";
|
||||
@import "layout";
|
||||
@import "directives";
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue