/* COLOR THEMING */
:root {
color-scheme: light dark;
/* DARK THEME */
--dark-main-bg-color: 0, 0, 0;
--dark-accent-bg-color: 10, 20, 60;
--dark-border-color: 170, 170, 170;
--dark-primary-cta-color: 174, 196, 255;
--dark-primary-cta-did-color: 255, 163, 255;
--dark-text-color: 240, 240, 240;
/* LIGHT THEME */
--light-main-bg-color: 255, 255, 255;
--light-accent-bg-color: 240, 245, 255;
--light-border-color: 170, 170, 170;
--light-primary-cta-color: 42, 42, 255;
--light-primary-cta-did-color: 102, 51, 153;
--light-text-color: 0, 0, 0;
/* CHOOSE DARK THEME */
--main-bg-color: rgb(var(--dark-main-bg-color));
--accent-bg-color: rgb(var(--dark-accent-bg-color));
--main-border-color: rgb(var(--dark-border-color));
--primary-cta-color: rgb(var(--dark-primary-cta-color));
--primary-cta-did-color: rgb(var(--dark-primary-cta-did-color));
--text-color: rgb(var(--dark-text-color));
}
/* CHOOSE LIGHT THEME */
@media (prefers-color-scheme: light) {
:root {
--main-bg-color: rgb(var(--light-main-bg-color));
--accent-bg-color: rgb(var(--light-accent-bg-color));
--main-border-color: rgb(var(--light-border-color));
--primary-cta-color: rgb(var(--light-primary-cta-color));
--primary-cta-did-color: rgb(var(--light-primary-cta-did-color));
--text-color: rgb(var(--light-text-color));
}
}
/* END COLOR THEMING */
:root {
/* SPACING */
--card-spacing: 1em;
/* TODO: See if there is a way for native CSS to calculate this*/
--card-spacing-half: 0.5em;
/* DEVICE SIZES */
--max-viewer-width: 1000px;
--mq-phone: 320px;
--mq-tablet: 768px;
--mq-desktop: 1000px;
}
body {
margin: 0;
background: var(--main-bg-color);
color: var(--text-color);
}
a, a:visited {
color: var(--primary-cta-color);
}
a:hover, a:focus, a:active {
color: var(--primary-cta-did-color);
}
/* LAYOUT: Spacers */
#ReadmeNav,
#FilebrowserNav,
#CloneNav {
height: 3em;
}
/* PAGE: User repos listing */
.UserRepos {
max-width: 800px;
margin: 0 auto;
padding: var(--card-spacing);
}
.UserRepos__repo {
margin-bottom: var(--card-spacing);
position: relative;
border-radius: 0.5em;
border: 0.07em solid var(--main-border-color);
padding: var(--card-spacing-half);
}
.UserRepos__repo:last-child {
padding-bottom: 0;
}
.UserRepos__repo-name {
font-size: 2em;
padding-bottom: 0.2em;
margin: 0;
font-weight: bold;
}
.UserRepos__repo-name a {
text-decoration: none;
}
.UserRepos__repo-description {
font-size: 1em;
}
.UserRepos__repo-latest {
text-overflow: ellipsis;
}
/* ENDPAGE: User repos listing */
/* PAGE: User repo index */
.RepoIndex__bar {
position: sticky;
top: 0;
padding: 0.5em;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--accent-bg-color);
}
.RepoIndex__bar-name {
font-size: 1.5em;
}
.RepoIndex__bar-description {
font-size: 1em;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding: 0 var(--card-spacing);
}
.RepoIndex__bar-links {
font-size: 1em;
flex-shrink: 0;
}
.RepoIndex__body {
max-width: var(--max-viewer-width);
margin: 0 auto;
}
/* ENDPAGE: User repo index */
.RepoTree > .folder > .folder {
margin-left: 0.0em;
}
.RepoTree > .folder > .file {
margin-left: 0.0em;
}
.RepoTree .entry {
font-family: monospace;
padding-bottom: 0.5em;
display: flex;
align-items: center;
justify-content: space-between;
}
.RepoTree .entry .updated {
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
}
.RepoTree .entry:last-child {
margin-bottom: 0;
}
.folder .folder {
margin-left: 0.8em;
}
.folder .file {
margin-left: 0.8em;
}
/* WIDGET: CloneInstructions */
.CloneInstructions {
margin: 0 var(--card-spacing);
}
.CloneInstructions pre {
overflow-x: auto;
}
/* ENDWIDGET: CloneInstructions */
.RepoTree {
max-width: var(--max-viewer-width);
margin: 0 auto;
padding: 0 var(--card-spacing);
}
/* WIDGET: Readme */
.Readme {
border: 0.07em solid var(--main-border-color);
border-radius: 1em;
padding: var(--card-spacing);
margin: var(--card-spacing);
margin-top: 0;
}
.ReadmeLink {
opacity: 0;
pointer-events: none;
margin-left: 0.5em;
font-size: 0.9em;
text-decoration: none;
}
.ReadmeLink:active {
pointer-events: auto;
opacity: 1;
}
.ReadmeLink:focus {
pointer-events: auto;
opacity: 1;
}
.ReadmeLink:visited {
text-decoration: none;
}
.Readme h1:hover .ReadmeLink,
.Readme h2:hover .ReadmeLink,
.Readme h3:hover .ReadmeLink,
.Readme h4:hover .ReadmeLink,
.Readme h5:hover .ReadmeLink,
.Readme h6:hover .ReadmeLink {
pointer-events: auto;
display: inline;
opacity: 1;
transition: opacity 0s linear 0.08s;
}
.Readme h1 {
display: block;
font-size: 2em;
margin: 0.67em 0 0.67em;
font-weight: bold;
}
.Readme h1:first-child {
margin-top: 0;
}
.Readme pre {
overflow-x: auto;
padding-bottom: var(--card-spacing);
}
/* ENDWIDGET: Readme */
/* WIDGET: Swatch */
.swatch {
border: 0.07em solid var(--main-border-color);
border-radius: 100%;
width: 1em;
height: 1em;
}
/* ENDWIDGET: Swatch */
/* WIDGET: LanguageMarker */
.Languages {
padding-top: var(--card-spacing-half);
}
.LanguageMarker {
display: inline-flex;
align-items: center;
justify-content: flex-start;
}
.LanguageMarker__name {
padding-left: 0.4em;
font-size: 0.8em;
}
/* ENDWIDGET: LanguageMarker */
/**/
/* FILE VIEW */
.FileView__code {
font-family: monospace;
max-width: 100vw;
padding: 10px;
overflow-x: auto;
white-space: pre;
}
.FileViewBar {
position: sticky;
padding: var(--card-spacing);
background: var(--accent-bg-color);
top: 0;
display: flex;
align-items: center;
justify-content: flex-start;
}
.FileViewBar__viewing {
padding-right: 1em;
}
.FileViewBar__crumbs .separator {
font-weight: 600;
}
.FileViewBar__crumbs .separator:last-child {
display: none;
}
@media screen and (min-width: 768px /*--mq-tablet*/) {
.folder .folder {
margin-left: 1.6em;
}
.folder .file {
margin-left: 1.6em;
}
}
@media screen and (min-width: 1000px /*--mq-desktop*/) {
.folder .folder {
margin-left: 2.4em;
}
.folder .file {
margin-left: 2.4em;
}
.FileView__code {
max-width: var(--mq-desktop);
margin: 0 auto;
}
}