aboutsummaryrefslogtreecommitdiff
path: root/sass/css
diff options
context:
space:
mode:
Diffstat (limited to 'sass/css')
-rw-r--r--sass/css/_colors.scss3
-rw-r--r--sass/css/yaroslavps.scss117
2 files changed, 95 insertions, 25 deletions
diff --git a/sass/css/_colors.scss b/sass/css/_colors.scss
index 6ce5373..72adc47 100644
--- a/sass/css/_colors.scss
+++ b/sass/css/_colors.scss
@@ -2,11 +2,12 @@ $bg0: #000000;
$bg1: #0a0a0f;
$white: #e5e9f0;
$gray: #a1a6b2;
+$gray1: #33333a;
$red: #b73030;
$red1: #c45c5c;
$yellow: #b2872f;
$blue: #3f6e90;
$blue1: #63a9cc;
-$green: #7ea95a;
+$green: #6d974b;
$cyan: #7fac96;
$cyan1: #5b8277;
diff --git a/sass/css/yaroslavps.scss b/sass/css/yaroslavps.scss
index 8f6e89b..6f134e9 100644
--- a/sass/css/yaroslavps.scss
+++ b/sass/css/yaroslavps.scss
@@ -11,17 +11,12 @@ html, body {
padding: 0;
width: 100%;
min-height: 100vh;
- background-color: $bg1;
- background-image: url("/img/star_pattern.jpg");
- background-size: 25%;
+ background-color: #000;
+ background-image: url("/img/snowfall.gif");
+ font-size: 14px;
+ /*background-size: 25%;*/
}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
ul,
ol,
li,
@@ -37,7 +32,7 @@ li,
a,
p {
line-height: 1.4;
- font-family: $font_sans;
+ font-family: $font_mono;
}
h2,
@@ -63,13 +58,15 @@ h6 {
}
a, a:visited {
- color: $blue1;
+ color: $cyan1;
}
-a:hover {
- color: $blue;
+a:hover,
+a:hover:visited {
+ color: $cyan;
}
+.new-year,
h1 {
color: $red;
font-family: $font_serif;
@@ -90,6 +87,7 @@ hr {
border-style: solid;
border-color: $white;
border-width: 1px 0 0 0;
+ margin: 2em 0;
}
pre {
@@ -97,6 +95,7 @@ pre {
overflow-x: auto;
font-family: $font_mono;
color: $gray;
+ background-color: $bg0;
}
code {
@@ -106,7 +105,7 @@ code {
figcaption {
color: $gray;
- font-family: $font_sans;
+ font-family: $font_mono;
text-align: center;
}
@@ -114,8 +113,26 @@ video {
max-width: 90%;
}
+span.extra-link {
+ color: $gray;
+}
+
+h2 > span.extra-link {
+ font-size: 0.7em;
+}
+
+span.extra-link > a ~ a::before {
+ display: inline-block;
+ color: $white;
+ content: "|";
+ margin: 0 0.2em;
+ text-decoration: none;
+}
+
span.icon {
+ display: inline-block;
height: 1em;
+ text-decoration: none;
}
span.icon > img {
@@ -125,7 +142,7 @@ span.icon > img {
.publish-date {
color: $gray;
- font-family: $font_sans;
+ font-family: $font_mono;
font-weight: normal;
font-style: italic;
}
@@ -140,16 +157,18 @@ h2 > span.publish-date {
grid-template-columns: minmax(0, 5fr) 2fr;
grid-template-rows: min-content auto;
max-width: 1180px;
- margin: 0 auto;
- min-height: 100vh;
+ margin: 1em auto;
+ min-height: 90vh;
height: auto;
- background-color: $bg0;
+ background-color: $bg1;
+ padding: 1px;
+ border: 2px solid $gray1;
}
.landing-page-container {
grid-column-start: 1;
grid-column-end: 3;
- padding: 2em 4em;
+ padding: 2em 2em;
}
.landing-page-container > h1 {
@@ -175,12 +194,57 @@ h2 > span.publish-date {
padding: 0 2em;
}
+.landing-page-container,
+.content-container,
+.sidebar-container {
+ border: 2px solid $gray;
+}
+
+.new-year {
+ text-align: center;
+ color: $green;
+ font-size: 2em;
+}
+
+.nav-container {
+ text-align: center;
+}
+
+.nav-container > a ~ a::before {
+ display: inline-block;
+ color: $white;
+ content: " · ";
+ margin: 0 0.4em;
+ text-decoration: none;
+}
+
+.content-container {
+ min-height: 90vh;
+}
+
+.album-container {
+ padding: 1em 2em;
+}
+
+.album-container a {
+ text-decoration: none;
+}
+
+.album-container a img {
+ max-height: 180px;
+}
+
+a.see-more {
+ display: inline-block;
+ text-align: center;
+ font-weight: bold;
+}
+
.sidebar-container {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
- background-color: $bg1;
}
.sidebar-container span.icon {
@@ -246,14 +310,14 @@ h2 > span.publish-date {
.paginator a {
display: inline-block;
padding: 0.5em;
- background-color: $blue1;
+ background-color: $cyan1;
color: $bg0;
text-decoration: none;
}
.paginator a:hover {
- background-color: $blue;
- color: $white;
+ background-color: $cyan;
+ color: $bg0;
}
.cryptoqr {
@@ -276,7 +340,6 @@ h2 > span.publish-date {
.sidebar-container {
grid-row-start: auto;
grid-row-end: auto;
- background-color: #00000000;
}
}
@@ -309,6 +372,12 @@ h2 > span.publish-date {
text-decoration: none;
}
+ .main-container,
+ .header-container,
+ .content-container {
+ border: none;
+ }
+
.sidebar-container {
display: none;
}