m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-23 01:30:01 +01:00
Code

spacing tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-11-09 17:28:39 +01:00
parent f46bcb1972
commit 9a531cac52
Signed by: m
GPG Key ID: 606EEEF3C479A91F
13 changed files with 48 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
content/posts/2008-04-17-make-cool-and-clever-text-effects-with-css-text-shadow.md
View File

@ -4,7 +4,6 @@ type: post
title: 'Text-Shadow Exposed: Make cool and clever text effects with css text-shadow' title: 'Text-Shadow Exposed: Make cool and clever text effects with css text-shadow'
date: 2008-04-17 01:32:13+00:00 date: 2008-04-17 01:32:13+00:00
category:
tags: tags:
- design - design
- css - css

1
content/posts/2008-06-11-safari-4-developer-preview.md
View File

@ -6,7 +6,6 @@ author: Matthias Kretschmann
date: 2008-06-11 10:37:07+00:00 date: 2008-06-11 10:37:07+00:00
category:
tags: tags:
- design - design
- macos - macos

1
content/posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.md
View File

@ -6,7 +6,6 @@ download: ../media/share-link-bonanza-coda-clips.zip
date: 2009-03-29 23:12:15+00:00 date: 2009-03-29 23:12:15+00:00
category:
tags: tags:
- design - design
- goodies - goodies

2
package.json
View File

@ -119,7 +119,7 @@
"node-sass": "^4.13.0", "node-sass": "^4.13.0",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"ora": "^4.0.0", "ora": "^4.0.0",
"prettier": "^1.19.0", "prettier": "^1.19.1",
"prettier-stylelint": "^0.4.2", "prettier-stylelint": "^0.4.2",
"shortid": "^2.2.15", "shortid": "^2.2.15",
"stylelint": "^11.1.1", "stylelint": "^11.1.1",

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

@ -23,7 +23,7 @@
.document { .document {
width: 100%; width: 100%;
padding-top: ($spacer * 2); padding-top: $spacer;
background-color: $body-background-color; background-color: $body-background-color;
border-top: 1px solid rgba(255, 255, 255, 0.7); border-top: 1px solid rgba(255, 255, 255, 0.7);
border-bottom: 1px solid rgba(255, 255, 255, 0.7); border-bottom: 1px solid rgba(255, 255, 255, 0.7);
@ -47,6 +47,10 @@
0 -1px 4px darken($brand-main, 15%); 0 -1px 4px darken($brand-main, 15%);
} }
@media (min-width: $screen-md) {
padding-top: $spacer * 2;
}
@media (min-width: $screen-sm) and (min-height: 500px) { @media (min-width: $screen-sm) and (min-height: 500px) {
margin-top: $spacer * 2.65; margin-top: $spacer * 2.65;
margin-bottom: $spacer * 18; // height of footer margin-bottom: $spacer * 18; // height of footer

5
src/components/atoms/Exif.module.scss
View File

@ -63,6 +63,11 @@
overflow: hidden; overflow: hidden;
height: 220px; height: 220px;
margin-top: $spacer * 2;
@media (min-width: $screen-sm) {
margin-top: 0;
}
img { img {
border-radius: 0 !important; border-radius: 0 !important;

4
src/components/atoms/Image.module.scss
View File

@ -27,9 +27,9 @@
@include breakoutviewport; @include breakoutviewport;
max-width: none; max-width: none;
margin: $spacer * $line-height auto; margin-top: $spacer * $line-height;
margin-bottom: $spacer * $line-height;
display: block; display: block;
border-radius: $border-radius;
a & { a & {
position: relative; position: relative;

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

@ -5,13 +5,16 @@
@include divider; @include divider;
display: grid; display: grid;
gap: $spacer; gap: $spacer / 2;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
padding-bottom: $spacer * 3; padding-bottom: $spacer * $line-height;
margin-bottom: -($spacer / 2); margin-bottom: -($spacer / 2);
@media (min-width: $screen-md) { @media (min-width: $screen-md) {
@include breakoutviewport; @include breakoutviewport;
gap: $spacer;
padding-bottom: $spacer * 3;
} }
} }

36
src/components/molecules/Menu.module.scss
View File

@ -7,37 +7,34 @@
margin-top: 0; margin-top: 0;
padding-top: $spacer / 2; padding-top: $spacer / 2;
position: absolute; position: absolute;
top: calc(100% + #{$spacer / 2}); top: calc(100% + #{$spacer / 1.5});
left: 0; left: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%; width: 100%;
ul {
margin: 0;
padding: 0;
text-align: center;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
li { li {
list-style: none; list-style: none;
flex: 0 0 50%; display: inline-block;
@media (min-width: $screen-xs) {
flex-basis: 33%;
}
&::before { &::before {
display: none; display: none;
} }
} }
opacity: 0;
:global(.has-menu-open) & {
opacity: 1;
}
a { a {
color: $text-color; color: $text-color;
line-height: 1; line-height: 1;
text-transform: uppercase; text-transform: uppercase;
margin: 0; margin: 0 $spacer / 4;
font-size: $font-size-small; font-size: $font-size-small;
text-shadow: 0 1px 0 rgba(#fff, 0.5); text-shadow: 0 1px 0 rgba(#fff, 0.5);
padding: $padding-base-horizontal; padding: $padding-base-horizontal;
@ -59,4 +56,11 @@
} }
} }
} }
&::-webkit-scrollbar,
&::-moz-scrollbar,
&::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-track {
display: none;
}
} }

4
src/components/molecules/Menu.tsx
View File

@ -28,7 +28,9 @@ export default function Menu() {
<html className={menuOpen ? 'has-menu-open' : null} lang="en" /> <html className={menuOpen ? 'has-menu-open' : null} lang="en" />
</Helmet> </Helmet>
<Hamburger onClick={toggleMenu} /> <Hamburger onClick={toggleMenu} />
<ul className={styles.menu}>{MenuItems}</ul> <nav className={styles.menu}>
<ul>{MenuItems}</ul>
</nav>
</> </>
) )
} }

3
src/components/molecules/RelatedPosts.module.scss
View File

@ -16,13 +16,14 @@
ul { ul {
display: grid; display: grid;
gap: $spacer; gap: $spacer / 2;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
padding: 0; padding: 0;
margin: 0; margin: 0;
@media (min-width: $screen-sm) { @media (min-width: $screen-sm) {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: $spacer;
} }
} }

1
src/templates/Post/PostTitle.module.scss
View File

@ -5,7 +5,6 @@
///////////////////////////////////// /////////////////////////////////////
.hentry__title { .hentry__title {
font-size: $font-size-h1;
color: $color-headings; color: $color-headings;
margin-top: 0; margin-top: 0;
margin-bottom: $spacer; margin-bottom: $spacer;

3
src/templates/Post/index.tsx
View File

@ -36,8 +36,11 @@ export default function Post({
<Layout location={location}> <Layout location={location}>
<article className={styles.hentry}> <article className={styles.hentry}>
<header>
<PostTitle type={type} linkurl={linkurl} title={title} /> <PostTitle type={type} linkurl={linkurl} title={title} />
{type === 'post' && <PostLead post={post} />} {type === 'post' && <PostLead post={post} />}
</header>
{type === 'photo' && <PostContent post={post} />} {type === 'photo' && <PostContent post={post} />}
{image && ( {image && (
<Image <Image