mirror of
https://github.com/ForkAwesome/Fork-Awesome.git
synced 2024-12-28 06:21:32 +08:00
updating navbar & footer styles, adding dotted links in jumbotron and footer
This commit is contained in:
davegandy
parent
aaca03ed62
commit
e2ef7f022c
@ -1,4 +1,4 @@
|
||||
<div class="navbar navbar-default navbar-static-top hidden-print">
|
||||
<div class="navbar navbar-inverse navbar-static-top hidden-print">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.jumbotron {
|
||||
background-color: @jumbotron-bg;
|
||||
// #gradient > .directional(@jumbotron-bg, mix(@jumbotron-bg, @jumbotron-bg-dark, 0%), -40deg);
|
||||
border-bottom: 1px solid @jumbotron-bg-dark;
|
||||
border-bottom: 1px solid @jumbotron-border;
|
||||
margin-bottom: 0;
|
||||
&, h1 { color: @jumbotron-text; }
|
||||
padding: 60px 0 40px;
|
||||
|
||||
@ -1,45 +1,5 @@
|
||||
---
|
||||
---
|
||||
// BOOTSTRAP OVERRIDES
|
||||
// -------------------
|
||||
|
||||
// Links
|
||||
@link-color: lighten(@jumbotron-bg, 10%);
|
||||
@link-hover-color: @jumbotron-bg;
|
||||
|
||||
// Typography
|
||||
@font-family-sans-serif: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family-serif: museo-slab, Georgia, "Times New Roman", Times, serif;
|
||||
@headings-font-family: @font-family-serif;
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
@state-warning-text: mix(@yellow-dark, @yellow-darker, 80%);
|
||||
@state-warning-bg: @yellow-lighter;
|
||||
@state-warning-border: darken(spin(@state-warning-bg, -10), 7%);
|
||||
|
||||
@state-danger-text: @red;
|
||||
@state-danger-bg: @red-lighter;
|
||||
@state-danger-border: darken(spin(@state-danger-bg, -10), 4%);
|
||||
|
||||
@state-success-text: mix(@green-darker, @green-dark, 30%);
|
||||
@state-success-bg: @green-lighter;
|
||||
@state-success-border: darken(spin(@state-success-bg, -10), 13%);
|
||||
|
||||
@state-info-text: mix(@blue-dark, @blue, 50%);
|
||||
@state-info-bg: @blue-lighter;
|
||||
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
||||
|
||||
// Navbar
|
||||
@navbar-height: 40px;
|
||||
@navbar-inverse-brand-color: #fff;
|
||||
|
||||
//@brand-primary: @blue-dark;
|
||||
//@brand-success: @green;
|
||||
//@brand-warning: @yellow-dark;
|
||||
//@brand-danger: @red;
|
||||
//@brand-info: @blue;
|
||||
|
||||
// SITE VARIABLES
|
||||
// --------------
|
||||
|
||||
@ -100,5 +60,58 @@
|
||||
@jumbotron-bg: desaturate(#1d9d74, 0%);
|
||||
@jumbotron-bg-dark: darken(@jumbotron-bg, 10%);
|
||||
|
||||
@jumbotron-border: mix(@jumbotron-bg, @jumbotron-bg-dark, 75%);
|
||||
@jumbotron-text: #fff;
|
||||
|
||||
|
||||
|
||||
// BOOTSTRAP OVERRIDES
|
||||
// -------------------
|
||||
|
||||
// Links
|
||||
@link-color: lighten(@jumbotron-bg, 10%);
|
||||
@link-hover-color: @jumbotron-bg;
|
||||
|
||||
// Typography
|
||||
@font-family-sans-serif: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@font-family-serif: museo-slab, Georgia, "Times New Roman", Times, serif;
|
||||
@headings-font-family: @font-family-serif;
|
||||
|
||||
|
||||
// Form states and alerts
|
||||
@state-warning-text: mix(@yellow-dark, @yellow-darker, 80%);
|
||||
@state-warning-bg: @yellow-lighter;
|
||||
@state-warning-border: darken(spin(@state-warning-bg, -10), 7%);
|
||||
|
||||
@state-danger-text: @red;
|
||||
@state-danger-bg: @red-lighter;
|
||||
@state-danger-border: darken(spin(@state-danger-bg, -10), 4%);
|
||||
|
||||
@state-success-text: mix(@green-darker, @green-dark, 30%);
|
||||
@state-success-bg: @green-lighter;
|
||||
@state-success-border: darken(spin(@state-success-bg, -10), 13%);
|
||||
|
||||
@state-info-text: mix(@blue-dark, @blue, 50%);
|
||||
@state-info-bg: @blue-lighter;
|
||||
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
|
||||
|
||||
// Navbar
|
||||
@navbar-height: 40px;
|
||||
@navbar-inverse-brand-color: #fff;
|
||||
|
||||
// Reset inverted navbar basics
|
||||
@navbar-inverse-color: mix(@jumbotron-bg, #fff, 50%);
|
||||
@navbar-inverse-bg: @jumbotron-bg;
|
||||
@navbar-inverse-border: @jumbotron-border;
|
||||
|
||||
// Inverted navbar links
|
||||
@navbar-inverse-link-color: mix(@jumbotron-bg, #fff, 35%);
|
||||
@navbar-inverse-link-hover-color: #fff;
|
||||
@navbar-inverse-link-active-bg: @navbar-inverse-border;
|
||||
|
||||
|
||||
//@brand-primary: @blue-dark;
|
||||
//@brand-success: @green;
|
||||
//@brand-warning: @yellow-dark;
|
||||
//@brand-danger: @red;
|
||||
//@brand-info: @blue;
|
||||
@ -1,22 +1,19 @@
|
||||
#footer {
|
||||
// #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
|
||||
background-color: @jumbotron-bg;
|
||||
border-top: 1px solid mix(@jumbotron-bg, @jumbotron-bg-dark, 50%);
|
||||
border-top: 1px solid @jumbotron-border;
|
||||
color: mix(@jumbotron-text, @jumbotron-bg, 60%);
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
|
||||
a {
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
color: mix(@jumbotron-text, @jumbotron-bg, 80%);
|
||||
border-bottom: dotted 1px mix(@jumbotron-text, @jumbotron-bg, 60%);
|
||||
&:hover {
|
||||
color: #fff;
|
||||
color: @jumbotron-text;
|
||||
text-decoration: none;
|
||||
border-bottom: solid 1px @jumbotron-text;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
color: mix(@jumbotron-bg, #fff, 35%);
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
.container { padding-top: 40px; }
|
||||
.project { margin-top: 10px; }
|
||||
}
|
||||
|
||||
|
||||
@ -35,18 +35,26 @@
|
||||
background-color: @jumbotron-bg;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
|
||||
&:hover {
|
||||
background-color: @jumbotron-text;
|
||||
background-color: mix(@jumbotron-text, @jumbotron-bg, 95%);
|
||||
border-color: mix(@jumbotron-text, @jumbotron-bg, 95%);
|
||||
color: @jumbotron-bg;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.15);
|
||||
text-shadow: 0 -1px 0 @jumbotron-text;
|
||||
}
|
||||
}
|
||||
.shameless-self-promotion {
|
||||
margin-top: @buffer-lg;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: mix(@jumbotron-text, @jumbotron-bg, 40%);
|
||||
color: mix(@jumbotron-text, @jumbotron-bg, 50%);
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
|
||||
a { color: mix(@jumbotron-text, @jumbotron-bg, 70%); }
|
||||
a:hover { color: mix(@jumbotron-text, @jumbotron-bg, 100%); }
|
||||
a {
|
||||
color: mix(@jumbotron-text, @jumbotron-bg, 70%);
|
||||
border-bottom: dotted 1px mix(@jumbotron-text, @jumbotron-bg, 50%);
|
||||
&:hover {
|
||||
color: @jumbotron-text;
|
||||
text-decoration: none;
|
||||
border-bottom: solid 1px @jumbotron-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,5 +5,5 @@
|
||||
text-align: center;
|
||||
background-color: #f5f5f5;
|
||||
border-top: 1px solid #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user