mirror of
https://github.com/kristoferjoseph/flexboxgrid.git
synced 2026-01-25 07:47:53 +00:00
Tweaking header
This commit is contained in:
kristoferjoseph
@@ -235,7 +235,7 @@ h6 {
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
:focus {
|
||||
@@ -292,24 +292,26 @@ code {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 3rem;
|
||||
padding: 2rem;
|
||||
background: #FFF;
|
||||
border: 1px solid #FFF;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.header--hero {
|
||||
font-size: 6rem;
|
||||
font-size: 3rem;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.p--hero {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
.download-button,
|
||||
.github-button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
-webkit-box-sizing: border-box;
|
||||
@@ -328,13 +330,15 @@ code {
|
||||
transition: background-color,.5s;
|
||||
}
|
||||
|
||||
.download-button:hover {
|
||||
.download-button:hover,
|
||||
.github-button {
|
||||
background: #39F;
|
||||
border-color: #39F;
|
||||
text-shadow: 0 1px #007FFF;
|
||||
}
|
||||
|
||||
.download-button:active {
|
||||
.download-button:active,
|
||||
.github-button {
|
||||
background: #007FFF;
|
||||
border-top: 1px solid #06C;
|
||||
}
|
||||
@@ -384,7 +388,32 @@ code {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:33rem) {
|
||||
.invisible--hand {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.visible--hand {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48rem) {
|
||||
.header--hero {
|
||||
font-size: 6rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.p--hero {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.box--first,
|
||||
.box--large,
|
||||
.box--nested {
|
||||
@@ -394,6 +423,16 @@ code {
|
||||
.box {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.invisible--desk {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.visible--desk {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-margin {
|
||||
@@ -708,38 +747,6 @@ code {
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48rem) {
|
||||
.column,
|
||||
.column-1,
|
||||
.column-10,
|
||||
.column-11,
|
||||
.column-12,
|
||||
.column-2,
|
||||
.column-3,
|
||||
.column-4,
|
||||
.column-5,
|
||||
.column-6,
|
||||
.column-7,
|
||||
.column-8,
|
||||
.column-9,
|
||||
.offset-1,
|
||||
.offset-10,
|
||||
.offset-11,
|
||||
.offset-12,
|
||||
.offset-2,
|
||||
.offset-3,
|
||||
.offset-4,
|
||||
.offset-5,
|
||||
.offset-6,
|
||||
.offset-7,
|
||||
.offset-8,
|
||||
.offset-9,
|
||||
.row {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.column-1--lap {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 8.333%;
|
||||
|
||||
2
css/index.min.css
vendored
2
css/index.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -33,7 +33,7 @@
|
||||
</div>
|
||||
|
||||
<div class="row center">
|
||||
<button class="download-button">Download</button>
|
||||
<button class="download-button invisible--hand">Download</button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -62,31 +62,31 @@
|
||||
flex: 0 0 25%;
|
||||
}
|
||||
.column-4--hand {
|
||||
flex: 0 0 33.333%;
|
||||
flex: 0 0 33.333%;
|
||||
}
|
||||
.column-5--hand {
|
||||
flex: 0 0 41.666%;
|
||||
flex: 0 0 41.666%;
|
||||
}
|
||||
.column-6--hand {
|
||||
flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
}
|
||||
.column-7--hand {
|
||||
flex: 0 0 58.333%;
|
||||
flex: 0 0 58.333%;
|
||||
}
|
||||
.column-8--hand {
|
||||
flex: 0 0 66.666%;
|
||||
flex: 0 0 66.666%;
|
||||
}
|
||||
.column-9--hand {
|
||||
flex: 0 0 75%;
|
||||
flex: 0 0 75%;
|
||||
}
|
||||
.column-10--hand {
|
||||
flex: 0 0 83.333%;
|
||||
flex: 0 0 83.333%;
|
||||
}
|
||||
.column-11--hand {
|
||||
flex: 0 0 91.666%;
|
||||
flex: 0 0 91.666%;
|
||||
}
|
||||
.column-12--hand {
|
||||
flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
.column-auto--hand {
|
||||
flex: 1;
|
||||
@@ -125,26 +125,26 @@
|
||||
margin-left: 91.666%;
|
||||
}
|
||||
.top {
|
||||
align-self: flex-start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.start {
|
||||
align-items: flex-start;
|
||||
text-align: start;
|
||||
justify-content: start;
|
||||
align-items: flex-start;
|
||||
text-align: start;
|
||||
justify-content: start;
|
||||
}
|
||||
.center {
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.bottom {
|
||||
align-self: flex-end;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.end {
|
||||
align-items: flex-end;
|
||||
text-align: end;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
text-align: end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.around {
|
||||
justify-content: space-around;
|
||||
@@ -161,36 +161,6 @@
|
||||
|
||||
@media only screen and (min-width: 48rem) {
|
||||
|
||||
.row,
|
||||
.column,
|
||||
.column-1,
|
||||
.column-2,
|
||||
.column-3,
|
||||
.column-4,
|
||||
.column-5,
|
||||
.column-6,
|
||||
.column-7,
|
||||
.column-8,
|
||||
.column-9,
|
||||
.column-10,
|
||||
.column-11,
|
||||
.column-12,
|
||||
.offset-1,
|
||||
.offset-2,
|
||||
.offset-3,
|
||||
.offset-4,
|
||||
.offset-5,
|
||||
.offset-6,
|
||||
.offset-7,
|
||||
.offset-8,
|
||||
.offset-9,
|
||||
.offset-10,
|
||||
.offset-11,
|
||||
.offset-12 {
|
||||
box-sizing: border-box;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.column-1--lap {
|
||||
flex: 0 0 8.333%;
|
||||
}
|
||||
@@ -416,5 +386,6 @@
|
||||
.offset-11--wall {
|
||||
margin-left: 91.666%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
201
src/style.css
201
src/style.css
@@ -1,137 +1,172 @@
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
font-weight: normal;
|
||||
background: #EEE;
|
||||
line-height: 1.4rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
font-weight: normal;
|
||||
background: #EEE;
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family:"bree", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
color: #001A33;
|
||||
font-family:"bree", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
color: #001A33;
|
||||
}
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
:focus {
|
||||
outline-color: transparent;
|
||||
outline-style: none;
|
||||
outline-color: transparent;
|
||||
outline-style: none;
|
||||
}
|
||||
h2 + p {
|
||||
margin: -1.25rem 0 2rem 0;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #007FFF;
|
||||
padding: 0 0 0.2rem 0;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: #007FFF;
|
||||
padding: 0 0 0.2rem 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
a:hover {
|
||||
border-bottom: 1px solid #007FFF;
|
||||
color: #007FFF;
|
||||
border-bottom: 1px solid #007FFF;
|
||||
color: #007FFF;
|
||||
}
|
||||
pre {
|
||||
overflow-x: auto;
|
||||
padding: 1.25em;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-left-width: 5px;
|
||||
margin: 1.6em 0;
|
||||
font-size: 0.875em;
|
||||
background: #fcfcfc;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
overflow-x: auto;
|
||||
padding: 1.25em;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-left-width: 5px;
|
||||
margin: 1.6em 0;
|
||||
font-size: 0.875em;
|
||||
background: #fcfcfc;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
}
|
||||
code {
|
||||
color: #007FFF;
|
||||
color: #007FFF;
|
||||
}
|
||||
.wrap {
|
||||
box-sizing: border-box;
|
||||
max-width: 75%;
|
||||
margin: 0 auto;
|
||||
padding-top: 2rem;
|
||||
box-sizing: border-box;
|
||||
max-width: 75%;
|
||||
margin: 0 auto;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
.page-section {
|
||||
margin-bottom: 5rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
.page-section--hero {
|
||||
box-sizing: border-box;
|
||||
padding: 3rem;
|
||||
background: #FFF;
|
||||
border: 1px solid #FFF;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
padding: 2rem;
|
||||
background: #FFF;
|
||||
border: 1px solid #FFF;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.header--hero {
|
||||
font-size: 6rem;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 3rem;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.p--hero {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
.github-button,
|
||||
.download-button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 0 3rem;
|
||||
margin: 0;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
background: #007FFF;
|
||||
border: 1px solid #007FFF;
|
||||
border-radius: 2px;
|
||||
color: #FFF;
|
||||
font-size: 1.25rem;
|
||||
transition: background-color, 0.5s;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 0 3rem;
|
||||
margin: 0;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
background: #007FFF;
|
||||
border: 1px solid #007FFF;
|
||||
border-radius: 2px;
|
||||
color: #FFF;
|
||||
font-size: 1.25rem;
|
||||
transition: background-color, 0.5s;
|
||||
}
|
||||
.github-button,
|
||||
.download-button:hover {
|
||||
background: #3399FF;
|
||||
border-color: #3399FF;
|
||||
text-shadow: 0 1px #007FFF;
|
||||
background: #3399FF;
|
||||
border-color: #3399FF;
|
||||
text-shadow: 0 1px #007FFF;
|
||||
}
|
||||
.github-button,
|
||||
.download-button:active {
|
||||
background: #007FFF;
|
||||
border-top: 1px solid #0066CC;
|
||||
background: #007FFF;
|
||||
border-top: 1px solid #0066CC;
|
||||
}
|
||||
.box--first, .box--nested, .box--large, .box {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-height: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background: #007FFF;
|
||||
border: 1px solid #FFF;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
color: white;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-height: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background: #007FFF;
|
||||
border: 1px solid #FFF;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
.box--first {
|
||||
background: #0066CC;
|
||||
border: none;
|
||||
background: #0066CC;
|
||||
border: none;
|
||||
}
|
||||
.box--nested {
|
||||
background: #003366;
|
||||
border: none;
|
||||
background: #003366;
|
||||
border: none;
|
||||
}
|
||||
.box--large {
|
||||
padding: 8rem;
|
||||
padding: 8rem;
|
||||
}
|
||||
.page-footer {
|
||||
box-sizing:border-box;
|
||||
padding-bottom: 3rem;
|
||||
box-sizing:border-box;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
.tag {
|
||||
color: #000;
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
font-weight: normal;
|
||||
}
|
||||
@media only screen and (min-width: 33rem) {
|
||||
.invisible--hand {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible--hand {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
@media only screen and (min-width: 48rem) {
|
||||
|
||||
.header--hero {
|
||||
font-size: 6rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.p--hero {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.download-button {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
.box--first, .box--nested, .box--large {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
.box {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.invisible--desk {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible--desk {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user