275 lines
6.0 KiB
CSS
275 lines
6.0 KiB
CSS
/* ========================================================================== */
|
|
/* ------------------------------- VARIABLES -------------------------------- */
|
|
/* ========================================================================== */
|
|
:root {
|
|
--grey: #40545c;
|
|
--orange: #e8a951;
|
|
}
|
|
|
|
/* ========================================================================== */
|
|
/* --------------------------------- LAYOUT --------------------------------- */
|
|
/* ========================================================================== */
|
|
html {
|
|
background-color: var(--grey);
|
|
background-image: url(../images/tiling/crackedStone.jpg);
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
color: var(--grey);
|
|
}
|
|
body {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
margin: 0;
|
|
color: var(--grey);
|
|
}
|
|
footer {
|
|
background-color: var(--grey);
|
|
margin-bottom: 0;
|
|
padding: 16px;
|
|
}
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
.left {
|
|
text-align: left;
|
|
}
|
|
.right {
|
|
text-align: right;
|
|
}
|
|
.page {
|
|
max-width: 1500px;
|
|
margin-top: 35px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 8px;
|
|
}
|
|
.bar {
|
|
position: fixed;
|
|
width: 100%;
|
|
z-index: 1;
|
|
top: 0;
|
|
overflow: hidden;
|
|
background-color: var(--grey);
|
|
}
|
|
.bar .bar-item {
|
|
color: var(--orange);
|
|
padding: 8px 16px;
|
|
float: left;
|
|
width: auto;
|
|
border: none;
|
|
display: block;
|
|
outline: 0;
|
|
}
|
|
.button {
|
|
border: none;
|
|
display: inline-block;
|
|
padding: 8px 16px;
|
|
vertical-align: middle;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
background-color: inherit;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.show-block {
|
|
display: block !important;
|
|
}
|
|
|
|
/* ========================================================================== */
|
|
/* ---------------------------------- GRID ---------------------------------- */
|
|
/* ========================================================================== */
|
|
.grid-wrapper {
|
|
display: grid;
|
|
row-gap: 8px;
|
|
column-gap: 8px;
|
|
}
|
|
.grid-wrapper > div {
|
|
background-image: url("../images/tiling/manuscript.jpg");
|
|
padding: 8px;
|
|
box-shadow:2px 2px 2px 2px rgba(0,0,0,0.16), 2px 2px 2px 2px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
/* Large */
|
|
@media (min-width: 993px) {
|
|
.hide-large {
|
|
display: none !important;
|
|
}
|
|
}
|
|
/* Medium */
|
|
@media (min-width: 601px) and (max-width: 992px) {
|
|
.hide-medium {
|
|
display: none !important;
|
|
}
|
|
}
|
|
/* Small */
|
|
@media (max-width: 600px) {
|
|
.hide-small {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* ========================================================================== */
|
|
/* -------------------------------- TOOLTIPS -------------------------------- */
|
|
/* ========================================================================== */
|
|
/* Tooltip container */
|
|
.tooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Tooltip text */
|
|
.tooltip .tooltiptext {
|
|
visibility: hidden;
|
|
max-width: 600px;
|
|
background-color: var(--grey);
|
|
color: var(--orange);
|
|
text-align: center;
|
|
padding: 1px 7px;
|
|
border-style: solid;
|
|
border-color: var(--orange);
|
|
border-width: 1px;
|
|
|
|
/* Position the tooltip text */
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 125%;
|
|
left: 50%;
|
|
margin-left: -60px;
|
|
|
|
/* Fade in tooltip */
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
/* Tooltip arrow */
|
|
.tooltip .tooltiptext::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
margin-left: -7px;
|
|
border-width: 7px;
|
|
border-style: solid;
|
|
border-color: transparent transparent var(--orange) transparent;
|
|
}
|
|
|
|
/* Show the tooltip text when you mouse over the tooltip container */
|
|
.tooltip:hover .tooltiptext {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ========================================================================== */
|
|
/* -------------------------------- SHADOWS --------------------------------- */
|
|
/* ========================================================================== */
|
|
.shadow-2 {
|
|
box-shadow:2px 2px 2px 2px rgba(0,0,0,0.16), 2px 2px 2px 2px rgba(0,0,0,0.12);
|
|
}
|
|
.shadow-4 {
|
|
box-shadow:4px 4px 4px 4px rgba(0,0,0,0.2), 4px 4px 4px 4px rgba(0,0,0,0.19);
|
|
}
|
|
|
|
/* ========================================================================== */
|
|
/* -------------------------------- COLOURS --------------------------------- */
|
|
/* ========================================================================== */
|
|
.orange {
|
|
color: var(--orange);
|
|
}
|
|
.grey {
|
|
color: var(--grey);
|
|
}
|
|
.hover-orange:hover {
|
|
background-color: var(--orange);
|
|
color: var(--grey);
|
|
}
|
|
.hover-grey:hover {
|
|
background-color: var(--grey);
|
|
color: var(--orange);
|
|
}
|
|
|
|
/* ========================================================================== */
|
|
/* --------------------------- BASIC TEXT STYLES ---------------------------- */
|
|
/* ========================================================================== */
|
|
h1, h2, h3, p {
|
|
font-family: "Marcellus SC";
|
|
color: var(--grey);
|
|
margin: 0;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
font-weight: bold;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
h1 {
|
|
font-size: 32px;
|
|
}
|
|
h1:before, h1:after {
|
|
height: 5px;
|
|
}
|
|
h2 {
|
|
font-size: 24px;
|
|
}
|
|
h2:before, h2:after {
|
|
height: 2px;
|
|
}
|
|
h3 {
|
|
font-size: 18px;
|
|
}
|
|
h3:before, h3:after {
|
|
height: 2px;
|
|
}
|
|
h1:before, h1:after, h2:before, h2:after, h3:before, h3:after {
|
|
background-color: var(--grey);
|
|
content: "";
|
|
display: inline-block;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
width: 50%;
|
|
}
|
|
h1:before, h2:before, h3:before {
|
|
right: 4px;
|
|
margin-left: -50%;
|
|
}
|
|
h1:after, h2:after, h3:after {
|
|
left: 4px;
|
|
margin-right: -50%;
|
|
}
|
|
|
|
p {
|
|
text-align: justify;
|
|
padding: 2px;
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
/* Vertial Line */
|
|
.vl {
|
|
background: linear-gradient(to right,
|
|
transparent 0%,
|
|
transparent calc(50% - 0.5px),
|
|
#40545c calc(50% - 0.5px),
|
|
#40545c calc(50% + 0.5px),
|
|
transparent calc(50% + 0.5px),
|
|
transparent 100%);
|
|
}
|
|
|
|
/* Accordions */
|
|
.accordion,.trAccordion {
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: 0.4s;
|
|
}
|
|
.accordionActive {
|
|
background-color:#40545c;
|
|
color:#e8a951;
|
|
}
|
|
.accordionPanel,.accordionRow {
|
|
color:#40545c;
|
|
display: none;
|
|
overflow: hidden;
|
|
}
|
|
|