steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

More style cleanup and housekeeping

Browse Source
This commit is contained in:
Michael Rose
2016-03-11 15:55:06 -05:00
parent a3d251a18e
commit 5d9e0af805
17 changed files with 219 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
_assets/css/_footer.scss Normal file
View File

@@ -0,0 +1,54 @@
/* ==========================================================================
FOOTER
========================================================================== */
.page__footer {
@include container;
@include clearfix;
clear: both;
padding-bottom: 3em;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
footer {
@include grid(12,10);
@include prefix(12,1);
@include suffix(12,1);
@include breakpoint($small) {
@include grid(12,6);
@include prefix(12,3);
@include suffix(12,3);
}
@include breakpoint($x-large) {
@include grid(12,4.5);
@include prefix(12,4);
@include suffix(12,3.5);
}
}
}
.page__footer-copyright {
font-size: 14px;
}
.page__footer-follow {
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline-block;
}
li + li:before {
content: "";
padding-right: 5px;
}
}

70
_assets/css/_forms.scss
View File

@@ -32,6 +32,7 @@ btnform {
display: none;
}
}
label,
input,
button,
@@ -40,6 +41,7 @@ textarea {
vertical-align: baseline;
*vertical-align: middle;
}
input,
button,
select,
@@ -47,6 +49,7 @@ textarea {
font-family: $serif;
box-sizing: border-box;
}
label {
display: block;
margin-bottom: 10px / 8;
@@ -59,6 +62,7 @@ label {
display: block;
}
}
input,
textarea,
select {
@@ -73,12 +77,15 @@ select {
border-color: mix(#fff, $accent-color, 50%);
}
}
.input-mini {
width: 60px;
}
.input-small {
width: 90px;
}
input[type="image"],
input[type="checkbox"],
input[type="radio"] {
@@ -92,6 +99,7 @@ input[type="radio"] {
border-radius: 0;
border: 0 \9;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
@@ -99,10 +107,12 @@ input[type="radio"] {
*width: 13px;
*height: 13px;
}
input[type="image"] {
border: 0;
box-shadow: none;
}
input[type="file"] {
width: auto;
padding: initial;
@@ -112,6 +122,7 @@ input[type="file"] {
background-color: initial;
box-shadow: none;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
@@ -120,37 +131,45 @@ input[type="submit"] {
cursor: pointer;
*overflow: visible;
}
select,
input[type="file"] {
*margin-top: 4px;
}
select {
width: auto;
background-color: #fff;
}
select[multiple],
select[size] {
height: auto;
}
textarea {
resize: vertical;
height: auto;
overflow: auto;
vertical-align: top;
}
input[type="hidden"] {
display: none;
}
.radio,
.checkbox {
padding-left: 18px;
font-weight: normal;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: left;
margin-left: -18px;
}
.radio.inline,
.checkbox.inline {
display: inline-block;
@@ -158,11 +177,13 @@ input[type="hidden"] {
margin-bottom: 0;
vertical-align: middle;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
margin-left: 10px;
}
/*
Disabled state
========================================================================== */
@@ -177,6 +198,7 @@ textarea[readonly] {
cursor: not-allowed;
}
/*
Focus & active state
========================================================================== */
@@ -187,6 +209,7 @@ textarea:focus {
outline: 0;
outline: thin dotted \9;
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
@@ -194,6 +217,7 @@ select:focus {
box-shadow: none;
}
/*
Help text
========================================================================== */
@@ -202,17 +226,20 @@ select:focus {
.help-inline {
color: mix(#fff, #000, 50%);
}
.help-block {
display: block;
margin-bottom: 1em;
line-height: 1em;
}
.help-inline {
display: inline-block;
vertical-align: middle;
padding-left: 5px;
}
/*
.form-inline
========================================================================== */
@@ -223,9 +250,11 @@ select:focus {
display: inline-block;
margin-bottom: 0;
}
.form-inline label {
display: inline-block;
}
.form-inline .radio,
.form-inline .checkbox,
.form-inline .radio {
@@ -233,12 +262,14 @@ select:focus {
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
float: left;
margin-left: 0;
margin-right: 3px; }
/*
.form-search
========================================================================== */
@@ -249,15 +280,18 @@ select:focus {
display: inline-block;
margin-bottom: 0;
}
.form-search .search-query {
padding-left: 14px;
padding-right: 14px;
margin-bottom: 0;
border-radius: 14px;
}
.form-search label {
display: inline-block;
}
.form-search .radio,
.form-search .checkbox,
.form-inline .radio {
@@ -265,9 +299,45 @@ select:focus {
margin-bottom: 0;
vertical-align: middle;
}
.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"] {
float: left;
margin-left: 0;
margin-right: 3px;
}
/*
Google search form
========================================================================== */
#goog-fixurl {
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
li {
list-style-type: none;
}
}
}
#goog-wm-qt {
width: auto;
margin-right: 10px;
margin-bottom: 20px;
padding: 8px 20px;
display: inline-block;
font-size: 14px;
background-color: #fff;
color: #000;
border-width: 2px !important;
border-style: solid !important;
border-color: lighten(#000,50);
border-radius: $border-radius;
}
#goog-wm-sb {
@extend .btn;
}

1
_assets/css/_mixins.scss
View File

@@ -40,6 +40,7 @@
// }
@mixin clearfix {
clear: both;
&::after {
clear: both;
content: "";

115
_assets/css/_page.scss
View File

@@ -31,16 +31,11 @@
}
.page__title {
margin-top: 0;
font-family: $serif;
}
.page__content {
ul, ol {
li + li {
margin-top: 0.5em;
}
}
}
.page__content {}
.page__hero {
position: relative;
@@ -129,55 +124,22 @@
}
}
p {
margin-bottom: 10px;
margin-bottom: 0;
}
}
/* Footer wrapper */
.footer-wrap {
@include container;
@include clearfix;
clear: both;
padding-bottom: 3em;
.copyright {
font-size: 14px;
}
footer {
@include grid(12,10);
@include prefix(12,1);
@include suffix(12,1);
@include breakpoint($small) {
@include grid(12,6);
@include prefix(12,3);
@include suffix(12,3);
}
@include breakpoint($x-large) {
@include grid(12,4.5);
@include prefix(12,4);
@include suffix(12,3.5);
}
}
.page__meta-title {
font-size: 14px;
margin-bottom: 10px;
text-transform: uppercase;
}
/* Follow links */
.follow {
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline-block;
}
li + li:before {
content: "";
padding-right: 5px;
}
}
/* Related articles list */
.related-articles {
/*
Related
========================================================================== */
.page__related {
@include grid(12,10);
@include prefix(12,1);
@include suffix(12,1);
@@ -192,64 +154,19 @@
@include prefix(12,4);
@include suffix(12,3.5);
}
h4 {
text-transform: uppercase;
margin-bottom: 0;
}
li {
margin-bottom: 0;
}
}
/*
Browser upgrade alert
========================================================================== */
.browser-upgrade {
background: #000;
text-align: center;
margin: 0 0 2em 0;
padding: 10px;
text-align: center;
color: #fff;
a {
color: #fff;
border-bottom: 1px dotted #fff;
text-decoration: none;
&:hover {
border-bottom: 1px solid #fff;
text-decoration: underline;
}
}
}
/*
Google search form
========================================================================== */
#goog-fixurl {
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
li {
list-style-type: none;
}
}
}
#goog-wm-qt {
width: auto;
margin-right: 10px;
margin-bottom: 20px;
padding: 8px 20px;
display: inline-block;
.page__related-title {
font-size: 14px;
background-color: #fff;
color: #000;
border-width: 2px !important;
border-style: solid !important;
border-color: lighten(#000,50);
border-radius: $border-radius;
}
#goog-wm-sb {
@extend .btn;
margin-bottom: 10px;
text-transform: uppercase;
}

3
_assets/css/_sidebar.scss
View File

@@ -4,9 +4,6 @@
.sidebar {
display: none;
a, a:hover {
border-bottom: 0 solid transparent;
}
img {
width: 100%;
}

33
_assets/css/_tables.scss Normal file
View File

@@ -0,0 +1,33 @@
/* ==========================================================================
TABLES
========================================================================== */
table {
width: 100%;
font-family: $sans-serif;
font-size: 0.8rem;
border-collapse: collapse;
border-bottom: 2px solid $border-color;
& + table {
margin-top: 1em;
}
}
thead {
border-bottom: 2px solid $border-color;
}
th {
padding: 0.5em;
font-weight: bold;
text-align: left;
}
td {
border-bottom: 1px solid $border-color;
padding: 0.5em;
}
tr, td, th {
vertical-align: middle;
}

20
_assets/css/_utilities.scss
View File

@@ -95,22 +95,6 @@ body:hover .visually-hidden button {
Alignment
========================================================================== */
.float-left {
clear: right;
@include breakpoint($large) {
float: left;
clear: none;
}
}
.float-right {
clear: left;
@include breakpoint($large) {
float: right;
clear: none;
}
}
/* clearfix */
.cf { clear: both; }
@@ -122,7 +106,7 @@ body:hover .visually-hidden button {
/* image align left */
.image-left {
.align-left {
display: block;
margin-left: auto;
margin-right: auto;
@@ -134,7 +118,7 @@ body:hover .visually-hidden button {
/* image align right */
.image-right {
.align-right {
display: block;
margin-left: auto;
margin-right: auto;

2
_assets/css/main.scss
View File

@@ -15,11 +15,13 @@
@import "base";
@import "utilities";
@import "tables";
@import "buttons";
@import "notices";
@import "masthead";
@import "navigation";
@import "toc"; // table of contents
@import "footer";
@import "syntax";
@import "forms";