m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-15 01:25:28 +01:00
Code

more content fixes

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-09-29 03:47:00 +02:00
parent ea29e38f51
commit 590279d62e
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 52 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/posts/2012-08-07-projectpurple.md
View File

@ -27,7 +27,7 @@ It [has been revealed](http://www.theverge.com/2012/8/3/3218846/schiller-forstal
The full size I designed the wallpaper in is 3200x2048px. I don't know why Apple uses 3200px as width for the default wallpapers in Mountain Lion but it seems a good width for now. And a height of 2048px makes this big size perfectly usable for the iPad 3 too.
![](../media/Project-Purple-Dribbble.png)
![Project-Purple-Dribbble](../media/Project-Purple-Dribbble.png)
## Download

2
src/components/Layout.module.scss
View File

@ -40,7 +40,7 @@
@media (min-width: $screen-sm) and (min-height: 500px) {
margin-top: $spacer * 2.65;
margin-bottom: $spacer * 20; // height of footer
margin-bottom: $spacer * 19; // height of footer
position: relative;
z-index: 2;
min-height: 500px;

1
src/components/atoms/Hamburger.module.scss
View File

@ -55,6 +55,7 @@
vertical-align: middle;
display: inline-block;
margin: 0;
margin-right: -($spacer / 2);
&:hover,
&:focus {

2
src/components/atoms/PostImage.module.scss
View File

@ -7,6 +7,8 @@
font-family: $font-family-headings;
line-height: $line-height-headings;
font-weight: $font-weight-headings;
font-style: normal;
text-align: left;
letter-spacing: -.02em;
margin: 0;
position: absolute;

2
src/components/molecules/Featured.jsx
View File

@ -16,7 +16,7 @@ const query = graphql`
title
image {
childImageSharp {
fluid(maxWidth: 260, maxHeight: 100, cropFocus: CENTER) {
fluid(maxWidth: 300, maxHeight: 130, cropFocus: CENTER) {
...GatsbyImageSharpFluid_withWebp_noBase64
}
}

45
src/components/molecules/Featured.module.scss
View File

@ -6,21 +6,28 @@
@include divider;
display: flex;
margin-top: $spacer * $line-height;
padding-left: $spacer / 2;
padding-right: $spacer / 2;
justify-content: space-between;
flex-wrap: wrap;
padding-left: $spacer;
padding-right: $spacer;
margin-bottom: -($spacer);
padding-bottom: $spacer * 3;
padding-bottom: $spacer * $line-height;
@media (min-width: $screen-xs) {
padding-bottom: $spacer * 3;
margin-top: $spacer * $line-height;
}
@media (min-width: $screen-md) {
padding-left: 0;
padding-right: 0;
justify-content: initial;
}
}
.featuredTitle {
transition: .1s ease-out;
font-size: $font-size-mini;
font-size: $font-size-base;
margin: 0;
position: absolute;
top: 25%;
@ -33,19 +40,31 @@
left: 0;
opacity: 0;
transform: translate3d(0, -20px, 0);
@media (min-width: $screen-sm) {
font-size: $font-size-base;
}
}
.featuredItem {
flex: 1;
position: relative;
margin-left: $spacer / 2;
max-width: 12rem;
flex: 0 0 48%;
margin-bottom: $spacer / 2;
&:first-child {
margin-left: 0;
&:last-child {
margin-bottom: 0;
display: none;
}
@media (min-width: $screen-xs) {
flex: 1;
max-width: none;
margin-left: $spacer / 2;
&:last-child {
display: block;
}
&:first-child {
margin-left: 0;
}
}
a {

11
src/styles/_buttons.scss
View File

@ -4,7 +4,7 @@
.btn,
a.btn {
text-align: center;
display: inline-block;
display: block;
margin-bottom: 0;
vertical-align: middle;
touch-action: manipulation;
@ -162,8 +162,13 @@ a.btn-primary {
a {
@extend .btn;
flex: 1;
margin-left: $spacer / 2;
margin-bottom: $spacer / 2;
@media (min-width: $screen-xs) {
flex: 1;
margin-left: $spacer / 2;
margin-bottom: 0;
}
&:first-child {
margin-left: 0;

4
src/styles/_variables.scss
View File

@ -79,8 +79,8 @@ $color-headings--dark: $brand-main-light;
/////////////////////////////////////
$spacer: ($font-size-base * $line-height);
$padding-base-vertical: 8px;
$padding-base-horizontal: 12px;
$padding-base-vertical: .75rem;
$padding-base-horizontal: 1.25rem;
$border-radius: 3px;

4
src/templates/Post.module.scss
View File

@ -5,4 +5,8 @@
width: 100%;
padding-top: $spacer;
padding-bottom: $spacer * 3;
&:only-child {
padding-bottom: $spacer;
}
}