Labyricorn/liquid
1
0
Fork 0
mirror of https://github.com/Shopify/liquid.git synced 2026-09-18 18:30:40 -07:00
Code Issues Packages Projects Releases Wiki Activity

make buttons and headers better on mobile

Browse Source
This commit is contained in:
Tetsuro
2016-03-20 16:12:09 -04:00
parent c9e9bc3529
commit fc87cfaf37
4 changed files with 32 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/home-banner.html
+2 -2
View File
@@ -2,7 +2,7 @@
<h1>Liquid</h1> <h1>Liquid</h1>
<p>Safe, customer facing template language for flexible web apps.</p> <p>Safe, customer facing template language for flexible web apps.</p>
<p class="btn-row"> <p class="btn-row">
<a href="https://github.com/Shopify/liquid/archive/master.zip" target="_blank" class="btn"><i class="icon fa fa-2x fa-arrow-circle-down"></i>Download</a> <a href="https://github.com/Shopify/liquid/archive/master.zip" target="_blank" class="btn"><i class="icon fa fa-2x fa-arrow-circle-down" aria-hidden="true"></i>Download</a>
<a href="https://github.com/Shopify/liquid" target="_blank" class="btn"><i class="icon fa fa-2x fa-github"></i>View on GitHub</a> <a href="https://github.com/Shopify/liquid" target="_blank" class="btn" aria-hidden="true"><i class="icon fa fa-2x fa-github"></i>View on GitHub</a>
</p> </p>
</header> </header>
_sass/modules/_buttons.scss
+23 -2
View File
@@ -3,15 +3,31 @@
display: flex; display: flex;
background: $color-blue-5; background: $color-blue-5;
align-items: center; align-items: center;
justify-content: center;
padding: $spacing-unit/4 $spacing-unit/2; padding: $spacing-unit/4 $spacing-unit/2;
border-radius: 8px; border-radius: 8px;
text-decoration: none; text-decoration: none;
text-align: center;
white-space: nowrap;
&:hover { &:hover {
background: $color-blue-4; background: $color-blue-4;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
} }
&:first-child {
margin-bottom: $spacing-unit / 2;
}
@include phone-and-up {
justify-content: center;
&:first-child {
justify-content: flex-start;
margin-bottom: 0;
}
}
} }
.btn:visited { .btn:visited {
@@ -21,10 +37,15 @@
.btn-row { .btn-row {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column;
margin-bottom: 0; margin-bottom: 0;
.btn:not(:first-child) { @include phone-and-up {
margin-left: $spacing-unit / 2; flex-direction: row;
.btn:not(:first-child) {
margin-left: $spacing-unit / 2;
}
} }
} }
_sass/modules/_home-banner.scss
+6 -2
View File
@@ -2,10 +2,14 @@
text-align: center; text-align: center;
border-bottom: 1px solid lighten($color-slate, 50%); border-bottom: 1px solid lighten($color-slate, 50%);
padding-bottom: $spacing-unit; padding-bottom: $spacing-unit;
margin-bottom: $spacing-unit;
h1 { h1 {
font-weight: bold; font-weight: bold;
font-size: 5em; font-size: 4em;
@include phone-and-up {
font-size: 5em;
}
} }
} }
_sass/partials/_media-queries.scss
+1 -1
View File
@@ -2,7 +2,7 @@
Media queries Media queries
==============================================================================*/ ==============================================================================*/
$phone-width: 321px; $phone-width: 375px;
$tablet-width: 768px; $tablet-width: 768px;
$desktop-width: 1024px; $desktop-width: 1024px;