mirror of
https://github.com/Burn-E99/TheArtificer.git
synced 2026-01-08 05:17:54 -05:00
Add Roll Web View
This commit is contained in:
Ean Milligan
@ -1,195 +1,196 @@
|
||||
body {
|
||||
font-family: "Play", sans-serif;
|
||||
font-family: 'Play', sans-serif;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#page {
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: 3rem calc(100vh - 5rem) 2rem;
|
||||
grid-template-areas: "header" "page-contents" "footer";
|
||||
|
||||
color: var(--page-font-color);
|
||||
background-color: var(--page-bg-color);
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: 3rem calc(100vh - 5rem) 2rem;
|
||||
grid-template-areas: 'header' 'page-contents' 'footer';
|
||||
|
||||
color: var(--page-font-color);
|
||||
background-color: var(--page-bg-color);
|
||||
}
|
||||
|
||||
header,
|
||||
#header {
|
||||
grid-area: header;
|
||||
grid-area: header;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: "header-left header-right";
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: 'header-left header-right';
|
||||
|
||||
font-family: "Cinzel", serif;
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
font-weight: 500;
|
||||
padding: 0 10px;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
background-color: var(--header-bg-color);
|
||||
color: var(--header-font-color);
|
||||
border-bottom: 1px solid var(--header-font-color);
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
font-weight: 500;
|
||||
padding: 0 10px;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
background-color: var(--header-bg-color);
|
||||
color: var(--header-font-color);
|
||||
border-bottom: 1px solid var(--header-font-color);
|
||||
}
|
||||
|
||||
#header-left {
|
||||
grid-area: header-left;
|
||||
grid-area: header-left;
|
||||
}
|
||||
|
||||
#header-right {
|
||||
grid-area: header-right;
|
||||
justify-self: end;
|
||||
grid-area: header-right;
|
||||
justify-self: end;
|
||||
|
||||
font-size: 1.75rem;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
#footer {
|
||||
grid-area: footer;
|
||||
grid-area: footer;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr 1.5fr 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: ". footer-left footer-right .";
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr 1.5fr 1fr;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: '. footer-left footer-right .';
|
||||
|
||||
line-height: 2rem;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
height: 2rem;
|
||||
|
||||
background-color: var(--footer-bg-color);
|
||||
background-color: var(--footer-bg-color);
|
||||
}
|
||||
|
||||
#footer-left {
|
||||
grid-area: footer-left;
|
||||
grid-area: footer-left;
|
||||
}
|
||||
|
||||
#footer-right {
|
||||
grid-area: footer-right;
|
||||
justify-self: end;
|
||||
grid-area: footer-right;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
#page-contents {
|
||||
grid-area: page-contents;
|
||||
padding: 0 20rem;
|
||||
height: calc(100vh - 5rem);
|
||||
grid-area: page-contents;
|
||||
padding: 0 20rem;
|
||||
height: calc(100vh - 5rem);
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: fit-content(5rem) fit-content(10rem) fit-content(37rem) auto 1rem;
|
||||
grid-template-areas: "slogan" "logo-desc" "examples" "api" "final";
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-template-rows: fit-content(5rem) fit-content(10rem) fit-content(37rem) auto 1rem;
|
||||
grid-template-areas: 'slogan' 'logo-desc' 'examples' 'api' 'final';
|
||||
|
||||
overflow-y: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#slogan {
|
||||
grid-area: slogan;
|
||||
grid-area: slogan;
|
||||
}
|
||||
#slogan h1 {
|
||||
line-height: 2.5rem;
|
||||
font-size: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
#logo-desc {
|
||||
grid-area: logo-desc;
|
||||
grid-area: logo-desc;
|
||||
|
||||
margin-bottom: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 11rem auto;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: "logo description";
|
||||
display: grid;
|
||||
grid-template-columns: 11rem auto;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: 'logo description';
|
||||
}
|
||||
|
||||
#logo {
|
||||
grid-area: logo;
|
||||
margin: auto;
|
||||
grid-area: logo;
|
||||
margin: auto;
|
||||
}
|
||||
#logo img {
|
||||
height: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
#description {
|
||||
grid-area: description;
|
||||
grid-area: description;
|
||||
}
|
||||
|
||||
#examples {
|
||||
grid-area: examples;
|
||||
grid-area: examples;
|
||||
}
|
||||
|
||||
h4.example {
|
||||
line-height: 0.25rem;
|
||||
line-height: 0.25rem;
|
||||
}
|
||||
|
||||
p.example {
|
||||
margin: 0;
|
||||
margin-bottom: 0.1rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 0.1rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.slug h3 {
|
||||
margin-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#api {
|
||||
grid-area: api;
|
||||
grid-area: api;
|
||||
}
|
||||
|
||||
#final {
|
||||
grid-area: final;
|
||||
grid-area: final;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1900px) {
|
||||
#page-contents {
|
||||
padding: 0 10rem;
|
||||
}
|
||||
#page-contents {
|
||||
padding: 0 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
#page-contents {
|
||||
padding: 0 5rem;
|
||||
}
|
||||
#page-contents {
|
||||
padding: 0 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
#page-contents {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
#page-contents {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 630px) {
|
||||
#page {
|
||||
grid-template-rows: 6rem calc(100vh - 8rem) 2rem;
|
||||
}
|
||||
#page {
|
||||
grid-template-rows: 6rem calc(100vh - 8rem) 2rem;
|
||||
}
|
||||
|
||||
#page-contents {
|
||||
height: calc(100vh - 8rem);
|
||||
}
|
||||
#page-contents {
|
||||
height: calc(100vh - 8rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 330px) {
|
||||
#page {
|
||||
grid-template-rows: 9rem calc(100vh - 11rem) 2rem;
|
||||
}
|
||||
#page {
|
||||
grid-template-rows: 9rem calc(100vh - 11rem) 2rem;
|
||||
}
|
||||
|
||||
#page-contents {
|
||||
height: calc(100vh - 11rem);
|
||||
}
|
||||
#page-contents {
|
||||
height: calc(100vh - 11rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 292px) {
|
||||
#page {
|
||||
grid-template-rows: 12rem calc(100vh - 14rem) 2rem;
|
||||
}
|
||||
#page {
|
||||
grid-template-rows: 12rem calc(100vh - 14rem) 2rem;
|
||||
}
|
||||
|
||||
#page-contents {
|
||||
height: calc(100vh - 14rem);
|
||||
}
|
||||
#page-contents {
|
||||
height: calc(100vh - 14rem);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,50 +2,55 @@
|
||||
* https://paletton.com/#uid=5000p0kw8dLmVn9rgiuHN93Sj4E
|
||||
*/
|
||||
:root {
|
||||
--header-font-color: rgb(238, 237, 226);
|
||||
--header-bg-color: rgb(110, 0, 0);
|
||||
--header-font-color: rgb(238, 237, 226);
|
||||
--header-bg-color: rgb(110, 0, 0);
|
||||
|
||||
--page-font-color: white;
|
||||
--page-bg-color: rgb(32, 34, 37);
|
||||
--page-font-color: white;
|
||||
--page-bg-color: rgb(32, 34, 37);
|
||||
|
||||
--footer-bg-color: rgb(54, 57, 63);
|
||||
--footer-bg-color: rgb(54, 57, 63);
|
||||
|
||||
--link-new-color: rgb(147, 22, 22);
|
||||
--link-hover-color: rgb(255, 94, 94);
|
||||
--link-visited-color: rgb(184, 52, 52);
|
||||
--link-new-color: rgb(147, 22, 22);
|
||||
--link-hover-color: rgb(255, 94, 94);
|
||||
--link-visited-color: rgb(184, 52, 52);
|
||||
|
||||
--code-bg: rgb(47, 49, 54);
|
||||
--code-bg: rgb(47, 49, 54);
|
||||
|
||||
--slug-bg: rgb(15, 16, 17);
|
||||
--slug-border: rgb(0, 0, 0);
|
||||
--slug-bg: rgb(15, 16, 17);
|
||||
--slug-border: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
#header a {
|
||||
color: var(--header-font-color);
|
||||
text-decoration: none;
|
||||
header a,
|
||||
header a:visited,
|
||||
#header a,
|
||||
#header a:visited {
|
||||
color: var(--header-font-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-new-color);
|
||||
color: var(--link-new-color);
|
||||
}
|
||||
|
||||
a:active, a:visited {
|
||||
color: var(--link-visited-color);
|
||||
a:active,
|
||||
a:visited {
|
||||
color: var(--link-visited-color);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
header a:hover,
|
||||
#header a:hover {
|
||||
cursor: pointer;
|
||||
color: var(--link-hover-color);
|
||||
cursor: pointer;
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: var(--code-bg);
|
||||
background-color: var(--code-bg);
|
||||
}
|
||||
|
||||
.slug {
|
||||
padding: 0.5rem;
|
||||
background-color: var(--slug-bg);
|
||||
border: 4px solid var(--slug-border);
|
||||
border-radius: 1.5rem;
|
||||
padding: 0.5rem;
|
||||
background-color: var(--slug-bg);
|
||||
border: 4px solid var(--slug-border);
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user