receptty.org/sass/style.scss

242 lines
3.7 KiB
SCSS
Raw Normal View History

2019-10-30 11:58:46 +01:00
@import "variables";
@import "nav";
2021-02-02 21:46:24 +01:00
@import "filters";
2019-10-30 11:58:46 +01:00
@import "lists";
@import "tags";
@import "tables";
@import "fonts";
2023-04-03 22:11:05 +02:00
*, *:before, *:after {
box-sizing: border-box;
}
2019-10-30 11:58:46 +01:00
html, body {
margin:0;
}
body {
2020-01-01 18:56:38 +01:00
background:$body-background-image repeat $body-background;
2019-10-30 11:58:46 +01:00
color:$body-color;
2021-02-09 15:27:37 +01:00
font-family: sofia, sans-serif;
2022-10-17 09:52:52 +02:00
text-rendering: optimizeLegibility;
2020-03-16 00:20:30 +01:00
font-size:1em;
2022-11-23 15:19:25 +01:00
min-height: 100vh;
2019-10-30 11:58:46 +01:00
}
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;
2019-10-30 11:58:46 +01:00
h2 {
font-size: 2.5em;
2019-10-30 11:58:46 +01:00
text-align:center;
}
&.recipe {
background:$recipe-background;
2019-12-24 14:57:47 +01:00
max-width:$recipe-wrap;
padding:1em 4em;
border:1px solid $border;
border-radius:8px;
margin-top: 2em;
2021-03-14 19:05:17 +01:00
p { line-height: 1.5 }
table {
float:right;
width:45%;
margin:0 0 2em 2em;
}
2019-10-30 11:58:46 +01:00
img {
display:block;
margin:0 auto 2em auto;
border-radius:5px;
border:1px solid $border;
}
2021-03-14 19:05:17 +01:00
h2 { margin: 0.85em 0 }
h3 { margin: 2em 0 1em 0 }
h2, h3 { font-size: 2em }
2019-10-30 11:58:46 +01:00
}
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 {
2021-03-11 17:14:08 +01:00
display: flex;
align-items: flex-end;
2021-05-01 18:58:09 +02:00
flex-wrap: wrap;
2021-03-14 19:05:17 +01:00
margin-bottom: 3em;
2021-03-11 17:14:08 +01:00
.edit {
2021-03-11 17:14:08 +01:00
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;
}
}
2021-03-11 17:14:08 +01:00
}
.taglist {
display: flex;
align-items: center;
margin-bottom: .5em;
2019-10-30 11:58:46 +01:00
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
.icon {
margin: 0 1em;
}
2019-10-30 11:58:46 +01:00
}
section {
&.list {
display:grid;
2021-01-30 21:52:44 +01:00
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: .5em;
row-gap: 2em;
margin-bottom: 2em;
2019-10-30 11:58:46 +01:00
}
article {
position: relative;
2019-10-30 11:58:46 +01:00
background:$article-background;
border:1px solid $border;
border-radius:$article-border-radius;
overflow:hidden;
width:100%;
2022-09-06 11:45:23 +02:00
box-shadow: none;
transition: box-shadow .15s ease;
2019-10-30 11:58:46 +01:00
&:hover {
2022-09-06 11:45:23 +02:00
box-shadow: 0 0 8px #888;
a { color: inherit }
.image { background-size: 110% }
}
2019-10-30 11:58:46 +01:00
a {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
color: $article-color;
2019-10-30 11:58:46 +01:00
}
2022-09-06 11:45:23 +02:00
.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;
2019-10-30 11:58:46 +01:00
}
.date {
align-self: flex-end;
margin: .8rem;
2019-10-30 11:58:46 +01:00
margin-top: auto;
color: $article-date-color;
font-size: .8em;
2019-10-30 11:58:46 +01:00
}
&.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;
}
2019-10-30 11:58:46 +01:00
}
}
}
@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;
}
2021-02-03 20:04:06 +01:00
.filters input:first-child { grid-column: span 4; }
}
2021-05-01 18:58:09 +02:00
}
@media screen and (max-width: 640px){
main section.list {
grid-template-columns: 1fr 1fr;
}
2022-09-03 12:15:38 +02:00
.meta { justify-content: center }
2021-05-01 18:58:09 +02:00
.meta .tag { margin-top: .5em }
.meta .edit { display: none }
}