design revamp and tabs
This commit is contained in:
parent
4211293c78
commit
d31191714d
12
assets/scss/base/components.scss
Normal file
12
assets/scss/base/components.scss
Normal 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;
|
||||
}
|
|
@ -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;}
|
|
@ -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";
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
3
content/design/_index.md
Normal file
|
@ -0,0 +1,3 @@
|
|||
---
|
||||
title: "Design portfolio"
|
||||
---
|
|
@ -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
|
@ -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="}}
|
Loading…
Reference in a new issue