// filename : style.less
// description : the stylesheet for well-being.link
// author : Yuta Sato (a.k.a usatox)
// modified : 2015.06.30
// Dependencies
// ------------
@import "../bower_components/preboot/less/normalize.less";
@import "../bower_components/preboot/less/preboot.less";
// Shared variables
// ----------------
// Define the color palette.
@red : #f44336;
@pink : #e91e63;
@purple : #9c27b0;
@deep-purple : #673ab7;
@indigo : #3f51b5;
@blue : #2196f3;
@light-blue : #03a9f4;
@cyan : #00bcd4;
@teal : #009688;
@green : #4caf50;
@light-green : #8bc34a;
@lime : #cddc39;
@yellow : #ffeb3b;
@amber : #ffc107;
@orange : #ff9800;
@deep-orange : #ff5722;
@brown : #795548;
@grey : #9e9e9e;
@blue-grey : #607d8b;
@black : #000000;
@white : #ffffff;
// Setup the preboot variables.
@brand-primary: @teal;
@brand-success: @green;
@brand-warning: @amber;
@brand-danger: @red;
@brand-info: @light-blue;
@body-background: darken(@white, 10);
@text-color: lighten(@black, 25);
@link-color: @brand-primary;
@link-color-hover: @link-color;
@font-size-base: 16px;
@font-family-sans-serif: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
@font-family-serif: 'Hiragino Mincho Pro','MS PMincho',serif;
@font-family-base: @font-family-sans-serif;
@grid-float-break-point: 768px;
@grid-column-padding: 0;
@grid-columns: 12;
// Define the other shared variables.
@content-width: 978px;
@mobile-width: @grid-float-break-point;
@button-background: @blue;
@button-text-color: @white;
@button-shadow-color: @grey;
@button-background-disabled: lighten(@button-background, 20);
@button-text-color-disabled: lighten(@button-text-color, 20);
@border-color: @black-30;
// Base rules
// ----------
* {
.box-sizing(border-box);
}
html {
height: 100%;
}
body {
margin: 0;
display: table;
width:100%;
height: 100%;
font-size: @font-size-base;
font-family: @font-family-base;
color: @text-color;
background: @body-background;
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
}
input[type="submit"], input[type="button"], button {
// See `.button` class in module rules.
}
input[type="text"], input[type="search"], input[type="tel"], input[type="url"],
input[type="email"], input[type="password"], input[type="datetime"], input[type="date"],
input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"],
input[type="number"], input[type="range"], input[type=""], input[type="file"],
textarea, select {
border: 1px solid @border-color;
}
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-color-hover;
text-decoration: underline;
}
}
ul, ol {
padding: 0;
list-style-type: none;
list-style-position: inside;
}
blockquote {
margin-left: 0;
padding: 8px 16px;
background: @white;
border: 1px solid @border-color;
}
// Layout rules
// ------------
.header {
display: table-row;
height: 240px;
background: @white url(../images/header-background.jpg) no-repeat center center;
background-size: cover;
.content {
height: 240px;
}
.header-title-wrapper {
.make-column(7);
display: table;
height: 100%;
}
.header-title {
display: table-cell;
vertical-align: middle;
}
.header-title-link {
text-shadow: 0px 0px 3px @black;
text-decoration: none;
}
.header-title-main {
color: @white;
font-size: @font-size-large * 1.5;
}
.header-title-sub {
color: @white;
font-size: @font-size-small * 1.35;
}
.header-searchform {
.make-column(4);
.make-column-offset(1);
padding: 1em 0;
}
@media (max-width: @mobile-width) {
.content {
height: auto;
}
.header-title-wrapper {
display: block;
}
.header-title {
display: block;
text-align: center;
}
.header-searchform {
margin: 0 auto;
max-width: 320px;
}
}
}
.navmenu {
display: table-row;
color: white;
background: @brand-primary;
.navmenu-toggle, .navmenu-toggle-label {
display: none;
}
ul {
display: table;
table-layout: fixed;
width: 100%;
margin: 0;
padding: 0;
}
li {
display: table-cell;
text-align: center;
}
a {
display: block;
padding: 16px;
color: inherit;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-decoration: none;
.transition(all .5s ease);
&:hover {
background-color: lighten(@brand-primary, 10);
}
}
@media (max-width: @mobile-width) {
.content {
width: 100%;
}
.navmenu-toggle-label {
display: block;
padding: 8px 0;
text-align: center;
cursor: pointer;
&:after {
position: absolute;
right: 0;
padding: 0 16px;
content: '\002228';
font-size: @font-size-small;
}
}
ul {
display: block;
overflow: hidden;
max-height: 0;
// .transition(max-height .5s ease);
}
li {
display: list-item;
margin: 0;
padding-right: 0;
}
.navmenu-toggle:checked {
& ~ label {
color: darken(@white, 20);
background-color: darken(@brand-primary, 20);
&:after {
content: '\002227';
}
}
& ~ label ~ ul {
max-height: 1000px;
.transition(max-height .5s ease);
}
}
} // @media
}
.main {
display: table-row;
height: 100%;
}
.footer {
display: table-row;
}
// `.content` indicates the inner content area
// that centered in the parent container,
// And it uses as follows:
// ```
//
// ...
//
// ```
.content {
.clearfix();
position: relative;
margin: 0 auto;
width: 93.75%;
max-width: @content-width;
}
// Module rules
// ------------
.eyecatch {
position: relative;
img {
width: 100%;
}
}
.primary {
.make-column(9);
padding: 1.5em 0;
}
.sidebar {
.make-column-offset(1);
.make-column(2);
padding: 1.5em 0;
.pickup-menu {
border-left: 4px solid @brand-primary;
p {
margin: 0 0 1em 0;
padding: 0;
}
a {
display: block;
padding: 1em;
color: @brand-primary;
font-weight: bold;
.transition(all .5s ease);
&:hover {
text-decoration: none;
background: @white;
}
}
}
}
.searchform {
label {
display: none;
white-space: nowrap;
}
input[name="s"] {
width: 100%;
}
table {
width: 100%;
}
td {
vertical-align: middle;
}
td:last-child {
padding-left: 8px;
}
}
.wellcome-message {
padding: 1em;
color: @white;
background: @blue-grey;
}
.button {
display: inline-block;
padding: 0 1em;
height: 32px;
line-height: 32px;
white-space: nowrap;
text-align: center;
text-decoration: none;
border: 0;
border-radius: 2px;
cursor: pointer;
font-weight: bold;
font-size: @font-size-small;
color: @button-text-color!important;
background-color: @button-background;
.box-sizing(content-box);
// .box-shadow(0px 1px 2px @button-shadow-color);
.transition(all .5s ease);
&.hover {
text-decoration: none!important;
}
&.disabled {
color: @button-text-color-disabled;
background-color: @button-background-disabled;
}
&.red {
background-color: @red;
}
&.blue {
background-color: @blue;
}
&.brown {
background-color: @brown;
}
&.yellow {
background-color: @amber;
}
&.orange {
background-color: @orange;
}
&.green {
background-color: @green;
}
&.pink {
background-color: @pink;
}
}
// **Unify button styles**.
a.button, input[type="submit"], input[type="button"], button {
.button;
&:hover { .button.hover; }
&:disabled { .button.disabled; }
}
.back-to-top {
z-index: 9999;
position: fixed;
bottom: 16px;
right: 16px;
.button;
}
.page .primary {
h2 {
margin-top: 0;
font-size: @font-size-large * 1.5;
border-bottom: 4px solid @brand-primary;
}
h3 {
font-size: @font-size-large;;
border-bottom: 1px dotted @brand-primary;
}
table {
min-width: 75%;
border-spacing: 0;
border-collapse: collapse;
// border-top: 1px solid @white;
// border-left: 1px solid @white;
color: @white;
}
th {
padding: .5em 1em;
text-align: left;
background: darken(@teal, 10%);
border-right: 1px solid @body-background;
border-bottom: 1px solid @body-background;
}
td {
padding: .5em 1em;
background: @teal;
border-right: 1px solid @body-background;
border-bottom: 1px solid @body-background;
}
}
/* -- post classes -- */
.post {
h1 {
}
h2 {
}
.pager {
display: table;
table-layout: fixed;
width: 100%;
margin: 16px 0;
border-top: 1px solid @border-color;
a {
display: table-cell;
text-align: center;
padding: 16px;
}
}
}
.post-header {
padding-left: 16px;
border-left: 4px solid @brand-primary;
}
.post-header-title {
font-size: @font-size-large;
a {
color: @text-color;
}
}
.post-header-meta {
color: @black-70;
font-size: @font-size-small;
}
.post-header-meta-author {
display: none;
}
.post-body {
margin-top: 1em;
border-top: 1px solid @border-color;
}
.post-footer {
border-top: 1px dotted @border-color;
}
/* -- wp classes -- */
.alignright {
display: inline;
float: right;
margin: 0 0 16px 16px;
@media (max-width: @mobile-width) {
& {
display: block;
float: none;
margin: 16px auto;
}
}
}
.alignleft {
display: inline;
float: left;
margin: 0 16px 16px 0;
@media (max-width: @mobile-width) {
& {
display: block;
float: none;
margin: 16px auto;
}
}
}
.aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
}
.wp-caption {
padding: 8px;
// background-color: lighten(@color-silver, 20);
// border: 1px solid @color-silver;
}
.wp-caption-text {
font-size: @font-size-small;
}
.sticky {
}
.gallery-caption {
}
.bypostauthor {
}