mirror of
https://code.mensbeam.com/MensBeam/Arsse.git
synced 2024-12-22 21:22:40 +00:00
Manual theme design iteration
This commit is contained in:
Dustin Wilson
parent
edf92b603b
commit
705e506bfc
2 changed files with 191 additions and 28 deletions
2
docs/theme/arsse/arsse.css
vendored
2
docs/theme/arsse/arsse.css
vendored
File diff suppressed because one or more lines are too long
217
docs/theme/src/arsse.scss
vendored
217
docs/theme/src/arsse.scss
vendored
|
|
@ -64,52 +64,215 @@
|
|||
--type-size-4: 2rem;
|
||||
--type-size-5: 1.618rem;
|
||||
--type-size-6: 1.309rem;
|
||||
}
|
||||
:root {
|
||||
--sidebar-background: #f7f7f7;
|
||||
--sidebar-link-active-background: #c5c5cb;
|
||||
--dark: #3f4657;
|
||||
--light: #82becd;
|
||||
|
||||
--red: #e63c2f;
|
||||
--blue: #15284b;
|
||||
--light-blue: #93b7bb;
|
||||
--beige: #e8d5d3;
|
||||
--green: #2c9a42;
|
||||
|
||||
/* --dark-gray: #7c868d;
|
||||
--gray: #a3aaae;
|
||||
--light-gray: #c2c6c9;
|
||||
--lighter-gray: #dad9d7;
|
||||
--lightest-gray: color(var(--lighter-gray) blend(#fff 50%)); */
|
||||
|
||||
--dark-gray: color(var(--beige) blend(var(--blue) 50%));
|
||||
--gray: color(var(--beige) blend(var(--blue) 25%));
|
||||
--light-gray: color(var(--beige) blend(var(--blue) 12.5%));
|
||||
--lighter-gray: var(--beige);
|
||||
--lightest-gray: color(var(--beige) blend(#fff 75%));
|
||||
|
||||
--dark: var(--blue);
|
||||
--light: var(--light-blue);
|
||||
|
||||
--sidebar-background: var(--beige);
|
||||
--sidebar-link-active-background: var(--light-blue);
|
||||
--sidebar-collapsible--hamburger-color: var(--beige);
|
||||
|
||||
--text: var(--blue);
|
||||
--link-color: var(--red);
|
||||
--brand-color: var(--blue);
|
||||
--brand-background: var(--red);
|
||||
|
||||
--code-tag-background-color: var(--lightest-gray);
|
||||
--code-tag-border-radius: 0;
|
||||
--code-tag-box-shadow: none;
|
||||
|
||||
--homepage-navbar-background: var(--red);
|
||||
--hero-button-block-background: var(--beige);
|
||||
--homepage-hero-background: #fff;
|
||||
--content-floating-blocks-background: var(--blue);
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.618;
|
||||
}
|
||||
|
||||
a.Link--external::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.s-content {
|
||||
code {
|
||||
display: inline-block;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding: 0.5ch;
|
||||
border: 0;
|
||||
|
||||
&::before, &::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
pre & {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 2px;
|
||||
border: 2px solid var(--gray);
|
||||
|
||||
thead, tbody {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-top: 0;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: transparent;
|
||||
|
||||
td {
|
||||
background-color: var(--lightest-gray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-content table, .Nav__item .Nav__item {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.Brand, h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.s-content table {
|
||||
font-size: 1rem;
|
||||
.Button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.HomepageButtons .Button--hero {
|
||||
font-weight: normal;
|
||||
font-size: var(--type-size-6);
|
||||
}
|
||||
|
||||
.Page__header {
|
||||
border-bottom: 2px solid var(--lighter-gray);
|
||||
}
|
||||
|
||||
.Pager li > a {
|
||||
border: 2px solid var(--lighter-gray);
|
||||
border-radius: 0;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--lighter-gray);
|
||||
}
|
||||
}
|
||||
|
||||
.Pager--prev a::before {
|
||||
content: "\2190\00a0";
|
||||
}
|
||||
.Pager--next a::after {
|
||||
content: "\00a0\2192";
|
||||
}
|
||||
|
||||
.Navbar {
|
||||
height: auto;
|
||||
box-shadow: none;
|
||||
|
||||
.Brand {
|
||||
float: none;
|
||||
line-height: inherit;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.Homepage {
|
||||
padding-top: 10px !important;
|
||||
}
|
||||
|
||||
.Nav__item {
|
||||
font-size: var(--type-size-6);
|
||||
}
|
||||
|
||||
.clients thead tr:first-child th {
|
||||
text-align:left;
|
||||
.Nav__arrow:before, .Nav .Nav .Nav__item a .Nav__arrow:before {
|
||||
font-family: var(--font-family-heading);
|
||||
width: 1ch;
|
||||
height: 1ch;
|
||||
}
|
||||
.clients thead tr:first-child th:first-child {
|
||||
width: 15%;
|
||||
|
||||
.TableOfContentsContainer__title {
|
||||
border-bottom: 4px solid var(--lighter-gray);
|
||||
}
|
||||
.clients thead tr:first-child th:nth-child(3) {
|
||||
width:50%;
|
||||
text-align:center;
|
||||
|
||||
ul.TableOfContents {
|
||||
border-left: 6px solid var(--lighter-gray);
|
||||
}
|
||||
.clients thead tr + tr th {
|
||||
width:16.66%;
|
||||
text-align:center;
|
||||
|
||||
.Columns__right--full .TableOfContentsContainer {
|
||||
.TableOfContentsContainer__content > .TableOfContents {
|
||||
border-right: 2px solid var(--lighter-gray);
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 1px solid var(--lighter-gray);
|
||||
}
|
||||
}
|
||||
.clients tbody td:nth-child(3),
|
||||
.clients tbody td:nth-child(4),
|
||||
.clients tbody td:nth-child(5) {
|
||||
text-align:center;
|
||||
|
||||
.clients {
|
||||
thead tr:first-child th {
|
||||
text-align: left;
|
||||
|
||||
&:first-child {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
thead tr + tr th {
|
||||
width: 16.66%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
&:nth-child(3), &:nth-child(4), &:nth-child(5) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.Y {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
&.N {
|
||||
color: var(--red);
|
||||
}
|
||||
}
|
||||
}
|
||||
.clients tbody td.Y {
|
||||
color:#00953b;
|
||||
}
|
||||
.clients tbody td.N {
|
||||
color:#cf102d;
|
||||
|
||||
@media (--viewport-large) {
|
||||
.Columns__left {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue