Updated site styles

Signed-off-by: Valentin Popov <info@valentineus.link>
This commit is contained in:
Valentin Popov 2020-01-23 11:54:12 +04:00
parent d489110896
commit 20a83cfb4a
Signed by: Valentin Popov
GPG Key ID: 269A00ACA90A8EA3
7 changed files with 29 additions and 73 deletions

View File

@ -1,3 +1,2 @@
@import 'components/avatar';
@import 'components/core'; @import 'components/core';
@import 'components/header'; @import 'components/header';

View File

@ -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;

View File

@ -1,9 +0,0 @@
.avatar {
margin: auto;
max-width: 148px;
text-align: center;
img {
border-radius: 10px;
}
}

View File

@ -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;
}
}

View File

@ -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;
} }

View File

@ -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;
} }

View File

@ -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;
} }