mirror of
https://github.com/valentineus/popov.link.git
synced 2025-07-04 08:30:27 +03:00
Updated the main page and page structures
This commit is contained in:
@ -6,16 +6,29 @@
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: $font-family-base;
|
||||
font-family:
|
||||
"Jost",
|
||||
-apple-system,
|
||||
blinkmacsystemfont,
|
||||
"Segoe UI",
|
||||
roboto,
|
||||
"Helvetica Neue",
|
||||
arial,
|
||||
"Noto Sans",
|
||||
sans-serif,
|
||||
"Apple Color Emoji",
|
||||
"Segoe UI Emoji",
|
||||
"Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
font-size: 62.5%;
|
||||
min-height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $color-bg;
|
||||
color: $color-text;
|
||||
font-size: $font-size-base;
|
||||
background-color: $colorBg;
|
||||
color: $colorText;
|
||||
font-size: $fontSizeBase;
|
||||
font-synthesis: weight style small-caps;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
@ -28,7 +41,7 @@ body {
|
||||
|
||||
@media (width <=684px) {
|
||||
body {
|
||||
font-size: $font-size-base * 0.85;
|
||||
font-size: $fontSizeBase * 0.85;
|
||||
padding: 4em 1em 2em;
|
||||
}
|
||||
}
|
||||
@ -84,16 +97,16 @@ sup {
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: $color-blossom;
|
||||
border-color: $colorBlossom;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-blossom;
|
||||
color: $colorBlossom;
|
||||
text-decoration: inherit;
|
||||
transition: color 0.25s;
|
||||
|
||||
&:visited {
|
||||
color: $color-blossom;
|
||||
color: $colorBlossom;
|
||||
}
|
||||
|
||||
&:active,
|
||||
@ -114,8 +127,8 @@ li {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background-color: $color-bg-alt;
|
||||
border-left: 5px solid $color-blossom;
|
||||
background-color: $colorBgAlt;
|
||||
border-left: 5px solid $colorBlossom;
|
||||
margin-bottom: 2.5rem;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
@ -136,9 +149,9 @@ video {
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: $color-bg-alt;
|
||||
background-color: $colorBgAlt;
|
||||
border-radius: 4px;
|
||||
border: 1px solid $color-bg-alt;
|
||||
border: 1px solid $colorBgAlt;
|
||||
display: block;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 2.5rem;
|
||||
@ -150,7 +163,7 @@ pre {
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
background-color: $color-bg-code;
|
||||
background-color: $colorBgCode;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9em;
|
||||
padding: 0 0.2em;
|
||||
@ -172,7 +185,7 @@ table {
|
||||
|
||||
td,
|
||||
th {
|
||||
border-bottom: 1px dashed $color-blossom;
|
||||
border-bottom: 1px dashed $colorBlossom;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
@ -185,11 +198,11 @@ button,
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
background-color: $color-blossom;
|
||||
border: 1px solid $color-blossom;
|
||||
background-color: $colorBlossom;
|
||||
border: 1px solid $colorBlossom;
|
||||
border-radius: 1px;
|
||||
box-sizing: border-box;
|
||||
color: $color-bg;
|
||||
color: $colorBg;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
@ -204,9 +217,9 @@ input[type="button"] {
|
||||
|
||||
&:focus:enabled,
|
||||
&:hover:enabled {
|
||||
background-color: $color-fade;
|
||||
border-color: $color-fade;
|
||||
color: $color-bg;
|
||||
background-color: $colorFade;
|
||||
border-color: $colorFade;
|
||||
color: $colorBg;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
@ -214,23 +227,23 @@ input[type="button"] {
|
||||
textarea,
|
||||
select,
|
||||
input {
|
||||
background-color: $color-bg-alt;
|
||||
border: 1px solid $color-bg-alt;
|
||||
background-color: $colorBgAlt;
|
||||
border: 1px solid $colorBgAlt;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
color: $color-text;
|
||||
color: $colorText;
|
||||
margin-bottom: 10px;
|
||||
padding: 6px 10px;
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $color-blossom;
|
||||
border: 1px solid $colorBlossom;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"]:focus {
|
||||
outline: 1px dotted $color-blossom;
|
||||
outline: 1px dotted $colorBlossom;
|
||||
}
|
||||
|
||||
label,
|
||||
|
@ -1,7 +1,7 @@
|
||||
header {
|
||||
background-color: $color-bg;
|
||||
border-bottom: 1px solid $color-header;
|
||||
box-shadow: 0 5px 5px $color-bg;
|
||||
background-color: $colorBg;
|
||||
border-bottom: 1px solid $colorHeader;
|
||||
box-shadow: 0 5px 5px $colorBg;
|
||||
left: 0;
|
||||
line-height: 3.5em;
|
||||
opacity: 0.975;
|
||||
@ -17,11 +17,11 @@ nav {
|
||||
text-align: right;
|
||||
|
||||
a {
|
||||
color: $color-text;
|
||||
color: $colorText;
|
||||
padding: 0 1em;
|
||||
|
||||
&:visited {
|
||||
color: $color-text;
|
||||
color: $colorText;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,22 +1,8 @@
|
||||
$color-bg: #212529;
|
||||
$color-bg-alt: hwb(0deg 0% 100% / 20%);
|
||||
$color-bg-code: #3b3d42;
|
||||
$color-blossom: #6da13f;
|
||||
$color-fade: #598332;
|
||||
$color-header: #1b1f22;
|
||||
$color-text: #dee2e6;
|
||||
$font-family-base:
|
||||
"Jost",
|
||||
-apple-system,
|
||||
blinkmacsystemfont,
|
||||
"Segoe UI",
|
||||
roboto,
|
||||
"Helvetica Neue",
|
||||
arial,
|
||||
"Noto Sans",
|
||||
sans-serif,
|
||||
"Apple Color Emoji",
|
||||
"Segoe UI Emoji",
|
||||
"Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
$font-size-base: 1.8rem;
|
||||
$colorBg: #212529;
|
||||
$colorBgAlt: hwb(0deg 0% 100% / 20%);
|
||||
$colorBgCode: #3b3d42;
|
||||
$colorBlossom: #6da13f;
|
||||
$colorFade: #598332;
|
||||
$colorHeader: #1b1f22;
|
||||
$colorText: #dee2e6;
|
||||
$fontSizeBase: 1.8rem;
|
||||
|
Reference in New Issue
Block a user