894 lines
17 KiB
CSS
894 lines
17 KiB
CSS
|
|
:root {
|
|
--font-family-base: 'Open Sans', Arial, sans-serif;
|
|
/* Declare global variables */
|
|
/*
|
|
--c_purple: #5B29FF;
|
|
--c_purple_pastel: #D1D1FF;
|
|
--c_purple_lighter: #E8E1FF;
|
|
--c_purple_light: #C6BDFF;
|
|
--c_purple_dark: #4700B3;
|
|
*/
|
|
/* purple theme
|
|
- light https://coolors.co/palette/a172fd-a77afe-ac82fe-b691fe-c1a0fe-cbaffe-d6bffe-e0cefe-ebddfe-f5ecfe
|
|
- dark https://coolors.co/palette/310055-3c0663-4a0a77-5a108f-6818a5-8b2fc9-ab51e3-bd68ee-d283ff-dc97ff
|
|
*/
|
|
/*
|
|
--c_purple_darker: #310055;
|
|
--c_purple_dark: #4A0A77;
|
|
--c_purple: #6818A5;
|
|
--c_purple_light: #CBAFFE;
|
|
--c_purple_lighter: #F5ECFE;
|
|
|
|
--c_blue: #0044FF;
|
|
--c_blue_pastel: #B8E0FF;
|
|
--c_blue_light: #73E8FF;
|
|
--c_blue_dark: #003ADB;
|
|
*/
|
|
/* --c_red: * /
|
|
--c-red: #FF0000;
|
|
--c_red_pastel: #FAE0E2;
|
|
--c_red_lighter: #FAE0E2;
|
|
*/
|
|
}
|
|
|
|
html {
|
|
height: 100vh;
|
|
/* overflow-y: clip; */
|
|
}
|
|
|
|
body {
|
|
background-color: var(--colour-page-background);
|
|
color: var(--colour-text);
|
|
font-family: var(--font-family-base);
|
|
font-family: Arial;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
background: linear-gradient(to bottom right, var(--colour-page-background-1), var(--colour-page-background-2)); /* var(--c_purple); */
|
|
height: 100vh;
|
|
/* max-height: 100vh;
|
|
overflow-y: clip; */
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
}
|
|
|
|
script, link {
|
|
display: none !important;
|
|
}
|
|
|
|
/*
|
|
#pageBody {
|
|
/ * height: 69vh !important; * /
|
|
max-height: 79vh;
|
|
padding: 0 5vw;
|
|
margin: 0;
|
|
border: 0;
|
|
align-content: center;
|
|
justify-content: flex-start;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
position: absolute;
|
|
width: 90vw;
|
|
color: var(--colour-text);
|
|
}
|
|
*/
|
|
|
|
.page-body > * {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
width: 100%;
|
|
align-self: center;
|
|
font-size: min(16px, calc(1vh * 4));
|
|
}
|
|
#pageBody > * > * {
|
|
align-self: center;
|
|
padding-top: 0.5vh;
|
|
padding-bottom: 0.5vh;
|
|
}
|
|
#pageBody > .card {
|
|
height: fit-content;
|
|
margin: 0.5vh auto;
|
|
}
|
|
|
|
/* header image */
|
|
img.logo {
|
|
max-height: 15vh;
|
|
max-width: 15vh;
|
|
cursor: pointer;
|
|
/* border-radius: 3vh; */
|
|
}
|
|
|
|
/* icon images */
|
|
.img-icon {
|
|
max-width: 16vh;
|
|
max-height: 8vh;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Add a card effect for articles */
|
|
.card {
|
|
background-color: var(--colour-text-background);
|
|
padding: 1vh 2.5vw;
|
|
margin: 1vh;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
border-radius: 1.5vh;
|
|
position: relative;
|
|
height: fit-content;
|
|
max-width: 80vw;
|
|
}
|
|
|
|
.header.card {
|
|
border-radius: 2.5vh;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.container {
|
|
flex: 1;
|
|
margin: 0px;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
text-align: flex-start;
|
|
/* max-width: 100%; */
|
|
/* min-width: fit-content; */
|
|
}
|
|
|
|
.column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: auto 0;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.container > .card:first-of-type {
|
|
margin-top: none;
|
|
}
|
|
|
|
|
|
/*
|
|
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other *
|
|
@media screen and (max-width: 800px) {
|
|
.leftcolumn, .rightcolumn {
|
|
width: 100%;
|
|
/* padding: 0; *
|
|
}
|
|
}
|
|
|
|
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other *
|
|
@media screen and (max-width: 400px) {
|
|
.topnav a {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
}
|
|
*/
|
|
|
|
.container-input {
|
|
padding: 1vh;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.container-input > label {
|
|
width: 100%;
|
|
margin-bottom: 1vh;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.container-input > input,
|
|
.container-input > textarea {
|
|
border: 2px solid var(--colour-accent);
|
|
padding: 1vh;
|
|
}
|
|
|
|
.label-title {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
ul {
|
|
max-width: 90%;
|
|
padding: 5px 0 10px 0;
|
|
width: fit-content;
|
|
margin: auto;
|
|
}
|
|
li {
|
|
text-align: left;
|
|
font-size: 18px;
|
|
}
|
|
|
|
|
|
:not(input,textarea,select,button).dirty {
|
|
background-color: var(--colour-accent);
|
|
}
|
|
input.dirty, textarea.dirty, select.dirty {
|
|
border-color: var(--colour-primary);
|
|
}
|
|
|
|
|
|
#pageBody > *, button {
|
|
font-size: min(12px, calc(1vh * 3));
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 400px) {
|
|
/*
|
|
img.logo {
|
|
border-radius: 3vh;
|
|
}
|
|
.company-name {
|
|
font-size: 14px;
|
|
}
|
|
*/
|
|
}
|
|
.button {
|
|
display: inline-block;
|
|
padding: 0.5vh 0.75vh;
|
|
border-radius: 0.75vh;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
transition: all 0.3s ease;
|
|
width: fit-content;
|
|
}
|
|
.button:not(.is_collapsed) {
|
|
cursor: pointer;
|
|
}
|
|
.button.is_collapsed {
|
|
display: block;
|
|
opacity: 0;
|
|
}
|
|
|
|
.button-primary {
|
|
background: var(--colour-accent);
|
|
color: var(--colour-primary);
|
|
border: 2px solid var(--colour-primary);
|
|
}
|
|
|
|
.button-primary:hover {
|
|
background: var(--colour-secondary);
|
|
}
|
|
|
|
.button-light {
|
|
background: white;
|
|
color: var(--colour-primary);
|
|
}
|
|
|
|
.button-light:hover {
|
|
background: var(--colour-accent);
|
|
}
|
|
|
|
.logo:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.button.icon.active.delete,
|
|
.button.icon.active.add {
|
|
height: 2vh;
|
|
}
|
|
|
|
|
|
|
|
|
|
select {
|
|
border: 1px solid var(--colour-accent);
|
|
}
|
|
|
|
img, video {
|
|
border-radius: 3vh;
|
|
}
|
|
|
|
|
|
h1 {
|
|
font-size: min(24px, calc(1vh * 6));
|
|
}
|
|
|
|
h2 {
|
|
font-size: min(20px, calc(1vh * 5));
|
|
}
|
|
|
|
h3 {
|
|
font-size: min(16px, calc(1vh * 4));
|
|
margin-top: 1vh;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 13px;
|
|
margin: 1vh;
|
|
text-align: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 11px;
|
|
margin: 1vh;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Overlay modal */
|
|
.overlay {
|
|
/*
|
|
display: none;
|
|
*/
|
|
position: fixed;
|
|
width: 100px;
|
|
/* height: 50%; */
|
|
background: var(--colour-page-background);
|
|
justify-content: right;
|
|
align-items: right;
|
|
align-self: right;
|
|
z-index: 999;
|
|
}
|
|
.is_collapsed {
|
|
display: none;
|
|
}
|
|
|
|
/* Hamburger menu overlay */
|
|
#buttonHamburger {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: 0;
|
|
min-height: 4vh;
|
|
max-height: 4vh;
|
|
min-width: 4.5vh;
|
|
max-width: 4.5vh;
|
|
z-index: 10;
|
|
}
|
|
#buttonHamburger .icon.hamburger {
|
|
min-height: 3vh;
|
|
max-height: 3vh;
|
|
min-width: 3vh;
|
|
max-width: 3vh;
|
|
}
|
|
/*
|
|
#buttonHamburger:hover {
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
*/
|
|
#overlayHamburger {
|
|
top: 20vh;
|
|
right: 0.75vh;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
max-height: 60vh;
|
|
}
|
|
#overlayHamburger {
|
|
border: 2px solid var(--border-colour);
|
|
border-radius: 4px;
|
|
}
|
|
#overlayHamburger:first-child {
|
|
border-top-left-radius: 12px;
|
|
border-top-right-radius: 12px;
|
|
}
|
|
#overlayHamburger:last-child {
|
|
border-bottom-left-radius: 12px;
|
|
border-bottom-right-radius: 12px;
|
|
}
|
|
|
|
#overlayHamburger > * {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
width: 100%;
|
|
/* color: var(--colour-text); */
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
/* height: 18px; */
|
|
}
|
|
#overlayHamburger > :hover {
|
|
color: var(--colour-page-background);
|
|
background-color: var(--colour-primary);
|
|
}
|
|
#overlayHamburger > * > * {
|
|
width: 100%;
|
|
/*
|
|
margin-top: 4.5px;
|
|
margin-bottom: 4.5px;
|
|
*/
|
|
}
|
|
#overlayHamburger > .container {
|
|
padding-top: 4.5px;
|
|
padding-bottom: 4.5px;
|
|
}
|
|
|
|
@media screen and (max-width: 400px) {
|
|
#buttonHamburger {
|
|
min-height: 6vh;
|
|
max-height: 6vh;
|
|
min-width: 6.5vh;
|
|
max-width: 6.5vh;
|
|
}
|
|
#buttonHamburger .icon.hamburger {
|
|
min-height: 5vh;
|
|
max-height: 5vh;
|
|
min-width: 5vh;
|
|
max-width: 5vh;
|
|
}
|
|
#overlayHamburger {
|
|
top: 22vh;
|
|
width: 100px;
|
|
/* right: 6.5vh; */
|
|
}
|
|
}
|
|
|
|
/* Confirm overlay */
|
|
#overlayConfirm {
|
|
position: absolute;
|
|
left: 25vw;
|
|
width: 50vw;
|
|
height: 50vh;
|
|
}
|
|
|
|
#overlayConfirm .row > * {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#overlayConfirm .row .button.button-cancel {
|
|
margin-right: 0.5vh;
|
|
}
|
|
#overlayConfirm .row .button.submit {
|
|
margin-left: 0.5vh;
|
|
}
|
|
|
|
|
|
|
|
|
|
#formFilters .container {
|
|
max-width: fit-content;
|
|
}
|
|
|
|
thead, tbody {
|
|
padding-top: 0px !important;
|
|
padding-bottom: 0px !important;
|
|
}
|
|
|
|
th {
|
|
background-color: transparent;
|
|
}
|
|
td {
|
|
font-size: min(12px, calc(1vh * 3));
|
|
}
|
|
|
|
th, td {
|
|
min-width: fit-content;
|
|
}
|
|
tr:not(:last-child) > td {
|
|
border-bottom: 1px dashed var(--border-colour);
|
|
}
|
|
td > table > tbody > tr > td {
|
|
border: none !important;
|
|
}
|
|
th.is_collapsed, td.is_collapsed {
|
|
display: table-cell !important;
|
|
}
|
|
td.dirty {
|
|
background-color: var(--colour-primary);
|
|
}
|
|
td:not(.dirty) {
|
|
background-color: transparent;
|
|
}
|
|
|
|
tr {
|
|
min-height: 1px;
|
|
border-bottom: 1px solid;
|
|
border-top: 1px solid;
|
|
border-color: var(--border-colour);
|
|
background-color: transparent;
|
|
}
|
|
|
|
table button {
|
|
margin: 0.25vh;
|
|
padding: 0.5vh 1vh;
|
|
}
|
|
|
|
table button.active {
|
|
background-color: var(--colour-page-background);
|
|
}
|
|
|
|
tr.delete, tr.delete > td {
|
|
background-color: var(--colour-error);
|
|
}
|
|
|
|
table div {
|
|
align-content: center;
|
|
}
|
|
|
|
|
|
/* Navigation */
|
|
.topnav {
|
|
border-bottom-left-radius: 2.5vh;
|
|
border-bottom-right-radius: 2.5vh;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex: 1;
|
|
flex-direction: row;
|
|
font-weight: bold;
|
|
font-size: 1vh;
|
|
max-height: 15vh;
|
|
height: 15vh;
|
|
align-items: flex-start;
|
|
}
|
|
.topnav a,
|
|
.topnav label,
|
|
.topnav p,
|
|
.topnav h1 {
|
|
float: left;
|
|
display: flex;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
width: 100%;
|
|
max-height: 15vh;
|
|
justify-content: center;
|
|
}
|
|
.topnav h1 {
|
|
color: var(--colour-text-link-visited);
|
|
}
|
|
.topnav a:hover {
|
|
background-color: var(--colour-page-background);
|
|
}
|
|
|
|
.topnav > .container {
|
|
max-width: 50%;
|
|
height: 100%;
|
|
align-items: center;
|
|
align-self: center;
|
|
display: flex;
|
|
}
|
|
.topnav > .container.logo {
|
|
min-width: 15vh;
|
|
max-width: 15vh;
|
|
}
|
|
.topnav > .container.company-name {
|
|
min-width: calc(100vw - 30vh);
|
|
max-width: calc(100vw - 30vh);
|
|
}
|
|
.topnav select {
|
|
padding: 1vh;
|
|
margin: 1vh;
|
|
border-radius: 1vh;
|
|
border: 2px solid var(--border-colour);
|
|
font-weight: bold;
|
|
text-align: center;
|
|
width: 25vw;
|
|
}
|
|
.topnav select .is_collapsed {
|
|
width: 5vw;
|
|
}
|
|
.company-name {
|
|
font-size: min(28px, calc(1vh * 7));
|
|
}
|
|
/*
|
|
@media screen and (max-width: 450px) {
|
|
.company-name {
|
|
font-size: 18px; / * min(24px, calc(1vh * 7)); * /
|
|
}
|
|
}
|
|
*/
|
|
/* Page Filters */
|
|
#formFilters {
|
|
width: fit-content;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
}
|
|
#formFilters * {
|
|
font-size: 12px;
|
|
}
|
|
|
|
#formFilters .container {
|
|
}
|
|
#formFilters .container-input {
|
|
max-width: fit-content;
|
|
padding: 0 0.5vh;
|
|
}
|
|
#formFilters .container-input:has(.dirty) {
|
|
background-color: var(--colour-accent);
|
|
}
|
|
|
|
#formFilters .container-input input {
|
|
width: 10vh;
|
|
max-width: 10vh;
|
|
height: 20px;
|
|
}
|
|
/*
|
|
#formFilters .container-input input {
|
|
height: 1.7vh;
|
|
}
|
|
#formFilters .container-input select {
|
|
height: 2vh;
|
|
}
|
|
*/
|
|
|
|
#formFilters .container-input.filter.active_only {
|
|
width: 8vh;
|
|
}
|
|
#formFilters .container-input.filter.active_only input {
|
|
display: none;
|
|
}
|
|
#formFilters .container-input.filter.active_only svg.active_only {
|
|
height: 25px;
|
|
fill: var(--colour-text-background);
|
|
background-color: var(--colour-accent);
|
|
/* border: 1px solid var(--colour-accent);
|
|
border-radius: 0.5vh; */
|
|
width: 25px;
|
|
}
|
|
#formFilters .container-input.filter.active_only svg.active_only.is_checked {
|
|
fill: var(--colour-accent);
|
|
background-color: var(--colour-text-background);
|
|
}
|
|
#formFilters .container-input.filter.is_not_empty {
|
|
width: 12vh;
|
|
}
|
|
|
|
/*
|
|
#formFilters button {
|
|
padding: 0.5vh 0.75vh;
|
|
background-color: var(--colour-accent);
|
|
color: var(--colour-primary);
|
|
font-weight: bold;
|
|
border-radius: 0.75vh;
|
|
border: 2px solid var(--colour-primary);
|
|
}
|
|
|
|
#formFilters button.is_collapsed {
|
|
display: block;
|
|
opacity: 0;
|
|
}
|
|
*/
|
|
|
|
form.filter button.save, form.filter button.button-cancel {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
form.filter button.save, form.filter button.button-cancel {
|
|
margin-top: 0;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 400px) {
|
|
#formFilters .container-input select {
|
|
/* height: 3vh; */
|
|
}
|
|
.topnav h1 {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
/* In sections */
|
|
|
|
#formFilters {
|
|
padding: 0.5vh 1vw;
|
|
margin-top: 1vh;
|
|
}
|
|
|
|
table.table-main {
|
|
overflow-x: auto;
|
|
padding: 1vh 1vw;
|
|
max-width: 88vw; /* min(calc(1vh * 80), calc(1vw * 90)); */
|
|
width: min-content;
|
|
align-items: normal;
|
|
justify-content: normal;
|
|
}
|
|
|
|
table.table-main * {
|
|
padding: 0.25vh 0.5vh;
|
|
}
|
|
|
|
table.table-main thead {
|
|
max-height: 4vh;
|
|
overflow-y: visible;
|
|
background-color: var(--colour-text-background);
|
|
}
|
|
|
|
table.table-main tbody {
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
min-width: fit-content;
|
|
max-width: fit-content;
|
|
overflow-x: visible;
|
|
}
|
|
table.table-main tbody.is_collapsed {
|
|
display: block;
|
|
}
|
|
table.table-main:has(tbody > div) tbody {
|
|
}
|
|
table.table-main tbody > div {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
justify-self: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
align-self: center;
|
|
position: relative;
|
|
display: block;
|
|
width: 100%; /* min(calc(90vh), calc(70vw)); */
|
|
}
|
|
|
|
table.table-main select,
|
|
table.table-main input:not([type="checkbox"]),
|
|
table.table-main textarea,
|
|
table.table-main div {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: 100%;
|
|
border: 1px solid var(--colour-accent);
|
|
border-radius: 0.5vh;
|
|
text-align: center;
|
|
background-color: var(--colour-text-background);
|
|
}
|
|
|
|
table.table-main thead tr th,
|
|
table.table-main tbody tr td {
|
|
max-width: 20vh;
|
|
min-width: 20vh;
|
|
padding: 0 0.5vh;
|
|
}
|
|
table.table-main tbody tr td {
|
|
height: 5vh;
|
|
/* padding-top: 0.5vh; */
|
|
}
|
|
table.table-main thead tr th.notes,
|
|
table.table-main tbody tr td.notes {
|
|
max-width: fit-content;
|
|
}
|
|
table.table-main tbody tr td:has(.dirty) {
|
|
background-color: var(--colour-primary);
|
|
}
|
|
table.table-main tbody tr td:has(.dirty) table tr:not(:has(.dirty)) {
|
|
background-color: var(--colour-text-background);
|
|
}
|
|
table.table-main tbody tr:not(:last-of-type) td {
|
|
padding-bottom: 0.25vh;
|
|
}
|
|
table.table-main tbody tr td.ddl-preview div {
|
|
cursor: pointer;
|
|
}
|
|
table.table-main tbody tr td.ddl-preview div,
|
|
table.table-main tbody tr td.ddl-preview select {
|
|
padding-left: 2vh;
|
|
padding-right: 2vh;
|
|
}
|
|
table.table-main tbody tr td.ddl-preview select {
|
|
font-size: 12px;
|
|
}
|
|
table.table-main thead tr th.active,
|
|
table.table-main tbody tr td.active {
|
|
max-width: 6vh;
|
|
min-width: 6vh;
|
|
}
|
|
table.table-main thead tr th.active svg.active.add {
|
|
fill: var(--colour-primary);
|
|
background-color: var(--colour-accent);
|
|
border: 2px solid var(--colour-accent);
|
|
padding: 0;
|
|
border-radius: 1vh;
|
|
}
|
|
table.table-main tbody tr td.active svg.active.add {
|
|
fill: var(--colour-primary);
|
|
}
|
|
table.table-main tbody tr td.active svg.active.delete {
|
|
fill: var(--colour-error);
|
|
}
|
|
table.table-main tbody tr td.display_order,
|
|
table.table-main thead tr th.display_order {
|
|
max-width: 5vh;
|
|
min-width: 5vh;
|
|
}
|
|
|
|
#container-template-elements {
|
|
display: none;
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 850px) {
|
|
}
|
|
@media screen and (max-width: 400px) {
|
|
#formFilters input[type="text"],
|
|
#formFilters select {
|
|
width: 15vh;
|
|
/* height: 3vh; */
|
|
}
|
|
table.table-main {
|
|
max-height: 60vh;
|
|
}
|
|
table.table-main tbody {
|
|
max-height: 53vh;
|
|
}
|
|
}
|
|
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-subtitle {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Default */
|
|
:root {
|
|
/* Claude dark blue / grey theme */
|
|
--colour-accent: #C77DFF;
|
|
--colour-error: red;
|
|
--colour-page-background: #E0AAFF;
|
|
--colour-page-background-1: #F5ECFE;
|
|
--colour-page-background-2: #FAE0E2;
|
|
--colour-primary: #240046;
|
|
--colour-secondary: #3C096C;
|
|
--colour-text: #10002B;
|
|
--colour-text-background: white;
|
|
--colour-text-link-unvisited: #0000EE;
|
|
--colour-text-link-visited: #551A8B;
|
|
}
|
|
|
|
/*
|
|
--c_purple_darker: #310055;
|
|
--c_purple_dark: #4A0A77;
|
|
--c_purple: #6818A5;
|
|
--c_purple_light: #CBAFFE;
|
|
--c_purple_lighter: #F5ECFE;
|
|
|
|
--c_blue: #0044FF;
|
|
--c_blue_pastel: #B8E0FF;
|
|
--c_blue_light: #73E8FF;
|
|
--c_blue_dark: #003ADB;
|
|
/* --c_red: * /
|
|
--c-red: #FF0000;
|
|
--c_red_pastel: #FAE0E2;
|
|
--c_red_lighter: #FAE0E2;
|
|
}
|
|
*/
|
|
|
|
/*# sourceMappingURL=main.bundle.css.map*/ |