aboutsummaryrefslogtreecommitdiff
path: root/sass
diff options
context:
space:
mode:
authorYaroslav de la Peña Smirnov <yps@yaroslavps.com>2022-03-29 00:13:28 +0300
committerYaroslav de la Peña Smirnov <yps@yaroslavps.com>2022-03-29 00:13:28 +0300
commita5ca94797945203c3167bb13b7779b396cad527d (patch)
treebeb8a49c3a7a5a79f845af024f37f5c832e03feb /sass
parentb623aec3cbe0ea2edbecffc16e58296646ba5353 (diff)
downloadyaroslavps.com-a5ca94797945203c3167bb13b7779b396cad527d.tar.gz
yaroslavps.com-a5ca94797945203c3167bb13b7779b396cad527d.zip
Minor style changes and improvements
Diffstat (limited to 'sass')
-rw-r--r--sass/css/_colors.scss4
-rw-r--r--sass/css/yaroslavps.scss50
2 files changed, 38 insertions, 16 deletions
diff --git a/sass/css/_colors.scss b/sass/css/_colors.scss
index 72adc47..e633b53 100644
--- a/sass/css/_colors.scss
+++ b/sass/css/_colors.scss
@@ -1,8 +1,8 @@
$bg0: #000000;
$bg1: #0a0a0f;
$white: #e5e9f0;
-$gray: #a1a6b2;
-$gray1: #33333a;
+$gray: #7c818c;
+$gray1: #5c5c64;
$red: #b73030;
$red1: #c45c5c;
$yellow: #b2872f;
diff --git a/sass/css/yaroslavps.scss b/sass/css/yaroslavps.scss
index 90209b3..8ddc740 100644
--- a/sass/css/yaroslavps.scss
+++ b/sass/css/yaroslavps.scss
@@ -12,10 +12,11 @@ html, body {
width: 100%;
min-height: 100vh;
font-size: 14px;
- background-color: #000;
- background-image: url("/img/snowfall.gif");
- background-attachment: fixed;
- //background-size: 300px;
+ background: linear-gradient(to left, #000, #18214a 30%, #18214a 70%, #000);
+ // background: no-repeat center fixed url("/img/wave.jpg");
+ // background: #000 repeat center/20% fixed url("/img/stars.jpg");
+ // background-image: linear-gradient(to left, #00000000, #18214a 40%, #18214a 60%, #00000000), url("/img/stars.jpg");
+ // background-size: auto, 20%;
}
ul,
@@ -157,20 +158,18 @@ span.publish-date {
.main-container {
display: grid;
grid-template-columns: minmax(0, 5fr) 2fr;
- grid-template-rows: min-content auto;
+ grid-template-rows: min-content;
max-width: 1180px;
margin: 1em auto;
min-height: 90vh;
height: auto;
- background-color: $bg1;
- padding: 1px;
- border: 2px solid $gray1;
+ border: 2px outset $gray1;
}
.landing-page-container {
grid-column-start: 1;
grid-column-end: 3;
- padding: 2em 2em;
+ padding: 2em;
}
.landing-page-container > h1 {
@@ -198,8 +197,10 @@ span.publish-date {
.landing-page-container,
.content-container,
-.sidebar-container {
- border: 2px solid $gray;
+.sidebar-container,
+.foot-container {
+ border: 2px outset $gray1;
+ background-color: $bg1;
}
.new-year {
@@ -220,6 +221,15 @@ span.publish-date {
text-decoration: none;
}
+.foot-container {
+ text-align: center;
+ grid-column-start: 1;
+ grid-column-end: 3;
+ grid-row-start: 3;
+ grid-row-end: 3;
+ padding: 2em;
+}
+
.content-container {
min-height: 90vh;
}
@@ -244,9 +254,10 @@ a.see-more {
.sidebar-container {
grid-row-start: 1;
- grid-row-end: 3;
+ grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 3;
+ padding-bottom: 2em;
}
.sidebar-container span.icon {
@@ -315,10 +326,11 @@ a.see-more {
.paginator a {
display: inline-block;
- padding: 0.5em;
+ padding: 0.3em;
background-color: $cyan1;
color: $bg0;
text-decoration: none;
+ border: 2px outset $cyan1;
}
.paginator a:hover {
@@ -331,11 +343,20 @@ a.see-more {
max-width: 240px;
}
+pre.literal {
+ color: $gray;
+}
+
@media (max-width: 768px){
.landing-page-container {
font-size: 1em;
}
+ .main-container {
+ padding: 0;
+ border: none;
+ }
+
.header-container,
.content-container,
.sidebar-container {
@@ -343,7 +364,8 @@ a.see-more {
grid-column-end: 3;
}
- .sidebar-container {
+ .sidebar-container,
+ .foot-container {
grid-row-start: auto;
grid-row-end: auto;
}