|
|
| (35 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <accesscontrol>
| |
| − | Autoconfirmed users
| |
| − | </accesscontrol>
| |
| − | {{#css:
| |
| − | div#toc.toc {
| |
| − | font-size: 12pt;
| |
| − | margin-top: -4.5pt;
| |
| − | background: rgba(255, 255, 255, 0.85);
| |
| − | border: 0.1px solid rgba(166, 44, 32, 0.5);
| |
| | | | |
| − | max-width: 200pt;
| |
| − | margin-right: 12pt;
| |
| − | }
| |
| − | #content {
| |
| − | margin-left: 252px !important;
| |
| − | }
| |
| − | #p-namespaces {
| |
| − | margin-left: 760px !important;
| |
| − | }
| |
| − | #mw-head {
| |
| − | margin-left: 76px !important;
| |
| − | }
| |
| − | #left-navigation {
| |
| − | margin-left: 76px !important;
| |
| − | }
| |
| − | #mw-head {
| |
| − | margin-left: 76px !important;
| |
| − | }
| |
| − | .tocUl {
| |
| − | overflow-y: scroll !important;
| |
| − | max-height: 500pt; <!-- max-height: 100vh; -->
| |
| − | }
| |
| − | .tochidden {
| |
| − | height: 4pt !important;
| |
| − | }
| |
| − | #mw-panel {
| |
| − | z-index: -1;
| |
| − | }
| |
| − | .title {
| |
| − | <!-- margin-top: 5px; -->
| |
| − | margin-left: -10px !important;
| |
| − | margin-right: -5px !important;
| |
| − | font-weight: normal;
| |
| − | font-family: 'Zapf Dingbats';
| |
| − | font-size: 40px;
| |
| − | font-family: 'Linux Libertine','Georgia','Times',serif;
| |
| − | background: red; <!-- #8c94ab -->
| |
| − | color: white;
| |
| − | height: 70pt; 4
| |
| − | line-height: 70pt;
| |
| − | text-aligh: center;
| |
| − | <!-- background: rgba(0, 0, 0, 0) linear-gradient(90deg, #007bff, rgb(0, 0, 0)) repeat scroll 0% 0% / auto padding-box border-box; margin-left:-10px; -->
| |
| − | <!-- linear-gradient(90deg, rgb(31, 112, 193), rgb(0, 0, 0)) --> <!-- #0074D9 -->
| |
| − | }
| |
| − | .container {
| |
| − | width: 150px;
| |
| − | height: 150px;
| |
| − | position: relative;
| |
| − | margin: 0px;
| |
| − | }
| |
| − | .box {
| |
| − | z-index: 10;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | }
| |
| − | .overlay {
| |
| − | z-index: 1;
| |
| − | margin-left: -5px;
| |
| − | margin-top: -23px;
| |
| − | }
| |
| − | .titulo1-text {
| |
| − | font-size: 18px !important;
| |
| − | }
| |
| − | .titulo1-text-marco {
| |
| − | padding-left: 10px !important;
| |
| − | }
| |
| − | .titulo1-marco-oneline {
| |
| − | padding-right: 0px !important;
| |
| − | padding-left: 0px !important;
| |
| − | margin-right: -5px !important;
| |
| − | margin-left: 0px !important;
| |
| − | min-height: 35pt !important;
| |
| − | margin-top:-32pt !important;
| |
| − | }
| |
| − | .titulo1-marco-twolines {
| |
| − | padding-right: 0px !important;
| |
| − | padding-left: 0px !important;
| |
| − | margin-right: -5px !important;
| |
| − | margin-left: 0px !important;
| |
| − | min-height: 50pt !important;
| |
| − | margin-top:-47pt !important;
| |
| − | }
| |
| − | .marco1-ext {
| |
| − | width: 100% !important;
| |
| − | padding: 0px 0px 0px 0px !important;
| |
| − | background: #e3e3e8 !important;
| |
| − | }
| |
| − | .marco1-int {
| |
| − | background: #e3e3e8 !important;
| |
| − | }
| |
| − | .marco1-ext .mw-editsection {
| |
| − | display: none !important;
| |
| − | }
| |
| − | .divline1 {
| |
| − | padding: 0;
| |
| − | border: 0;
| |
| − | display: block;
| |
| − | margin-top:-10px;
| |
| − | margin-right: 0px !important;
| |
| − | margin-left: 2px !important;
| |
| − | background-color: white;
| |
| − | height:1.2pt
| |
| − | }
| |
| − |
| |
| − | .toggleNode { <!-- visibility: hidden --> }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | body
| |
| − | {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − |
| |
| − | /* make it look decent enough */
| |
| − | color: #cdcdcd;
| |
| − | font-family: "Avenir Next", "Avenir", sans-serif;
| |
| − | }
| |
| − |
| |
| − | #menuToggle
| |
| − | {
| |
| − | display: block;
| |
| − | position: relative;
| |
| − | top: 50px;
| |
| − | left: 50px;
| |
| − |
| |
| − | z-index: 1;
| |
| − |
| |
| − | -webkit-user-select: none;
| |
| − | user-select: none;
| |
| − | }
| |
| − |
| |
| − | #menuToggle a
| |
| − | {
| |
| − | text-decoration: none;
| |
| − | color: #232323;
| |
| − |
| |
| − | transition: color 0.3s ease;
| |
| − | }
| |
| − |
| |
| − | #menuToggle a:hover
| |
| − | {
| |
| − | color: tomato;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #menuToggle input
| |
| − | {
| |
| − | display: block;
| |
| − | width: 40px;
| |
| − | height: 32px;
| |
| − | position: absolute;
| |
| − | top: -7px;
| |
| − | left: -5px;
| |
| − |
| |
| − | cursor: pointer;
| |
| − |
| |
| − | opacity: 0; /* hide this */
| |
| − | z-index: 2; /* and place it over the hamburger */
| |
| − |
| |
| − | -webkit-touch-callout: none;
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | * Just a quick hamburger
| |
| − | */
| |
| − | #menuToggle span
| |
| − | {
| |
| − | display: block;
| |
| − | width: 33px;
| |
| − | height: 4px;
| |
| − | margin-bottom: 5px;
| |
| − | position: relative;
| |
| − |
| |
| − | background: #cdcdcd;
| |
| − | border-radius: 3px;
| |
| − |
| |
| − | z-index: 1;
| |
| − |
| |
| − | transform-origin: 4px 0px;
| |
| − |
| |
| − | transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
| |
| − | background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
| |
| − | opacity 0.55s ease;
| |
| − | }
| |
| − |
| |
| − | #menuToggle span:first-child
| |
| − | {
| |
| − | transform-origin: 0% 0%;
| |
| − | }
| |
| − |
| |
| − | #menuToggle span:nth-last-child(2)
| |
| − | {
| |
| − | transform-origin: 0% 100%;
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | * Transform all the slices of hamburger
| |
| − | * into a crossmark.
| |
| − | */
| |
| − | #menuToggle input:checked ~ span
| |
| − | {
| |
| − | opacity: 1;
| |
| − | transform: rotate(45deg) translate(-2px, -1px);
| |
| − | background: #232323;
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | * But let's hide the middle one.
| |
| − | */
| |
| − | #menuToggle input:checked ~ span:nth-last-child(3)
| |
| − | {
| |
| − | opacity: 0;
| |
| − | transform: rotate(0deg) scale(0.2, 0.2);
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | * Ohyeah and the last one should go the other direction
| |
| − | */
| |
| − | #menuToggle input:checked ~ span:nth-last-child(2)
| |
| − | {
| |
| − | transform: rotate(-45deg) translate(0, -1px);
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | * Make this absolute positioned
| |
| − | * at the top left of the screen
| |
| − | */
| |
| − | #menu
| |
| − | {
| |
| − | position: absolute;
| |
| − | width: 300px;
| |
| − | margin: -100px 0 0 -50px;
| |
| − | padding: 50px;
| |
| − | padding-top: 125px;
| |
| − |
| |
| − | background: #ededed;
| |
| − | list-style-type: none;
| |
| − | -webkit-font-smoothing: antialiased;
| |
| − | /* to stop flickering of text in safari */
| |
| − |
| |
| − | transform-origin: 0% 0%;
| |
| − | transform: translate(-100%, 0);
| |
| − |
| |
| − | transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
| |
| − | }
| |
| − |
| |
| − | #menu li
| |
| − | {
| |
| − | padding: 10px 0;
| |
| − | font-size: 22px;
| |
| − | }
| |
| − |
| |
| − | /*
| |
| − | * And let's slide it in from the left
| |
| − | */
| |
| − | #menuToggle input:checked ~ ul
| |
| − | {
| |
| − | transform: none;
| |
| − | }
| |
| − |
| |
| − | }}
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | <html>
| |
| − | <!-- Made by Erik Terwan -->
| |
| − | <!-- 24th of November 2015 -->
| |
| − | <!-- MIT License -->
| |
| − | <nav role="navigation">
| |
| − | <div id="menuToggle">
| |
| − | <!--
| |
| − | A fake / hidden checkbox is used as click reciever,
| |
| − | so you can use the :checked selector on it.
| |
| − | -->
| |
| − | <input type="checkbox" />
| |
| − |
| |
| − | <!--
| |
| − | Some spans to act as a hamburger.
| |
| − |
| |
| − | They are acting like a real hamburger,
| |
| − | not that McDonalds stuff.
| |
| − | -->
| |
| − | <span></span>
| |
| − | <span></span>
| |
| − | <span></span>
| |
| − |
| |
| − | <!--
| |
| − | Too bad the menu has to be inside of the button
| |
| − | but hey, it's pure CSS magic.
| |
| − | -->
| |
| − | <ul id="menu">
| |
| − | <a href="#"><li>Home</li></a>
| |
| − | <a href="#"><li>About</li></a>
| |
| − | <a href="#"><li>Info</li></a>
| |
| − | <a href="#"><li>Contact</li></a>
| |
| − | <a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </nav>
| |
| − | </html>
| |
