Skip to content

P
packer
Commit d5dc27ce authored by Seth Vargo's avatar Seth Vargo
Browse files
Options

Update CSS for Bootstrap 3

parent b732c5a2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 676 additions and 610 deletions
website/source/assets/stylesheets/_buttons.scss 0 → 100644
View file @ d5dc27ce
@mixin button {
font-family: $mono;
height: $button-height;
line-height: $button-height;
background-color: transparent;
border-width: 2px;
border-style: solid;
display: block;
padding: 0 30px;
text-transform: uppercase;
letter-spacing: 3px;
@include rounded(5px);
&.spaced {
margin-right: 20px;
}
&.primary {
color: $green;
border-color: $green;
&:hover {
background-color: transparentize($green, .7);
}
&:active {
background-color: transparentize($green, .5);
}
}
&.secondary {
color: $black;
border-color: $black;
&:hover {
background-color: transparentize($black, .9);
}
&:active {
background-color: transparentize($black, .7);
}
}
&.inline {
margin: auto $baseline;
@include respond-to(mobile) {
display: block;
width: 100%;
margin: $baseline 0;
}
}
}
website/source/assets/stylesheets/_columns.scss 0 → 100644
View file @ d5dc27ce
.container-xs-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.col-xs-height {
display:table-cell;
float:none;
}
@media (min-width: 768px) {
.container-sm-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.col-sm-height {
display:table-cell;
float:none;
}
}
@media (min-width: 992px) {
.container-md-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.col-md-height {
display:table-cell;
float:none;
}
}
@media (min-width: 1200px) {
.container-lg-height {
display:table;
padding-left:0px;
padding-right:0px;
}
.col-lg-height {
display:table-cell;
float:none;
}
}
website/source/assets/stylesheets/_footer.scss
View file @ d5dc27ce
footer {
height: $nav-height;
max-height: $nav-height;
background-color: $black !important;
padding: 0;
margin: 0;
text-transform: uppercase;
color: $white;
font-family: $sans;
@include respond-to(mobile) {
margin-right: -20px;
margin-left: -20px;
}
height: $nav-height;
max-height: $nav-height;
background-color: $black !important;
padding: 0;
margin: 0;
text-transform: uppercase;
color: $white;
font-family: $sans;
@include respond-to(mobile) {
margin-right: -20px;
margin-left: -20px;
}
ul {
margin-top: 40px;
@include respond-to(mobile) {
margin-left: $baseline;
margin-top: $baseline;
}
margin-top: 40px;
@include respond-to(mobile) {
margin-left: $baseline;
margin-top: $baseline;
}
li {
display: inline;
margin-right: 50px;
@include respond-to(mobile) {
margin-right: 20px;
display: list-item;
}
}
display: inline;
margin-right: 50px;
@include respond-to(mobile) {
margin-right: 20px;
display: list-item;
}
}
.hashi-logo {
background: image-url('logo_footer.png') no-repeat center top;
height: 40px;
width: 40px;
background-size: 37px 40px;
text-indent: -999999px;
display: inline-block;
margin-top: -10px;
margin-right: 0;
@include respond-to(mobile) {
margin-top: -50px;
margin-right: $baseline;
}
background: image-url('logo_footer.png') no-repeat center top;
height: 40px;
width: 40px;
background-size: 37px 40px;
text-indent: -999999px;
display: inline-block;
margin-top: -10px;
margin-right: 0;
@include respond-to(mobile) {
margin-top: -50px;
margin-right: $baseline;
}
}
}
.active {
color: $green;
color: $green;
}
button {
margin-top: 20px;
margin-top: 20px;
}
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -($nav-height);
min-height: 100%;
/* equal to footer height */
margin-bottom: -($nav-height);
}
.page-wrap:after {
content: "";
display: block;
content: "";
display: block;
}
.page-wrap:after {
/* .push must be the same height as footer */
height: $nav-height;
/* .push must be the same height as footer */
height: $nav-height;
}
website/source/assets/stylesheets/_helpers.scss
View file @ d5dc27ce
......@@ -23,7 +23,7 @@ $base-line-height: 20px;
$button-height: 60px;
.center {
margin: 0 auto;
margin: 0 auto;
}
.padded-lg {padding: ($baseline * 2) 0;}
......@@ -44,17 +44,17 @@ $serif: 'myriad-pro', helvetica, Georgia, serif;
$sans: 'HeimatStencil-SemiBold', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$mono: 'Inconsolata', 'courier new', courier, mono-space;
.serif {font-family: $serif;}
.sans {font-family: $sans;}
.mono {font-family: $mono;}
.serif { font-family: $serif; }
.sans { font-family: $sans; }
.mono { font-family: $mono; }
.text-center {text-align: center !important;}
.text-left {text-align: left !important;}
.text-right {text-align: right !important;}
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-green {color: $green;}
.text-green { color: $green; }
.uppercase {text-transform: uppercase !important;}
.uppercase { text-transform: uppercase !important; }
@font-face {
font-family: 'HeimatStencil-SemiBold';
......@@ -65,47 +65,45 @@ $mono: 'Inconsolata', 'courier new', courier, mono-space;
font-style: normal;
}
//color
.dark-background {
background-color: #000;
color: $white;
background-color: #000;
color: $white;
a {
color: inherit;
&:hover {
color: $green;
color: inherit;
&:hover {
color: $green;
}
&:active {
color: darken($green, 30%);
color: darken($green, 30%);
}
}
}
.white-background {
background-color: $white;
background-color: $white;
}
//elements
.divider {
background: image-url('divider.png') no-repeat center bottom;
height: 70px;
width: 70px;
background-size: 70px 70px;
display: table-cell;
text-align: center;
vertical-align: middle;
background: image-url('divider.png') no-repeat center bottom;
height: 70px;
width: 70px;
background-size: 70px 70px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.packer {
color: $orange;
font-size: 20px;
color: $orange;
font-size: 20px;
a:hover,
a:active,
a:visited {
color: inherit;
a:hover, a:active, a:visited {
color: inherit;
}
}
......@@ -141,39 +139,39 @@ $break-lg: 980px;
/* utlities */
.d {
border-bottom: 1px solid $red;
border-top: 1px solid $red;
background-color: transparentize($red, .9);
border-bottom: 1px solid $red;
border-top: 1px solid $red;
background-color: transparentize($red, .9);
}
.hyphenate {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.full-width {
margin-right: -20px;
margin-left: -20px;
margin-right: -20px;
margin-left: -20px;
}
.add-transition {
transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@mixin opacity($opacity) {
-khtml-opacity: $opacity;
-moz-opacity: $opacity;
opacity: $opacity;
-khtml-opacity: $opacity;
-moz-opacity: $opacity;
opacity: $opacity;
}
@mixin transform-scale($value) {
-moz-transform: scale($value);
-webkit-transform: scale($value);
transform: scale($value);
-webkit-transform: scale($value);
-moz-transform: scale($value);
transform: scale($value);
}
@mixin transition($type, $speed, $easing) {
......@@ -184,8 +182,8 @@ opacity: $opacity;
}
@mixin rounded($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-khtml-border-radius: $radius;
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-khtml-border-radius: $radius;
border-radius: $radius;
}
website/source/assets/stylesheets/_nav.scss
View file @ d5dc27ce
nav {
height: $nav-height;
padding: $baseline 0;
padding: 0;
margin: 0;
min-width: 940px;
text-transform: uppercase;
color: $white;
font-family: $sans;
font-size: 16px;
border-bottom: 1px solid $border-dark;
height: $nav-height;
height: $nav-height;
padding: 0;
margin: 0;
min-width: 940px;
text-transform: uppercase;
color: $white;
font-family: $sans;
font-size: 16px;
border-bottom: 1px solid $border-dark;
ul {
margin-top: ($baseline * 2);
margin-left: $nav-height;
li {
display: inline-block;
margin-right: 50px;
}
}
.packer-logo {
background: image-url('logo_nav.png') no-repeat center top;
height: 80px;
width: 80px;
background-size: 34px 50px;
text-indent: -999999px;
display: inline-block;
margin-top: 25px;
}
@media (min-width: $screen-md-min) {
ul {
margin-top: ($baseline * 2);
margin-left: $nav-height;
li {
&.featured {
margin: -20px 0 0 10px;
float: right;
li {
display: inline-block;
margin-right: 50px;
a {
@include button;
font-weight: bold;
}
}
}
}
}
.packer-logo {
background: image-url('logo_nav.png') no-repeat center top;
height: 80px;
width: 80px;
background-size: 34px 50px;
text-indent: -999999px;
display: inline-block;
margin-top: 25px;
}
@media (max-width: $screen-sm-max) {
height: auto;
padding: 0;
min-width: auto;
ul {
margin: 1em 0 1em 80px;
.active {
color: $green;
li {
display: block;
margin: 0;
padding: 1em;
}
}
}
@media (max-width: $screen-xs-max) {
button {
margin-top: $baseline;
}
} //nav
}
}
}
website/source/assets/stylesheets/_reset.scss
View file @ d5dc27ce
form,
input,
textarea,
button {
padding: 0;
margin: 0;
vertical-align: middle;
border: 0;
box-shadow: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-khtml-border-radius: 0;
border-radius: 0;
background-color: transparent;
font-family: $mono;
font-size: $base-font-size;
line-height: 1.0;
color: inherit;
form, input, textarea, button {
padding: 0;
margin: 0;
vertical-align: middle;
border: 0;
box-shadow: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-khtml-border-radius: 0;
border-radius: 0;
background-color: transparent;
font-family: $mono;
font-size: $base-font-size;
line-height: 1.0;
color: inherit;
&:focus {
line-height: 1.0;
box-shadow: none !important;
outline: none;
vertical-align: middle;
line-height: 1.0;
box-shadow: none !important;
outline: none;
vertical-align: middle;
}
}
\ No newline at end of file
}
website/source/assets/stylesheets/_sidebar.scss
View file @ d5dc27ce
.sidebar {
$border: 1px solid $gray-dark;
font-size: 16px;
font-family: $mono;
color: $gray-light;
width: $sidebar-width;
float: left;
background-color: $sidebar-background-color;
height: 100%;
$border: 1px solid $gray-dark;
font-size: 16px;
font-family: $mono;
color: $gray-light;
background-color: $sidebar-background-color;
min-height: 100%;
h2 {
color: $green;
text-transform: uppercase;
padding: $docs-top-margin 20px 0;
}
h4 {
color: $white;
text-transform: uppercase;
margin-bottom: -10px;
}
h2 {
color: $green;
text-transform: uppercase;
padding: $docs-top-margin 20px 0;
}
ul {
@extend .padded-sm;
h4 {
color: $white;
text-transform: uppercase;
margin-bottom: -10px;
}
li {
border-bottom: $border;
padding: 15px 0;
text-align: left;
}
ul {
@extend .padded-sm;
li > * {
padding: auto 20px;
margin-left: 20px;
display: block;
width: 100%;
}
li {
border-bottom: $border;
padding: 15px 0;
text-align: left;
}
.sidebar-background {
background-color: $sidebar-background-color;
height: 100%;
width: $sidebar-width;
position: fixed;
top: 0;
left: 0;
z-index: -9999;
li > * {
padding: auto 20px;
margin-left: 20px;
display: block;
width: 100%;
}
}
}
website/source/assets/stylesheets/_styles.scss
View file @ d5dc27ce
* {
margin: 0;
margin: 0;
}
html,
body {
margin: 0;
height: 100%;
margin: 0;
height: 100%;
}
html {
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
}
body {
background-color: $background;
font-family: $sans;
letter-spacing: 1px;
font-size: $base-font-size;
line-height: $base-line-height;
}
h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: 2px;
font-weight: normal;
background-color: $background;
font-family: $sans;
letter-spacing: 1px;
font-size: $base-font-size;
line-height: $base-line-height;
}
h1, h2, h3, h4, h5, h6 {
letter-spacing: 2px;
font-weight: normal;
}
h1 {
font-family: $sans;
font-size: 70px;
line-height: (80/70);
@include respond-to(mobile) {
font-size: 50px;
line-height: (50/45);
}
font-family: $sans;
font-size: 70px;
line-height: (80/70);
@include respond-to(mobile) {
font-size: 50px;
line-height: (50/45);
}
}
h2 {
font-family: $sans;
font-size: 40px;
line-height: (50/40);
&.has-dividers {
//overflow: auto !important;
display: table-cell;
text-align: center;
vertical-align: middle;
@include respond-to(mobile) {
display: block;
}
font-family: $sans;
font-size: 40px;
line-height: (50/40);
&.has-dividers {
//overflow: auto !important;
display: table-cell;
text-align: center;
vertical-align: middle;
@include respond-to(mobile) {
display: block;
}
}
}
h3 {
font-family: $sans;
font-size: 20px;
line-height: (30/20);
font-family: $sans;
font-size: 20px;
line-height: (30/20);
}
h4 {
font-family: $mono;
font-size: 20px;
line-height: (30/20);
font-family: $mono;
font-size: 20px;
line-height: (30/20);
}
h5 {
font-family: $sans;
font-size: 16px;
line-height: (22/16);
font-family: $sans;
font-size: 16px;
line-height: (22/16);
}
h6 {
font-family: $mono;
font-size: 16px;
line-height: (22/16);
font-family: $mono;
font-size: 16px;
line-height: (22/16);
}
p {
font-family: $serif;
font-size: 17px;
line-height: (30/17);
letter-spacing: 1px;
&.large-text {
font-size: 20px;
line-height: (35/20);
}
font-family: $serif;
font-size: 17px;
line-height: (30/17);
letter-spacing: 1px;
a {
color: $green;
&:hover {
color: darken($green, 30%);
}
&:active {
color: darken($green, 50%);
}
}
}
&.large-text {
font-size: 20px;
line-height: (35/20);
}
a {
color: inherit;
text-decoration: none;
a {
color: $green;
&:hover {
color: inherit;
text-decoration: none;
}
&:visited {
color: darken($green, 30%);
}
&:active {
color: darken($green, 50%);
}
}
}
a {
color: inherit;
text-decoration: none;
&:hover {
color: inherit;
text-decoration: none;
}
}
dt {
font-size: 18px;
font-size: 18px;
}
dd {
font-family: $serif;
font-size: 17px;
line-height: 1.5;
letter-spacing: 1px;
margin-bottom: 30px;
font-family: $serif;
font-size: 17px;
line-height: 1.5;
letter-spacing: 1px;
margin-bottom: 30px;
}
ul,
ol {
margin: 0;
padding: 0;
list-style-type: none;
ul, ol {
margin: 0;
padding: 0;
list-style-type: none;
}
em {
font-style: italic;
font-style: italic;
}
strong {
font-weight: bold;
font-weight: bold;
}
small,
.small {
font-size: 13px;
small, .small {
font-size: 13px;
}
hr {
margin: ($baseline * 2) 0;
border-color: $gray-mid;
border-bottom: 0;
margin: ($baseline * 2) 0;
border-color: $gray-mid;
border-bottom: 0;
}
pre {
background-color: $black;
color: $white;
margin: $baseline 0;
background-color: $black;
color: $white;
margin: $baseline 0;
}
table {
font-family: $mono;
margin: ($baseline * 2) 0;
color: $gray-dark;
font-family: $mono;
margin: ($baseline * 2) 0;
color: $gray-dark;
th {
color: $black;
font-weight: normal !important;
}
th {
color: $black;
font-weight: normal !important;
}
}
::selection {
background: #ffff00; /* Safari */
color: $black;
background: #ffff00; /* Safari */
color: $black;
}
::-moz-selection {
background: #ffff00; /* Firefox */
color: $black;
}
input {
}
button {
height: $button-height;
background-color: transparent;
border-width: 2px;
border-style: solid;
padding: 0 30px;
text-transform: uppercase;
letter-spacing: 3px;
@include rounded(5px);
&.spaced {
margin-right: 20px;
}
&.primary {
color: $green;
border-color: $green;
&:hover {
background-color: transparentize($green, .7);
}
&:active {
background-color: transparentize($green, .5);
}
}
&.secondary {
color: $black;
border-color: $black;
&:hover {
background-color: transparentize($black, .9);
}
&:active {
background-color: transparentize($black, .7);
}
}
&.inline {
margin: auto $baseline;
@include respond-to(mobile) {
display: block;
width: 100%;
margin: $baseline 0;
}
}
background: #ffff00; /* Firefox */
color: $black;
}
website/source/assets/stylesheets/application.scss 0 → 100644
View file @ d5dc27ce
@import "bootstrap-sprockets";
@import "bootstrap";
@import url("http://fonts.googleapis.com/css?family=Inconsolata");
@import "_helpers";
@import "_reset";
@import "_columns";
@import "_buttons";
@import "_styles";
@import "_nav";
@import "_footer";
@import "_components";
@import "_sidebar";
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7