diff --git a/public/assets/css/pages/work.css b/public/assets/css/pages/work.css index 25249c4..6860dbf 100644 --- a/public/assets/css/pages/work.css +++ b/public/assets/css/pages/work.css @@ -48,17 +48,17 @@ section.hero { display: grid; gap: var(--padding); - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(1, 1fr); } section.hero .item { width: 100%; - height: 300px; position: relative; border-radius: 6px; } section.hero .wrapper { + gap: var(--padding); z-index: 1; height: 100%; display: flex; @@ -68,11 +68,19 @@ section.hero .wrapper { padding: calc(var(--padding) * 1.5); } -section.hero p { - width: 50%; +section.hero .item .title { + display: grid; + align-items: center; + gap: var(--padding); + grid-template-columns: 40px 1fr; } -section.hero button { +section.hero .item .title svg { + height: 3em; + border-radius: 4px; +} + +section.hero .actions { margin-top: auto; } @@ -85,10 +93,6 @@ section.hero .item.vegvisir { background-color: rgba(var(--color-vegvisir), .1); } -section.hero .item.vegvisir .bg { - opacity: .2; -} - /* ### Reflect */ section.hero .item.reflect { @@ -98,25 +102,6 @@ section.hero .item.reflect { background-color: rgba(var(--color-reflect), .2); } -/* ### Background */ - -section.hero .item .bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow: hidden; - pointer-events: none; - border-radius: 6px; -} - -section.hero .item video { - position: absolute; - width: 100%; - bottom: 0; -} - /* ## Heading */ section.heading { @@ -136,7 +121,7 @@ section.heading svg { section.featured { display: grid; gap: var(--padding); - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(1, 1fr); } section.featured featured-item { @@ -144,32 +129,27 @@ section.featured featured-item { fill: white; color: white; border-radius: 8px; + align-items: baseline; flex-direction: column; padding: var(--padding); background-color: rgba(255, 255, 255, .1); } -section.featured featured-item > svg { - width: 2em; +section.featured featured-item .title { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: calc(var(--padding) / 2); +} + +section.featured featured-item .title svg { + height: 2em; + fill: var(--color-accent); } /* ### Languages */ -section.featured featured-item .langs { - gap: 5px; - display: flex; - margin: 5px 0; -} - -section.featured featured-item .langs button { - border-radius: 4px; - background-color: rgba(255, 255, 255, .1); -} - -section.featured featured-item .langs button p::before { - content: "● "; -} - /* ### Actions */ section.featured featured-item .actions { @@ -187,6 +167,12 @@ section.featured featured-item .actions { } } +@media (min-width: 600px) { + section.hero { + grid-template-columns: repeat(2, 1fr); + } +} + @media (min-width: 900px) { section.git { display: grid; @@ -202,4 +188,8 @@ section.featured featured-item .actions { section.git .buttons { justify-content: end; } + + section.featured { + grid-template-columns: repeat(3, 1fr); + } } \ No newline at end of file diff --git a/public/assets/media/icons/reflect.svg b/public/assets/media/icons/reflect.svg new file mode 100644 index 0000000..39d0f60 --- /dev/null +++ b/public/assets/media/icons/reflect.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/media/icons/repo.svg b/public/assets/media/icons/repo.svg index 3f26a8a..4be9da5 100644 --- a/public/assets/media/icons/repo.svg +++ b/public/assets/media/icons/repo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/assets/media/icons/vegvisir.svg b/public/assets/media/icons/vegvisir.svg new file mode 100644 index 0000000..5c52250 --- /dev/null +++ b/public/assets/media/icons/vegvisir.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/media/icons/vw.svg b/public/assets/media/icons/vw.svg new file mode 100644 index 0000000..a9bd24a --- /dev/null +++ b/public/assets/media/icons/vw.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/work.php b/public/work.php index b50c8f5..b0aa70f 100644 --- a/public/work.php +++ b/public/work.php @@ -13,47 +13,95 @@ -
- -

featured projects

- -
-

Vegvisir

-

A PHP and JavaScript navigation framework for the seamless [open] web seas.

- -
-
- +
+ +

vegvisir

+
+

Web navigation framework for PHP websites that does on the fly MPA-to-SPA routing between pages on the [open] web seas.

+
+ +
-

Reflect

-

A strange framework for building REST APIs in PHP.

- +
+ +

reflect

+
+

A weird framework for building REST APIs in PHP with focus on native internal request routing and proxying.

+
+ +
-