mirror of
https://github.com/ForkAwesome/Fork-Awesome.git
synced 2024-12-29 15:01:31 +08:00
updating navbar & footer styles, adding dotted links in jumbotron and footer
This commit is contained in:
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="container">
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
.jumbotron {
|
.jumbotron {
|
||||||
background-color: @jumbotron-bg;
|
background-color: @jumbotron-bg;
|
||||||
// #gradient > .directional(@jumbotron-bg, mix(@jumbotron-bg, @jumbotron-bg-dark, 0%), -40deg);
|
// #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;
|
margin-bottom: 0;
|
||||||
&, h1 { color: @jumbotron-text; }
|
&, h1 { color: @jumbotron-text; }
|
||||||
padding: 60px 0 40px;
|
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
|
// SITE VARIABLES
|
||||||
// --------------
|
// --------------
|
||||||
|
|
||||||
@ -100,5 +60,58 @@
|
|||||||
@jumbotron-bg: desaturate(#1d9d74, 0%);
|
@jumbotron-bg: desaturate(#1d9d74, 0%);
|
||||||
@jumbotron-bg-dark: darken(@jumbotron-bg, 10%);
|
@jumbotron-bg-dark: darken(@jumbotron-bg, 10%);
|
||||||
|
|
||||||
|
@jumbotron-border: mix(@jumbotron-bg, @jumbotron-bg-dark, 75%);
|
||||||
@jumbotron-text: #fff;
|
@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 {
|
#footer {
|
||||||
// #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
|
// #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
|
||||||
background-color: @jumbotron-bg;
|
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 {
|
a {
|
||||||
color: #fff;
|
color: mix(@jumbotron-text, @jumbotron-bg, 80%);
|
||||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
border-bottom: dotted 1px mix(@jumbotron-text, @jumbotron-bg, 60%);
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #fff;
|
color: @jumbotron-text;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: solid 1px @jumbotron-text;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.container { padding-top: 40px; }
|
||||||
.container {
|
|
||||||
padding-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
color: mix(@jumbotron-bg, #fff, 35%);
|
|
||||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
|
||||||
.project { margin-top: 10px; }
|
.project { margin-top: 10px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -35,18 +35,26 @@
|
|||||||
background-color: @jumbotron-bg;
|
background-color: @jumbotron-bg;
|
||||||
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
|
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: @jumbotron-text;
|
background-color: mix(@jumbotron-text, @jumbotron-bg, 95%);
|
||||||
|
border-color: mix(@jumbotron-text, @jumbotron-bg, 95%);
|
||||||
color: @jumbotron-bg;
|
color: @jumbotron-bg;
|
||||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.15);
|
text-shadow: 0 -1px 0 @jumbotron-text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.shameless-self-promotion {
|
.shameless-self-promotion {
|
||||||
margin-top: @buffer-lg;
|
margin-top: @buffer-lg;
|
||||||
font-size: @font-size-base;
|
font-size: @font-size-base;
|
||||||
line-height: @line-height-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);
|
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
|
||||||
a { color: mix(@jumbotron-text, @jumbotron-bg, 70%); }
|
a {
|
||||||
a:hover { color: mix(@jumbotron-text, @jumbotron-bg, 100%); }
|
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;
|
text-align: center;
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
border-top: 1px solid #fff;
|
border-top: 1px solid #fff;
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user