0
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:
2024-09-12 13:11:16 +00:00
parent 70fa9c2033
commit 4ba339984d
9 changed files with 132 additions and 76 deletions

View File

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

View File

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

View File

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