Fix: Merged layouts for core and dog sections as much as possible.
This commit is contained in:
311
static/dist/css/main.bundle.css
vendored
311
static/dist/css/main.bundle.css
vendored
@@ -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;
|
||||
@@ -304,18 +284,15 @@ img, video {
|
||||
|
||||
|
||||
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;
|
||||
@@ -323,13 +300,24 @@ 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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -354,19 +342,29 @@ h5 {
|
||||
/* 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 {
|
||||
@@ -375,15 +373,17 @@ h5 {
|
||||
}
|
||||
*/
|
||||
#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;
|
||||
@@ -394,7 +394,8 @@ h5 {
|
||||
border-bottom-right-radius: 12px;
|
||||
}
|
||||
|
||||
#overlayHamburger > * {
|
||||
#overlayHamburger .container {
|
||||
background-color: var(--colour-page-background);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
@@ -405,12 +406,14 @@ h5 {
|
||||
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;
|
||||
@@ -424,21 +427,19 @@ h5 {
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -528,17 +529,19 @@ table div {
|
||||
|
||||
/* 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,
|
||||
@@ -549,7 +552,7 @@ table div {
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
max-height: 15vh;
|
||||
max-height: 7vh;
|
||||
justify-content: center;
|
||||
}
|
||||
.topnav h1 {
|
||||
@@ -557,37 +560,55 @@ table div {
|
||||
}
|
||||
.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) {
|
||||
@@ -596,6 +617,88 @@ table div {
|
||||
}
|
||||
}
|
||||
*/
|
||||
/*
|
||||
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;
|
||||
@@ -678,15 +781,28 @@ 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;
|
||||
}
|
||||
}
|
||||
/* In sections */
|
||||
|
||||
#formFilters {
|
||||
@@ -834,39 +950,24 @@ table.table-main thead tr th.display_order {
|
||||
}
|
||||
|
||||
|
||||
.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-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