From 604dcfe244ab8f6913db9dec3de5796ad32f43f5 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 11 Jun 2022 16:26:47 +0200
Subject: Removed private section, various improvements
---
assets/css/_base.scss | 1 +
assets/css/components/_card.scss | 2 +-
assets/css/components/_hnav.scss | 20 +++++++++----------
assets/css/layouts/_card-list.scss | 39 ++++++++++++++++++++++++--------------
assets/css/layouts/_container.scss | 11 +++++++++++
assets/css/style.scss | 1 +
6 files changed, 48 insertions(+), 26 deletions(-)
create mode 100644 assets/css/layouts/_container.scss
(limited to 'assets/css')
diff --git a/assets/css/_base.scss b/assets/css/_base.scss
index dd24fed..ac6b989 100644
--- a/assets/css/_base.scss
+++ b/assets/css/_base.scss
@@ -9,6 +9,7 @@ code {
body {
box-sizing: border-box;
+ height: auto;
min-height: 100%;
}
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index f8f106d..6c15145 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -135,7 +135,7 @@
position: relative;
width: 100%;
height: 2em;
- padding-top: 46%;
+ padding-top: 50%;
}
@include iro.bem-elem('thumbnail-img') {
diff --git a/assets/css/components/_hnav.scss b/assets/css/components/_hnav.scss
index 4097373..6eea345 100644
--- a/assets/css/components/_hnav.scss
+++ b/assets/css/components/_hnav.scss
@@ -10,20 +10,18 @@
@include iro.props-store((
--dims: (
- --margin-top: fn.global-dim(--size --600),
- --gap: 2em,
- --pad-y: .5em
+ --gap: 1.5em,
+ --margin-top: fn.global-dim(--paragraph --margin-top),
+ --margin-bottom: fn.global-dim(--size --900),
)
), 'dims');
@include iro.bem-component(iro.props-namespace()) {
- display: flex;
- gap: fn.dim(--gap);
- align-items: baseline;
- margin-top: fn.dim(--margin-top);
- padding: fn.dim(--pad-y) 0 0;
- border-width: 1px 0 0;
- border-style: solid;
- border-color: fn.color(--border);
+ display: flex;
+ gap: fn.dim(--gap);
+ align-items: baseline;
+ margin: fn.dim(--margin-top) 0 fn.dim(--margin-bottom);
+ padding-top: fn.dim(--margin-top);
+ border-top: 1px solid fn.color(--border);
}
}
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index 96f9060..6d388e6 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -6,7 +6,19 @@
--dims: (
--margin-top: fn.global-dim(--size --600),
--spacing: fn.global-dim(--size --200),
- --col-width: 17em,
+ --gap: fn.global-dim(--size --25),
+ --grid: (
+ --gap: fn.global-dim(--size --75),
+ --col-width: fn.global-dim(--size --3400),
+ ),
+ --small-gallery: (
+ --gap: fn.global-dim(--size --250),
+ --col-width: fn.global-dim(--size --2800),
+ ),
+ --gallery: (
+ --gap: fn.global-dim(--size --250),
+ --col-width: fn.global-dim(--size --3400),
+ )
)
), 'dims');
@@ -14,24 +26,23 @@
margin-top: fn.dim(--margin-top);
font-size: 1rem;
+ @include iro.bem-elem('header') {
+ margin-top: fn.dim(--margin-top);
+ }
+
@include iro.bem-elem('cards') {
display: flex;
flex-direction: column;
- gap: 2px;
+ gap: fn.dim(--gap);
margin-top: fn.dim(--spacing);
- @include iro.bem-modifier('grid', 'gallery') {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(fn.dim(--col-width), 1fr));
- align-items: start;
- }
-
- @include iro.bem-modifier('grid') {
- gap: 6px;
- }
-
- @include iro.bem-modifier('gallery') {
- gap: 20px;
+ @each $mode in 'grid' 'small-gallery' 'gallery' {
+ @include iro.bem-modifier($mode) {
+ display: grid;
+ align-items: start;
+ grid-template-columns: repeat(auto-fill, minmax(fn.dim('--#{$mode}' --col-width), 1fr));
+ gap: fn.dim('--#{$mode}' --gap);
+ }
}
}
}
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
new file mode 100644
index 0000000..10d6832
--- /dev/null
+++ b/assets/css/layouts/_container.scss
@@ -0,0 +1,11 @@
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-namespace('container') {
+ @include iro.props-store((
+ --dims: (
+ --width: iro.fn-px-to-rem(730px),
+ --width-50: iro.fn-px-to-rem(380px),
+ )
+ ), 'dims');
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 1184bb2..e160f91 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -7,6 +7,7 @@
@use 'base';
@use 'iro-design/src/layouts';
+@use 'layouts/container';
@use 'layouts/media';
@use 'layouts/card-list';
--
cgit v1.2.3-70-g09d2