summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-06-20 17:30:37 +0200
committerVolpeon <git@volpeon.ink>2021-06-20 17:30:37 +0200
commit6662a2dfb60cd24a60225c40a91f3ba9019b718d (patch)
treedfb59112e22a6cf64d57d5bedc9323b7242c583d
parentBetter card indicator (diff)
downloadvolpeon.ink-6662a2dfb60cd24a60225c40a91f3ba9019b718d.tar.gz
volpeon.ink-6662a2dfb60cd24a60225c40a91f3ba9019b718d.tar.bz2
volpeon.ink-6662a2dfb60cd24a60225c40a91f3ba9019b718d.zip
CSS/Markup improvements
Diffstat
-rw-r--r--assets/css/components/_card.scss16
-rw-r--r--assets/css/components/_outer-button.scss10
-rw-r--r--assets/css/layouts/_landing.scss2
-rw-r--r--assets/css/layouts/_section.scss43
-rw-r--r--templates/layouts/categorized_list.html2
-rw-r--r--templates/layouts/index.html92
-rw-r--r--templates/layouts/list.html2
-rw-r--r--templates/layouts/page.html2
8 files changed, 101 insertions, 68 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 066a00d..0a64f1f 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -13,6 +13,7 @@
13 --bg: prop(--colors --bg-lo, $global: true), 13 --bg: prop(--colors --bg-lo, $global: true),
14 --fg: prop(--colors --fg, $global: true), 14 --fg: prop(--colors --fg, $global: true),
15 --unread: prop(--colors --bg, $global: true), 15 --unread: prop(--colors --bg, $global: true),
16 --border: prop(--colors --obj-hi, $global: true),
16 --hover: ( 17 --hover: (
17 --bg: prop(--colors --fg-lo, $global: true), 18 --bg: prop(--colors --fg-lo, $global: true),
18 --fg: prop(--colors --bg-hi, $global: true), 19 --fg: prop(--colors --bg-hi, $global: true),
@@ -24,6 +25,7 @@
24 --colors: ( 25 --colors: (
25 --bg: prop(--colors --bg-hi, $global: true), 26 --bg: prop(--colors --bg-hi, $global: true),
26 --unread: prop(--colors --bg-lo, $global: true), 27 --unread: prop(--colors --bg-lo, $global: true),
28 --border: prop(--colors --bg-lo, $global: true),
27 ) 29 )
28 ), 'light'); 30 ), 'light');
29 31
@@ -98,6 +100,20 @@
98 width: 100%; 100 width: 100%;
99 } 101 }
100 102
103 /*@include modifier('separator') {
104 align-self: stretch;
105 padding-top: 0;
106 padding-bottom: 0;
107
108 &::before {
109 content: '';
110 display: block;
111 width: 1px;
112 height: 100%;
113 background-color: prop(--colors --border);
114 }
115 }*/
116
101 @include modifier('indicator') { 117 @include modifier('indicator') {
102 transition: color .2s; 118 transition: color .2s;
103 color: prop(--colors --unread); 119 color: prop(--colors --unread);
diff --git a/assets/css/components/_outer-button.scss b/assets/css/components/_outer-button.scss
index f3d3276..fb3a51e 100644
--- a/assets/css/components/_outer-button.scss
+++ b/assets/css/components/_outer-button.scss
@@ -3,7 +3,7 @@
3 --colors: ( 3 --colors: (
4 --fg: prop(--colors --bg-hi, $global: true), 4 --fg: prop(--colors --bg-hi, $global: true),
5 --bg: prop(--colors --fg-lo, $global: true), 5 --bg: prop(--colors --fg-lo, $global: true),
6 --border: rgba(#000, .1), 6 --border: prop(--colors --fg, $global: true),
7 --hover: ( 7 --hover: (
8 --bg: prop(--colors --accent --color, $global: true), 8 --bg: prop(--colors --accent --color, $global: true),
9 --fg: prop(--colors --bg-hi, $global: true), 9 --fg: prop(--colors --bg-hi, $global: true),
@@ -18,12 +18,6 @@
18 ) 18 )
19 )); 19 ));
20 20
21 @include store((
22 --colors: (
23 --border: rgba(#fff, .1),
24 )
25 ), 'light');
26
27 @include component(namespace()) { 21 @include component(namespace()) {
28 display: flex; 22 display: flex;
29 height: prop(--dims --outer, $global: true); 23 height: prop(--dims --outer, $global: true);
@@ -72,7 +66,7 @@
72 height: 100%; 66 height: 100%;
73 padding-right: prop(--dims --pad-x); 67 padding-right: prop(--dims --pad-x);
74 padding-left: prop(--dims --pad-x); 68 padding-left: prop(--dims --pad-x);
75 transition: border-color .2s; 69 transition: border-left-color .2s;
76 font-size: 1 / 16 * 14em; 70 font-size: 1 / 16 * 14em;
77 line-height: prop(--dims --outer, $global: true); 71 line-height: prop(--dims --outer, $global: true);
78 white-space: nowrap; 72 white-space: nowrap;
diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss
index 500849e..a81b105 100644
--- a/assets/css/layouts/_landing.scss
+++ b/assets/css/layouts/_landing.scss
@@ -12,6 +12,8 @@
12 display: flex; 12 display: flex;
13 flex-direction: row; 13 flex-direction: row;
14 align-items: center; 14 align-items: center;
15 margin-top: auto;
16 margin-bottom: auto;
15 17
16 @include element('banner') { 18 @include element('banner') {
17 width: 70%; 19 width: 70%;
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index e8b1617..80b8ca9 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -15,6 +15,13 @@
15 @include layout(namespace()) { 15 @include layout(namespace()) {
16 position: relative; 16 position: relative;
17 17
18 @include modifier('flex') {
19 display: flex;
20 flex-direction: column;
21 align-items: stretch;
22 justify-content: flex-start;
23 }
24
18 @include modifier('fullscreen') { 25 @include modifier('fullscreen') {
19 box-sizing: border-box; 26 box-sizing: border-box;
20 min-height: 100vh; 27 min-height: 100vh;
@@ -26,26 +33,17 @@
26 background-color: prop(--colors --body-bg); 33 background-color: prop(--colors --body-bg);
27 } 34 }
28 35
29 @include modifier('no-head') { 36 @include modifier('no-header') {
30 padding-top: prop(--dims --outer, $global: true); 37 padding-top: prop(--dims --outer, $global: true);
31 } 38 }
32 39
33 @include element('head') { 40 @include element('header') {
34 display: flex; 41 display: flex;
35 flex-direction: row; 42 flex-direction: row;
36 justify-self: flex-start; 43 align-items: center;
44 height: prop(--dims --outer, $global: true);
37 font-size: 1 / 16 * 15em; 45 font-size: 1 / 16 * 15em;
38 46
39 &::after {
40 content: '';
41 width: 100%;
42 height: 100%;
43 margin-top: -1px;
44 margin-right: prop(--container --dims --pad-x, $global: true);
45 margin-left: prop(--container --dims --pad-x, $global: true);
46 border-top: 1px solid prop(--colors --border);
47 }
48
49 @include modifier('sticky') { 47 @include modifier('sticky') {
50 position: sticky; 48 position: sticky;
51 z-index: 9000; 49 z-index: 9000;
@@ -53,5 +51,24 @@
53 left: 0; 51 left: 0;
54 } 52 }
55 } 53 }
54
55 /*@include element('footer') {
56 position: absolute;
57 z-index: 10000;
58 right: 0;
59 bottom: 0;
60 height: prop(--dims --outer, $global: true);
61 font-size: 1 / 16 * 15em;
62 }*/
63
64 @include element('header-separator') {
65 flex: 1 1 auto;
66 width: 100%;
67 height: 100%;
68 margin-top: -1px;
69 margin-right: prop(--container --dims --pad-x, $global: true);
70 margin-left: prop(--container --dims --pad-x, $global: true);
71 border-top: 1px solid prop(--colors --border);
72 }
56 } 73 }
57} 74}
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 1b9b293..f841fff 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -1,4 +1,4 @@
1<section class="l-section l-section--no-head"> 1<section class="l-section l-section--no-header">
2 <div class="l-container l-container--pad-x l-container--pad-y l-container--content"> 2 <div class="l-container l-container--pad-x l-container--pad-y l-container--content">
3 <div class="s-headlines s-colored-links"> 3 <div class="s-headlines s-colored-links">
4 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> 4 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index 00d25af..1f1a092 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -1,57 +1,59 @@
1<section class="l-section l-section--fullscreen l-section--no-head l-landing"> 1<section class="l-section l-section--fullscreen l-section--no-header l-section--flex">
2 <header class="l-landing__banner"> 2 <div class="l-landing">
3 <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content"> 3 <header class="l-landing__banner">
4 <h1 class="c-landing-banner__title"> 4 <div class="c-landing-banner l-container l-container--pad-x l-container--pad-y l-container--content">
5 <span class="c-landing-banner__title-inner"> 5 <h1 class="c-landing-banner__title">
6 I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise. 6 <span class="c-landing-banner__title-inner">
7 </span> 7 I'm a <strong class="c-landing-banner__emph">red fox</strong> in disguise.
8 </h1> 8 </span>
9 <p class="c-landing-banner__text s-body"> 9 </h1>
10 Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces. 10 <p class="c-landing-banner__text s-body">
11 </p> 11 Hi, I'm Volpeon. I enjoy programming, creating vector art and designing user interfaces.
12 </div> 12 </p>
13 </header> 13 </div>
14 </header>
14 15
15 <section class="l-landing__content"> 16 <section class="l-landing__content">
16 <div class="l-container l-container--pad-x l-container--pad-y l-container--content u-pt0@md-lo"> 17 <div class="l-container l-container--pad-x l-container--pad-y l-container--content u-pt0@md-lo">
17 <div class="l-card-grid"> 18 <div class="l-card-grid">
18 $for(profiles)$ 19 $for(profiles)$
19 $if(it.featured)$ 20 $if(it.featured)$
20 $if(it.url)$ 21 $if(it.url)$
21 <a class="l-card-grid__card c-card" href="$it.url$"> 22 <a class="l-card-grid__card c-card" href="$it.url$">
22 $else$ 23 $else$
23 <div class="l-card-grid__card c-card"> 24 <div class="l-card-grid__card c-card">
24 $endif$
25 $if(it.icon)$
26 <svg class="c-card__block o-icon">
27 <use href="/symbols.svg#icon-$it.icon$"></use>
28 </svg>
29 $endif$ 25 $endif$
30 <div class="c-card__block c-card__block--main"> 26 $if(it.icon)$
31 <strong class="u-db">$it.platform$</strong> 27 <svg class="c-card__block o-icon">
32 <small class="u-db">$it.username$</small> 28 <use href="/symbols.svg#icon-$it.icon$"></use>
33 </div> 29 </svg>
30 $endif$
31 <div class="c-card__block c-card__block--main">
32 <strong class="u-db">$it.platform$</strong>
33 <small class="u-db">$it.username$</small>
34 </div>
35 $if(it.url)$
36 <svg class="c-card__block o-icon">
37 <use href="/symbols.svg#icon-arrow-up-right"></use>
38 </svg>
39 $endif$
34 $if(it.url)$ 40 $if(it.url)$
35 <svg class="c-card__block o-icon"> 41 </a>
36 <use href="/symbols.svg#icon-arrow-up-right"></use> 42 $else$
37 </svg> 43 </div>
38 $endif$ 44 $endif$
39 $if(it.url)$
40 </a>
41 $else$
42 </div>
43 $endif$ 45 $endif$
44 $endif$ 46 $endfor$
45 $endfor$ 47 </div>
46 </div>
47 48
48$body$ 49$body$
49 </div> 50 </div>
50 </section> 51 </section>
52 </div>
51</section> 53</section>
52 54
53<section class="l-section" id="projects"> 55<section class="l-section" id="projects">
54 <header class="l-section__head l-section__head--sticky"> 56 <header class="l-section__header l-section__header--sticky">
55 <a class="c-outer-button" href="#projects"> 57 <a class="c-outer-button" href="#projects">
56 <span class="c-outer-button__icon"> 58 <span class="c-outer-button__icon">
57 <svg class="c-outer-button__icon-symbol o-icon"> 59 <svg class="c-outer-button__icon-symbol o-icon">
@@ -62,6 +64,8 @@ $body$
62 $pages.by_id.projects.title$ 64 $pages.by_id.projects.title$
63 </span> 65 </span>
64 </a> 66 </a>
67
68 <div class="l-section__header-separator"></div>
65 </header> 69 </header>
66 70
67 <div class="l-container l-container--pad-x l-container--pad-y l-project-grid"> 71 <div class="l-container l-container--pad-x l-container--pad-y l-project-grid">
diff --git a/templates/layouts/list.html b/templates/layouts/list.html
index 8794c07..f269d10 100644
--- a/templates/layouts/list.html
+++ b/templates/layouts/list.html
@@ -1,4 +1,4 @@
1<section class="l-section l-section--no-head"> 1<section class="l-section l-section--no-header">
2 <div class="l-container l-container--pad-x l-container--pad-y l-container--content"> 2 <div class="l-container l-container--pad-x l-container--pad-y l-container--content">
3 <div class="s-headlines s-colored-links"> 3 <div class="s-headlines s-colored-links">
4 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1> 4 <h1 class="u-mt0"><span class="s-headlines__title-inner">$title$</span></h1>
diff --git a/templates/layouts/page.html b/templates/layouts/page.html
index e5781a8..70f645b 100644
--- a/templates/layouts/page.html
+++ b/templates/layouts/page.html
@@ -1,4 +1,4 @@
1<section class="l-section l-section--no-head l-section--body"> 1<section class="l-section l-section--no-header l-section--body">
2 <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-colored-links s-headlines s-headlines--body s-body"> 2 <div class="l-container l-container--pad-x l-container--pad-y l-container--content s-colored-links s-headlines s-headlines--body s-body">
3 $if(show_date)$ 3 $if(show_date)$
4 <div class="s-body__meta"> 4 <div class="s-body__meta">
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-12-25 16:20:11 +0000