Skip to content

Instantly share code, notes, and snippets.

@mrfoxtalbot
Last active August 26, 2021 12:28
Show Gist options
  • Save mrfoxtalbot/4c1a5186fb9df3551d7b62814cd5216e to your computer and use it in GitHub Desktop.
Save mrfoxtalbot/4c1a5186fb9df3551d7b62814cd5216e to your computer and use it in GitHub Desktop.
Mobile friendly CSS styles for projectaon
// Here is a video explaining the code https://d.pr/v/WQ6w7R
// We need to incluide this <meta> tag inside the <head> HTML tag:
// <meta name="viewport" content="width=device-width, initial-scale=1.0">
// Below are the actual CSS styles that need to be added to the "more.css" stylesheet
/* Prevent horizontal overflow */
html {
max-width: 100%;
overflow-x: hidden
}
/* Reposition main content and constrain to viewport */
#body {
width: 96%;
padding: 0 2%;
position: relative;
left: 0;
top: 0;
margin-top: 120px;
font-size: 15px;
font-family: verdana, sans-serif;
max-width:900px;
}
/* Avoid "text gutters" by aligning text to the left */
#body p {
text-align: left;
}
/* Responsive images */
.illustration table {
width: 100%;
max-width: 1200px;
text-align: center;
}
/* We need !importants to override some inline styles */
.maintext .illustration img {
max-width: 500px !important;
width: 100% !important;
height: auto !important;
border-radius: 20px;
}
/* Hide image spacers insider tables */
.maintext img[src="brdrtpr.png"],
.maintext img[src="brdrtp.png"],
.maintext img[src="brdrr.png"],
.maintext img[src="brdrl.png"],
.maintext img[src="brdrbt.png"],
.maintext img[src="brdrtpl.png"],
.maintext img[src="brdrbtl.png"],
.maintext img[src="brdrbtr.png"] {
display: none;
}
/* Keep Map image wide */
.illustration img[src="map.png"] {
max-width: 1000px !important;
}
/* Scale down navigation to keep it in just one line */
.navigation {
width: 100%;
margin: 40px auto;
display: block;
}
#body .navigation a,
#body .navigation>img {
display: inline-block;
margin: 0 1%;
width: 31%;
text-align: center
}
.navigation>a>img {
max-width: 100%;
height: auto;
}
#body .navigation>img {
max-width: 300px
}
/* Style Copyright */
#body .copyright {
font-size: 10px;
text-align: center;
color: #aaa
}
/* Style "choices" & "combat" */
.choice,
.combat {
width: auto;
background-color: white;
padding: 1em;
margin: 0 0 1em 0;
}
/* Reposition page number (hot-fix) */
div.numbered h3,
div.glossary h3 {
position: absolute;
top: -98px;
left: 80%;
font-size: 14px;
border: 1px solid #000;
color: #000;
border-radius: 100px;
padding: 20px 10px 10px 10px;
background-color: #FFFFE2
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment