receptty.org/sass/style.scss

244 lines
3.7 KiB
SCSS

@import "variables";
@import "nav";
@import "filters";
@import "lists";
@import "tags";
@import "tables";
@import "fonts";
@import "lightbox";
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
margin:0;
}
body {
background:$body-background-image repeat $body-background;
color:$body-color;
font-family: sofia, sans-serif;
text-rendering: optimizeLegibility;
font-size:1em;
min-height: 100vh;
}
a {
color:$anchor-color;
text-decoration:none;
&:hover{
color:$anchor-hover-color;
}
}
img {
width:100%;
}
main {
max-width:$main-wrap;
padding:$main-padding;
margin:0 auto 3em auto;
h2 {
font-size: 2.5em;
text-align:center;
}
&.recipe {
background:$recipe-background;
max-width:$recipe-wrap;
padding:1em 4em;
border:1px solid $border;
border-radius:8px;
margin-top: 2em;
p { line-height: 1.5 }
table {
float:right;
width:45%;
margin:0 0 2em 2em;
}
img {
display:block;
margin:0 auto 2em auto;
border-radius:5px;
border:1px solid $border;
cursor: pointer;
}
h2 { margin: 0.85em 0 }
h3 { margin: 2em 0 1em 0 }
h2, h3 { font-size: 2em }
}
hr {
clear:both;
border:0;
height:1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
margin:2em 0;
}
.meta {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
margin-bottom: 3em;
.edit {
margin-left: auto;
font-size: 1.2em;
}
.item {
display: flex;
align-items: baseline;
margin-right: 1.5em;
font-size: .9rem;
font-weight: bold;
color: #333;
cursor: default;
.icon {
margin-right: .3em;
font-size: 1.2em;
}
}
}
.taglist {
display: flex;
align-items: center;
margin-bottom: .5em;
}
.pagination, .pagination>a {
display: flex;
align-items: center;
justify-content: center;
.icon {
margin: 0 1em;
}
}
section {
&.list {
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: .5em;
row-gap: 2em;
margin-bottom: 2em;
}
article {
position: relative;
background:$article-background;
border:1px solid $border;
border-radius:$article-border-radius;
overflow:hidden;
width:100%;
box-shadow: none;
transition: box-shadow .15s ease;
&:hover {
box-shadow: 0 0 8px #888;
a { color: inherit }
.image { background-size: 110% }
}
a {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
color: $article-color;
}
.image {
position: relative;
width: 100%;
background-size: 100%;
background-position: center;
transition: background-size .15s ease;
}
.image:before {
content: "";
float: left;
padding-top: 100%;
}
.title {
margin: 1em .8em .5em .8em;
text-align: center;
font-size: 1.1em;
font-weight: bold;
}
.date {
align-self: flex-end;
margin: .8rem;
margin-top: auto;
color: $article-date-color;
font-size: .8em;
}
&.chilli a::after {
content: "";
position: absolute;
right: .8em;
top: .8em;
width: 3em;
height: 3em;
background: url(chilli.svg) top center no-repeat;
background-size: contain;
}
}
}
}
@media screen and (max-width: 950px){
main {
margin:0;
&.recipe {
padding:1em;
border:none;
border-radius:0;
margin:0;
max-width: 100%;
table {
float:none;
width:100%;
margin:0 0 2em 0;
}
}
h2 { margin-top:0.85em; }
section.list {
grid-template-columns: 1fr 1fr 1fr;
}
.filters input:first-child { grid-column: span 4; }
}
}
@media screen and (max-width: 640px){
main section.list {
grid-template-columns: 1fr 1fr;
}
.meta { justify-content: center }
.meta .tag { margin-top: .5em }
.meta .edit { display: none }
}