mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-22 17:23:50 +01:00
spacing tweaks
This commit is contained in:
parent
f46bcb1972
commit
9a531cac52
GPG Key ID:
606EEEF3C479A91F
@ -4,7 +4,6 @@ type: post
|
||||
title: 'Text-Shadow Exposed: Make cool and clever text effects with css text-shadow'
|
||||
date: 2008-04-17 01:32:13+00:00
|
||||
|
||||
category:
|
||||
tags:
|
||||
- design
|
||||
- css
|
||||
|
||||
@ -6,7 +6,6 @@ author: Matthias Kretschmann
|
||||
|
||||
date: 2008-06-11 10:37:07+00:00
|
||||
|
||||
category:
|
||||
tags:
|
||||
- design
|
||||
- macos
|
||||
|
||||
@ -6,7 +6,6 @@ download: ../media/share-link-bonanza-coda-clips.zip
|
||||
|
||||
date: 2009-03-29 23:12:15+00:00
|
||||
|
||||
category:
|
||||
tags:
|
||||
- design
|
||||
- goodies
|
||||
|
||||
@ -119,7 +119,7 @@
|
||||
"node-sass": "^4.13.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"ora": "^4.0.0",
|
||||
"prettier": "^1.19.0",
|
||||
"prettier": "^1.19.1",
|
||||
"prettier-stylelint": "^0.4.2",
|
||||
"shortid": "^2.2.15",
|
||||
"stylelint": "^11.1.1",
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
.document {
|
||||
width: 100%;
|
||||
padding-top: ($spacer * 2);
|
||||
padding-top: $spacer;
|
||||
background-color: $body-background-color;
|
||||
border-top: 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%);
|
||||
}
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
padding-top: $spacer * 2;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-sm) and (min-height: 500px) {
|
||||
margin-top: $spacer * 2.65;
|
||||
margin-bottom: $spacer * 18; // height of footer
|
||||
|
||||
@ -63,6 +63,11 @@
|
||||
|
||||
overflow: hidden;
|
||||
height: 220px;
|
||||
margin-top: $spacer * 2;
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 0 !important;
|
||||
|
||||
@ -27,9 +27,9 @@
|
||||
@include breakoutviewport;
|
||||
|
||||
max-width: none;
|
||||
margin: $spacer * $line-height auto;
|
||||
margin-top: $spacer * $line-height;
|
||||
margin-bottom: $spacer * $line-height;
|
||||
display: block;
|
||||
border-radius: $border-radius;
|
||||
|
||||
a & {
|
||||
position: relative;
|
||||
|
||||
@ -5,13 +5,16 @@
|
||||
@include divider;
|
||||
|
||||
display: grid;
|
||||
gap: $spacer;
|
||||
gap: $spacer / 2;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding-bottom: $spacer * 3;
|
||||
padding-bottom: $spacer * $line-height;
|
||||
margin-bottom: -($spacer / 2);
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
@include breakoutviewport;
|
||||
|
||||
gap: $spacer;
|
||||
padding-bottom: $spacer * 3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -7,37 +7,34 @@
|
||||
margin-top: 0;
|
||||
padding-top: $spacer / 2;
|
||||
position: absolute;
|
||||
top: calc(100% + #{$spacer / 2});
|
||||
top: calc(100% + #{$spacer / 1.5});
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
flex: 0 0 50%;
|
||||
|
||||
@media (min-width: $screen-xs) {
|
||||
flex-basis: 33%;
|
||||
}
|
||||
display: inline-block;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
opacity: 0;
|
||||
|
||||
:global(.has-menu-open) & {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $text-color;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
margin: 0 $spacer / 4;
|
||||
font-size: $font-size-small;
|
||||
text-shadow: 0 1px 0 rgba(#fff, 0.5);
|
||||
padding: $padding-base-horizontal;
|
||||
@ -59,4 +56,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar,
|
||||
&::-moz-scrollbar,
|
||||
&::-webkit-scrollbar-thumb,
|
||||
&::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,7 +28,9 @@ export default function Menu() {
|
||||
<html className={menuOpen ? 'has-menu-open' : null} lang="en" />
|
||||
</Helmet>
|
||||
<Hamburger onClick={toggleMenu} />
|
||||
<ul className={styles.menu}>{MenuItems}</ul>
|
||||
<nav className={styles.menu}>
|
||||
<ul>{MenuItems}</ul>
|
||||
</nav>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -16,13 +16,14 @@
|
||||
|
||||
ul {
|
||||
display: grid;
|
||||
gap: $spacer;
|
||||
gap: $spacer / 2;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
/////////////////////////////////////
|
||||
|
||||
.hentry__title {
|
||||
font-size: $font-size-h1;
|
||||
color: $color-headings;
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
@ -36,8 +36,11 @@ export default function Post({
|
||||
|
||||
<Layout location={location}>
|
||||
<article className={styles.hentry}>
|
||||
<PostTitle type={type} linkurl={linkurl} title={title} />
|
||||
{type === 'post' && <PostLead post={post} />}
|
||||
<header>
|
||||
<PostTitle type={type} linkurl={linkurl} title={title} />
|
||||
{type === 'post' && <PostLead post={post} />}
|
||||
</header>
|
||||
|
||||
{type === 'photo' && <PostContent post={post} />}
|
||||
{image && (
|
||||
<Image
|
||||
|
||||
Loading…
Reference in New Issue
Block a user