mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-22 17:23:50 +01:00
layout tweaks
This commit is contained in:
parent
5cc6e098f0
commit
4b2a8a5d87
GPG Key ID:
606EEEF3C479A91F
@ -44,10 +44,10 @@ module.exports = [
|
||||
url: 'https://api.github.com/graphql',
|
||||
headers: {
|
||||
Authorization: `bearer ${process.env.GATSBY_GITHUB_TOKEN}`
|
||||
},
|
||||
}
|
||||
// Additional options to pass to node-fetch
|
||||
fetchOptions: {},
|
||||
refetchInterval: 300 // 5 min.
|
||||
// fetchOptions: {},
|
||||
// refetchInterval: 300 // 5 min.
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@ -49,3 +49,27 @@
|
||||
min-height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: var(--maxWidthContent);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.wide {
|
||||
composes: container;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.breakout {
|
||||
margin-left: calc(-50vw + 50%);
|
||||
margin-right: calc(-50vw + 50%);
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.breakout {
|
||||
margin-left: -8rem;
|
||||
margin-right: -8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
.breakout {
|
||||
margin-left: calc(-50vw + 50%);
|
||||
margin-right: calc(-50vw + 50%);
|
||||
}
|
||||
|
||||
@media (min-width: 70rem) {
|
||||
.breakout {
|
||||
margin-left: -6rem;
|
||||
margin-right: -6rem;
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: var(--maxWidthContent);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.wide {
|
||||
composes: container;
|
||||
max-width: none;
|
||||
}
|
||||
@ -48,6 +48,7 @@
|
||||
}
|
||||
|
||||
.map {
|
||||
composes: breakout from '../Layout.module.css';
|
||||
composes: frame from './Image.module.css';
|
||||
height: 180px;
|
||||
margin-top: calc(var(--spacer) * 2);
|
||||
|
||||
@ -25,7 +25,7 @@ export const imageSizeDefault = graphql`
|
||||
original {
|
||||
src
|
||||
}
|
||||
gatsbyImageData(layout: CONSTRAINED, width: 950, quality: 85)
|
||||
gatsbyImageData(layout: CONSTRAINED, width: 1040, quality: 85)
|
||||
}
|
||||
`
|
||||
|
||||
@ -34,7 +34,7 @@ export const imageSizeThumb = graphql`
|
||||
original {
|
||||
src
|
||||
}
|
||||
gatsbyImageData(layout: CONSTRAINED, width: 420, height: 140, quality: 85)
|
||||
gatsbyImageData(layout: CONSTRAINED, width: 480, height: 140, quality: 85)
|
||||
}
|
||||
`
|
||||
|
||||
@ -43,6 +43,12 @@ export const photoSizeThumb = graphql`
|
||||
original {
|
||||
src
|
||||
}
|
||||
gatsbyImageData(layout: CONSTRAINED, width: 300, height: 300, quality: 85)
|
||||
gatsbyImageData(
|
||||
layout: CONSTRAINED
|
||||
width: 316
|
||||
height: 316
|
||||
quality: 85
|
||||
transformOptions: { cropFocus: CENTER }
|
||||
)
|
||||
}
|
||||
`
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
.relatedPosts {
|
||||
composes: container from '../atoms/Container.module.css';
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--font-size-h3);
|
||||
margin-bottom: var(--spacer);
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
.results {
|
||||
composes: container from '../../atoms/Container.module.css';
|
||||
composes: container from '../../Layout.module.css';
|
||||
padding: var(--spacer) calc(var(--spacer) / 2);
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
.actions {
|
||||
composes: breakout from '../../Layout.module.css';
|
||||
margin-top: calc(var(--spacer) * 2);
|
||||
margin-bottom: calc(var(--spacer) * 2);
|
||||
background: var(--box-background-color);
|
||||
padding-top: var(--spacer);
|
||||
padding-bottom: var(--spacer);
|
||||
padding: var(--spacer);
|
||||
border-radius: var(--border-radius);
|
||||
display: grid;
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
.prevnext {
|
||||
composes: container from '../../atoms/Container.module.css';
|
||||
margin-top: calc(var(--spacer) * 2);
|
||||
padding-top: calc(var(--spacer) * 2);
|
||||
display: grid;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.hentry {
|
||||
composes: container from '../../atoms/Container.module.css';
|
||||
composes: container from '../../Layout.module.css';
|
||||
width: 100%;
|
||||
padding-bottom: var(--spacer);
|
||||
}
|
||||
@ -13,5 +13,5 @@
|
||||
}
|
||||
|
||||
.image {
|
||||
composes: breakout from '../../atoms/Breakout.module.css';
|
||||
composes: breakout from '../../Layout.module.css';
|
||||
}
|
||||
|
||||
46
src/global/_alerts.css
Normal file
46
src/global/_alerts.css
Normal file
@ -0,0 +1,46 @@
|
||||
.alert {
|
||||
padding: calc(var(spacer) / 2);
|
||||
margin-top: var(--spacer);
|
||||
margin-bottom: var(--spacer);
|
||||
border-radius: var(--border-radius);
|
||||
border: var(--stroke-width) solid transparent;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
.alert {
|
||||
padding: var(--spacer);
|
||||
}
|
||||
}
|
||||
|
||||
.alert > p:last-child,
|
||||
.alert > ul:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
color: #826527;
|
||||
background: var(--alert-info);
|
||||
}
|
||||
|
||||
.dark .alert-info {
|
||||
color: var(--alert-info);
|
||||
background: rgba(248, 241, 227, 0.2);
|
||||
}
|
||||
|
||||
/* .dark & {
|
||||
color: darken($alert-info, 40%);
|
||||
background: darken($alert-info, 85%);
|
||||
border-color: darken($alert-info, 90%);
|
||||
} */
|
||||
|
||||
.alert-success {
|
||||
/* color: darken($alert-success, 60%); */
|
||||
background: var(--alert-success);
|
||||
}
|
||||
|
||||
.alert-danger,
|
||||
.alert-error {
|
||||
/* color: darken($alert-error, 60%); */
|
||||
background: var(--alert-error);
|
||||
}
|
||||
@ -1,134 +0,0 @@
|
||||
@import 'variables';
|
||||
|
||||
// CSS image replacement
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin hide-text() {
|
||||
font: 0/0 a; // stylelint-disable font-family-no-missing-generic-family-keyword
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Text overflow
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin ellipsis() {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Layout breakout
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin breakoutviewport() {
|
||||
margin-left: calc(-50vw + 50%);
|
||||
margin-right: calc(-50vw + 50%);
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
@include breakoutviewport--base();
|
||||
}
|
||||
}
|
||||
|
||||
@mixin breakoutviewport--base() {
|
||||
margin-left: -($spacer * 4);
|
||||
margin-right: -($spacer * 4);
|
||||
}
|
||||
|
||||
@mixin breakoutviewport--full() {
|
||||
margin-left: calc(-50vw + 50%);
|
||||
margin-right: calc(-50vw + 50%);
|
||||
}
|
||||
|
||||
// Button sizing
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin button-size(
|
||||
$padding-vertical,
|
||||
$padding-horizontal,
|
||||
$font-size,
|
||||
$line-height,
|
||||
$border-radius
|
||||
) {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
// Form control sizing
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin input-size(
|
||||
$padding-vertical,
|
||||
$padding-horizontal,
|
||||
$font-size,
|
||||
$line-height,
|
||||
$border-radius
|
||||
) {
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&input[type='search'] {
|
||||
background-size: $font-size;
|
||||
background-position: $padding-vertical center;
|
||||
padding-left: ($padding-vertical * 4);
|
||||
}
|
||||
|
||||
&select {
|
||||
line-height: $input-height;
|
||||
}
|
||||
|
||||
&textarea,
|
||||
&select[multiple] {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder text
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin placeholder($color: $input-color-placeholder) {
|
||||
&::-moz-placeholder {
|
||||
color: $color;
|
||||
opacity: 1; // Override Firefox's unusual default opacity; See https//github.com/twbs/bootstrap/pull/11526
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
// Image frame style
|
||||
/////////////////////////////////////
|
||||
|
||||
@mixin media-frame() {
|
||||
@include transition();
|
||||
|
||||
border-top: 2px solid transparent;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 3px 5px rgba($brand-grey, 0.2),
|
||||
0 5px 16px rgba($brand-grey, 0.2);
|
||||
|
||||
@media (min-width: $screen-sm) {
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
:global(.dark) & {
|
||||
box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.25),
|
||||
0 5px 16px rgba(darken($brand-main, 20%), 0.25);
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
@ -14,7 +14,7 @@
|
||||
--brand-grey-light: #7f97a1;
|
||||
--brand-grey-dimmed: #c3d8e0;
|
||||
|
||||
--alert-info: #f7f1e4;
|
||||
--alert-info: rgb(248, 241, 227);
|
||||
--alert-success: #dff0d8;
|
||||
--alert-error: #f2dede;
|
||||
|
||||
@ -115,7 +115,7 @@
|
||||
/* Misc.
|
||||
///////////////////////////////////// */
|
||||
|
||||
--maxWidthContent: 44rem;
|
||||
--maxWidthContent: 42rem;
|
||||
--maxWidthContainer: 60rem;
|
||||
--easing: cubic-bezier(0.75, 0, 0.08, 1);
|
||||
}
|
||||
|
||||
@ -120,7 +120,7 @@ h6 {
|
||||
line-height: var(--line-height-headings);
|
||||
color: var(--color-headings);
|
||||
font-weight: var(--font-weight-headings);
|
||||
margin: 0 0 calc(var(--spacer) / var(--line-height));
|
||||
margin: var(--spacer) 0;
|
||||
letter-spacing: -0.01em;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
@ -197,6 +197,10 @@ ol {
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
margin-bottom: calc(var(--spacer) / 2);
|
||||
}
|
||||
|
||||
ul ul li {
|
||||
margin-bottom: calc(var(--spacer) / 8);
|
||||
}
|
||||
|
||||
@ -209,7 +213,7 @@ li::before {
|
||||
}
|
||||
|
||||
li p {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: calc(var(--spacer) / 4);
|
||||
}
|
||||
|
||||
ul li::before {
|
||||
@ -341,8 +345,7 @@ td {
|
||||
@import '_buttons';
|
||||
@import '_code.css';
|
||||
@import '_toast.css';
|
||||
|
||||
/* @import '_alerts'; */
|
||||
@import '_alerts.css';
|
||||
|
||||
.medium-zoom-overlay {
|
||||
background-color: var(--body-background-color) !important;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.section {
|
||||
composes: wide from '../components/atoms/Container.module.css';
|
||||
composes: wide from '../components/Layout.module.css';
|
||||
}
|
||||
|
||||
.section:not(:first-child) {
|
||||
@ -41,6 +41,6 @@
|
||||
@media (min-width: 40rem) {
|
||||
.photos {
|
||||
gap: calc(var(--spacer) * 1.5);
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user