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

tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2021-03-04 22:53:35 +01:00
parent 5e11ba6263
commit 4c963dcd16
Signed by: m
GPG Key ID: 606EEEF3C479A91F
16 changed files with 67 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,7 +36,7 @@
.document {
margin-top: calc(var(--spacer) * 2.5);
/* height of footer */
margin-bottom: calc(var(--spacer) * 18);
margin-bottom: calc(var(--spacer) * 12);
position: relative;
z-index: 2;
min-height: 500px;

4
src/components/atoms/Breakout.module.css
View File

@ -5,7 +5,7 @@
@media (min-width: 70rem) {
.breakout {
margin-left: -7rem;
margin-right: -7rem;
margin-left: -6rem;
margin-right: -6rem;
}
}

3
src/components/atoms/Divider.module.css
View File

@ -16,3 +16,6 @@
:global(.dark) .divider::before {
border-bottom-color: var(--brand-grey);
}
.dividerTop {
}

24
src/components/atoms/Hamburger.module.css
View File

@ -8,7 +8,7 @@
margin-top: calc(var(--spacer) / 2);
}
.hamburgerLine {
.line {
display: block;
position: absolute;
height: 1px;
@ -20,38 +20,38 @@
transition: 0.2s var(--easing);
}
.hamburgerLine::nth-child(1) {
.line:nth-child(1) {
top: 0;
transform-origin: left center;
}
.hamburgerLine::nth-child(2) {
.line:nth-child(2) {
top: 7px;
transform-origin: left center;
}
.hamburgerLine::nth-child(3) {
.line:nth-child(3) {
top: 14px;
transform-origin: left center;
}
/* open state */
:global(.has-menu-open) .hamburgerLine::nth-child(1) {
:global(.has-menu-open) .line:nth-child(1) {
transform: rotate(45deg);
top: -1px;
}
:global(.has-menu-open) .hamburgerLine::nth-child(2) {
:global(.has-menu-open) .line:nth-child(2) {
width: 0%;
opacity: 0;
}
:global(.has-menu-open) .hamburgerLine::nth-child(3) {
:global(.has-menu-open) .line:nth-child(3) {
transform: rotate(-45deg);
top: 16px;
}
.hamburgerButton {
.button {
padding: calc(var(--spacer) / 2);
vertical-align: middle;
display: inline-block;
@ -59,12 +59,12 @@
margin-right: -1rem;
}
.hamburgerButton:hover,
.hamburgerButton:focus {
.button:hover,
.button:focus {
outline: 0;
}
.hamburgerButton:hover .hamburgerLine,
.hamburgerButton:focus .hamburgerLine {
.button:hover .line,
.button:focus .line {
border-color: var(--link-color);
}

8
src/components/atoms/Hamburger.tsx
View File

@ -10,13 +10,13 @@ export default function Hamburger({
<button
type="button"
title="Menu"
className={styles.hamburgerButton}
className={styles.button}
onClick={onClick}
>
<span className={styles.hamburger}>
<span className={styles.hamburgerLine} />
<span className={styles.hamburgerLine} />
<span className={styles.hamburgerLine} />
<span className={styles.line} />
<span className={styles.line} />
<span className={styles.line} />
</span>
</button>
)

2
src/components/atoms/Image.module.css
View File

@ -37,7 +37,7 @@
margin-bottom: calc(var(--spacer) * var(--line-height));
display: block;
position: relative;
transition: 0.2s var(--easing);
transition: 0.2s ease-out;
}
@media (min-width: 40rem) {

2
src/components/atoms/Image.tsx
View File

@ -26,7 +26,7 @@ export const imageSizeDefault = graphql`
original {
src
}
fluid(maxWidth: 940, quality: 85) {
fluid(maxWidth: 950, quality: 85) {
...GatsbyImageSharpFluid_withWebp_noBase64
}
}

3
src/components/molecules/PostTeaser.module.css
View File

@ -5,7 +5,6 @@
margin-bottom: 0;
font-size: var(--font-size-base);
transition: color 0.2s ease-out;
color: var(--text-color);
}
.post {
@ -25,7 +24,7 @@
}
.empty {
/* @include media-frame; */
composes: frame from '../atoms/Image.module.css';
display: block;
min-height: 95px;

15
src/components/molecules/Vcard.module.css
View File

@ -1,17 +1,8 @@
.vcard {
margin-bottom: calc(var(--spacer) * 2);
}
.avatar {
/* @include media-frame; */
margin-bottom: calc(var(--spacer) / 3);
}
.avatar,
.avatar img {
composes: frame from '../atoms/Image.module.css';
border: 2px solid transparent;
border-radius: 50%;
overflow: hidden;
margin-bottom: calc(var(--spacer) / 3);
}
.description {

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

@ -29,7 +29,7 @@ export default function Vcard(): ReactElement {
const links = [twitter, github, rss, jsonfeed]
return (
<div className={styles.vcard}>
<>
<Img className={styles.avatar} fixed={avatar} alt="avatar" />
<p className={styles.description}>
Blog of designer &amp; developer{' '}
@ -39,6 +39,6 @@ export default function Vcard(): ReactElement {
</p>
<IconLinks links={links} />
</div>
</>
)
}

16
src/components/organisms/Footer.module.css
View File

@ -17,22 +17,8 @@
}
}
.theme {
margin: var(--spacer) auto;
}
.theme p {
text-align: center;
margin: 0;
}
.themeTitle {
font-size: var(--font-size-h5);
margin-bottom: calc(var(--spacer) / 2);
}
.copyright {
padding-top: var(--spacer);
padding-top: calvar(--spacer);
padding-bottom: var(--spacer);
}

1
src/global/_code.css
View File

@ -14,7 +14,6 @@ kbd {
code,
samp {
white-space: normal;
color: inherit;
background-color: var(--box-background-color);
border-radius: var(--border-radius);
}

14
src/global/_variables.css
View File

@ -49,7 +49,7 @@
--font-size-h5: var(--font-size-large);
--font-size-h6: var(--font-size-base);
--line-height: 1.7;
--line-height: 1.6;
--line-height-small: 1.1428571429;
--font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue',
@ -65,7 +65,7 @@
--font-family-headings: 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',
'Helvetica', 'Arial', 'sans-serif';
--font-weight-headings: 700;
--line-height-headings: 1.4;
--line-height-headings: 1.2;
/* Spacing
///////////////////////////////////// */
@ -80,7 +80,7 @@
/* Code
///////////////////////////////////// */
--code-color: var(--brand-light);
--code-color: var(--brand-grey-light);
--kbd-color: var(--code-color);
/* Responsive breakpoints
@ -109,16 +109,16 @@
/* Misc.
///////////////////////////////////// */
--maxWidthContent: 47rem;
--maxWidthContent: 45rem;
--maxWidthContainer: 80rem;
--easing: cubic-bezier(0.75, 0, 0.08, 1);
}
.dark {
--body-background-color: #1d2224;
--box-background-color: rgba(0, 0, 0, 0.1);
--body-background-color: #161a1b;
--box-background-color: rgba(255, 255, 255, 0.03);
--text-color: #889da7;
--text-color: var(--brand-grey-light);
--text-color-light: var(--brand-grey);
--text-color-dimmed: var(--brand-grey-dark);
--border-color: var(--brand-grey-dark);

33
src/global/global.css
View File

@ -25,8 +25,8 @@ body {
color: var(--text-color);
text-rendering: optimizeLegibility;
font-feature-settings: 'liga', 'kern';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; */
min-height: 100vh;
background: var(--body-background-color);
transition: 0.4s var(--easing);
@ -41,7 +41,7 @@ body {
p,
ul,
ol {
margin: 0 0 var(--spacer);
margin: 0 0 calc(var(--spacer) / var(--line-height));
}
/* Reset fonts for relevant elements
@ -122,10 +122,8 @@ h6 {
line-height: var(--line-height-headings);
color: var(--color-headings);
font-weight: var(--font-weight-headings);
margin: 0 0 var(--spacer);
margin: 0 0 calc(var(--spacer) / var(--line-height));
letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: color 0.2s ease-out;
}
@ -138,6 +136,27 @@ h6 {
font-weight: 600;
}
h1 .anchor.before,
h2 .anchor.before,
h3 .anchor.before,
h4 .anchor.before,
h5 .anchor.before,
h6 .anchor.before {
opacity: 0;
font-size: var(--font-size-h4);
bottom: 0;
top: 0.3em;
}
h1:hover .anchor,
h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor,
h5:hover .anchor,
h6:hover .anchor {
opacity: 1;
}
/* Responsive Media
///////////////////////////////////// */
@ -180,7 +199,7 @@ ol {
li {
position: relative;
margin-bottom: calc(var(--spacer) / 2);
margin-bottom: calc(var(--spacer) / 8);
}
li::before {

2
src/pages/index.module.css
View File

@ -20,7 +20,7 @@
}
.articles:first-of-type h1 {
font-size: var(--font-size-h4);
font-size: var(--font-size-h3);
}
.articlesLast {

4
src/pages/index.tsx
View File

@ -21,7 +21,7 @@ export default function Home({ data }: PageProps): ReactElement {
</div>
<div className={`${styles.articles} ${styles.articlesLast}`}>
{(data as any).latestArticles.edges
.slice(2, 5)
.slice(2, 8)
.map(({ node }: { node: Post }) => (
<PostTeaser key={node.id} post={node} hideDate />
))}
@ -48,7 +48,7 @@ export const homeQuery = graphql`
latestArticles: allMarkdownRemark(
filter: { fields: { type: { ne: "photo" } } }
sort: { order: DESC, fields: [fields___date] }
limit: 5
limit: 8
) {
edges {
node {