Last active
August 26, 2021 12:28
-
-
Save mrfoxtalbot/4c1a5186fb9df3551d7b62814cd5216e to your computer and use it in GitHub Desktop.
Mobile friendly CSS styles for projectaon
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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