diff options
Diffstat (limited to 'assets/scss/main.scss')
| -rw-r--r-- | assets/scss/main.scss | 97 |
1 files changed, 50 insertions, 47 deletions
diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 4f430b1..79c3bdd 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -107,8 +107,7 @@ body { transition:
opacity .2s ease-in-out,
- outline .2s ease-in-out,
- padding .2s ease-in-out;
+ outline .2s ease-in-out;
&:focus {
outline-color: var(--accent);
@@ -183,7 +182,6 @@ body { a {
transition:
opacity .2s ease-in-out,
- padding .2s ease-in-out,
outline-color $change-transition;
&:hover {
@@ -218,7 +216,7 @@ body { svg {
fill: var(--fg);
- stroke: var(--fg);
+ stroke: var(--lpress);
stroke-width: .6rem;
}
}
@@ -688,18 +686,11 @@ div.highlight > div.chroma { }
-
mark,
p code,
li code {
border-radius: 2px;
padding: 1px 3px;
-
- word-break: break-all;
-}
-
-p code {
- word-break: break-word;
}
li a {
@@ -707,7 +698,6 @@ li a { }
-
article > header {
section.tags {
@@ -761,8 +751,10 @@ ul.posts { // HACK
// Using a background-image as an overlay...
background-image:
- linear-gradient(0deg, var(--bgmod),
- 100%, transparent);
+ linear-gradient(
+ 0deg, var(--bgmod),
+ 100%, transparent
+ );
border-radius: $border-radius;
@@ -922,7 +914,7 @@ details.toc { transition:
color $change-transition,
opacity .2s ease,
- outline-color .2s ease,
+ outline-color .3s ease,
padding .2s ease;
&:hover {
@@ -1026,10 +1018,8 @@ article > ul { // BUTTONS
-a.btn,
+.btn,
a.footnote-backref,
-section.search-box button,
-section.social a,
input[type=submit] {
background: var(--accent);
border: 1px solid rgba(0,0,0,.3);
@@ -1092,7 +1082,8 @@ ul.tags { background-image:
linear-gradient(
0deg, var(--bgmod),
- 100%, transparent);
+ 100%, transparent
+ );
border-radius: $border-radius;
@@ -1112,8 +1103,7 @@ ul.pagination { text-align: center;
margin: 3rem auto 1rem;
- padding: 0; // override?
-
+
display: flex;
flex-wrap: wrap;
justify-content: center;
@@ -1168,6 +1158,44 @@ ul.pagination { }
+
+
+.label-form {
+ margin-top: 1rem;
+
+ font-family: $heading-font;
+ font-weight: $heading-weight;
+ font-size: .9rem;
+
+ letter-spacing: .5px;
+ text-transform: uppercase;
+
+ user-select: none;
+}
+
+.input-text {
+ background: var(--input-bg);
+ border: 1px solid var(--input-bd);
+ color: var(--input-fg);
+ font-family: $body-font;
+ font-size: .9rem;
+ line-height: 1.5rem;
+
+ transition:
+ background-color $change-transition,
+ border $change-transition,
+ outline .2s ease-in-out;
+
+ outline: 2px solid transparent;
+
+ &:focus {
+ outline-color: var(--accent);
+ }
+}
+
+
+
+
// SEARCH
section.search-box {
@@ -1179,40 +1207,15 @@ section.search-box { }
label {
- color: var(--fg);
- font-family: $heading-font;
- font-weight: $heading-weight;
flex-basis: 100%;
- text-align: left;
-
- font-size: .9rem;
- letter-spacing: .5px;
line-height: 2rem;
- text-transform: uppercase;
}
input[name=q] {
- background: var(--input-bg);
- border: 1px solid var(--input-bd);
- color: var(--input-fg);
- font-family: $body-font;
- font-size: .9rem;
- line-height: 1.5rem;
padding: 6px 12px;
flex: 1;
-
- transition:
- background-color $change-transition,
- border $change-transition,
- outline .2s ease-in-out;
-
+
border-radius: $border-radius 0 0 $border-radius;
-
- outline: 2px solid transparent;
-
- &:focus {
- outline-color: var(--accent);
- }
}
button {
|