ForRo/public/assets/css/global/frame.css
Ro 65229edbab
Added Trusted Sources Count, added meta to links
Plugged in noted counts that detail how many times an instance as been
suspended or silenced by members of the Trusted Sources.

https://writer.oliphant.social/oliphant/trusted-source-membership

Also added some additional meta data to links displaying instances lists
so status and counts can be identified at a glance
2023-08-28 18:01:43 -07:00

228 lines
3.1 KiB
CSS

html {
width: 100%;
height: 100%;
overflow: hidden;
font: 400 1.6em/1.3em var(--base-type);
}
html body {
background: var(--primary);
color: var(--white);
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
a {
color: var(--highlight);
text-decoration: none;
transition: all 0.2s linear;
/*
border-bottom: 1px solid var(--white);
*/
}
strong {
color: var(--secondary);
}
header {
width: 100%;
color: var(--primary);
background: var(--secondary);
}
header > div:nth-child(1) {
display: grid;
grid-template-columns: 200px 1fr 40px;
padding: 10px;
gap: 10px;
height: 200px;
width: 80%;
margin: 0 auto;
max-width: 1000px;
position: relative;
}
header > div span {
font-size: 3em;
font-weight: bold;
position: absolute;
bottom: 25px;
width: 50%;
line-height: 0.8em;
}
header > div img {
width: 100%;
}
header > div a {
color: var(--primary);
}
header > div i {
font-size: 1.3em;
}
header > div nav {
background: var(--black);
position: relative;
}
.header-right {
text-align: right;
}
div.system-notice-error {
background: var(--error);
color: var(--white);
padding: 10px;
}
div.system-notice-message {
background: var(--highlight);
color: var(--black);
padding: 10px;
}
main > section > article {
width: 80%;
max-width: 1000px;
margin: 0 auto;
min-height: 400px;
}
/* NAV */
#main-nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--black);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
label[for="element-toggle"] {
cursor: pointer;
}
#element-toggle {
display: none;
}
#element-toggle:not(:checked) ~ #main-nav {
display: none;
}
a.nav-links {
border-bottom: none;
font-size: 40px;
color: var(--highlight);
text-decoration: none;
}
/* GLOBALS */
a:hover {
/*
border-bottom: 1px solid var(--secondary);
*/
color: var(--white);
}
pre {
white-space: pre;
background: var(--secondary);
}
code {
background: var(--secondary);
color: var(--primary);
padding: 3px;
}
sup {
background: var(--black);
color: var(--white);
padding: 2px;
border-radius: 3px;
vertical-align: baseline;
font-family: var(--mono-type);
}
.button-icon {
height: 90%;
padding-top: 3px;
}
.menu-icon {
width: 40px;
}
.location-title {
display: none;
}
.location-image {
height: 200px;
width: 200px;
display: inline-block;
border-radius: 3px;
}
footer {
width: 100%;
color: var(--primary);
background: var(--secondary);
height: 200px;
}
footer > div:nth-child(1) {
display: grid;
grid-template-columns: 50% 50%;
padding: 10px;
gap: 10px;
height: 200px;
width: 80%;
margin: 0 auto;
max-width: 1000px;
position: relative;
}
/*
responsive
*/
@media only screen and (max-width: 960px) {
header > div:nth-child(1) {
}
header > div nav {
bottom: 17px;
}
}
@media only screen and (max-width: 960px) {
header > div:nth-child(1) {
grid-template-columns: 150px 65% 1fr;
height: 150px;
}
header > div nav {
bottom: 17px;
}
}
@media only screen and (max-width: 800px) {
}