site: css polishing
- relocate a couple of specific blocks out of the general area - rename --gap to --vertical-unit
This commit is contained in:
parent
07987b7c0e
commit
005560bd4c
1 changed files with 58 additions and 63 deletions
|
|
@ -40,15 +40,14 @@
|
|||
--tag-kind-a: var(--light-theme-tag-kind-a);
|
||||
--tag-kind-c: var(--light-theme-tag-kind-c);
|
||||
--tag-kind-r: var(--light-theme-tag-kind-r);
|
||||
--suggestion-hover-bg: var(--light-theme-suggetion-hover-bg);
|
||||
|
||||
--gap: 1.5rem;
|
||||
--vertical-unit: 1.5rem;
|
||||
--viewport-width: 90rem;
|
||||
|
||||
--border-thin: 0.0625rem solid var(--accent);
|
||||
|
||||
--gallery-column-gap: 1.2rem;
|
||||
|
||||
--suggestion-hover-bg: var(--light-theme-suggetion-hover-bg);
|
||||
}
|
||||
|
||||
*,
|
||||
|
|
@ -87,7 +86,7 @@ h3,
|
|||
ol,
|
||||
p,
|
||||
ul {
|
||||
margin-bottom: var(--gap);
|
||||
margin-bottom: var(--vertical-unit);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -107,7 +106,7 @@ h3 {
|
|||
}
|
||||
|
||||
dd {
|
||||
margin-left: var(--gap);
|
||||
margin-left: var(--vertical-unit);
|
||||
}
|
||||
|
||||
dt {
|
||||
|
|
@ -116,7 +115,7 @@ dt {
|
|||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: calc(var(--gap) * 2);
|
||||
padding-left: calc(var(--vertical-unit) * 2);
|
||||
}
|
||||
|
||||
a,
|
||||
|
|
@ -155,45 +154,6 @@ input[type=submit]:active {
|
|||
border-color: var(--accent-hover);
|
||||
}
|
||||
|
||||
form[name=search] {
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
form[name=search] input[type=submit] {
|
||||
width: 7rem;
|
||||
}
|
||||
|
||||
form[name=search] input[name=tags] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.position-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.suggestions {
|
||||
position: absolute;
|
||||
|
||||
background-color: var(--bg);
|
||||
width: 100%;
|
||||
border: var(--border-thin);
|
||||
box-shadow: rgba(0, 0, 0, 0.5) 0 0.25rem 0.5rem -0.25rem;
|
||||
padding-left: 0;
|
||||
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.suggestions li {
|
||||
padding-left: 0.1875rem;
|
||||
padding-right: 0.1875rem;
|
||||
}
|
||||
|
||||
.suggestion-hover {
|
||||
background-color: var(--suggestion-hover-bg);
|
||||
}
|
||||
|
||||
body > header {
|
||||
border-bottom: var(--border-thin);
|
||||
font-size: 1.25rem;
|
||||
|
|
@ -201,7 +161,7 @@ body > header {
|
|||
}
|
||||
|
||||
body > header > nav {
|
||||
gap: 0 var(--gap);
|
||||
gap: 0 var(--vertical-unit);
|
||||
|
||||
/* Make the navbar horizontally scrollable. Used for mobile. */
|
||||
white-space: nowrap;
|
||||
|
|
@ -218,12 +178,8 @@ body > footer {
|
|||
}
|
||||
|
||||
body > footer > p {
|
||||
/*
|
||||
* Together they add for a single --gap, which is also the vertical rhythm
|
||||
* unit.
|
||||
*/
|
||||
padding-top: calc(var(--gap) / 2);
|
||||
margin-bottom: calc(var(--gap) / 2);
|
||||
padding-top: calc(var(--vertical-unit) / 2);
|
||||
margin-bottom: calc(var(--vertical-unit) / 2);
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -231,8 +187,8 @@ main {
|
|||
border-bottom: var(--border-thin);
|
||||
margin-top: 0.1875rem;
|
||||
margin-bottom: 0.1875rem;
|
||||
padding-top: var(--gap);
|
||||
padding-bottom: var(--gap);
|
||||
padding-top: var(--vertical-unit);
|
||||
padding-bottom: var(--vertical-unit);
|
||||
}
|
||||
|
||||
[x-cloak] {
|
||||
|
|
@ -247,6 +203,10 @@ main {
|
|||
float: right;
|
||||
}
|
||||
|
||||
.position-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layout-viewport {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
@ -267,6 +227,10 @@ main {
|
|||
flex: auto;
|
||||
}
|
||||
|
||||
.accent {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.pager > a,
|
||||
.pager > span {
|
||||
display: inline-block;
|
||||
|
|
@ -295,12 +259,47 @@ main {
|
|||
border-color: var(--text);
|
||||
}
|
||||
|
||||
form[name=search] {
|
||||
gap: 0 var(--gallery-column-gap);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
form[name=search] input[type=submit] {
|
||||
width: 7rem;
|
||||
}
|
||||
|
||||
form[name=search] input[name=tags] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul.suggestions {
|
||||
position: absolute;
|
||||
|
||||
background-color: var(--bg);
|
||||
width: 100%;
|
||||
border: var(--border-thin);
|
||||
box-shadow: rgba(0, 0, 0, 0.5) 0 0.25rem 0.5rem -0.25rem;
|
||||
padding-left: 0;
|
||||
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.suggestions li {
|
||||
padding-left: 0.1875rem;
|
||||
padding-right: 0.1875rem;
|
||||
}
|
||||
|
||||
.suggestion-hover {
|
||||
background-color: var(--suggestion-hover-bg);
|
||||
}
|
||||
|
||||
.gallery {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--gap) var(--gallery-column-gap);
|
||||
margin-bottom: var(--gap);
|
||||
gap: var(--vertical-unit) var(--gallery-column-gap);
|
||||
margin-bottom: var(--vertical-unit);
|
||||
}
|
||||
|
||||
.gallery > a {
|
||||
|
|
@ -326,7 +325,7 @@ main {
|
|||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: var(--gap);
|
||||
gap: var(--vertical-unit) var(--gallery-column-gap);
|
||||
}
|
||||
|
||||
.media-metadata {
|
||||
|
|
@ -338,10 +337,6 @@ main {
|
|||
line-height: 0;
|
||||
}
|
||||
|
||||
.accent {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
span.tag-kind-a,
|
||||
a.tag-kind-a:link,
|
||||
a.tag-kind-a:visited {
|
||||
|
|
@ -381,8 +376,8 @@ a.tag-kind-r:active {
|
|||
body > header > nav,
|
||||
body > footer,
|
||||
main {
|
||||
padding-left: var(--gap);
|
||||
padding-right: var(--gap);
|
||||
padding-left: var(--vertical-unit);
|
||||
padding-right: var(--vertical-unit);
|
||||
}
|
||||
|
||||
.media { flex-direction: column-reverse; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue