diff options
-rw-r--r-- | assets/css/_basics.scss | 5 | ||||
-rw-r--r-- | assets/css/_vars.scss | 29 | ||||
-rw-r--r-- | assets/css/components/_card.scss | 45 | ||||
-rw-r--r-- | assets/css/components/_footer.scss | 1 | ||||
-rw-r--r-- | templates/layouts/categorized_list.html | 6 | ||||
-rw-r--r-- | templates/layouts/index.html | 12 | ||||
-rw-r--r-- | templates/layouts/list.html | 6 |
7 files changed, 42 insertions, 62 deletions
diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index fd15836..9a6a53e 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss | |||
@@ -39,11 +39,6 @@ body { | |||
39 | padding: 0; | 39 | padding: 0; |
40 | } | 40 | } |
41 | 41 | ||
42 | main { | ||
43 | display: flex; | ||
44 | flex-direction: column; | ||
45 | } | ||
46 | |||
47 | pre, | 42 | pre, |
48 | code { | 43 | code { |
49 | font-family: $font-fam--mono; | 44 | font-family: $font-fam--mono; |
diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss index 832c410..d650842 100644 --- a/assets/css/_vars.scss +++ b/assets/css/_vars.scss | |||
@@ -133,12 +133,27 @@ $content--width: 42rem; | |||
133 | $gray6: hsl(220, 7%, 16%); | 133 | $gray6: hsl(220, 7%, 16%); |
134 | $gray7: hsl(220, 7%, 0%); | 134 | $gray7: hsl(220, 7%, 0%); |
135 | 135 | ||
136 | $link-idle: hsl(220, 60%, 40%); | 136 | $theme-link-bg: hsl( |
137 | 137 | var(--colors--accent--h), | |
138 | $theme-link-bg: change-color($link-idle, $lightness: 98.8%); | 138 | var(--colors--accent--s), |
139 | $theme-link-obj: rgba($link-idle, .5); | 139 | 98.8% |
140 | $theme-link-fg-hi: mix($link-idle, $gray0, 75%); | 140 | ); |
141 | $theme-link-fg: $link-idle; | 141 | $theme-link-obj: hsla( |
142 | var(--colors--accent--h), | ||
143 | var(--colors--accent--s), | ||
144 | var(--colors--accent--l), | ||
145 | .5 | ||
146 | ); | ||
147 | $theme-link-fg: hsl( | ||
148 | var(--colors--accent--h), | ||
149 | var(--colors--accent--s), | ||
150 | calc(var(--colors--accent--l) * .8) | ||
151 | ); | ||
152 | $theme-link-fg-hi: hsl( | ||
153 | var(--colors--accent--h), | ||
154 | calc(var(--colors--accent--s) * .6), | ||
155 | calc(var(--colors--accent--l) * 1.2) | ||
156 | ); | ||
142 | 157 | ||
143 | @include store(( | 158 | @include store(( |
144 | --colors: ( | 159 | --colors: ( |
@@ -200,7 +215,7 @@ $content--width: 42rem; | |||
200 | 215 | ||
201 | --link: ( | 216 | --link: ( |
202 | --colored: ( | 217 | --colored: ( |
203 | --idle: $link-idle, //hsl(var(--colors--accent--h), 100%, 66%), // | 218 | --idle: hsl(220, 60%, 40%), //hsl(var(--colors--accent--h), 100%, 66%), // |
204 | --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), // | 219 | --visited: hsl(290, 30%, 35%), //hsl(var(--colors--accent--h), 50%, 66%), // |
205 | ) | 220 | ) |
206 | ), | 221 | ), |
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 6fdd874..d1b549d 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss | |||
@@ -30,6 +30,8 @@ | |||
30 | display: flex; | 30 | display: flex; |
31 | position: relative; | 31 | position: relative; |
32 | align-items: center; | 32 | align-items: center; |
33 | padding-right: calc(.5 * #{prop(--dims --pad-x)}); | ||
34 | padding-left: calc(.5 * #{prop(--dims --pad-x)}); | ||
33 | transform: translateY(0); | 35 | transform: translateY(0); |
34 | transition: transform .2s, background-color .2s, color .2s; | 36 | transition: transform .2s, background-color .2s, color .2s; |
35 | background-color: prop(--colors --bg); | 37 | background-color: prop(--colors --bg); |
@@ -83,45 +85,14 @@ | |||
83 | } | 85 | } |
84 | } | 86 | } |
85 | 87 | ||
86 | @include element('content') { | 88 | @include element('block') { |
87 | box-sizing: border-box; | ||
88 | width: 100%; | ||
89 | padding: prop(--dims --pad-y) prop(--dims --pad-x); | ||
90 | |||
91 | @include next-twin-element { | ||
92 | width: auto; | ||
93 | } | ||
94 | |||
95 | @include modifier('flip') { | ||
96 | visibility: hidden; | ||
97 | position: absolute; | ||
98 | top: 0; | ||
99 | left: 0; | ||
100 | height: 100%; | ||
101 | transition: visibility 0s linear .2s, opacity .2s; | ||
102 | opacity: 0; | ||
103 | background-color: prop(--colors --hover --bg); | ||
104 | } | ||
105 | |||
106 | @include sibling-element('icon') { | ||
107 | padding-right: prop(--dims --pad-x); | ||
108 | padding-left: 0; | ||
109 | } | ||
110 | } | ||
111 | |||
112 | @include element('icon') { | ||
113 | display: block; | ||
114 | flex: 0 0 auto; | 89 | flex: 0 0 auto; |
115 | padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x); | 90 | padding: prop(--dims --pad-y) calc(.5 * #{prop(--dims --pad-x)}); |
116 | } | ||
117 | 91 | ||
118 | @include element('image') { | 92 | @include modifier('main') { |
119 | display: block; | 93 | flex-shrink: 1; |
120 | flex: 0 0 auto; | 94 | width: 100%; |
121 | width: 4em; | 95 | } |
122 | height: 100%; | ||
123 | object-fit: cover; | ||
124 | object-position: center center; | ||
125 | } | 96 | } |
126 | } | 97 | } |
127 | } | 98 | } |
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss index cc0e827..6371411 100644 --- a/assets/css/components/_footer.scss +++ b/assets/css/components/_footer.scss | |||
@@ -9,7 +9,6 @@ | |||
9 | 9 | ||
10 | @include component(namespace()) { | 10 | @include component(namespace()) { |
11 | position: relative; | 11 | position: relative; |
12 | flex: 0 0 auto; | ||
13 | min-height: prop(--dims --outer, $global: true); | 12 | min-height: prop(--dims --outer, $global: true); |
14 | margin-top: auto; | 13 | margin-top: auto; |
15 | overflow: hidden; | 14 | overflow: hidden; |
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html index 03d05e0..00ea383 100644 --- a/templates/layouts/categorized_list.html +++ b/templates/layouts/categorized_list.html | |||
@@ -16,10 +16,10 @@ $body$ | |||
16 | $if(pages.asc_title.show_dates)$ | 16 | $if(pages.asc_title.show_dates)$ |
17 | $for(it.pages.desc_date)$ | 17 | $for(it.pages.desc_date)$ |
18 | <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited"> | 18 | <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited"> |
19 | <div class="c-card__content"> | 19 | <div class="c-card__block c-card__block--main"> |
20 | $it.title$ | 20 | $it.title$ |
21 | </div> | 21 | </div> |
22 | <time datetime="$it.date.yyyy_mm_dd$" class="c-card__content u-fs0"> | 22 | <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0"> |
23 | <small class="u-dn@sm-hi"> | 23 | <small class="u-dn@sm-hi"> |
24 | $it.date.short$ | 24 | $it.date.short$ |
25 | </small> | 25 | </small> |
@@ -32,7 +32,7 @@ $body$ | |||
32 | $else$ | 32 | $else$ |
33 | $for(it.pages.asc_title)$ | 33 | $for(it.pages.asc_title)$ |
34 | <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited"> | 34 | <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited"> |
35 | <div class="c-card__content"> | 35 | <div class="c-card__block c-card__block--main"> |
36 | $it.title$ | 36 | $it.title$ |
37 | </div> | 37 | </div> |
38 | </a> | 38 | </a> |
diff --git a/templates/layouts/index.html b/templates/layouts/index.html index 8eeeb03..00d25af 100644 --- a/templates/layouts/index.html +++ b/templates/layouts/index.html | |||
@@ -23,16 +23,16 @@ | |||
23 | <div class="l-card-grid__card c-card"> | 23 | <div class="l-card-grid__card c-card"> |
24 | $endif$ | 24 | $endif$ |
25 | $if(it.icon)$ | 25 | $if(it.icon)$ |
26 | <svg class="c-card__icon o-icon"> | 26 | <svg class="c-card__block o-icon"> |
27 | <use href="/symbols.svg#icon-$it.icon$"></use> | 27 | <use href="/symbols.svg#icon-$it.icon$"></use> |
28 | </svg> | 28 | </svg> |
29 | $endif$ | 29 | $endif$ |
30 | <div class="c-card__content"> | 30 | <div class="c-card__block c-card__block--main"> |
31 | <strong class="u-db">$it.platform$</strong> | 31 | <strong class="u-db">$it.platform$</strong> |
32 | <small class="u-db">$it.username$</small> | 32 | <small class="u-db">$it.username$</small> |
33 | </div> | 33 | </div> |
34 | $if(it.url)$ | 34 | $if(it.url)$ |
35 | <svg class="c-card__icon o-icon"> | 35 | <svg class="c-card__block o-icon"> |
36 | <use href="/symbols.svg#icon-arrow-up-right"></use> | 36 | <use href="/symbols.svg#icon-arrow-up-right"></use> |
37 | </svg> | 37 | </svg> |
38 | $endif$ | 38 | $endif$ |
@@ -73,15 +73,15 @@ $body$ | |||
73 | $endif$ | 73 | $endif$ |
74 | <div class="c-project__card c-card"> | 74 | <div class="c-project__card c-card"> |
75 | $if(pages.by_id.projects.pages.all.icon)$ | 75 | $if(pages.by_id.projects.pages.all.icon)$ |
76 | <svg class="c-card__icon o-icon"> | 76 | <svg class="c-card__block o-icon"> |
77 | <use href="/symbols.svg#icon-$pages.by_id.projects.pages.all.icon$"></use> | 77 | <use href="/symbols.svg#icon-$pages.by_id.projects.pages.all.icon$"></use> |
78 | </svg> | 78 | </svg> |
79 | $endif$ | 79 | $endif$ |
80 | <div class="c-card__content"> | 80 | <div class="c-card__block c-card__block--main"> |
81 | <small class="u-db">$pages.by_id.projects.pages.all.title$</small> | 81 | <small class="u-db">$pages.by_id.projects.pages.all.title$</small> |
82 | <strong class="u-db">$it.title$</strong> | 82 | <strong class="u-db">$it.title$</strong> |
83 | </div> | 83 | </div> |
84 | <svg class="c-card__icon o-icon"> | 84 | <svg class="c-card__block o-icon"> |
85 | <use href="/symbols.svg#icon-arrow-right"></use> | 85 | <use href="/symbols.svg#icon-arrow-right"></use> |
86 | </svg> | 86 | </svg> |
87 | </div> | 87 | </div> |
diff --git a/templates/layouts/list.html b/templates/layouts/list.html index 2d32357..9fc6ebe 100644 --- a/templates/layouts/list.html +++ b/templates/layouts/list.html | |||
@@ -11,10 +11,10 @@ $body$ | |||
11 | $if(show_dates)$ | 11 | $if(show_dates)$ |
12 | $for(pages.desc_date)$ | 12 | $for(pages.desc_date)$ |
13 | <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited"> | 13 | <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited"> |
14 | <div class="c-card__content"> | 14 | <div class="c-card__block c-card__block--main"> |
15 | $it.title$ | 15 | $it.title$ |
16 | </div> | 16 | </div> |
17 | <time datetime="$it.date.yyyy_mm_dd$" class="c-card__content u-fs0"> | 17 | <time datetime="$it.date.yyyy_mm_dd$" class="c-card__block u-fs0"> |
18 | <small class="u-dn@sm-hi"> | 18 | <small class="u-dn@sm-hi"> |
19 | $it.date.short$ | 19 | $it.date.short$ |
20 | </small> | 20 | </small> |
@@ -27,7 +27,7 @@ $body$ | |||
27 | $else$ | 27 | $else$ |
28 | $for(pages.asc_title)$ | 28 | $for(pages.asc_title)$ |
29 | <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited"> | 29 | <a href="$it.url.rel$" class="c-post-list__post c-card c-card--mark-visited"> |
30 | <div class="c-card__content"> | 30 | <div class="c-card__block c-card__block--main"> |
31 | $it.title$ | 31 | $it.title$ |
32 | </div> | 32 | </div> |
33 | </a> | 33 | </a> |