|
|
Line 1: |
Line 1: |
− | {{#tag:html|
| + | <section begin=Resources0 /> |
− | <style> | + | <div class="marco1-ext" style="padding: 0px 20px 20px 20px; margin-top:7px; margin-right: 0px; margin-left: 0px; background-color: #ededf2; width:67%; min-height:50px"> |
− | /* MediaWiki page configurations */
| + | <div class="marco1-int" style="padding: 0px; margin-right: 0px; margin-left: 0px; background-color: #ededf2;"> |
− | #content { margin: -1px 0px 0px 180px; }
| + | <div class="titulo1-text-marco"> |
− | #left-navigation { margin-left:180px }
| + | <html><a style="pointer-events: none;" href="Important resources"> <span class="titulo1-text titulo1-color" style="font: 700 21px / 27.3px 'Linux Libertine', Georgia, Times, serif; color:rgb(60, 60, 70); font-weight: bold">Important resources</span> </a></html> |
− | #footer { margin: 0 0 0 180px } | + | </div> |
− | #bodyContent { z-index: 10 }
| + | <div class="titulo1-marco-oneline titulo1-marco-color" style="padding-right: 0px; margin-right: -20px; margin-left: -20px; background-color: #E6E6FA; min-height:40pt; margin-top:-37pt"> </div> |
− | .mw-wiki-logo { margin: 20px 0px 0px 0.5px }
| + | <section begin=Resources /> |
− | /* TOC */
| + | <div style="margin-top: -32px;" class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-"> |
− | div#toc.toc { | + | <br /> |
− | font-size: 12pt;
| + | <ul> <li style="margin-top:15px" class="entre-li-n4"> <div style="text-align:left"> <html> <a href="https://github.com/adeloaleman"> <p class="desplaza desplaza-2"> <span style="">https://github.com/adeloaleman</span> </p> </a> </html> </div> </li> </ul> |
− | margin-top: -4.5pt;
| |
− | background: rgba(255, 255, 255, 1);
| |
− | margin-right: 12pt;
| |
− | }
| |
− | .tocUl {
| |
− | overflow-y: scroll !important;
| |
− | overflow-x: scroll !important;
| |
− | max-height: calc(100vh - 150px);
| |
− | width: 350px !important;
| |
− | padding-bottom: 30px !important;
| |
− | white-space: nowrap !important;
| |
− | }
| |
− | .tocUl a {
| |
− | padding-right: 25px !important;
| |
− | }
| |
− | .tochidden { | |
− | height: 4pt !important;
| |
− | }
| |
| | | |
| + | <ul> <li class="entre-li-n4"> <div style="text-align:left"> <html> <a href="https://app.grammarly.com"> <p class="desplaza desplaza-2"> <span style="">https://app.grammarly.com</span> </p> </a> </html> </div> </li> </ul> |
| | | |
− | /* This block manages the CSS changes between "Mis paginas" page and the "Sidebar" page CSS */
| + | <ul> <li class="entre-li-n4"> <div style="text-align:left"> <html> <a href="https://www.office.com/?auth=2"> <p class="desplaza desplaza-2"> <span style="">https://www.office.com</span> </p> </a> </html> </div> </li> </ul> |
− | #menuToggle ul {
| |
− | margin-top: 20px !important;
| |
− | margin-bottom: 35px !important;
| |
− | }
| |
− | #menuToggle li {
| |
− | font: 14px / 22.4px sans-serif;
| |
− | margin-top: 0px ;
| |
− | margin-bottom: 15px ;
| |
− | }
| |
− | #menuToggle .entre-li {
| |
− | margin-bottom: -15px ;
| |
− | }
| |
− | #menuToggle .entre-li-n4 {
| |
− | margin-bottom: -30px ;
| |
− | }
| |
− | #menuToggle .entre-li-n4-first {
| |
− | margin-top: -25px ;
| |
− | }
| |
− | #menuToggle ul .first-li {
| |
− | margin-top: -15px !important;
| |
− | }
| |
− | #menuToggle a {
| |
− | color: #0645AD !important;
| |
− | overflow-wrap: break-word;
| |
− | }
| |
− | #menuToggle a:hover {
| |
− | text-decoration: underline !important;
| |
− | }
| |
− | #menuToggle a{
| |
− | font: 14px / 22.4px sans-serif;
| |
− | }
| |
− | #menuToggle li{
| |
− | font: 14px / 22.4px sans-serif;
| |
− | }
| |
− | #menuToggle span {
| |
− | font: 14px / 22.4px sans-serif;
| |
− | }
| |
− | #menuToggle .base-li-1 {
| |
− | margin-bottom: -5px !important;
| |
− | }
| |
− | #menuToggle .desplaza {
| |
− | margin-top: -12px;
| |
− | padding-right: 30px !important;
| |
− | }
| |
− | #menuToggle .desplaza-2 {
| |
− | margin-top: -10px !important;
| |
− | }
| |
− | #menuToggle #space-end-pure {
| |
− | margin-bottom: 80px;
| |
− | }
| |
− | #menuToggle #space-end-social {
| |
− | margin-bottom: 30px;
| |
− | }
| |
− | #menuToggle #space-end-music {
| |
− | margin-bottom: 40px;
| |
− | }
| |
− | #menuToggle ul:hover {
| |
− | /* color:#2864c4; */
| |
− | }
| |
− | #menuToggle .titulo1-text {
| |
− | font-size: 18px !important;
| |
− | }
| |
− | #menuToggle .titulo2-text {
| |
− | font: 700 14px / 22.4px sans-serif !important;
| |
− | }
| |
− | #menuToggle .titulo1-text-marco {
| |
− | padding-left: 10px !important;
| |
− | padding-right: 40px !important;
| |
− | }
| |
− | #menuToggle .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: -30pt !important;
| |
− | }
| |
− | #menuToggle .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;
| |
− | }
| |
− | #menuToggle .titulo1MarcoTwolines {
| |
− | padding-right: 0px;
| |
− | }
| |
− | #menuToggle .titulo1-marco-color {
| |
− | background: #9595ab !important;
| |
− | }
| |
− | #menuToggle .titulo1-color {
| |
− | color: white !important;
| |
− | }
| |
− | #menuToggle .marco1-ext {
| |
− | width: 100% !important;
| |
− | padding: 0px 0px 0px 0px !important;
| |
− | background: #e3e3e8 !important;
| |
− | }
| |
− | #menuToggle .marco1-int {
| |
− | background: #e3e3e8 !important;
| |
− | }
| |
− | #menuToggle .marco1-ext .mw-editsection {
| |
− | display: none !important;
| |
− | }
| |
− | #menuToggle .divline1 {
| |
− | padding: 0;
| |
− | border: 0;
| |
− | display: block;
| |
− | margin-top: -7px !important;
| |
− | margin-bottom: 30px !important;
| |
− | margin-right: 0px !important;
| |
− | margin-left: 2px !important;
| |
− | background-color: white;
| |
− | height:1.2pt
| |
− | }
| |
− | #menuToggle .mw-collapsible-toggle {
| |
− | outline: none !important;
| |
− | }
| |
− | #menuToggle .mw-collapsible-text:hover {
| |
− | color: red !important;
| |
− | }
| |
− | #menuToggle .mw-collapsible-toggle:hover {
| |
− | color: red !important;
| |
− | }
| |
− | #menuToggle .button-top {
| |
− | color: #999191; font-size:20px
| |
− | }
| |
− | #menuToggle .button-top:hover {
| |
− | color: #5c4444;
| |
− | }
| |
| | | |
| + | <ul> <li class="entre-li-n4"> <div style="text-align:left"> <html> <p class="desplaza desplaza-2"> <span style="font-weight:bold"> My Wikipedia Sandbox </span> <a href="https://en.wikipedia.org/wiki/User:Adeloaleman/sandbox"> <span style="font-weight:normal;">https://en.wikipedia.org/wiki/User:Adeloaleman/sandbox</span> </a> </p> </html> </div> </li> </ul> |
| | | |
− | /* Sidebar (Pure CSS) */
| + | <ul> <li class="entre-li-n4"> <div style="text-align:left"> <html> <p class="desplaza desplaza-2"> <span style="font-weight:bold"> Jupyter Notebook </span> <a href="https://colab.research.google.com"> <span style="font-weight:normal;">https://colab.research.google.com</span> </a> </p> </html> </div> </li> </ul> |
− | #menuToggle {
| |
− | display: block;
| |
− | position: relative;
| |
− | top: -145px;
| |
− | margin-left: -205px;
| |
− | padding-left: 10px;
| |
− | -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: 12; /* and place it over the hamburger */
| |
− | -webkit-touch-callout: none;
| |
− | }
| |
− | /* Just a quick hamburger */ | |
− | #menuToggle .hamb {
| |
− | display: block;
| |
− | width: 26px;
| |
− | height: 4.1px;
| |
− | margin-bottom: 2.9px;
| |
− | position: relative;
| |
− | background: #837e7e;
| |
− | border-radius: 3px;
| |
− | z-index: 11;
| |
− | 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 #inputButton:hover + #hamb1 { | |
− | background: #5c4444 !important;
| |
− | } */
| |
− | #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 ~ .hamb {
| |
− | opacity: 1;
| |
− | transform: rotate(45deg) translate(-2px, -1px);
| |
− | background: #837e7e;
| |
− | }
| |
− | /* 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 */
| + | <ul> <li class="entre-li-n4"> <div style="text-align:left"> <html> <p class="desplaza desplaza-2"> <span style="font-weight:bold"> Online IDE </span> <a href="https://repl.it"> <span style="font-weight:normal;">https://repl.it</span> </a> </p> </html> </div> </li> </ul> |
− | #menu {
| |
− | position: absolute;
| |
− | width: 300px;
| |
− | margin: -55px 0 0 -10px;
| |
− | padding: 50px 0px 30px 0px;
| |
− | 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); -->
| |
− | display: none;
| |
− | transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
| |
− | }
| |
− | #menu li {
| |
− | padding: 10px 0 0 0;
| |
− | font-size: 22px;
| |
− | }
| |
− | /* And let's slide it in from the left */
| |
− | #menuToggle input:checked ~ #menu {
| |
− | <!-- transform: none; -->
| |
− | display: block;
| |
− | }
| |
− | | |
− | | |
− | /* Tab Menu */
| |
− | .button {
| |
− | font-size: 22px;
| |
− | color: inherit;
| |
− | background-color :inherit;
| |
− | padding: 6px 0px 6px 0px;
| |
− | border: none;
| |
− | outline: 0;
| |
− | cursor: pointer;
| |
− | }
| |
− | .button:hover { }
| |
− | .bottom-selected {
| |
− | color:rgb(60, 60, 70);
| |
− | background-color: #d1d1de !important; /* #f44336 rgb(60, 60, 70) #3c4043 */
| |
− | }
| |
− | .fa-atom { font-size: 21px; }
| |
− | .fa-info { font-size: 18px; }
| |
− | .fa-tools { font-size: 17px; }
| |
− | .fa-atom:hover { color:black; }
| |
− | .fa-info:hover { color:black; }
| |
− | .fa-tools:hover { color:black; }
| |
− | .fa-ellipsis-v:hover { color:black; }
| |
− | .area {
| |
− | color: black;
| |
− | padding: 5px 0px 5000px 3px;
| |
− | border: 0px solid #ccc !important;
| |
− | }
| |
− | #container-button-tap {
| |
− | width:100%;
| |
− | color:rgb(97, 97, 114);
| |
− | background-color: white;
| |
− | }
| |
− | .izquierda{
| |
− | float:left;
| |
− | width:25%;
| |
− | text-align: center;
| |
− | }
| |
− | .derecha{
| |
− | float:right;
| |
− | width:25%;
| |
− | text-align: center;
| |
− | }
| |
− | .centrar{
| |
− | margin:0 auto;
| |
− | width:25%;
| |
− | text-align: center;
| |
− | }
| |
− | | |
− | </style>
| |
− | | |
− | | |
− | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
| |
− | <script src="https://kit.fontawesome.com/423f4585a2.js" crossorigin="anonymous"></script>
| |
− | | |
− | | |
− | <nav id="MySidebar" role="navigation" style="position: fixed; z-index: 1"> <!-- class="oculto" -->
| |
− | <div id="menuToggle">
| |
− | <!--
| |
− | A fake / hidden checkbox is used as click reciever,
| |
− | so you can use the :checked selector on it.
| |
− | -->
| |
− | <input id="inputButton" type="checkbox" onclick="myFunction()"/>
| |
− |
| |
− | <!--
| |
− | Some spans to act as a hamburger.
| |
− | -->
| |
− | <!-- <div> -->
| |
− | <span id="hamb1" class="hamb"></span>
| |
− | <span id="hamb2" class="hamb"></span>
| |
− | <span id="hamb3" class="hamb"></span>
| |
− | <!-- </div> -->
| |
− |
| |
− | <!-- <i style="font-size: 30px" class="fa fa-bars fa-w-14 fa-10x"></i> -->
| |
− |
| |
− | <!--
| |
− | Too bad the menu has to be inside of the button
| |
− | but hey, it's pure CSS magic.
| |
− | -->
| |
− | <div id="menu" style="border-right: 0px solid rgb(177, 177, 180);">
| |
− |
| |
− | <!--Tap Menu -->
| |
− | <div style="padding: 10px 0px 0px 0px; border-right: 2px solid #ededed">
| |
− | | |
− | <div style="text-align:right; margin-top:-31px; margin-bottom: 15px; padding-right: 5px">
| |
− | <button onclick="expandSidebar()" style="cursor:pointer; outline: none; border-width:0px"> <i id="expandSidebar-icon" class="fa fa-arrow-right button-top" aria-hidden="true"></i> </button>
| |
− | </div>
| |
− | | |
− | <div id="container-button-tap" style="margin-top:-9px;">
| |
− | <button id="button-pe" class="button izquierda tablink bottom-selected" onclick="openCity(event,'PE')" > <i class="fas fa-atom"> </i> </button>
| |
− | <button id="button-menu" class="button izquierda tablink" onclick="openCity(event,'Menu')" > <i class="fas fa-ellipsis-v"></i> </button>
| |
− | <button id="button-tools" class="button izquierda tablink" onclick="openCity(event,'Tools')" > <i class="fas fa-tools"></i> </button>
| |
− | <button id="button-others" class="button izquierda tablink" onclick="openCity(event,'Others')"> <i class="fas fa-info"> </i> </button>
| |
− | <!-- <button id="button-others" class="button derecha tablink" onclick="openCity(event,'Others')"> <i class="fas fa-info"> </i> </button> -->
| |
− | <!-- <button id="button-menu" class="button centrar tablink" onclick="openCity(event,'Menu')" > <i class="fas fa-tools"></i> </button> -->
| |
− | </div>
| |
− |
| |
− | <div id="PE" class="area city">
| |
− | <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:8px 5px 0px 0px;">
| |
− | <div id="sectionBase" style="margin-bottom: 30px; margin-top: 10px" > {{#lst:Mis páginas|base}}</div>
| |
− | <div id="sectionPure" style="margin-bottom: 73px; margin-top:-5px" > {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
| |
− | <div id="sectionSocial" style="margin-bottom: 55px; margin-top: 2px" > {{#lst:Mis páginas|social_sciences0}}</div>
| |
− | <div id="sectionMusic" style="margin-bottom: 30px; margin-top: 2px" > {{#lst:Mis páginas|musica0}}</div>
| |
− | <div id="sectionCarrera" style="margin-bottom: 800px; margin-top: 2px" > {{#lst:Mis páginas|Carrera0}}</div>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div id="Menu" class="area city" style="display:none">
| |
− | <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:8px 5px 0px 0px;">
| |
− | <div id="sectionBase" style="margin-bottom: 30px; margin-top: 10px" > {{#lst:Mis páginas|Resources0}}</div>
| |
− | </div>
| |
− | </div>
| |
− | | |
− | <div id="Tools" class="area city" style="display:none">
| |
− | <p>Under construction...</p>
| |
− | </div>
| |
− |
| |
− | <div id="Others" class="area city" style="display:none">
| |
− | <p>Under construction...</p>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <!-- <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> -->
| |
− |
| |
− | </div>
| |
− | </div>
| |
− | </nav>
| |
− | | |
− | | |
− | <script>
| |
− | | |
− | function openCity(evt, cityName) {
| |
− | var i, x, tablinks;
| |
− | x = document.getElementsByClassName("city");
| |
− | for (i = 0; i < x.length; i++) {
| |
− | x[i].style.display = "none";
| |
− | }
| |
− | tablinks = document.getElementsByClassName("tablink");
| |
− | for (i = 0; i < x.length; i++) {
| |
− | tablinks[i].className = tablinks[i].className.replace(" bottom-selected", "");
| |
− | }
| |
− | document.getElementById(cityName).style.display = "block";
| |
− | evt.currentTarget.className += " bottom-selected";
| |
− | | |
− | if (cityName == "PE") {
| |
− | $(".fa-atom").css('font-size', '21px')
| |
− | $(".fa-ellipsis-v").css('font-size','18px')
| |
− | $(".fa-info").css('font-size', '18px')
| |
− | $(".fa-tools").css('font-size', '17px')
| |
− | }else if (cityName == "Menu") {
| |
− | $(".fa-atom").css('font-size', '19px')
| |
− | $(".fa-ellipsis-v").css('font-size','20px')
| |
− | $(".fa-info").css('font-size', '20px')
| |
− | $(".fa-tools").css('font-size', '17px')
| |
− | }else if (cityName == "Others") {
| |
− | $(".fa-atom").css('font-size', '19px')
| |
− | $(".fa-ellipsis-v").css('font-size','18px')
| |
− | $(".fa-info").css('font-size', '20px')
| |
− | $(".fa-tools").css('font-size', '17px')
| |
− | }else {
| |
− | $(".fa-atom").css('font-size', '19px')
| |
− | $(".fa-ellipsis-v").css('font-size','18px')
| |
− | $(".fa-info").css('font-size', '18px')
| |
− | $(".fa-tools").css('font-size', '19px')
| |
− | }
| |
− | }
| |
− | | |
− |
| |
− | function myFunction() {
| |
− | var checkBox = document.getElementById("inputButton");
| |
− | if (checkBox.checked == true){
| |
− | $('#content').css('margin-left', '300px')
| |
− | $('#left-navigation').css({'cssText':'margin-left:300px'})
| |
− | $('#menuToggle').css('margin-left', '-325px')
| |
− | $('#footer').css('margin-left', '308px')
| |
− | } else {
| |
− | $('#content').css('margin-left', '180px')
| |
− | $('#left-navigation').css({'cssText':'margin-left:180px'})
| |
− | $('#menuToggle').css('margin-left', '-205px')
| |
− | $('#footer').css('margin-left', '180px')
| |
− | }
| |
− | }
| |
− | | |
− | function checkUser(){
| |
− | if ( document.getElementById('pt-userpage') != null ) {
| |
− | if ( document.getElementById('pt-userpage').getElementsByTagName('a')[0].innerText == "Adelo Vieira" ){
| |
− | $('.oculto').css('display','block')
| |
− | $('.link-hidden').css('pointer-events','auto')
| |
− | // $('body').css('background','red');
| |
− | }else{
| |
− | // $('body').css('background','blue');
| |
− | }
| |
− | }else{
| |
− | // $('body').css('background','blue');
| |
− | // $('#hideThis').show();
| |
− | }
| |
− | }
| |
− | | |
− | function removeCSS() {
| |
− | $('#menuToggle li').css({'margin-bottom':'','margin-top':''})
| |
− | $('#menuToggle p ').css({'margin-bottom':'','margin-top':''})
| |
− | // $('#mis-paginas li').css({'margin-bottom':'','margin-top':''})
| |
− | // $('#mis-paginas p ').css({'margin-bottom':'','margin-top':''})
| |
− | // $('#mis-paginas ul ').css({'margin-bottom':'','margin-top':''})
| |
− | }
| |
− | | |
− | function collapseSome() {
| |
− | $(".mw-collapsible").not('.keep-abierto').addClass("mw-collapsed");
| |
− | }
| |
− | | |
− | function expandSidebar() {
| |
− | var menuWidth = parseInt(window.getComputedStyle(document.getElementById("menu")).width)
| |
− | if (menuWidth < 400 ) {
| |
− | $("#menu").css('width','600px')
| |
− | $(".titulo1-marco-twolines").addClass("titulo1MarcoTwolines")
| |
− | $(".titulo1-marco-twolines").addClass("titulo1-marco-oneline")
| |
− | $(".titulo1MarcoTwolines").removeClass("titulo1-marco-twolines")
| |
− | $("#sectionPure").css({'margin-bottom': '30px', 'margin-top':'2px'})
| |
− | $("#sectionSocial").css({'margin-bottom':'30px', 'margin-top':'2px'})
| |
− | $("#space-end-pure").css({'margin-bottom':'85px'})
| |
− | $("#space-end-social").css({'margin-bottom':'60px'})
| |
− | $("#space-end-music").css({'margin-bottom':'45px'})
| |
− | $("#expandSidebar-icon").removeClass("fa-arrow-right")
| |
− | $("#expandSidebar-icon").addClass("fa-arrow-left")
| |
− | }else{
| |
− | $("#menu").css('width','300px')
| |
− | $(".titulo1MarcoTwolines").addClass("titulo1-marco-twolines")
| |
− | $(".titulo1-marco-twolines").removeClass("titulo1MarcoTwolines")
| |
− | $(".titulo1-marco-twolines").removeClass("titulo1-marco-oneline")
| |
− | $("#sectionPure").css({'margin-bottom': '73px', 'margin-top':'-5px'})
| |
− | $("#sectionSocial").css({'margin-bottom':'55px', 'margin-top':' 2px'})
| |
− | $("#space-end-pure").css({'margin-bottom':'80px'})
| |
− | $("#space-end-social").css({'margin-bottom':'30px'})
| |
− | $("#space-end-music").css({'margin-bottom':'40px'})
| |
− | $("#expandSidebar-icon").removeClass("fa-arrow-left")
| |
− | $("#expandSidebar-icon").addClass("fa-arrow-right")
| |
− | }
| |
− | }
| |
− | | |
− |
| |
− | $("#inputButton").hover(function(){
| |
− | $(".hamb").css("background", "#5c4444");
| |
− | }, function(){
| |
− | $(".hamb").css("background", "#837e7e");
| |
− | });
| |
− |
| |
− | $("#button-pe").hover(function(){
| |
− | $(".fa-atom").css('font-size', '21px')
| |
− | }, function(){
| |
− | if ( $(this).hasClass("bottom-selected") ) {
| |
− | $(".fa-atom").css('font-size', '21px')
| |
− | }else{
| |
− | $(".fa-atom").css('font-size', '19px')
| |
− | }
| |
− | });
| |
− | | |
− | $("#button-menu").hover(function(){
| |
− | $(".fa-ellipsis-v").css('font-size', '20px')
| |
− | }, function(){
| |
− | if ( $(this).hasClass("bottom-selected") ) {
| |
− | $(".fa-ellipsis-v").css('font-size', '20px')
| |
− | }else{
| |
− | $(".fa-ellipsis-v").css('font-size', '18px')
| |
− | }
| |
− | });
| |
− | | |
− | $("#button-others").hover(function(){
| |
− | $(".fa-info").css('font-size', '20px')
| |
− | }, function(){
| |
− | if ( $(this).hasClass("bottom-selected") ) {
| |
− | $(".fa-info").css('font-size', '20px')
| |
− | }else{
| |
− | $(".fa-info").css('font-size', '18px')
| |
− | }
| |
− | });
| |
− | | |
− | $("#button-tools").hover(function(){
| |
− | $(".fa-tools").css('font-size', '19px')
| |
− | }, function(){
| |
− | if ( $(this).hasClass("bottom-selected") ) {
| |
− | $(".fa-tools").css('font-size', '19px')
| |
− | }else{
| |
− | $(".fa-tools").css('font-size', '17px')
| |
− | }
| |
− | });
| |
− | | |
− | | |
− | // function collapseAll() {
| |
− | // $('.mw-collapsible').on( "click", "#aver", function() {
| |
− | // $(".mw-collapsible").addClass("mw-collapsed");
| |
− | // });
| |
− | // }
| |
− | | |
− | // function collapseAll() {
| |
− | // $(".mw-collapsible").addClass("mw-collapsed").reload();
| |
− | // $( ".mw-collapsible" ).load(window.location.href + " .mw-collapsible" );
| |
− | // }
| |
− | | |
− | // $(document).ready(function(){
| |
− | // $("button").click(function(){
| |
− | // $(".mw-collapsible").toggleClass("mw-collapsed");
| |
− | // });
| |
− | // });
| |
− | | |
− | // $(document).on('click', '.DoFirst', function() {
| |
− | // $('#totalItems, #enteredItems').keyup(function(){
| |
− | // collapseAll()
| |
− | // });
| |
− | // collapseAll()
| |
− | // });
| |
− | | |
− | // $(document).on( function() {
| |
− | // $('#totalItems, #enteredItems').keyup(function(){
| |
− | // collapseAll()
| |
− | // });
| |
− | // collapseAll()
| |
− | // });
| |
− | | |
− | // function moveSidebarToBody() {
| |
− | // $("#MySidebar").appendTo("#pt-userpage");
| |
− | // // document.body.appendChild(document.getElementById('MySidebar'))
| |
− | // }
| |
− | | |
− | // Shortkey: https://www.techiedelight.com/create-keyboard-shortcuts-with-javascript-jquery-hotkeys-mousetrap-library/
| |
− | // For some reason, in MediaWiki pages, the && operator is not being interpreted by the web browser
| |
− | // as such in «keydown» functions. The web browser is reading «&», instead of «&&» which generates a systax error.
| |
− | // To work around this problem I just broke the function using «2» if statements:
| |
− | | |
− | // $(document).keydown(function(event) {
| |
− | // if ( (event.ctrlKey) && (event.which === 88) ) {
| |
− | // alert('Alt + X pressed!')
| |
− | // e.preventDefault()
| |
− | // }
| |
− | // });
| |
− | | |
− | $(document).keydown(function(event) {
| |
− | if ( event.ctrlKey ) {
| |
− | if ( event.which === 66 ) { // Check key codes here: https://css-tricks.com/snippets/javascript/javascript-keycodes/
| |
− | // alert('Ctrl + B pressed!')
| |
− | var checkBox = document.getElementById("inputButton");
| |
− | if (checkBox.checked == true){
| |
− | checkBox.checked = false
| |
− | }else{
| |
− | checkBox.checked = true
| |
− | }
| |
− | myFunction()
| |
− | e.preventDefault()
| |
− | }
| |
− | | |
− | // if ( event.which === 89 ) {
| |
− | // $(document).on( function() {
| |
− | // $('#totalItems, #enteredItems').keyup(function(){
| |
− | // collapseAll()
| |
− | // });
| |
− | // collapseAll()
| |
− | // });
| |
− | // }
| |
− | | |
− | }
| |
− |
| |
− | if ( event.ctrlKey ) {
| |
− | if ( event.which === 89 ) {
| |
− | expandSidebar()
| |
− | }
| |
− | }
| |
− | | |
− | });
| |
− | | |
− | // Esta es otra forma de hacerlo
| |
− | // document.addEventListener("keydown", function(event) {
| |
− | // if (event.ctrlKey && event.code === "KeyB") {
| |
− | // alert('Alt + X pressed!');
| |
− | // event.preventDefault();
| |
− | // }
| |
− | // });
| |
− | | |
− |
| |
− | $(document).ready( function() {
| |
− | $('#totalItems, #enteredItems').keyup(function(){
| |
− | checkUser()
| |
− | collapseSome()
| |
− | removeCSS()
| |
− | // moveSidebarToBody()
| |
− | });
| |
− | checkUser()
| |
− | collapseSome()
| |
− | removeCSS()
| |
− | // moveSidebarToBody()
| |
− | });
| |
− | </script>
| |
− | }}
| |
| | | |
| + | <ul> <li class="entre-li-n4"> <div style="text-align:left"> <html> <p class="desplaza desplaza-2"> <span style="font-weight:bold"> Online Web IDE </span> <a href="https://jsfiddle.net"> <span style="font-weight:normal;">https://jsfiddle.net</span> </a> </p> </html> </div> </li> </ul> |
| | | |
| + | <ul> <li class="entre-li-n4"> <div style="text-align:left"> <html> <a href="http://perso.sinfronteras.ws/1-archivos/javascript_maps-ammap/continentes.html"> <p class="desplaza desplaza-2"> <span style="">Mapas</span> </p> </a> </html> </div> </li> </ul> |
| + | </div> |
| + | <section end=Resources /> |
| <br /> | | <br /> |
− | <div class="mw-collapsible mw-collapsed" style="width:340px; display: none !important">
| |
− | '''Previous version without <nowiki><html></nowiki> tag:'''
| |
− | <div class="mw-collapsible-content" style="width: 900pt !important">
| |
− | <syntaxhighlight lang="html">
| |
− | {{#css:
| |
− | #mw-panel { visibility: collapse !important; }
| |
− | #p-namespaces { visibility: collapse !important; }
| |
− | #content { max-width: 1200pt !important; margin-left: auto !important; margin-right: auto !important; }
| |
− | #mw-panel { visibility: collapse !important; }
| |
− | #mw-page-base { visibility: collapse !important; }
| |
− | #ca-head-base { display: none !important; }
| |
− | #ca-nstab-main { display: none !important; }
| |
− | #ca-talk { display: none !important; }
| |
− | #ca-view { display: none !important; }
| |
− | #ca-viewsource { display: none !important; }
| |
− | #ca-edit { display: none !important; }
| |
− | #ca-ve-edit { display: none !important; }
| |
− | #ca-history { display: none !important; }
| |
− | #ca-unwatch { display: none !important; }
| |
− | #ca-watch { display: none !important; }
| |
− | #p-cactions { display: none !important; }
| |
− | #pt-userpage { display: none !important; }
| |
− | #pt-mytalk { display: none !important; }
| |
− | #pt-preferences { display: none !important; }
| |
− | #pt-watchlist { display: none !important; }
| |
− | #pt-mycontris { display: none !important; }
| |
− | #pt-logout { display: none !important; }
| |
− | #pt-anonuserpage { display: none !important; }
| |
− | #pt-anontalk { display: none !important; }
| |
− | #pt-createaccount { display: none !important; }
| |
− | #pt-login { display: none !important; }
| |
− | #footer-info-copyright { display: none !important; }
| |
− | #footer-places-privacy { display: none !important; }
| |
− | #footer-places-about { display: none !important; }
| |
− | #footer-places-disclaimer { display: none !important; }
| |
− | #p-tb { display: none !important; }
| |
− | body {
| |
− | background: #ededf2;
| |
− | padding-left: 35pt !important;
| |
− | padding-right: 35pt !important;
| |
− | }
| |
− | #mw-head {
| |
− | z-index: -1;
| |
− | }
| |
− | .mediawiki {
| |
− | padding-left: 40pt !important;
| |
− | padding-right: 30pt !important;
| |
− | }
| |
− | #content {
| |
− | border-top: 1px solid rgba(184, 134, 11, 0.5) !important; <!-- This means the page contains hidden text #B8860B -->
| |
− | border: 1px solid rgba(184, 134, 11, 0.5); <!-- rgba(56, 139, 253, 0.4); -->
| |
− | }
| |
− | #right-navigation {
| |
− | visibility: collapse;
| |
− | }
| |
− | #p-search {
| |
− | visibility: visible;
| |
− | }
| |
− | #simpleSearch {
| |
− | <!-- border: 0.1px solid rgba(166, 44, 32, 0.5); -->
| |
− | }
| |
− | #footer {
| |
− | padding-left: 10pt;
| |
− | margin-left: auto !important;
| |
− | margin-right: auto !important;
| |
− | max-width: 1100pt;
| |
− | }
| |
− | #footer-info {
| |
− | margin-left: 0pt;
| |
− | }
| |
− | 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;
| |
− | }
| |
− | .toc ul {
| |
− | overflow-y: scroll !important;
| |
− | max-height: 500pt; <!-- max-height: 100vh; -->
| |
− | }
| |
− | .tocUl {
| |
− | overflow-y: scroll !important;
| |
− | max-height: 500pt; <!-- max-height: 100vh; -->
| |
− | }
| |
− | .tochidden {
| |
− | height: 4pt !important;
| |
− | }
| |
− | .rcorners {
| |
− | border-radius: 3px;
| |
− | padding: 2px;
| |
− | border: 1.5px solid #B8860B;
| |
− | }
| |
− | .under {
| |
− | margin-right: 10px;
| |
− | <!-- display:inline-block;
| |
− | border-bottom:1px solid #A62C20;
| |
− | padding-bottom:-5px !important; -->
| |
− | }
| |
− | .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;
| |
− | 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 -->
| |
− | }
| |
− | .cover {
| |
− | object-fit: cover;
| |
− | width: 100%;
| |
− | height: 250px;
| |
− | margin-bottom: 2000px;
| |
− | margin-top: -20px;
| |
− | }
| |
− | .icon {
| |
− | color: #2d2e27;
| |
− | }
| |
− | .texticon {
| |
− | color: #2d2e27; <!-- #f0f2e4 -->
| |
− | font-size: 20px !important;
| |
− | }
| |
− | .textlink {
| |
− | color: #0854a6 !important; <!-- #f0f2e4 #007bff -->
| |
− | font-size: 20px !important;
| |
− | }
| |
− | .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 --> }
| |
− | }}
| |
− | <!-- some colors I have tried and liked: #dcd8ed #3182f5 #D8BFD8 #E6E6FA rgb(79.998779%,79.998779%,100%)-->
| |
− | <div class="container" style="position: fixed; height: 0px; width: 250px; margin-left: -70px; margin-top: -132px; z-index: 200; background: red !important; background-color: red !important">
| |
− | <div class="box mw-customtoggle-myToggle1" style="cursor:pointer; color:blue; width:0px; z-index: 100">[+/-]</div>
| |
− | <div style="border-top:-50px;" class="box overlay mw-collapsible" id="mw-customcollapsible-myToggle1">
| |
− | <div style="border-top:-50px;" style="background: transparent; border: 0px solid blue; padding:0px" class="toccolours mw-collapsible-content">
| |
− | <!--
| |
− | <div style="border-top:-50px; background: #E6E6FA; min-height:50px; line-height: 50px; text-align: left; padding-left: 35px; font-size: 20px; font-family: 'Linux Libertine','Georgia','Times',serif;">
| |
− | '''''[[Carrera|<span style="color:#B8860B; font-weight: bold;">Carrera</span>]]'''''
| |
− | </div>
| |
− | -->
| |
− | <div style="height: 50px; width:100%; background: #e3e3e8">
| |
− | </div>
| |
− | <!-- <div style="overflow-y: scroll; height: 100vh !important; background: #f7f7f8; margin-top:0px; padding:0.1px 20px 20px 20px;"> -->
| |
− | <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:0px 5px 0px 0px;">
| |
− | <!-- {{#lst:Mis páginas|Carrera1}} -->
| |
− | <div style="margin-bottom: 42px; margin-top:2px"> {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
| |
− | <div style="margin-bottom: 50px"> {{#lst:Mis páginas|social_sciences0}}</div>
| |
− | <div style="margin-bottom: 30px"> {{#lst:Mis páginas|musica0}}</div>
| |
− | <div style="margin-bottom: 150px">{{#lst:Mis páginas|Carrera0}}</div>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− | </syntaxhighlight>
| |
| </div> | | </div> |
| </div> | | </div> |
| + | <section end=Resources0 /> |