design revamp and tabs

This commit is contained in:
a 2020-10-23 22:47:29 -05:00
parent 4211293c78
commit d31191714d
9 changed files with 55 additions and 24 deletions

View file

@ -0,0 +1,12 @@
.button {
background: #0060ff;
color: white;
width: max-content;
font-size: clamp(1em,2vw,1em);
padding: 0.75em;
display: flex;
justify-content: center;
text-decoration: none;
border-radius: 100em;
font-weight: 700;
}

View file

@ -1,29 +1,36 @@
.hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"img"
"txt"
"cta";
@media (min-width: 600px) {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"txt img"
"cta img";
}
gap: 1em;
}
.hero img {
grid-area: img;
width: 100%;
grid-row: 1/3;
max-height: 160px;
@media (min-width: 600px) {max-height: unset;}
}
.headline {
.hero .cta {
grid-area: cta;
align-self: start;
}
.hero .headline {
grid-area: txt;
font-size: clamp(1.4em, 7vw, 3em);
max-width: 11ch;
line-height: 1.2;
align-self: end;
@media (min-width: 600px) {
max-width: 11ch;
}
}
.button {
background: #0060ff;
color: white;
width: max-content;
font-size: clamp(0.75em,2vw,1em);
padding: 0.75em;
display: flex;
justify-content: center;
text-decoration: none;
border-radius: 100em;
font-weight: 700;
}
.cta {grid-column: 1; grid-row: 2; align-self: start;}

View file

@ -2,6 +2,7 @@
@import "base/sections.scss";
@import "base/page.scss";
@import "base/list.scss";
@import "base/components.scss";
@import "index/hero.scss";
@import "index/cards.scss";

View file

@ -32,8 +32,9 @@ body {margin-bottom: 64px; min-height: calc(100vh - 64px)}
li {
flex: 1;
border-bottom: 4px solid #212121;
color: #999;
&.active {
font-weight: 700;
color: white;
border-bottom: 4px solid #0060ff;
}
a {

View file

@ -31,9 +31,16 @@ name = "Code"
url = "/code/"
weight = 30
[[menu.main]]
identifier = "design"
pre = "<i class='fa fa-desktop' aria-hidden='true'></i>"
name = "Design"
url = "/design/"
weight = 40
[[menu.main]]
identifier = "blog"
pre = "<i class='fa fa-pencil' aria-hidden='true'></i>"
name = "Blog"
url = "/blog/"
weight = 40
weight = 50

3
content/design/_index.md Normal file
View file

@ -0,0 +1,3 @@
---
title: "Design portfolio"
---

View file

@ -3,8 +3,8 @@
<section class="section hero">
<div class="container">
<img src="/images/thought.svg" alt="Abstract illustration of a thought process" title="Abstract illustration of a thought process">
<h2 class="headline">i make order<br>out of chaos.</h1>
<a class="button cta" href="#projects">view my work</a>
<h2 class="headline">i make order out of chaos.</h1>
<a class="button cta" href="#projects">summary of my work</a>
</div>
</section>
<section class="section" id="process">

File diff suppressed because one or more lines are too long

View file

@ -1 +1 @@
{"Target":"scss/main.min.69d4711fe0e0bb357457852f01b5350f97d301b6069516d46c11edae2910bda0.css","MediaType":"text/css","Data":{"Integrity":"sha256-adRxH+DguzV0V4UvAbU1D5fTAbYGlRbUbBHtrikQvaA="}}
{"Target":"scss/main.min.397e9f4be3c1c6acf6a7296d927f7de2c656cb95a7be3eca73cea90a66bab151.css","MediaType":"text/css","Data":{"Integrity":"sha256-OX6fS+PBxqz2pyltkn994sZWy5Wnvj7Kc86pCma6sVE="}}