pdostal/receptty.org
1
0
Fork 0
forked from em/receptty.org
Code Issues Pull Requests Releases Activity

Nahrání lokálních souborů

Browse Source
This commit is contained in:
Emil Miler
2019-10-30 11:58:46 +01:00
commit dd8a1ab8cc
66 changed files with 1436 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
sass/_fonts.scss Normal file
View File

@ -0,0 +1,4 @@
@font-face {
font-family:sofia;
src:url(sofia.otf);
}

31
sass/_lists.scss Normal file
View File

@ -0,0 +1,31 @@
ol {
counter-reset:procedure;
list-style-type: none;
padding:0;
position:relative; // allow being pushed
left:3em; // push to the right because of counter overflow
li {
counter-increment:procedure;
margin-bottom:1em;
line-height:1.2rem;
&:before {
content:counter(procedure);
font-weight:bold;
font-size:1.1rem;
background:$secondary;
color:#000;
border-radius:100%;
border:1px solid $border;
width:2rem;
height:2rem;
display:inline-block; // allows float and keeps dimensions
position:relative; // allow being pushed
left:-2.7em; // move to the left not to overlap with text
text-align:center;
line-height:2.3rem; // vertical center on text
margin-right:-2em; // pull the first line of text to the left
}
}
}

51
sass/_nav.scss Normal file
View File

@ -0,0 +1,51 @@
nav {
display:flex;
flex-direction:column;
width:100%;
background:$nav-background-primary;
color:$nav-color;
border-bottom:$nav-border;
h1 {
margin:$nav-h1-margin;
}
ul {
display:flex;
margin:0;
padding:0;
list-style-type:none;
li {
a {
padding:1em;
display:block;
text-decoration:none;
&, &:active, &:visited {
color:$nav-color;
}
&:hover {
color:$nav-anchor-hover-color;
}
}
}
}
.mainnav {
display:flex;
justify-content:space-between;
align-items:flex-end;
width:$recipe-wrap;
margin:0 auto;
}
.subnav {
display:flex;
justify-content:center;
background:$nav-background-secondary;
}
}

29
sass/_tables.scss Normal file
View File

@ -0,0 +1,29 @@
table {
border: 1px solid $border;
border-radius:3px;
background:linear-gradient(20deg, $primary 20%, $secondary 95%);
padding:0;
margin:0 2em 2em 0;
display:block;
clear:both;
float:left;
thead {
th {
padding:1em;
border-bottom:1px dashed $border;
}
}
tbody {
tr {
td {
padding:.5em .8em;
}
}
}
}

18
sass/_tags.scss Normal file
View File

@ -0,0 +1,18 @@
span.tag {
margin:$tag-margin;
padding:$tag-padding;
background:$tag-background;
color:$tag-color;
border-radius:$tag-border-radius;
border:1px solid #aaa;
font-size:$tag-font-size;
display:inline-block;
a {
color:$tag-color;
&:hover {
color:lighten($anchor-hover-color,40);
}
}
}

45
sass/_variables.scss Normal file
View File

@ -0,0 +1,45 @@
// colors
$primary:#ffd7e8;
$secondary:#d7e9ff;
$secondary-dark:darken($secondary,30);
$primary-dark:darken($primary,30);
$border:#aaa;
// scale
$wrap:1200px;
// body
$body-background-image:url(bg.png);
$body-color:#000;
// anchors
$anchor-color:#546476;
$anchor-hover-color:$secondary-dark;
// tags
$tag-background:$primary;
$tag-padding:.5em;
$tag-margin:0 .4em .5em 0;
$tag-border-radius:5px;
$tag-color:#000;
$tag-font-size:.9rem;
// nav
$nav-color:#000;
$nav-background-primary:linear-gradient(20deg, $primary 20%, $secondary 95%);
$nav-background-secondary:rgba(255,255,255,.3);
$nav-anchor-hover-color:$anchor-hover-color;
$nav-border:2px solid $border;
$nav-h1-margin:1em 0;
// recipe
$recipe-background:#f4f4f4;
$recipe-wrap:800px;
// article
$article-width:22%;
$article-margin:0 1em 2em 1em;
$article-background:$primary;
$article-color:#000;
$article-date-color:#888;
$article-border-radius:6px;

113
sass/style.scss Normal file
View File

@ -0,0 +1,113 @@
@import "variables";
@import "nav";
@import "lists";
@import "tags";
@import "tables";
@import "fonts";
html, body {
margin:0;
}
body {
background-image:$body-background-image;
background-position:center center;
color:$body-color;
font-family:sofia;
}
a {
color:$anchor-color;
text-decoration:none;
&:hover{
color:$anchor-hover-color;
}
}
img {
width:100%;
}
main {
width:$wrap;
margin:3em auto;
h2 {
font-size:3em;
text-align:center;
}
&.recipe {
background:$recipe-background;
width:$recipe-wrap;
padding:1em 4em;
border:1px solid $border;
border-radius:8px;
img {
display:block;
margin:0 auto 2em auto;
border-radius:5px;
border:1px solid $border;
}
h2 {
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 {
margin-bottom:1.5em;
}
.pagination {
text-align:center;
}
section {
&.list {
display:flex;
flex-wrap:wrap;
justify-content:center;
}
article {
display:flex;
flex-direction:column;
width:$article-width;
margin:$article-margin;
background:$article-background;
border:1px solid $border;
border-radius:$article-border-radius;
overflow:hidden;
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;
}
}
}
}