1
4
Fork 1
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

174 lines
2.4 KiB
SCSS

@import "variables";
@import "nav";
@import "filters";
@import "lists";
@import "tags";
@import "tables";
@import "fonts";
html, body {
margin:0;
}
body {
background:$body-background-image repeat $body-background;
color:$body-color;
4 years ago
font-family: sofia, sans-serif;
font-size:1em;
}
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:3em;
text-align:center;
}
&.recipe {
background:$recipe-background;
max-width:$recipe-wrap;
padding:1em 4em;
border:1px solid $border;
border-radius:8px;
margin-top: 2em;
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;
}
h2 { margin:0.85em 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: center;
margin-bottom: 1.5em;
&>.edit {
margin-left: auto;
font-size: 1.2em;
}
}
.taglist {
display: flex;
align-items: center;
margin-bottom: .5em;
}
.pagination {
text-align:center;
}
section {
&.list {
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: .5em;
row-gap: 2em;
margin-bottom: 2em;
}
article {
display:flex;
flex-direction:column;
background:$article-background;
border:1px solid $border;
border-radius:$article-border-radius;
overflow:hidden;
box-sizing:border-box;
width:100%;
&:hover {
color:$anchor-hover-color;
}
a {
color:$article-color;
}
h3 {
margin:.5em .8em;
text-align:center;
}
.date {
align-self:flex-end;
margin:.5em;
margin-top: auto;
color:$article-date-color;
}
}
}
}
@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;
}
}