Browse Source

/beta updates

working on the new design:
- landscape layout
- color changes
master
Clark Wimberly 1 year ago
parent
commit
b17aceec1b
2 changed files with 57 additions and 19 deletions
  1. BIN
      _chowdown.sketch
  2. +57
    -19
      _layouts/beta.html

BIN
_chowdown.sketch View File


+ 57
- 19
_layouts/beta.html View File

@ -11,9 +11,14 @@
:root {
--white: #FFFFFF;
--black: #000000;
--dark: #1F0F66;
--light: #EEEEEE;
--blue: #007FFF;
--red: #CC0000;
--primary: var(--red);
}
*{
box-sizing: border-box;
}
.white, a.white{
@ -24,20 +29,16 @@
color: var(--black);
}
.dark, a.dark{
color: var(--dark);
}
.light, a.light{
color: var(--light);
}
.blue, a.blue{
color: var(--blue);
color: var(--primary);
}
.bg-blue{
background:var(--blue);
background:var(--primary);
color:var(--white);
}
@ -50,7 +51,7 @@ body{
}
a{
color:var(--blue);
color:var(--primary);
}
nav{
@ -61,12 +62,13 @@ nav{
right:0;
background:rgba(255,255,255,0.95);
border-top:2px solid var(--white);
justify-content: space-around;
}
nav .item{
text-align: center;
text-decoration: none;
color:var(--dark);
color:var(--primary);
font-size:.8rem;
padding:.5rem 0;
font-weight: 500;
@ -74,7 +76,7 @@ nav .item{
}
nav .item.active{
color:var(--blue;);
color:var(--primary);
}
nav .item.active svg{
@ -86,7 +88,7 @@ nav .item path, nav .item g{
}
nav .item.active path, nav .item.active g{
fill:#007fff;
fill:#CC0000;
}
nav .item:not(.active){
@ -119,6 +121,38 @@ nav .label{
overflow: hidden;
}
@media (orientation: landscape) {
body{
padding-left:20%;
}
nav{
position: fixed;
flex-direction: column;
justify-content: start;
width:20%;
top:0;
bottom:0;
left:0;
right:auto;
padding:1rem 0 0 2rem;
}
nav .item{
text-align: left;
font-size:1.4rem;
padding:.5rem 0 0 2rem;
margin-bottom:1rem;
}
nav .item svg{
position: absolute;
left:1rem;
}
}
#slider{
width:400%;
transition: .3s ease all;
@ -146,6 +180,10 @@ input{
font-size:1rem;
font-family: 'Inter UI', sans-serif;
}
input:focus{
outline:2px solid var(--primary);
box-shadow: none;
}
.blog{
height: 100%;
@ -203,9 +241,9 @@ input{
<div class="search col col-3">
<div class="search container max-width-2 p2">
<div class="search container p2">
<div id="search-container">
<input type="text" id="search-input" placeholder="Search titles or ingredients...">
<input type="text" id="search-input" placeholder="Search titles, ingredients, or tags...">
</div>
</div>
@ -230,7 +268,7 @@ input{
{% for post in site.posts %}
<a class="post card mb2 block" href="{{ post.url }}">
<h3 class="my1">{{ post.title }}</h3>
<p class="mt1 dark">{{ post.content | strip_html | truncatewords:20 }}</p>
<p class="mt1">{{ post.content | strip_html | truncatewords:20 }}</p>
<p class="action">View Post</p>
</a>
{% endfor %}
@ -243,10 +281,10 @@ input{
</div>
</div>
<nav class="flex justify-around">
<nav class="flex">
<a href="#" class="item recipes active">
<svg width="33" height="32" xmlns="http://www.w3.org/2000/svg">
<g fill="#1F0F66" fill-rule="nonzero">
<g fill="#CC0000" fill-rule="nonzero">
<path d="M17 27.533c6.37 0 11.533-5.163 11.533-11.533C28.533 9.63 23.37 4.467 17 4.467 10.63 4.467 5.467 9.63 5.467 16c0 6.37 5.163 11.533 11.533 11.533zM17 30C9.268 30 3 23.732 3 16S9.268 2 17 2s14 6.268 14 14-6.268 14-14 14z"/>
<g transform="rotate(45 -3.503 17.164)">
<path d="M11.634 3.153V2.24h4.835c.24 0 .438.202.438.456a.447.447 0 0 1-.438.456h-4.835zm4.835 1.322c.974 0 1.76-.799 1.76-1.778 0-.98-.786-1.778-1.76-1.778h-6.157v3.555h6.157z"/>
@ -262,19 +300,19 @@ input{
</a>
<a href="#" class="item search">
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
<path d="M19.087 18.205a4.882 4.882 0 1 0 .002-9.764 4.882 4.882 0 0 0-.002 9.764zm5.706-.292l5.726 5.726a1.216 1.216 0 0 1-.002 1.723 1.22 1.22 0 0 1-1.724.002l-5.828-5.827a7.324 7.324 0 1 1 1.829-1.624zM2 10.272c0-.674.414-1.221.913-1.221H8.41c.505 0 .913.542.913 1.22 0 .675-.414 1.222-.913 1.222H2.913c-.505 0-.913-.543-.913-1.221zm0 7.323c0-.674.414-1.221.913-1.221H8.41c.505 0 .913.542.913 1.22 0 .675-.414 1.222-.913 1.222H2.913c-.505 0-.913-.543-.913-1.221zm0 7.323c0-.674.402-1.22.914-1.22H20.31c.505 0 .915.542.915 1.22 0 .674-.402 1.221-.915 1.221H2.914c-.504 0-.914-.542-.914-1.221z" fill="#000" fill-rule="nonzero"/>
<path d="M19.087 18.205a4.882 4.882 0 1 0 .002-9.764 4.882 4.882 0 0 0-.002 9.764zm5.706-.292l5.726 5.726a1.216 1.216 0 0 1-.002 1.723 1.22 1.22 0 0 1-1.724.002l-5.828-5.827a7.324 7.324 0 1 1 1.829-1.624zM2 10.272c0-.674.414-1.221.913-1.221H8.41c.505 0 .913.542.913 1.22 0 .675-.414 1.222-.913 1.222H2.913c-.505 0-.913-.543-.913-1.221zm0 7.323c0-.674.414-1.221.913-1.221H8.41c.505 0 .913.542.913 1.22 0 .675-.414 1.222-.913 1.222H2.913c-.505 0-.913-.543-.913-1.221zm0 7.323c0-.674.402-1.22.914-1.22H20.31c.505 0 .915.542.915 1.22 0 .674-.402 1.221-.915 1.221H2.914c-.504 0-.914-.542-.914-1.221z" fill="#CC0000" fill-rule="nonzero"/>
</svg>
<p class="label">Search</p>
</a>
<a href="#" class="item books">
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
<path d="M25.568 2.5H6.43C4.814 2.5 3.5 3.86 3.5 5.476v20.877a2.934 2.934 0 0 0 2.93 2.932h19.138a2.936 2.936 0 0 0 2.932-2.932V5.476c0-1.616-1.316-2.976-2.932-2.976zM18.38 4.88h3.571v7.049l-1.041-.833a1.189 1.189 0 0 0-1.488 0l-1.042.833V4.88zM5.88 26.354V5.433a.55.55 0 0 1 .549-.552h1.832v22.024H6.43a.55.55 0 0 1-.549-.551zm20.238 0a.55.55 0 0 1-.551.552H10.643V4.88H16v9.524a1.189 1.189 0 1 0 1.935.93l2.232-1.786 2.232 1.786a1.189 1.189 0 0 0 1.258.144c.414-.2.676-.616.676-1.074V4.88h1.235a.55.55 0 0 1 .551.55v20.922z" fill="#1F0F66" fill-rule="nonzero"/>
<path d="M25.568 2.5H6.43C4.814 2.5 3.5 3.86 3.5 5.476v20.877a2.934 2.934 0 0 0 2.93 2.932h19.138a2.936 2.936 0 0 0 2.932-2.932V5.476c0-1.616-1.316-2.976-2.932-2.976zM18.38 4.88h3.571v7.049l-1.041-.833a1.189 1.189 0 0 0-1.488 0l-1.042.833V4.88zM5.88 26.354V5.433a.55.55 0 0 1 .549-.552h1.832v22.024H6.43a.55.55 0 0 1-.549-.551zm20.238 0a.55.55 0 0 1-.551.552H10.643V4.88H16v9.524a1.189 1.189 0 1 0 1.935.93l2.232-1.786 2.232 1.786a1.189 1.189 0 0 0 1.258.144c.414-.2.676-.616.676-1.074V4.88h1.235a.55.55 0 0 1 .551.55v20.922z" fill="#CC0000" fill-rule="nonzero"/>
</svg>
<p class="label">Books</p>
</a>
<a href="#" class="item updates">
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
<g fill="#1F0F66" fill-rule="nonzero">
<g fill="#CC0000" fill-rule="nonzero">
<path d="M20.12 4.92a.715.715 0 0 0-.269-.05c-.319 0-.604.21-.708.522a.814.814 0 0 0 .478 1 9.651 9.651 0 0 1 4.96 4.622 9.65 9.65 0 0 1 .718 6.742.814.814 0 0 0 .512.982c.08.026.163.04.246.04a.74.74 0 0 0 .717-.54 11.19 11.19 0 0 0-.807-7.916 11.202 11.202 0 0 0-5.846-5.401z"/>
<path d="M30.294 8.156A15.983 15.983 0 0 0 21.653.32a.739.739 0 0 0-.263-.049.759.759 0 0 0-.717.525.8.8 0 0 0 .482.994 14.448 14.448 0 0 1 7.752 7.06 14.437 14.437 0 0 1 .99 10.436.799.799 0 0 0 .506.982c.08.027.162.04.244.04.34 0 .63-.215.722-.538 1.12-3.88.737-8.003-1.075-11.616zM14.052 6.796c-.767 0-1.492.168-2.153.497-1.46.73-2.403 2.18-2.77 3.967-2.972 2.963-6.818 5.581-6.858 5.608-2.111 1.43-2.86 4.035-1.78 6.191.818 1.638 2.473 2.586 4.277 2.586.574 0 1.163-.095 1.745-.295.045-.017 4.427-1.517 8.579-2.118.891.425 1.81.658 2.704.658.768 0 1.492-.168 2.153-.497 1.572-.786 2.596-2.39 2.88-4.513.271-2.014-.16-4.282-1.21-6.384-1.706-3.409-4.747-5.7-7.567-5.7zm7.252 11.879c-.215 1.604-.941 2.79-2.044 3.341a3.243 3.243 0 0 1-1.464.335c-2.253 0-4.74-1.948-6.19-4.85-1.84-3.68-1.4-7.643.982-8.835a3.248 3.248 0 0 1 1.463-.334c2.253 0 4.74 1.948 6.19 4.85.916 1.832 1.294 3.782 1.063 5.493z"/>
<path d="M16.043 13.151a.776.776 0 0 0-.35.08c-.607.302-.701 1.35-.21 2.331.386.773 1.061 1.312 1.642 1.312a.759.759 0 0 0 .35-.081c.586-.293.685-1.383.21-2.333-.386-.77-1.06-1.309-1.642-1.309z"/>


Loading…
Cancel
Save