commit 70f001bf363d98eb07b8d91feb969266f917135a
parent d2646b92d344c9bed78a8554dd249bd44da8eb16
Author: Hugo Soucy <hugo@soucy.cc>
Date: Wed, 9 Dec 2020 21:58:30 -0500
Change CSS
Diffstat:
10 files changed, 118 insertions(+), 97 deletions(-)
diff --git a/src/scss/atoms/typography/_quotes.scss b/src/scss/atoms/typography/_quotes.scss
@@ -1,7 +1,11 @@
// Quotes Atom
blockquote {
border-left: rem-calc(16) solid var(--base-br);
- display:block;
- //margin: 0;
- padding: 1em 1em 1em rem-calc(30);
+ display: block;
+ margin: 0;
+ padding: 1em 1em 1em rem-calc(16);
+
+ @include mq-from(md) {
+ margin-left: calc(var(--base-space) * 6);
+ }
}
diff --git a/src/scss/global/_base.scss b/src/scss/global/_base.scss
@@ -1,14 +1,14 @@
/* BASE STYLES */
:root {
- font-size: #{$base-font-size}px;
+ font-size: #{$base-font-size}px;
- @include mq-from(xs) {
- font-size: #{($base-font-size + 2)}px;
- }
+ @include mq-from(xs) {
+ font-size: #{($base-font-size + 2)}px;
+ }
- @include mq-from(md) {
- font-size: #{($base-font-size + 6)}px;
- }
+ @include mq-from(md) {
+ font-size: #{($base-font-size + 6)}px;
+ }
}
// *,
@@ -26,28 +26,30 @@
html,
body {
- height: 100%;
- min-height: 100%;
- position: relative;
+ height: 100%;
+ min-height: 100%;
+ position: relative;
}
body {
- background: var(--base-bg) url("/images/noise.png") repeat;
+ background: var(--base-bg) url("/images/noise.png") repeat;
+ margin: 0;
+ padding: 0;
}
[hidden] {
- display: none;
+ display: none;
}
[hidden] + * {
- margin-top: 0 !important;
+ margin-top: 0 !important;
}
footer,
header,
main,
nav {
- display: block
+ display: block
}
body,
@@ -55,61 +57,65 @@ button,
input,
select,
textarea {
- color: var(--base-fg);
- font-family: var(--base-font-family);
- font-size: 1rem;
- line-height: var(--base-line-height);
+ color: var(--base-fg);
+ font-family: var(--base-font-family);
+ font-size: 1rem;
+ line-height: var(--base-line-height);
}
a {
- background: linear-gradient(180deg,transparent 70%, var(--base-link-bg) 0);
- color: var(--base-link-fg);
- overflow-wrap: break-word;
- text-decoration: none;
-
- &:focus,
- &:hover {
- background: linear-gradient(180deg,transparent 0%, var(--base-link-bg) 0);
- color: var(--base-fg);
- }
+ background: linear-gradient(180deg,transparent 70%, var(--base-link-bg) 0);
+ color: var(--base-link-fg);
+ overflow-wrap: break-word;
+ text-decoration: none;
+
+ &:focus,
+ &:hover {
+ background: linear-gradient(180deg,transparent 0%, var(--base-link-bg) 0);
+ color: var(--base-fg);
+ }
}
hr {
- background: transparent;
- border: dotted var(--base-br);
- border-width: 1px 0 0;
- display: block;
- height: 1px;
+ background: transparent;
+ border: dotted var(--base-br);
+ border-width: 1px 0 0;
+ display: block;
+ height: 1px;
}
pre {
- background: var(--base-snippet-bg);
- border: 1px dotted var(--base-snippet-fg);
- font-size: .85rem;
- overflow: auto;
- padding: 1rem;
-
- code {
- background: transparent;
- }
+ background: var(--base-snippet-bg);
+ border: 1px dotted var(--base-snippet-fg);
+ font-size: .85rem;
+ overflow: auto;
+ padding: 1rem;
+
+ code {
+ background: transparent;
+ }
}
code {
- background: var(--base-snippet-bg);
- color: var(--base-snippet-fg);
+ background: var(--base-snippet-bg);
+ color: var(--base-snippet-fg);
}
iframe,
img {
- height: auto;
- max-width: 100%;
+ height: auto;
+ max-width: 100%;
}
ol,
ul {
- padding-left: 1rem;
+ padding-left: 1rem;
}
svg:not(:root) {
- overflow: hidden;
+ overflow: hidden;
+}
+
+abbr {
+ cursor: help;
}
diff --git a/src/scss/global/tokens/_grid.scss b/src/scss/global/tokens/_grid.scss
@@ -1,5 +1,5 @@
// Grid tokens
-$grid-breakpoints: (xs: 320px, xsm: 360px, sm: 512px, md: 768px, lg: 1024px, xl: 1280px, xxl: 1440px);
+$grid-breakpoints: (xs: 320px, xsm: 360px, sm: 480px, md: 768px, lg: 1024px, xl: 1280px, xxl: 1440px);
:root {
--grid-max-width: calc(1rem * calc(1100 / 16));
diff --git a/src/scss/modules/_go-to.scss b/src/scss/modules/_go-to.scss
@@ -12,7 +12,7 @@
align-items: center;
background: var(--base-darkest);
color: var(--base-brightest);
- display: inline-flex;
+ display: flex;
justify-content: flex-start;
padding-right: 2rem;
text-transform: capitalize;
@@ -31,7 +31,9 @@
padding: 0;
@include mq-from(xs) {
+ @include mq-to(lg) {
display: block;
+ }
}
}
}
diff --git a/src/scss/modules/_hcard.scss b/src/scss/modules/_hcard.scss
@@ -10,11 +10,15 @@
}
.u-photo {
- float: right;
height: auto;
- margin: 1rem;
+ margin: 1rem auto 0;
mix-blend-mode: hard-light;
- width: 15rem;
+
+ @include mq-from(sm) {
+ float: right;
+ margin: 1rem;
+ max-width: 240px;
+ }
}
.u-photo {
diff --git a/src/scss/modules/_hcite.scss b/src/scss/modules/_hcite.scss
@@ -1,12 +1,18 @@
//
-.hcite {
- .emojione.custom-emoji {
- height: auto;
- width: 1.5rem;
- }
-}
+.hcite {}
blockquote.hcite {
- //background: white;
- font-style: italic;
+ font-size: 0.85em;
+
+ .emojione.custom-emoji {
+ height: auto;
+ width: 1rem;
+ }
+
+ .detailed-status__display-avatar,
+ .detailed-status__meta,
+ .status__content ~ *,
+ .button.logo-button.modal-button {
+ display: none;
+ }
}
diff --git a/src/scss/modules/_hentry.scss b/src/scss/modules/_hentry.scss
@@ -52,11 +52,16 @@
align-items: center;
color: var(--base-darkest-grey);
display: flex;
+ flex-wrap: wrap;
font-size: 14px;
& > svg {
margin-right: calc(var(--base-space) * 1);
}
+
+ & > cite {
+ margin-left: calc(var(--base-space) * 1);
+ }
}
diff --git a/src/scss/modules/_layout.scss b/src/scss/modules/_layout.scss
@@ -1,27 +1,31 @@
// Layout module
.layout {
- display: flex;
- flex-direction: column;
- margin: 0;
- padding: 0;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
- & > * {
- margin-top: 1rem;
- margin-bottom: 1rem;
- }
+ & > * {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
- & > * > * {
- margin-left: auto;
- margin-right: auto;
- max-width: var(--grid-max-width);
- padding: 4rem 2rem;
- }
+ & > * > * {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: var(--grid-max-width);
+ padding: 4rem 2rem;
+ }
- & > :first-child:not(main) {
- margin-top: 0;
- }
+ & > :first-child:not(main) {
+ margin-top: 0;
+ }
- & > :last-child:not(main) {
- margin-bottom: 0;
- }
+ & > :last-child:not(main) {
+ margin-bottom: 0;
+ }
+
+ & > main {
+ margin-bottom: auto;
+ margin-top: auto;
+ }
}
diff --git a/src/scss/modules/_main.scss b/src/scss/modules/_main.scss
@@ -1,12 +1,2 @@
// Main module
-.main {
- body:not(.index) > & {
- margin-bottom: auto;
- margin-top: 0;
- }
-
- body.index > & {
- margin-bottom: auto;
- margin-top: auto;
- }
-}
+.main {}
diff --git a/src/scss/modules/_nav.scss b/src/scss/modules/_nav.scss
@@ -9,8 +9,8 @@
display: flex;
order: -1;
- body > & {
- margin-top: 0;
+ & {
+ margin-top: 0;
}
}
