mirror of
https://github.com/fadden/6502bench.git
synced 2024-10-31 19:04:44 +00:00
7fc323cdef
The idea is to remove everything but the "HOME" link from the topnav bar on very narrow devices, so that it doesn't look cramped. Right now we don't have a ton of stuff in topnav, and losing the tutorial link is annoying. If we want to restore this feature, we should also add a link to the tutorial in the body of the page.
320 lines
6.8 KiB
CSS
320 lines
6.8 KiB
CSS
/*
|
|
Responsive web design layout for 6502bench site.
|
|
|
|
All pages define elements with these IDs:
|
|
masthead (site logo / title)
|
|
topnav (top items, menu button) (consider "sticky" navbar?); contents
|
|
reduce to home/menu for XS
|
|
sidenav (large: float on left; medium/small: "collapsed sidepanel" or toggle)
|
|
main (80% for large, 100% for medium/small)
|
|
footer (with prev/next)
|
|
|
|
"main" section of tutorial pages:
|
|
2-column grid for large/medium, 1-column grid for small/XS
|
|
*/
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/*
|
|
* Overall look and feel.
|
|
*/
|
|
html {
|
|
/* always show scrollbar, so centered masthead doesn't shift */
|
|
overflow-y: scroll;
|
|
}
|
|
body {
|
|
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
background-color: #ffffff;
|
|
}
|
|
/*code {
|
|
font-size: 125%;
|
|
}*/
|
|
|
|
/*
|
|
* Display of keyboard shortcuts in the <kbd> element.
|
|
*/
|
|
kbd.key {
|
|
border-radius: 5px;
|
|
padding: 0px 2px 0;
|
|
border: 1px solid black;
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
/*
|
|
* ==========================================================================
|
|
* Extra small devices (phones) - DEFAULT:
|
|
* - Main content grid is single-column.
|
|
* - For top nav, show only the first link and menu icon.
|
|
*/
|
|
|
|
/*
|
|
* Masthead.
|
|
*/
|
|
#masthead {
|
|
/* background-color: #202020;
|
|
color: #ffffff; */
|
|
background-color: #e0e0e0;
|
|
color: #101010;
|
|
position: relative;
|
|
}
|
|
#masthead .masthead-title {
|
|
text-align: center;
|
|
font-size: 4em;
|
|
font-weight: bolder;
|
|
padding: 10px;
|
|
margin: 0px;
|
|
}
|
|
#masthead .masthead-titleZZZ {
|
|
/* place text */
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
bottom: 0;
|
|
background: rgb(0, 0, 0); /* fallback color */
|
|
background: rgba(0, 0, 0, 0.5); /* black, 50% opacity */
|
|
color: #f1f1f1;
|
|
width: 100%;
|
|
padding: 20px;
|
|
}
|
|
#masthead img {
|
|
/* fill space with image */
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/*
|
|
* Top navigation bar. Home on the left, primary links next to it,
|
|
* sidenav menu icon on the right for smaller screens.
|
|
*/
|
|
#topnav {
|
|
border-style: none;
|
|
border-width: thin;
|
|
padding: 10px;
|
|
background-color: #5f5f5f;
|
|
}
|
|
|
|
/*
|
|
* Show nothing but HOME initially. Expand the set as the screen widens.
|
|
* inline-block seems to help keep the text and icon consistent when
|
|
* expanding and collapsing (vs. inline).
|
|
*
|
|
* DISABLED -- we don't have all that many items, so it's just annoying.
|
|
*/
|
|
#topnav a {display:inline-block;}
|
|
/*#topnav a:not(:first-child) {display:none;}*/
|
|
#topnav a.icon {
|
|
float: right;
|
|
display: block;
|
|
}
|
|
.no-sidenav #topnav a.icon {
|
|
display: none; /* no sidenav, no icon */
|
|
}
|
|
#topnav button {
|
|
float: right;
|
|
display: block;
|
|
color: #ffffff;
|
|
background-color: #5f5f5f;
|
|
text-decoration: none;
|
|
padding: .2em 1em .2em 1em;
|
|
}
|
|
|
|
#topnav nav {
|
|
text-align: left;
|
|
padding: 0px;
|
|
}
|
|
#topnav nav a {
|
|
color: #ffffff;
|
|
background-color: #5f5f5f;
|
|
padding: .2em 1em .2em 1em;
|
|
text-decoration: none;
|
|
}
|
|
#topnav nav a:hover {
|
|
border-style: none;
|
|
color: #ffffff;
|
|
background-color: #000000;
|
|
}
|
|
|
|
#topnav nav a.active {
|
|
color: #8bc349;
|
|
}
|
|
|
|
/*
|
|
* Side navigation bar. Always visible on large screens, pops out when
|
|
* the hamburger icon is clicked on smaller screens.
|
|
*/
|
|
#sidenav {
|
|
display: none;
|
|
width: 180px;
|
|
margin: 0 8px 0 0;
|
|
padding: 5px;
|
|
}
|
|
#sidenav ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
#sidenav li {
|
|
padding: 0 0 1px 0; /* top right bottom left */
|
|
}
|
|
#sidenav ul ul li {
|
|
padding: 1px 0 0 10px; /* top right bottom left */
|
|
}
|
|
#sidenav a {
|
|
color: #ffffff;
|
|
display: block;
|
|
background-color: #5f5f5f;
|
|
padding: 5px 5px 5px 8px; /* top right bottom left */
|
|
text-decoration: none;
|
|
}
|
|
#sidenav a:hover {
|
|
color: #ffffff;
|
|
background-color: #000000;
|
|
}
|
|
#sidenav li.active > a {
|
|
color: #8bc349;
|
|
}
|
|
|
|
/*
|
|
* Main content area.
|
|
*/
|
|
#main {
|
|
margin: 8px;
|
|
display: block;
|
|
}
|
|
|
|
/*
|
|
* Grid layout for tutorial. Each grid has two items, forming a {text,image}
|
|
* pair, either of which may be absent. The document is a series of grids.
|
|
*
|
|
* We can have images come before or after the related text by adjusting
|
|
* the grid-row values.
|
|
*/
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-rows: auto auto;
|
|
/*margin-bottom: 4px;*/
|
|
}
|
|
|
|
.grid-item-text {
|
|
/* background-color: #e0e0ff; */
|
|
grid-row: 1;
|
|
}
|
|
.grid-item-text p {
|
|
/* items in grids don't collapse margins */
|
|
/* cf. https://stackoverflow.com/q/18963421/294248 */
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
.grid-item-image {
|
|
/* background-color: #ffe0e0; */
|
|
grid-row: 2;
|
|
justify-self: center; /* center narrow images, mostly for 1-col layout */
|
|
}
|
|
.grid-item-image img {
|
|
width: 100%;
|
|
height: auto;
|
|
/* don't expand image beyond original size */
|
|
max-height: max-content;
|
|
max-width: max-content;
|
|
border: 1px solid #e0e0e0;
|
|
margin-top: 5px; /* align closer to top of text */
|
|
}
|
|
|
|
/*
|
|
* Previous/next buttons.
|
|
*/
|
|
#prevnext {
|
|
/* clear: both; */
|
|
margin: 8px;
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
#prevnext a {
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
padding: 8px 16px;
|
|
border-radius: 5px;
|
|
background-color: #f1f1f1;
|
|
color: black;
|
|
}
|
|
#prevnext a:hover {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
/*
|
|
* Footer.
|
|
*/
|
|
#footer {
|
|
/* top margin gets eaten up by sidenav on short pages */
|
|
clear: both;
|
|
margin: 8px;
|
|
}
|
|
|
|
/*
|
|
* ==========================================================================
|
|
* Small devices (portrait tablets, large phones):
|
|
* - For top nav, want to show all links in the top nav bar, as well
|
|
* as the menu icon.
|
|
*/
|
|
@media only screen and (min-width: 600px) {
|
|
#topnav a:not(:first-child) {display:inline-block;}
|
|
}
|
|
|
|
/*
|
|
* ==========================================================================
|
|
* Medium devices (landscape tablets):
|
|
* - Switch to two-column layout, text on the left, image on the right.
|
|
*/
|
|
@media only screen and (min-width: 768px) {
|
|
.grid-container {
|
|
grid-template-columns: 50% 50%;
|
|
grid-template-rows: initial;
|
|
grid-column-gap: 8px;
|
|
}
|
|
.grid-item-text {
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
}
|
|
.grid-item-image {
|
|
grid-row: 1;
|
|
grid-column: 2;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* ==========================================================================
|
|
* Large devices (laptops/desktops):
|
|
* - Show sidenav on the side.
|
|
* - Don't show menu icon in the topnav bar.
|
|
*/
|
|
@media only screen and (min-width: 992px) {
|
|
#sidenav {
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
#main {
|
|
/* make room for sidenav */
|
|
margin-left: 188px;
|
|
}
|
|
.no-sidenav #main {
|
|
/* ...or not */
|
|
margin-left: 8px;
|
|
}
|
|
|
|
#topnav a.icon {
|
|
display: none;
|
|
}
|
|
}
|