aboutsummaryrefslogtreecommitdiff
path: root/sass/css
diff options
context:
space:
mode:
Diffstat (limited to 'sass/css')
-rw-r--r--sass/css/_colors.scss2
-rw-r--r--sass/css/yaroslavps.scss186
2 files changed, 65 insertions, 123 deletions
diff --git a/sass/css/_colors.scss b/sass/css/_colors.scss
index e633b53..f3667bb 100644
--- a/sass/css/_colors.scss
+++ b/sass/css/_colors.scss
@@ -1,6 +1,6 @@
$bg0: #000000;
$bg1: #0a0a0f;
-$white: #e5e9f0;
+$white: #fcf8e2;
$gray: #7c818c;
$gray1: #5c5c64;
$red: #b73030;
diff --git a/sass/css/yaroslavps.scss b/sass/css/yaroslavps.scss
index ff9c239..df76b80 100644
--- a/sass/css/yaroslavps.scss
+++ b/sass/css/yaroslavps.scss
@@ -13,9 +13,6 @@ html, body {
min-height: 100vh;
font-size: 14px;
background: $bg0;
- // background: linear-gradient(to left, #000, #18214a 30%, #18214a 70%, #000);
- // background: #000 repeat center fixed url("/img/grid.png");
- // background-size: auto, 20%;
}
ul,
@@ -35,6 +32,23 @@ p {
line-height: 1.4;
font-family: $font_mono;
}
+.new-year,
+h1 {
+ color: $red;
+ font-family: $font_serif;
+ font-variant-caps: small-caps;
+ font-weight: 500;
+ font-size: 2.5em;
+}
+
+h2 {
+ font-size: 1.7em;
+}
+
+h3 {
+ font-size: 1.5em;
+}
+
h2,
h3,
@@ -55,7 +69,7 @@ h3,
h4,
h5,
h6 {
- color: $red1;
+ color: $white;
}
a, a:visited {
@@ -67,23 +81,6 @@ a:hover:visited {
color: $cyan;
}
-.new-year,
-h1 {
- color: $red;
- font-family: $font_serif;
- font-variant-caps: small-caps;
- font-weight: 500;
- font-size: 2.5em;
-}
-
-h2 {
- font-size: 1.8em;
-}
-
-h3 {
- font-size: 1.5em;
-}
-
hr {
border-style: solid;
border-color: $white;
@@ -155,10 +152,7 @@ span.publish-date {
}
.main-container {
- display: grid;
- grid-template-columns: minmax(0, 5fr) 2fr;
- grid-template-rows: min-content;
- max-width: 1180px;
+ max-width: 990px;
margin: 1em auto;
min-height: 90vh;
height: auto;
@@ -166,58 +160,43 @@ span.publish-date {
border-bottom: 1px solid $white;
}
-.landing-page-container {
- grid-column-start: 1;
- grid-column-end: 3;
- padding: 2em;
+.landing-header {
+ text-align: center;
}
-.landing-page-container > h1 {
+.nav-container {
+ padding: 0.2em;
text-align: center;
- font-size: 3em;
+ list-style: none;
}
-.landing-page-container > .links-container {
- padding: 0.5em;
+.nav-container a {
+ background: #000;
}
-.landing-page-container > .links-container > a {
+.nav-container > li {
display: inline-block;
- font-size: 1.5em;
- margin: auto 1em;
}
-.landing-page-container > .links-container > a > span.icon {
- font-size: 1.5em;
+.nav-container > li ~ li::before {
+ display: inline-block;
+ color: $white;
+ content: " · ";
+ margin: 0 0.4em;
+ text-decoration: none;
}
.header-container {
padding: 0 2em;
}
-.landing-page-container,
-.content-container,
-.sidebar-container {
- background-color: $bg0;
-}
-
-.foot-container {
- background: #000 repeat center fixed url("/img/grid.png");
- border-top: 1px solid $white;
-}
-
-.foot-container p {
- display: inline-block;
- background: $bg0;
+.header-container .nav-container {
+ text-align: left;
}
-.foot-container p::after {
- content: '\A';
- white-space: pre;
-}
-
-.sidebar-container {
- border-left: 1px solid $white;
+.content-container {
+ background-color: $bg0;
+ min-height: 90vh;
}
.new-year {
@@ -226,31 +205,6 @@ span.publish-date {
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;
-}
-
-.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;
-}
-
.album-container {
padding: 1em 2em;
}
@@ -264,39 +218,10 @@ span.publish-date {
}
a.see-more {
- display: inline-block;
- text-align: center;
font-weight: bold;
}
-.sidebar-container {
- grid-row-start: 1;
- grid-row-end: 2;
- grid-column-start: 2;
- grid-column-end: 3;
- padding-bottom: 2em;
-}
-
-.sidebar-container span.icon {
- font-size: 2em;
- margin: auto 0.5em;
-}
-
-.sticky-wrapper {
- padding: 1em 2em;
- position: sticky;
- top: 1em;
- max-height: 100vh;
-}
-
-.links-container {
- text-align: center;
-}
-
-.links-container a {
- text-decoration: none;
-}
-
+.landing-container,
.post-container {
padding: 1em 2em;
overflow: auto;
@@ -312,15 +237,11 @@ a.see-more {
display: block;
margin: 0 auto;
max-width: 100%;
- max-height: 40vh;
-}
-
-.post-container img {
- max-width: 100%;
+ max-height: 50vh;
}
.post-container.full img:nth-of-type(1) {
- max-height: 60vh;
+ max-height: 70vh;
}
.footnote-definition {
@@ -364,6 +285,23 @@ pre.literal {
color: $gray;
}
+.foot-container {
+ background: #000 repeat center fixed url("/img/grid.png");
+ border-top: 1px solid $white;
+ text-align: center;
+ padding: 1em;
+}
+
+.foot-container p {
+ display: inline-block;
+ background: $bg0;
+}
+
+.foot-container p::after {
+ content: '\A';
+ white-space: pre;
+}
+
@media (max-width: 768px){
.landing-page-container {
font-size: 1em;
@@ -432,8 +370,12 @@ pre.literal {
border: none;
}
- .sidebar-container {
- display: none;
+ .foot-container p {
+ background: none;
+ }
+
+ .nav-container a {
+ background: none;
}
.header-container,