mirror of
https://github.com/samsonjs/grid.git
synced 2026-04-27 15:07:39 +00:00
updates grid styles
This commit is contained in:
parent
28393c1b06
commit
bc2dbfae5b
1 changed files with 42 additions and 16 deletions
58
grid.css
58
grid.css
|
|
@ -1,5 +1,6 @@
|
||||||
/* Layout
|
/* Layout
|
||||||
-------------------------------------------------------------- */
|
========================================================================== */
|
||||||
|
|
||||||
*, *:before, *:after {
|
*, *:before, *:after {
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
|
|
@ -33,7 +34,8 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header
|
/* Header
|
||||||
-------------------------------------------------------------- */
|
========================================================================== */
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background-color: #497bad;
|
background-color: #497bad;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -80,7 +82,8 @@ header a:hover { text-decoration: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Section
|
/* Section
|
||||||
-------------------------------------------------------------- */
|
========================================================================== */
|
||||||
|
|
||||||
section {
|
section {
|
||||||
border-top: 1px solid #eee;
|
border-top: 1px solid #eee;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -94,7 +97,8 @@ section:first-of-type { border-top: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Mobile First Grid
|
/* Mobile First Grid
|
||||||
-------------------------------------------------------------- */
|
========================================================================== */
|
||||||
|
|
||||||
.column { margin-bottom: 1.5rem; }
|
.column { margin-bottom: 1.5rem; }
|
||||||
|
|
||||||
@media (min-width: 40rem) {
|
@media (min-width: 40rem) {
|
||||||
|
|
@ -114,7 +118,8 @@ section:first-of-type { border-top: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Typography
|
/* Typography
|
||||||
-------------------------------------------------------------- */
|
========================================================================== */
|
||||||
|
|
||||||
h1, h2, h3, h4, h5 {
|
h1, h2, h3, h4, h5 {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -151,6 +156,9 @@ blockquote p {
|
||||||
|
|
||||||
cite { color: #bbb; }
|
cite { color: #bbb; }
|
||||||
|
|
||||||
|
/* Code
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
code {
|
code {
|
||||||
background-color: #f8f8f8;
|
background-color: #f8f8f8;
|
||||||
-moz-border-radius: 3px;
|
-moz-border-radius: 3px;
|
||||||
|
|
@ -165,14 +173,21 @@ code {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Lists
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
display: inline-block;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 40rem) {
|
||||||
|
ul { display: inline-block; }
|
||||||
|
}
|
||||||
|
|
||||||
/* Links
|
/* Links
|
||||||
-------------------------------------------------------------- */
|
========================================================================== */
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #497bad;
|
color: #497bad;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -181,19 +196,23 @@ a {
|
||||||
a:hover { text-decoration: underline; }
|
a:hover { text-decoration: underline; }
|
||||||
|
|
||||||
/* Buttons
|
/* Buttons
|
||||||
-------------------------------------------------------------- */
|
========================================================================== */
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
background-color: #497bad;
|
background-color: #497bad;
|
||||||
-moz-border-radius: 3px;
|
-moz-border-radius: 3px;
|
||||||
-webkit-border-radius: 3px;
|
-webkit-border-radius: 3px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
border: none;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 0.7rem 1.5rem;
|
padding: 0.7rem 1.5rem;
|
||||||
position: relative;
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
@ -211,7 +230,8 @@ a:hover { text-decoration: underline; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Elements
|
/* Elements
|
||||||
-------------------------------------------------------------- */
|
========================================================================== */
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border: 0;
|
border: 0;
|
||||||
border-top: 1px solid #ddd;
|
border-top: 1px solid #ddd;
|
||||||
|
|
@ -254,7 +274,8 @@ img {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Examples
|
/* Examples
|
||||||
-------------------------------------------------------------- */
|
========================================================================== */
|
||||||
|
|
||||||
.example {
|
.example {
|
||||||
border-top: none;
|
border-top: none;
|
||||||
background-color: #497bad;
|
background-color: #497bad;
|
||||||
|
|
@ -320,7 +341,8 @@ img {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Box Model
|
/* Box Model
|
||||||
-------------------------------------------------------------- */
|
========================================================================== */
|
||||||
|
|
||||||
.box-model h1 { margin-bottom: 3rem; }
|
.box-model h1 { margin-bottom: 3rem; }
|
||||||
|
|
||||||
.margin { color: #f9cd9d; }
|
.margin { color: #f9cd9d; }
|
||||||
|
|
@ -329,7 +351,8 @@ img {
|
||||||
.content { color: #9ec3e5; }
|
.content { color: #9ec3e5; }
|
||||||
|
|
||||||
/* Gist Overrides
|
/* Gist Overrides
|
||||||
-------------------------------------------------------------- */
|
========================================================================== */
|
||||||
|
|
||||||
.gist .gist-file {
|
.gist .gist-file {
|
||||||
font-size: .9rem !important;
|
font-size: .9rem !important;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
@ -353,7 +376,8 @@ img {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Animate.css by Daniel Eden
|
/* Animate.css by Daniel Eden
|
||||||
-------------------------------------------------------------- */
|
========================================================================== */
|
||||||
|
|
||||||
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeInUp {
|
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeInUp {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -408,12 +432,14 @@ img {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Utilities
|
/* Utilities
|
||||||
-------------------------------------------------------------- */
|
========================================================================== */
|
||||||
|
|
||||||
.remove-padding { padding-bottom: 0; }
|
.remove-padding { padding-bottom: 0; }
|
||||||
.remove-border { border: none; }
|
.remove-border { border: none; }
|
||||||
|
|
||||||
/* Clearfix by Nicolas Gallagher
|
/* Clearfix by Nicolas Gallagher
|
||||||
-------------------------------------------------------------- */
|
========================================================================== */
|
||||||
|
|
||||||
.clearfix:before,
|
.clearfix:before,
|
||||||
.clearfix:after {
|
.clearfix:after {
|
||||||
content: " ";
|
content: " ";
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue