Updated site styles
Signed-off-by: Valentin Popov <info@valentineus.link>
This commit is contained in:
parent
d489110896
commit
20a83cfb4a
@ -1,3 +1,2 @@
|
|||||||
@import 'components/avatar';
|
|
||||||
@import 'components/core';
|
@import 'components/core';
|
||||||
@import 'components/header';
|
@import 'components/header';
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
$color-bg-alt: rgba(0, 0, 0, .09);
|
$color-bg-alt: rgba(0, 0, 0, .09);
|
||||||
$color-bg: rgb(255, 255, 255);
|
$color-bg: rgb(255, 255, 255);
|
||||||
$color-blossom:rgb(0, 51, 153);
|
$color-blossom: rgb(0, 51, 153);
|
||||||
$color-fade: rgb(51, 102, 204);
|
$color-fade: rgb(51, 102, 204);
|
||||||
$color-html:rgb(255, 255, 255);
|
$color-html: rgb(255, 255, 255);
|
||||||
$color-text: rgb(0, 0, 0);
|
$color-text: rgb(0, 0, 0);
|
||||||
|
|
||||||
$font-family-sans-serif: '-apple-system', BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif;
|
$font-family-sans-serif: '-apple-system', BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif;
|
||||||
|
@ -1,9 +0,0 @@
|
|||||||
.avatar {
|
|
||||||
margin: auto;
|
|
||||||
max-width: 148px;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
@ -4,47 +4,11 @@
|
|||||||
*::after,
|
*::after,
|
||||||
*::before {
|
*::before {
|
||||||
@include text-size-adjust(100%);
|
@include text-size-adjust(100%);
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background-color: $color-html;
|
background-color: $color-html;
|
||||||
height: 100%;
|
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
flex: 75%;
|
|
||||||
padding-right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
border-left: 1px solid $color-bg-alt;
|
|
||||||
flex: 25%;
|
|
||||||
height: 100%;
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 684px) {
|
|
||||||
body {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
flex: 100%;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
border: 0;
|
|
||||||
display: none;
|
|
||||||
flex: 100%;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
@ -93,24 +93,24 @@ select {
|
|||||||
}
|
}
|
||||||
|
|
||||||
button,
|
button,
|
||||||
[type="button"],
|
[type='button'],
|
||||||
[type="reset"],
|
[type='reset'],
|
||||||
[type="submit"] {
|
[type='submit'] {
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
}
|
}
|
||||||
|
|
||||||
button::-moz-focus-inner,
|
button::-moz-focus-inner,
|
||||||
[type="button"]::-moz-focus-inner,
|
[type='button']::-moz-focus-inner,
|
||||||
[type="reset"]::-moz-focus-inner,
|
[type='reset']::-moz-focus-inner,
|
||||||
[type="submit"]::-moz-focus-inner {
|
[type='submit']::-moz-focus-inner {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:-moz-focusring,
|
button:-moz-focusring,
|
||||||
[type="button"]:-moz-focusring,
|
[type='button']:-moz-focusring,
|
||||||
[type="reset"]:-moz-focusring,
|
[type='reset']:-moz-focusring,
|
||||||
[type="submit"]:-moz-focusring {
|
[type='submit']:-moz-focusring {
|
||||||
outline: 1px dotted ButtonText;
|
outline: 1px dotted ButtonText;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -135,23 +135,23 @@ textarea {
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="checkbox"],
|
[type='checkbox'],
|
||||||
[type="radio"] {
|
[type='radio'] {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
[type='number']::-webkit-inner-spin-button,
|
||||||
[type="number"]::-webkit-outer-spin-button {
|
[type='number']::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="search"] {
|
[type='search'] {
|
||||||
-webkit-appearance: textfield;
|
-webkit-appearance: textfield;
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
[type="search"]::-webkit-search-decoration {
|
[type='search']::-webkit-search-decoration {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -26,7 +26,7 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin word-wrap() {
|
@mixin word-wrap {
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
@ -40,6 +40,7 @@ h4,
|
|||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
@include word-wrap;
|
@include word-wrap;
|
||||||
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
@ -126,7 +127,7 @@ code {
|
|||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre>code {
|
pre > code {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
@ -159,9 +160,9 @@ textarea {
|
|||||||
|
|
||||||
.button,
|
.button,
|
||||||
button,
|
button,
|
||||||
input[type="submit"],
|
input[type='submit'],
|
||||||
input[type="reset"],
|
input[type='reset'],
|
||||||
input[type="button"] {
|
input[type='button'] {
|
||||||
background-color: $color-blossom;
|
background-color: $color-blossom;
|
||||||
border: 1px solid $color-blossom;
|
border: 1px solid $color-blossom;
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
@ -206,7 +207,7 @@ input[type] {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"]:focus {
|
input[type='checkbox']:focus {
|
||||||
outline: 1px dotted $color-blossom;
|
outline: 1px dotted $color-blossom;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,13 +1,14 @@
|
|||||||
// Text Size Adjust
|
// Text Size Adjust
|
||||||
//
|
//
|
||||||
// The text-size-adjust CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.
|
// The text-size-adjust CSS property controls the text inflation algorithm used
|
||||||
|
// on some smartphones and tablets. Other browsers will ignore this property.
|
||||||
//
|
//
|
||||||
// Values: none | auto | <percentage>
|
// Values: none | auto | <percentage>
|
||||||
// Default: none
|
// Default: none
|
||||||
//
|
//
|
||||||
// https://drafts.csswg.org/css-size-adjust/#adjustment-control
|
// https://drafts.csswg.org/css-size-adjust/#adjustment-control
|
||||||
@mixin text-size-adjust($value: none) {
|
@mixin text-size-adjust($value: none) {
|
||||||
-webkit-text-size-adjust: $value;
|
|
||||||
-moz-text-size-adjust: $value;
|
-moz-text-size-adjust: $value;
|
||||||
-ms-text-size-adjust: $value;
|
-ms-text-size-adjust: $value;
|
||||||
|
-webkit-text-size-adjust: $value;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user