/*** 2022-09-14 CSS for the website. ***/ /* https://www.w3schools.com/Css/css_rwd_grid.asp */ /* Enable dynamic stuffs, makes the element think its entire size includes padding. */ * { box-sizing: border-box; } /*** Page Sections ***/ /** Page with 12 columns **/ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} [class*="col-"] { float: left; padding: 15px; /* FORTESTING, otherwise disable */ /*border: 1px solid green;*/ } /* Ensure columns are respected as if they always exist. */ .row::after { content: ""; clear: both; display: table; } .row { border: 1px solid #131313; border-radius: 4px; } /** Make the menu items centered and layout horizontal. **/ /* .menu { padding-top: 10px; padding-bottom: 10px; } */ .menu-list { text-align: center; list-style-type: none; padding-left: 0px; } .menu_item { display: inline-block; padding: 0px; white-space: nowrap; } /** Be able to position anything easily. **/ .center { text-align: center; } .left { text-align: start; } .right { text-align: end; } /** Use ul to create an indent but without the bullet point. **/ .indent { list-style-type: none; } /** Extra objects which need borders **/ .border { border: 1px solid #131313; border-radius: 4px; } /** Explicitly remove border from some objects. **/ .no-border { border: 0px; } /** When a field needs more background color above and below. **/ .spacing { padding-top: 5px; padding-bottom: 5px; } /** Format tables and allow contents to be broken up. **/ table { /*width: 100%;*/ border-collapse: collapse; /*table-layout: fixed;*/ } table * th,td { word-wrap: break-word; overflow-wrap: break-word; /*max-width: 1px;*/ padding: 7px; } img { max-width: 500px; max-height: 500px; } /* FORTESTING, otherwise disable */ /* div { border: 1px solid red; } */ .code { max-width: 90%; margin-left: 5%; overflow: auto; overflow-x: scroll; overflow-y: hidden; padding: 10px; border: 2px solid #131313; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } body { max-width: 1300px; margin-left: auto; margin-right: auto; padding: 5px; }