/* ============================= */ /* Last updated 2021-05-24 */ /* Taken over from Jakobsweg css */ /* ============================= */ .navbar { margin-bottom: 0; border-radius: 0; } /* Set a div class for the short description so background picture goes below text*/ div.shortdesc {height:40vh;} /* About 400 px Seems to be necessary */ /* Trying out percentage of vertical height */ /* Container for flags in drop down menu column */ div.flagtitle { position: relative; left: 4px; text-align: left; } /* Temporary fix for flag in title panel */ img.flagicon{ position: absolute; left: 20px; top: 10px; } /* On small screens, set height to 'auto' for sidenav and grid */ @media screen and (max-width: 767px) { .sidenav { height: auto; padding: 15px; } .row.content {height: auto;} } /* Set a hide class for small and medium viewports */ @media screen and (max-width:767px){ div.hidesmall {display: none;} } /* Set background colour and text bg-1 */ .bg-1 { background-color: #f2f2f2; } /* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));*/ /* Define own style for links - later improve this! */ /* font-size: calc(10px + (14 - 10) * ((100vw - 300px) / (1600 - 300))); */ a.list-group-item { font-weight: bold; color: navy; font-size: calc(10px + (100vw - 300px)/325); } /* Define span class for link description */ em.link-desc { font-weight: normal; font-style: italic; /* font-size: small; */ } /* Set a div class for link widths*/ div.linkwidth {width: 95%;} /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ /* Make bold navy title class for headings with scalable font sizes */ /* Scalable fonts */ /* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));*/ /* font-size:calc(14px + ((26 - 14) * ((100vw - 300px)/(1600 - 300)))); */ /* CSS doesn't validate with multiple brackets so do the calculations manually to simplify the equations */ /* (26-24)/(1600-300) =12/1300 is approximately 1/100 or screen sizes (1600-400) or (1500-300) */ /* The other scale factors are less accurate, but simplifies calculation! */ /* In the end, tweeked the first number anyway and did it by trial and error */ /* H1.TitleClass { font-weight:bold; color:navy; font-size:calc(14px + ((26 - 14) * ((100vw - 300px)/(1600 - 300)))); } */ H1.TitleClass { font-weight:bold; color:navy; font-size:calc(16px + 1vw); } h1.TitleClassCentre { font-weight:bold; color:navy; font-size:calc(16px + 1vw); text-align:center; } /* H2.TitleClass { font-weight:bold; color:navy; font-size:calc(12px + ((24 - 12) * ((100vw - 300px)/(1600 - 300)))); } */ H2.TitleClass { font-weight:bold; color:navy; font-size:calc(14px + 1vw); } /* H3.TitleClass { font-weight:bold; color:navy; font-size:calc(10px + ((22 - 11) * ((100vw - 300px)/(1600 - 300)))); } */ H3.TitleClass { font-weight:bold; color:navy; font-size:calc(14px + 0.5vw); } /* H4.TitleClass { font-weight:bold; color:navy; font-size:calc(8px + ((20 - 10) * ((100vw - 300px)/(1600 - 300)))); } */ H4.TitleClass { font-weight:bold; color:navy; font-size:calc(12px + 0.5vw); } /* Test scalable font for general purpose use */ span.scalable { font-size: calc(10px + 0.4vw); } /* Emphasis in to do list */ li.Urgent { font-weight:bold; color:red; font-size:calc(11px + 0.5vw); } /* For automatic line size use: body { line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300))); } */ /* Default paragraph (used for picture captions) */ p { font-weight:normal; color:navy; font-size:calc(12px + 0.5vw); } /* Default style for centering objects */ .aligncenter { text-align: center; } /* - - - - - - - - - - - - - - - - - - - - - - - - */ /* footer definition for copyright etc. */ /* - - - - - - - - - - - - - - - - - - - - - - - - */ /* Set black background color, white text and some padding */ footer { background-color: #555; padding: 15px; } /* Paragraph for footer */ p.footer { font-weight:normal; color:white; font-size:calc(12px + 0.2vw); } .carousel-caption { font-size:calc(10px + 1vw); } /* - - - - - - - - - - - - - - - - - - - - - - - - */ /* Fixed bottom navigation bar previous-home-next */ /* - - - - - - - - - - - - - - - - - - - - - - - - */ .endnav { position: fixed; bottom: 0; width: 100%; margin: 0; padding-top: 10px; padding-right: 0; padding-bottom: 20px; /* Extra bottom margin for scroll bar */ padding-left: 0; overflow: hidden; background-color: #333; } .endnav a { float: left; color: #f2f2f2; text-align: center; padding-top: 1px; padding-right: 4px; padding-bottom: 1px; padding-left: 4px; text-decoration: none; top: 4px; } .endnav a:hover { background-color: #ddd; color: black; } .endnav-centered a { float: none; position: absolute; top: 10px; left: 50%; transform: translate(-50%,0px);/* x,y Moves box centre to screen centre */ z-index:2000; } .endnav-left a { float: none; position: absolute; top: 10px; left:40px; z-index:2000; } .endnav-right { float: right; margin-right:40px; } /* - - - - - - - - - - - - - - - - - - - - - - - - */ /* END Fixed bottom navigation bar END */ /* - - - - - - - - - - - - - - - - - - - - - - - - */ /* - - - - - - - - - - - - - - - - - - - - - - - - */ /* Fixed top navigation bar */ /* - - - - - - - - - - - - - - - - - - - - - - - - */ div.fixed_header { position: fixed; top:0; left: 0; width: 100%; z-index: 2000; } div.top-spacer { position: relative; top:400px; height:100px; } /* - - - - - - - - - - - - - - - - - - - - - - - - */ /* END fixed top navigation bar */ /* - - - - - - - - - - - - - - - - - - - - - - - - */ /* - - - - - - - - - - - - - - - - - - - - - - - - */ /* Block centre for map image */ /* - - - - - - - - - - - - - - - - - - - - - - - - */ .mapcentre { display: block; margin-left: auto; margin-right: auto; width: 90%; } /* - - - - - - - - - - - - - - - - - - - - - - - - */ /* END Block centre for map image */ /* - - - - - - - - - - - - - - - - - - - - - - - - */ /* ************************************** TESTING AREA ************************************ */ /* **************************************************************************** */ /* Box outlines for test purposes only */ /* **************************************************************************** */ /* .nav {margin:0px; padding:0px; border: 5px solid green;} div.navbar-header {margin:0px; padding:0px; border: 5px solid blue;} div.container-fluid {margin:0px; padding:0px; border: 5px solid red;} */ /* **************************************************************************** */ /* ***************************************************** */ /* https://www.w3schools.com/charsets */ /* ☯ ☯ ☯ YIN YANG */ /* ▶ ▶ ▶ BLACK RIGHT-POINTING TRIANGLE */ /* ► ► ► BLACK RIGHT-POINTING POINTER */ /* ◀ ◀ ◀ BLACK LEFT-POINTING TRIANGLE */ /* ► ► ► BLACK RIGHT-POINTING POINTER */ /* 🏠 🏠 🏠 HOME SYMBOL */ /* ***************************************************** */