chore: Tweaks to CSS theme
This commit is contained in:
parent
121b25fea0
commit
3cbdb92c5d
4 changed files with 192 additions and 16 deletions
|
@ -2,7 +2,7 @@ button.fab {
|
|||
position: fixed;
|
||||
bottom: 1rem;
|
||||
width: 64px;
|
||||
height: 64px!important;
|
||||
height: 64px !important;
|
||||
z-index: 20;
|
||||
font-size: 2rem;
|
||||
border-radius: 50%;
|
||||
|
@ -10,6 +10,9 @@ button.fab {
|
|||
button.fab.primary {
|
||||
right: 1rem;
|
||||
}
|
||||
button.fab.secondary {
|
||||
right: calc(1.5rem + 64px);
|
||||
}
|
||||
|
||||
.style-wrapper.light,
|
||||
.theme-wrapper.light,
|
||||
|
|
|
@ -6,16 +6,48 @@ footer {
|
|||
margin: 0;
|
||||
padding: 4rem 1rem;
|
||||
text-align: center;
|
||||
a { color: $fc-text-dark!important; }
|
||||
a:hover { color: $fc-link-dark!important; }
|
||||
a.gitter:hover { color: #ed1965!important; }
|
||||
a.twitter:hover { color: #1da1f2!important; }
|
||||
a.github:hover { color: #6cc644!important; }
|
||||
a.instagram:hover { color: #e1306c!important; }
|
||||
a.facebook:hover { color: #3b5998!important; }
|
||||
a {
|
||||
color: $fc-text-dark !important;
|
||||
}
|
||||
a:hover {
|
||||
color: $fc-link-dark !important;
|
||||
}
|
||||
a.discord:hover {
|
||||
color: #2a5ee8 !important;
|
||||
}
|
||||
a.twitter:hover {
|
||||
color: #1da1f2 !important;
|
||||
}
|
||||
a.github:hover {
|
||||
color: #6cc644 !important;
|
||||
}
|
||||
a.instagram:hover {
|
||||
color: #e1306c !important;
|
||||
}
|
||||
a.facebook:hover {
|
||||
color: #3b5998 !important;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li { list-style-type: none; }
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
p.social {
|
||||
margin: 0;
|
||||
}
|
||||
ul.footer-main-menu {
|
||||
margin-top: 2rem;
|
||||
li {
|
||||
display: inline;
|
||||
a {
|
||||
padding: 0.5rem;
|
||||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
@include xs-screen {
|
||||
.theme-wrapper.light div.fs-sa aside,
|
||||
.theme-wrapper.dark div.fs-sa aside,
|
||||
.theme-wrapper.light div.draft-ui-menu,
|
||||
.theme-wrapper.dark div.draft-ui-menu,
|
||||
.theme-wrapper.light div.menu,
|
||||
.theme-wrapper.dark div.menu {
|
||||
position: fixed;
|
||||
|
@ -8,7 +10,7 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
padding: 0 0 1rem;
|
||||
padding: 0 0 1rem;
|
||||
max-width: 600px;
|
||||
z-index: -10;
|
||||
transition: opacity 0.5s ease 0s;
|
||||
|
@ -29,9 +31,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.theme-wrapper.light div.draft-ui-menu,
|
||||
.theme-wrapper.light div.menu {
|
||||
background: $oc-gray-1;
|
||||
}
|
||||
.theme-wrapper.dark div.draft-ui-menu,
|
||||
.theme-wrapper.dark div.menu {
|
||||
background: $oc-gray-8;
|
||||
}
|
||||
|
@ -42,4 +46,3 @@
|
|||
transform: translate(0px, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -31,20 +31,23 @@ div.fs-sa {
|
|||
a {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
padding: 0.25rem 0 0 1rem;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
padding: 0;
|
||||
}
|
||||
h5 a,
|
||||
h6 a {
|
||||
padding: 0.25rem 0 0 1rem;
|
||||
a {
|
||||
margin-left: -1rem;
|
||||
margin-right: 0;
|
||||
padding: 0.25rem 0 0 1rem;
|
||||
}
|
||||
}
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
color: $oc-gray-6;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
@ -75,7 +78,6 @@ div.fs-sa {
|
|||
}
|
||||
}
|
||||
section {
|
||||
padding-left: 2rem;
|
||||
article > div.text-section {
|
||||
/* I've got 99 problems but too long text lines ain't on */
|
||||
max-width: 99ch;
|
||||
|
@ -154,3 +156,139 @@ div.fs-sa {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include sm-screen {
|
||||
div.fs-sa {
|
||||
> section {
|
||||
width: calc(100% - 200px - 3rem);
|
||||
padding: 1rem;
|
||||
}
|
||||
aside {
|
||||
padding: 0;
|
||||
width: 200px;
|
||||
}
|
||||
aside div.aside-context {
|
||||
h5 {
|
||||
padding: 1rem 0.5rem 0.5rem 0.5rem;
|
||||
a {
|
||||
margin-left: -0.5rem;
|
||||
margin-right: -0.5rem;
|
||||
padding: 0.25rem 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
padding: 0.25rem 0 0 0.5rem;
|
||||
a {
|
||||
margin-left: -0.5rem;
|
||||
margin-right: 0;
|
||||
padding: 0.25rem 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
li > a {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
aside ul.aside-main-menu {
|
||||
margin: 1rem 0;
|
||||
li {
|
||||
font-family: 'Roboto condensed';
|
||||
line-height: 2;
|
||||
font-size: 1rem;
|
||||
a {
|
||||
padding: 0.15rem 0;
|
||||
svg {
|
||||
margin: 5px 0.5rem -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include xs-screen {
|
||||
ul.aside-main-menu {
|
||||
list-style-type: none;
|
||||
margin: 1rem auto;
|
||||
padding: 0;
|
||||
li a span.text {
|
||||
display: none;
|
||||
}
|
||||
li {
|
||||
display: inline;
|
||||
font-family: 'Roboto condensed';
|
||||
line-height: 2;
|
||||
font-size: 1rem;
|
||||
a {
|
||||
padding: 0.15rem 0;
|
||||
color: inherit;
|
||||
svg {
|
||||
margin: 5px 0.5rem -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div.fs-sa {
|
||||
> section {
|
||||
width: calc(100% - 2rem);
|
||||
padding: 1rem;
|
||||
}
|
||||
aside {
|
||||
padding: 0;
|
||||
width: 200px;
|
||||
}
|
||||
aside div.aside-context {
|
||||
h5 {
|
||||
padding: 1rem 0.5rem 0.5rem 0.5rem;
|
||||
a {
|
||||
margin-left: -0.5rem;
|
||||
margin-right: -0.5rem;
|
||||
padding: 0.25rem 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
padding: 0.25rem 0 0 0.5rem;
|
||||
a {
|
||||
margin-left: -0.5rem;
|
||||
margin-right: 0;
|
||||
padding: 0.25rem 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
li > a {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.context-wrapper {
|
||||
font-family: 'Roboto condensed';
|
||||
padding: 1rem;
|
||||
h5 {
|
||||
padding: 1rem 0 0.5rem 0;
|
||||
margin: 0;
|
||||
line-height: 1.25;
|
||||
a {
|
||||
padding: 0.25rem 0 0 1rem;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
padding: 0.5rem 0 0.25rem 0;
|
||||
margin: 0;
|
||||
a {
|
||||
padding: 0.25rem 0 0 1rem;
|
||||
}
|
||||
}
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
color: $oc-gray-6;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
li > a {
|
||||
padding: 0.25rem 1rem 0.25rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue