161 lines
No EOL
4.3 KiB
CSS
161 lines
No EOL
4.3 KiB
CSS
/* ---------------------------------------------------------------
|
|
- the @media section of things and anything else related to that -
|
|
--------------------------------------------------------------- */
|
|
|
|
/* disable certain animations if user has animations disabled on their system */
|
|
|
|
@media (prefers-reduced-motion) {
|
|
body {
|
|
background: var(--background) !important;
|
|
animation: unset !important;
|
|
-moz-animation: unset !important;
|
|
-webkit-animation: unset !important;
|
|
}
|
|
}
|
|
|
|
/* modify widths and spacing depending on the size of the display */
|
|
|
|
@media screen and (max-width: 1083px) {
|
|
.navbar {
|
|
min-height: 1.8em !important;
|
|
max-height: 1.8em !important;
|
|
flex-wrap: wrap;
|
|
|
|
.nav-base {
|
|
padding: .27em .2em !important;
|
|
}
|
|
.nav-left {
|
|
height: 1.9rem;
|
|
left: -.4rem;
|
|
}
|
|
.nav-left::before {
|
|
margin-left: -10rem !important;
|
|
}
|
|
.nav-baselink {
|
|
display: none !important;
|
|
}
|
|
.nav-baselink-mobile {
|
|
display: block !important;
|
|
position: absolute;
|
|
max-width: 40em;
|
|
width: max-content;
|
|
z-index: 9999;
|
|
padding: unset !important;
|
|
|
|
a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: var(--foreground);
|
|
padding: .6em .7em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--accent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
ul {
|
|
background-color: var(--background);
|
|
border-bottom-right-radius: 1rem;
|
|
border-right: var(--accent) solid .15rem;
|
|
border-bottom: var(--accent) solid .15rem;
|
|
max-width: 10em;
|
|
width: auto;
|
|
margin-top: unset !important;
|
|
|
|
li {
|
|
list-style-type: none;
|
|
margin-left: -2em;
|
|
padding-bottom: unset !important;
|
|
span {
|
|
padding-right: .4em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.nav-baselink-mobile::before {
|
|
display: none;
|
|
}
|
|
.nav-baselink-mobile summary {
|
|
display: block !important;
|
|
margin-top: 0px !important;
|
|
background-color: var(--accent);
|
|
text-decoration: unset !important;
|
|
color: var(--background);
|
|
padding: .3em;
|
|
border-bottom-right-radius: 1rem;
|
|
width: 5.7em;
|
|
|
|
i:not(:first-child) {
|
|
margin-left: -.5em;
|
|
margin-right: -.9em;
|
|
opacity: .6;
|
|
}
|
|
}
|
|
.nav-links {
|
|
display: none !important;
|
|
}
|
|
|
|
.nav-right {
|
|
height: 1.4rem;
|
|
}
|
|
.nav-accessibility {
|
|
right: 7.6rem;
|
|
min-width: 1.6rem;
|
|
span {
|
|
transform: scale(1.3) translateY(-.05rem) translateX(.2rem);
|
|
}
|
|
}
|
|
.nav-systray {
|
|
padding: .27em .5em !important;
|
|
}
|
|
}
|
|
|
|
.window:not(#footer) {
|
|
summary {
|
|
div:first-child {
|
|
padding: .3rem .4rem .3rem .4rem;
|
|
}
|
|
|
|
div:nth-child(3) {
|
|
display: none !important;
|
|
}
|
|
|
|
div:nth-child(4) {
|
|
margin-left: auto !important;
|
|
}
|
|
}
|
|
|
|
animation: unset !important;
|
|
|
|
section, article {
|
|
padding: .5rem;
|
|
}
|
|
|
|
border-top: var(--accent) solid .15rem;
|
|
border-bottom: var(--accent) solid .15rem;
|
|
border-left: unset !important;
|
|
border-right: unset !important;
|
|
border-radius: unset !important;
|
|
|
|
margin-bottom: .8em;
|
|
}
|
|
|
|
/* window when its the first one on the page */
|
|
.window:nth-child(2) {
|
|
margin-top: 4rem;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 540px) {
|
|
details#footer.window {
|
|
border-top: var(--accent) solid .15rem;
|
|
border-bottom: var(--accent) solid .15rem;
|
|
border-left: unset !important;
|
|
border-right: unset !important;
|
|
border-radius: unset !important;
|
|
|
|
margin-bottom: .8em;
|
|
}
|
|
} |