Fix: Merged layouts for core and dog sections as much as possible.
This commit is contained in:
@@ -1,17 +1,14 @@
|
||||
|
||||
h1 {
|
||||
font-size: min(24px, calc(1vh * 6));
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: min(20px, calc(1vh * 5));
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: min(16px, calc(1vh * 4));
|
||||
font-size: 1.2rem;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 13px;
|
||||
margin: 1vh;
|
||||
@@ -19,8 +16,20 @@ h4 {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 11px;
|
||||
margin: 1vh;
|
||||
}
|
||||
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@@ -21,19 +21,29 @@
|
||||
/* Hamburger menu overlay */
|
||||
#buttonHamburger {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
min-height: 4vh;
|
||||
max-height: 4vh;
|
||||
min-width: 4.5vh;
|
||||
max-width: 4.5vh;
|
||||
position: fixed;
|
||||
right: 1vh;
|
||||
min-height: 3.5vh;
|
||||
max-height: 3.5vh;
|
||||
min-width: 4vh;
|
||||
max-width: 4vh;
|
||||
z-index: 10;
|
||||
padding: 0;
|
||||
}
|
||||
#buttonHamburger.expanded {
|
||||
min-width: 100px;
|
||||
max-width: 100px;
|
||||
min-height: 5vh;
|
||||
max-height: 5vh;
|
||||
padding-left: calc(100 * 1px - 5 * 1vh);
|
||||
padding-bottom: 1vh;
|
||||
}
|
||||
#buttonHamburger .icon.hamburger {
|
||||
min-height: 3vh;
|
||||
max-height: 3vh;
|
||||
min-width: 3vh;
|
||||
max-width: 3vh;
|
||||
min-height: 2.5vh;
|
||||
max-height: 2.5vh;
|
||||
min-width: 2.5vh;
|
||||
max-width: 2.5vh;
|
||||
padding: 0.5vh 0.75vh;
|
||||
}
|
||||
/*
|
||||
#buttonHamburger:hover {
|
||||
@@ -42,15 +52,17 @@
|
||||
}
|
||||
*/
|
||||
#overlayHamburger {
|
||||
top: 20vh;
|
||||
right: 0.75vh;
|
||||
top: 10vh;
|
||||
right: 1vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: 60vh;
|
||||
}
|
||||
#overlayHamburger {
|
||||
background-color: var(--colour-accent);
|
||||
border: 2px solid var(--border-colour);
|
||||
border-radius: 4px;
|
||||
border-radius: 0.75vh;
|
||||
width: 100px;
|
||||
z-index: 2;
|
||||
padding-top: 3.5vh;
|
||||
}
|
||||
#overlayHamburger:first-child {
|
||||
border-top-left-radius: 12px;
|
||||
@@ -61,7 +73,8 @@
|
||||
border-bottom-right-radius: 12px;
|
||||
}
|
||||
|
||||
#overlayHamburger > * {
|
||||
#overlayHamburger .container {
|
||||
background-color: var(--colour-page-background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
@@ -72,12 +85,14 @@
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
/* height: 18px; */
|
||||
cursor: pointer;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
#overlayHamburger > :hover {
|
||||
color: var(--colour-page-background);
|
||||
background-color: var(--colour-primary);
|
||||
}
|
||||
#overlayHamburger > * > * {
|
||||
#overlayHamburger .container a {
|
||||
width: 100%;
|
||||
/*
|
||||
margin-top: 4.5px;
|
||||
@@ -91,21 +106,19 @@
|
||||
|
||||
@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;
|
||||
min-width: 5.5vh;
|
||||
max-width: 5.5vh;
|
||||
}
|
||||
#buttonHamburger .icon.hamburger {
|
||||
min-height: 4vh;
|
||||
max-height: 4vh;
|
||||
min-width: 4vh;
|
||||
max-width: 4vh;
|
||||
}
|
||||
#overlayHamburger {
|
||||
top: 22vh;
|
||||
width: 100px;
|
||||
/* right: 6.5vh; */
|
||||
padding-top: 5vh;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,17 +2,19 @@
|
||||
|
||||
/* 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;
|
||||
max-height: 7vh;
|
||||
height: 7vh;
|
||||
align-items: flex-start;
|
||||
background: var(--colour-text-background);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
justify-content: center; /* space-between */
|
||||
align-items: center;
|
||||
}
|
||||
.topnav a,
|
||||
.topnav label,
|
||||
@@ -23,7 +25,7 @@
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
max-height: 15vh;
|
||||
max-height: 7vh;
|
||||
justify-content: center;
|
||||
}
|
||||
.topnav h1 {
|
||||
@@ -31,37 +33,55 @@
|
||||
}
|
||||
.topnav a:hover {
|
||||
background-color: var(--colour-page-background);
|
||||
color: var(--colour-text)
|
||||
}
|
||||
|
||||
.topnav > .container {
|
||||
max-width: 50%;
|
||||
width: 10vh;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
}
|
||||
.topnav > .container.logo {
|
||||
min-width: 15vh;
|
||||
max-width: 15vh;
|
||||
.topnav .container.logo {
|
||||
cursor: pointer;
|
||||
}
|
||||
.topnav > .container.company-name {
|
||||
min-width: calc(100vw - 30vh);
|
||||
max-width: calc(100vw - 30vh);
|
||||
.topnav .container .logo {
|
||||
/* min-width: 35vh; */
|
||||
max-width: 35vh;
|
||||
/* min-height: 6vh; */
|
||||
max-height: 6vh;
|
||||
margin: 0.5vh;
|
||||
margin-right: auto;
|
||||
}
|
||||
.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;
|
||||
.topnav .container.company-name {
|
||||
min-width: calc(100vw - 20vh);
|
||||
max-width: calc(100vw - 20vh);
|
||||
margin-right: 10vh;
|
||||
}
|
||||
.company-name {
|
||||
font-size: min(28px, calc(1vh * 7));
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 1vh 2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: calc(1vw * 100 - 1vh * 35);
|
||||
align-items: center;
|
||||
margin: 1vh 1vw;
|
||||
}
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
font-weight: normal;
|
||||
align-content: center;
|
||||
font-size: 1.2rem;
|
||||
width: fit-content;
|
||||
}
|
||||
.nav-links a.button {
|
||||
color: var(--colour-text-background);
|
||||
margin: 0 auto;
|
||||
font-weight: bold;
|
||||
}
|
||||
/*
|
||||
@media screen and (max-width: 450px) {
|
||||
@@ -70,6 +90,88 @@
|
||||
}
|
||||
}
|
||||
*/
|
||||
/*
|
||||
header {
|
||||
background: white;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
/ * position: fixed;
|
||||
top: 0; * /
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: 58vw;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
align-content: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.nav-links a.button {
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: min(2000px, 90vw);
|
||||
margin: 0 auto;
|
||||
padding: 0 5vw;
|
||||
}
|
||||
|
||||
/ * Header * /
|
||||
header {
|
||||
background: white;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
/ * position: fixed;
|
||||
top: 0; * /
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #8932CB;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
align-content: center;
|
||||
}
|
||||
.nav-links a.button {
|
||||
color: white;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Page Filters */
|
||||
#formFilters {
|
||||
width: fit-content;
|
||||
@@ -152,12 +254,25 @@ form.filter button.save, form.filter button.button-cancel {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
@media screen and (max-width: 400px) {
|
||||
#formFilters .container-input select {
|
||||
/* height: 3vh; */
|
||||
}
|
||||
.topnav h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@media screen and (max-width: 940px) {
|
||||
/*
|
||||
.hero h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
*/
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
.topnav {
|
||||
justify-content: flex-start;
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -99,20 +99,6 @@ script, link {
|
||||
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 {
|
||||
@@ -130,12 +116,6 @@ img.logo {
|
||||
max-width: 80vw;
|
||||
}
|
||||
|
||||
.header.card {
|
||||
border-radius: 2.5vh;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex: 1;
|
||||
margin: 0px;
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
/* Common */
|
||||
section {
|
||||
padding: 2rem;
|
||||
}
|
||||
p {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
@@ -14,31 +17,23 @@ ul li {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
section.benefits,
|
||||
section.social-proof {
|
||||
padding: 4rem 0;
|
||||
background: var(--colour-text-background);
|
||||
}
|
||||
section.benefits .card.benefits,
|
||||
section.social-proof .card.social-proof {
|
||||
padding: 2rem;
|
||||
background: var(--colour-page-background);
|
||||
border-radius: 8px;
|
||||
transition: transform 0.3s ease;
|
||||
display: block;
|
||||
section.social-proof .card.social-proof {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
section.problem,
|
||||
section.benefits,
|
||||
section.solution,
|
||||
section.testimonial {
|
||||
padding: 4rem 0;
|
||||
padding: 4rem 2rem;
|
||||
background: var(--colour-page-background-1);
|
||||
}
|
||||
section.problem .card.problem,
|
||||
section.benefits .card.benefits,
|
||||
section.solution .card.solution,
|
||||
section.testimonial .card.testimonial {
|
||||
background: var(--colour-text-background);
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
max-width: 800px;
|
||||
margin: 3rem auto 0;
|
||||
@@ -46,40 +41,50 @@ section.testimonial .card.testimonial {
|
||||
}
|
||||
|
||||
|
||||
section.problem ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
padding: 8rem 0 4rem;
|
||||
padding: 8rem 2rem 4rem;
|
||||
background: linear-gradient(45deg, var(--colour-page-background-1), var(--colour-page-background-2)); /* linear-gradient(45deg, #f8fafc, #eff6ff); */
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--colour-text);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--colour-secondary);
|
||||
}
|
||||
|
||||
section.hero .button {
|
||||
margin: 1vh auto;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 2vh;
|
||||
display: block;
|
||||
background-color: var(--colour-success-title);
|
||||
color: var(--colour-text-background);
|
||||
}
|
||||
section.hero .button:hover {
|
||||
background-color: var(--colour-success-highlight);
|
||||
color: var(--colour-success-title);
|
||||
}
|
||||
|
||||
|
||||
/* Problem Section */
|
||||
section.problem {
|
||||
background-color: var(--colour-error-highlight);
|
||||
}
|
||||
section.problem h2 {
|
||||
color: var(--colour-error-title);
|
||||
}
|
||||
section.problem .card {
|
||||
border-left: 4px solid var(--colour-error-accent);
|
||||
}
|
||||
section.problem ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
@@ -98,9 +103,6 @@ section.problem ul li::before {
|
||||
left: 0;
|
||||
}
|
||||
*/
|
||||
section.problem ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
/* Benefits Section * /
|
||||
@@ -109,15 +111,20 @@ section.benefits .section-subtitle {
|
||||
font-weight: bold;
|
||||
}
|
||||
*/
|
||||
|
||||
section.benefits {
|
||||
background-color: var(--colour-success-highlight);
|
||||
}
|
||||
section.benefits .container .card .container {
|
||||
min-width: 250px;
|
||||
}
|
||||
/* Solution Section */
|
||||
section.benefits .card.benefits,
|
||||
section.social-proof .card.social-proof {
|
||||
display: flex;
|
||||
section.benefits h2 {
|
||||
color: var(--colour-success);
|
||||
}
|
||||
section.benefits .card {
|
||||
border-left: 4px solid var(--colour-success);
|
||||
}
|
||||
|
||||
/* Solution Section */
|
||||
section.solution .container .card {
|
||||
margin-top: 1vh;
|
||||
max-width: min(2000px, 80vw);
|
||||
@@ -137,6 +144,13 @@ section.solution .project-thumbnail img {
|
||||
border-radius: 1vh;
|
||||
}
|
||||
|
||||
section.solution .project-thumbnail img {
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
section.solution .project-thumbnail:hover {
|
||||
transform: scale(1.75);
|
||||
}
|
||||
|
||||
/* Social Proof Section * /
|
||||
section.social-proof {
|
||||
@@ -166,8 +180,15 @@ section.social-proof ul li {
|
||||
font-size: 14px;
|
||||
}
|
||||
*/
|
||||
section.social-proof .card.social-proof {
|
||||
padding: 0;
|
||||
section.social-proof {
|
||||
padding: 4rem 0;
|
||||
background: var(--colour-text-background);
|
||||
}
|
||||
section.social-proof .card.social-proof {
|
||||
background: var(--colour-page-background);
|
||||
border-radius: 8px;
|
||||
transition: transform 0.3s ease;
|
||||
padding: 1.5vh;
|
||||
}
|
||||
section.social-proof .section-title {
|
||||
font-weight: bold;
|
||||
@@ -178,8 +199,11 @@ section.social-proof .section-subtitle {
|
||||
margin: 1vh 1vw;
|
||||
}
|
||||
section.social-proof .container {
|
||||
max-width: min(600px, 90vw);
|
||||
width: fit-content;
|
||||
margin: 0 2vw;
|
||||
}
|
||||
section.social-proof > .container {
|
||||
max-width: min(600px, 90vw);
|
||||
margin: 1vh auto;
|
||||
}
|
||||
|
||||
@@ -224,8 +248,8 @@ section.testimonial h2 {
|
||||
/* CTA Section */
|
||||
.cta-1,
|
||||
.cta-2 {
|
||||
padding: 6rem 0;
|
||||
background: var(--colour-primary);
|
||||
padding: 6rem 2rem;
|
||||
background: linear-gradient(135deg, var(--colour-primary), var(--colour-text-link-visited));
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -240,13 +264,14 @@ section.cta-2 .card .container {
|
||||
background-color: var(--colour-page-background);
|
||||
color: var(--colour-primary);
|
||||
border-radius: 1vh;
|
||||
padding: 2vh 1vw;
|
||||
padding: 1.5vh 3vw;
|
||||
margin: 1vh;
|
||||
min-width: 200px;
|
||||
}
|
||||
section.cta-2 .card .container h3 {
|
||||
margin: 0 auto;
|
||||
}
|
||||
section.cta-2 .card .container p {
|
||||
section.cta-2 .container p {
|
||||
margin-top: 1vh;
|
||||
}
|
||||
/* FAQs * /
|
||||
@@ -255,11 +280,6 @@ section.faq .button {
|
||||
}
|
||||
*/
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
header .navbar .nav-links {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
/* Fallback styles to ensure content is visible without JS */
|
||||
@@ -295,16 +315,14 @@ section.faq .button {
|
||||
.delay-4 { animation-delay: 0.4s; }
|
||||
|
||||
/* Buttons */
|
||||
.topnav .nav-links .button {
|
||||
padding: 0.5vh 0.75vh;
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
width: fit-content;
|
||||
margin: 0.75rem;
|
||||
font-size: 18px;
|
||||
/* border-radius: 6px; * /
|
||||
margin: 0.75rem; */
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
|
||||
@@ -1,91 +1,12 @@
|
||||
|
||||
/* Home page
|
||||
*/
|
||||
header {
|
||||
background: white;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
/* position: fixed;
|
||||
top: 0; */
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: 58vw;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
align-content: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.nav-links a.button {
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: min(2000px, 90vw);
|
||||
margin: 0 auto;
|
||||
padding: 0 5vw;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
background: white;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
/* position: fixed;
|
||||
top: 0; */
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #8932CB;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
align-content: center;
|
||||
}
|
||||
.nav-links a.button {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background: #1f2937;
|
||||
color: #f3f4f6;
|
||||
padding: 4rem 0 2rem;
|
||||
padding: 4rem 2rem 2rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
@@ -150,7 +71,7 @@ header {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
@media (max-width: 540px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -6,11 +6,6 @@
|
||||
max-width: 7vh;
|
||||
}
|
||||
|
||||
#basket {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Right column */
|
||||
.rightcolumn {
|
||||
@@ -18,12 +13,8 @@
|
||||
}
|
||||
|
||||
/* Main Table */
|
||||
|
||||
|
||||
|
||||
#pageBody {
|
||||
/* height: 69vh !important; */
|
||||
max-height: 79vh;
|
||||
max-height: 84vh;
|
||||
padding: 0 5vw;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
|
||||
@@ -3,11 +3,17 @@
|
||||
/* Claude dark blue / grey theme */
|
||||
--colour-accent: #C77DFF;
|
||||
--colour-error: red;
|
||||
--colour-error-accent: #fc8181;
|
||||
--colour-error-highlight: #fff5f5;
|
||||
--colour-error-title: #c53030;
|
||||
--colour-page-background: #E0AAFF;
|
||||
--colour-page-background-1: #F5ECFE;
|
||||
--colour-page-background-2: #FAE0E2;
|
||||
--colour-primary: #240046;
|
||||
--colour-secondary: #3C096C;
|
||||
--colour-success: #38a169;
|
||||
--colour-success-highlight: #f0fff4;
|
||||
--colour-success-title: #16a34a;
|
||||
--colour-text: #10002B;
|
||||
--colour-text-background: white;
|
||||
--colour-text-link-unvisited: #0000EE;
|
||||
|
||||
Reference in New Issue
Block a user