aboutsummaryrefslogtreecommitdiff
path: root/sass/css
diff options
context:
space:
mode:
authorYaroslav <contact@yaroslavps.com>2020-10-02 02:09:59 +0300
committerYaroslav <contact@yaroslavps.com>2020-10-02 02:09:59 +0300
commitec29bebbda2a278e78da1a0f91bd7a8e100d5dd7 (patch)
tree77d0d4e47ea085db02405530b6fe3885e7fd7c31 /sass/css
parent358c7b06be5ac06de4cc10c85093ffac8044458a (diff)
downloadyaroslavps.com-ec29bebbda2a278e78da1a0f91bd7a8e100d5dd7.tar.gz
yaroslavps.com-ec29bebbda2a278e78da1a0f91bd7a8e100d5dd7.zip
Style changes
Mainly changes to the color palette of the site, but also added a background image and increased the maximum width of the main container. Also added separate links for the RSS feeds of the weblog and recipe book.
Diffstat (limited to 'sass/css')
-rw-r--r--sass/css/_colors.scss11
-rw-r--r--sass/css/_fonts.scss7
-rw-r--r--sass/css/yaroslavps.scss58
3 files changed, 51 insertions, 25 deletions
diff --git a/sass/css/_colors.scss b/sass/css/_colors.scss
index a24f933..6ce5373 100644
--- a/sass/css/_colors.scss
+++ b/sass/css/_colors.scss
@@ -1,7 +1,12 @@
$bg0: #000000;
-$bg1: #1b1e25;
+$bg1: #0a0a0f;
$white: #e5e9f0;
$gray: #a1a6b2;
-$magenta: #9c6992;
+$red: #b73030;
+$red1: #c45c5c;
+$yellow: #b2872f;
+$blue: #3f6e90;
+$blue1: #63a9cc;
+$green: #7ea95a;
$cyan: #7fac96;
-$dark_cyan: #5b8277;
+$cyan1: #5b8277;
diff --git a/sass/css/_fonts.scss b/sass/css/_fonts.scss
index 686bc1b..f2d9a6d 100644
--- a/sass/css/_fonts.scss
+++ b/sass/css/_fonts.scss
@@ -1,8 +1,3 @@
-@font-face {
- font-family: "IBM Plex Mono";
- src: url("/fonts/IBMPlexMono-Regular.ttf");
-}
-
$font_sans: Verdana, Geneva, sans-serif;
$font_serif: Georgia, serif;
-$font_mono: "IBM Plex Mono", monospace;
+$font_mono: monospace;
diff --git a/sass/css/yaroslavps.scss b/sass/css/yaroslavps.scss
index 93d87f9..46d22b0 100644
--- a/sass/css/yaroslavps.scss
+++ b/sass/css/yaroslavps.scss
@@ -6,6 +6,9 @@ html, body {
width: 100%;
min-height: 100vh;
background-color: $bg1;
+ background-image: url("/img/star_pattern.jpg");
+ background-attachment: fixed;
+ background-size: 25%;
}
h1,
@@ -30,29 +33,42 @@ p {
font-family: $font_sans;
}
-a, a:visited {
- color: $cyan;
- text-decoration: none;
-}
-
-a:hover {
- color: $dark_cyan;
-}
-
-h1,
h2,
h3,
h4,
h5,
h6,
-h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a {
font-family: $font_serif;
- font-weight: normal;
+ font-weight: 500;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+ color: $red1;
+}
+
+a, a:visited {
+ color: $blue1;
+}
+
+a:hover {
+ color: $blue;
+}
+
+h1 {
+ color: $red;
+ font-family: $font_serif;
+ font-variant-caps: small-caps;
+ font-weight: 500;
+ font-size: 2.5em;
}
hr {
@@ -65,6 +81,7 @@ pre {
padding: 1em 0;
overflow-x: auto;
font-family: $font_mono;
+ color: $gray;
}
code {
@@ -97,7 +114,7 @@ h2 > span.publish-date {
display: grid;
grid-template-columns: minmax(0, 5fr) 2fr;
grid-template-rows: min-content auto;
- max-width: 1080px;
+ max-width: 1180px;
margin: 0 auto;
min-height: 100vh;
height: auto;
@@ -139,6 +156,7 @@ h2 > span.publish-date {
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
+ background-color: $bg1;
}
.sidebar-container span.icon {
@@ -147,15 +165,20 @@ h2 > span.publish-date {
}
.sticky-wrapper {
- padding: 1em;
+ padding: 1em 2em;
position: sticky;
top: 1em;
+ max-height: 100vh;
}
.links-container {
text-align: center;
}
+.links-container a {
+ text-decoration: none;
+}
+
.post-container {
padding: 1em 2em;
}
@@ -172,12 +195,13 @@ h2 > span.publish-date {
.paginator a {
display: inline-block;
padding: 0.5em;
- background-color: $cyan;
+ background-color: $blue1;
color: $bg0;
+ text-decoration: none;
}
.paginator a:hover {
- background-color: $dark_cyan;
+ background-color: $blue;
color: $white;
}
@@ -185,12 +209,14 @@ h2 > span.publish-date {
.landing-page-container {
font-size: 1em;
}
+
.header-container,
.content-container,
.sidebar-container {
grid-column-start: 1;
grid-column-end: 3;
}
+
.sidebar-container {
grid-row-start: auto;
grid-row-end: auto;