464 lines
9.9 KiB
HTML
464 lines
9.9 KiB
HTML
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<head>
|
||
|
|
<html lang="en">
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>wikitable</title>
|
||
|
|
<link href="wikitable.css" rel="stylesheet" type="text/css" media="all">
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<!--wrapper-->
|
||
|
|
<div class="wrapper">
|
||
|
|
<!--header-->
|
||
|
|
<header></header>
|
||
|
|
<!--main-->
|
||
|
|
<main id="clear">
|
||
|
|
<p class="breadcrumb">...In <a href="">Templates</a>, <a href="">Code</a> </p>
|
||
|
|
<h1 id="flair">Wikitable Code</h1>
|
||
|
|
|
||
|
|
<!--table-->
|
||
|
|
<table class="infotable">
|
||
|
|
<tbody><tr>
|
||
|
|
<th colspan="2" id="centertext" style="text-align:center">Ixnael
|
||
|
|
</th></tr>
|
||
|
|
<tr>
|
||
|
|
<th colspan="2" style="text-align: center;"><p><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/15406341?1673375236" alt="clodsire render"></p>
|
||
|
|
</th></tr>
|
||
|
|
<tr>
|
||
|
|
<td colspan="2" style="text-align: center"><i>description. a transparent image is best, but any works</i>
|
||
|
|
</td></tr>
|
||
|
|
<tr>
|
||
|
|
<th colspan="2" id="centertext">Sociology
|
||
|
|
</th></tr>
|
||
|
|
<tr>
|
||
|
|
</td></tr>
|
||
|
|
<tr>
|
||
|
|
<th>Population
|
||
|
|
</th>
|
||
|
|
<td>3,012,000,000
|
||
|
|
</td></tr>
|
||
|
|
<tr>
|
||
|
|
<th>Orbital Station
|
||
|
|
</th>
|
||
|
|
<td>Coatl
|
||
|
|
</td></tr>
|
||
|
|
<tr>
|
||
|
|
<th colspan="2" id="centertext">Orbital Characteristics
|
||
|
|
</th></tr>
|
||
|
|
<tr>
|
||
|
|
<th>Day
|
||
|
|
</th>
|
||
|
|
<td>23 hrs.
|
||
|
|
</td></tr>
|
||
|
|
<tr>
|
||
|
|
<th>Axis Tilt
|
||
|
|
</th>
|
||
|
|
<td>1/360th
|
||
|
|
</td></tr>
|
||
|
|
<tr>
|
||
|
|
<th>Size
|
||
|
|
</th>
|
||
|
|
<td>4/5ths Terra
|
||
|
|
</td></tr>
|
||
|
|
<tr>
|
||
|
|
<th>Year
|
||
|
|
</th>
|
||
|
|
<td>343 days
|
||
|
|
</td></tr>
|
||
|
|
<tr>
|
||
|
|
<th>Atmosphere
|
||
|
|
</th>
|
||
|
|
<td>Habitable
|
||
|
|
</td></tr>
|
||
|
|
<tr>
|
||
|
|
<th>Gravity
|
||
|
|
</th>
|
||
|
|
<td>9.977 m/s²
|
||
|
|
</td></tr>
|
||
|
|
<tr>
|
||
|
|
<tr>
|
||
|
|
<th colspan="2" id="centertext"> Geography and Climate
|
||
|
|
</th></tr>
|
||
|
|
<tr>
|
||
|
|
<th>Dominant Climate
|
||
|
|
</th>
|
||
|
|
<td>
|
||
|
|
<!--spoilers, copy here to use elsewhere-->
|
||
|
|
<details>
|
||
|
|
<!--spoiler header-->
|
||
|
|
<summary>SPOILERS</summary>
|
||
|
|
<!--begin list of spoilers-->
|
||
|
|
<ul><li>tropical</li><li>subtropical</li></ul>
|
||
|
|
<!--end list of spoilers-->
|
||
|
|
</details>
|
||
|
|
<!--end copy-->
|
||
|
|
</td></tr>
|
||
|
|
<tr>
|
||
|
|
<th>Equatorial Temprature
|
||
|
|
</th>
|
||
|
|
<td>88F
|
||
|
|
</td></tr>
|
||
|
|
<tr>
|
||
|
|
<th>Polar Temprature
|
||
|
|
</th>
|
||
|
|
<td>75F
|
||
|
|
</td></tr>
|
||
|
|
<tr>
|
||
|
|
<th>Superscript
|
||
|
|
</th>
|
||
|
|
<!--the <sup> tag is for superscript-->
|
||
|
|
<td>Citation<sup>1</sup>
|
||
|
|
</td></tr>
|
||
|
|
<tr>
|
||
|
|
<th>Subscript
|
||
|
|
</th>
|
||
|
|
<!--the <sub> tag is for subscript-->
|
||
|
|
<td>Name<sub>1</sub>
|
||
|
|
</td></tr>
|
||
|
|
<tr>
|
||
|
|
</tbody></table>
|
||
|
|
<!--end table-->
|
||
|
|
|
||
|
|
<!--main content-->
|
||
|
|
<!--quotebox-->
|
||
|
|
<div class="quotebox">"mountain dew game fuel"</div>
|
||
|
|
<!--end quotebox-->
|
||
|
|
<p>This responsive base template is supposed to mimic sites like Fandom, without the bloat, for personal projects. It uses a floating table that clears everything after it so it doesn't overflow onto other elements. This code uses <i>only</i> HTML and CSS, even for its dropdowns.</p>
|
||
|
|
|
||
|
|
<p>Get the <a href="https://pastebin.com/j74qWwcP">HTML here</a> or rip it from this page. Get the CSS <a href="/templates/wikitable/wikitable.css">here.</a> Here's a <a href="https://cthonichronica.neocities.org/charon">working example</a> by me. Want something more complete and MediaWiki inspired? check out squid's <a href="https://squidknees.neocities.org/themes/pedia-preview/">Pedia</a>, which I used alongside wikitable in the example!</p>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!--table of contents-->
|
||
|
|
<div class="toc">
|
||
|
|
<details class="contents"><summary class="showcontent">Show Content</summary>
|
||
|
|
<ul>
|
||
|
|
<li>1. Wikitable Code</li>
|
||
|
|
<li>2. Other Features</li>
|
||
|
|
<ul><li>2.1 Part of a Series On</li>
|
||
|
|
<li>2.1 Flair</li>
|
||
|
|
</ul>
|
||
|
|
</details>
|
||
|
|
</div>
|
||
|
|
<!--end table of contents-->
|
||
|
|
<p><b>8/5/2024: If you use this free template I ask you to donate to a Palestinian fundraiser.</b> <a href="https://www.pcrf.net/">PCRF</a> - <a href="https://docs.google.com/spreadsheets/d/16XhzsCbsRV-cMAzRA8gTNxaYt_FAbf6nq3ZNGP4Q9U8/edit?gid=1452518893#gid=1452518893">List of Vetted Fundraisers by Project Watermelon</a> - <a href="https://chuffed.org/project/crips-for-esims-for-gaza">Crips for Esims for Gaza</a></p>
|
||
|
|
|
||
|
|
<p><b>2/8/24:</b> Added CSS root properties. Change the colors of the CSS in one convenient place.</p>
|
||
|
|
|
||
|
|
<p><b>9/22/23:</b> Wow! This got more popular than I expected! I've seen some question in the tags, so here's some general things about this template. First off, it's static. This means you won't be able to edit it as you would a fandom wiki, you'll have to go into the HTML. You also can't import a wiki directly, since this doesn't use mediawiki. If you want to have a community for an existing media with dynamic editing instead of doing most of it yourself (this template is mostly targeted towards personal projects,) I'd recommend getting an actual wikifarm such as Miraheze. It's free, and if you run a fandom, you can request a direct dump! </p>
|
||
|
|
|
||
|
|
<h3>Other Features</h3>
|
||
|
|
<p>Here are some fun extras I wanted to include:</p>
|
||
|
|
<h4>Part of a Series Of...</h4>
|
||
|
|
<!--series box-->
|
||
|
|
<details class="reveal">
|
||
|
|
<summary class="revealsummary">A Series Of People</summary>
|
||
|
|
<p><a href="">person</a> • this page • <a href="">person</a> • <a href="">person</a> </p>
|
||
|
|
<p>Those list boxes from wiki. To center it for use in the footer, use <code>margin: auto</code> in the CSS.</p>
|
||
|
|
</details>
|
||
|
|
<!--end series box-->
|
||
|
|
|
||
|
|
<h4>Header Flair</h4>
|
||
|
|
<p>The top of this page has a header flair that uses <code>id="flair"</code> to place an image or unicode character <code>::before.</code> </p>
|
||
|
|
<h3>Citations</h3>
|
||
|
|
<ol>
|
||
|
|
<li>Superscript can help you have a list of real (or fake!) citations.</li>
|
||
|
|
</ol>
|
||
|
|
</main>
|
||
|
|
<footer>
|
||
|
|
footer
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
<style>
|
||
|
|
/*wikitable by @limegreen on neocities. a link is appreciated!*/
|
||
|
|
|
||
|
|
|
||
|
|
/*to change the fonts here, go to google fonts, find ones you'd like, and use the @import snippet*/
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700');
|
||
|
|
|
||
|
|
/*example styles*/
|
||
|
|
|
||
|
|
|
||
|
|
/*global colors. change here to see the effect*/
|
||
|
|
:root {
|
||
|
|
--backgroundcolor: grey;
|
||
|
|
--textcolor: #2b2b2b;
|
||
|
|
--header:#969696;
|
||
|
|
--main: white;
|
||
|
|
--footer: #eaecf0;
|
||
|
|
--borders: #454545;
|
||
|
|
|
||
|
|
/*links*/
|
||
|
|
--link: blue;
|
||
|
|
--linkhover: purple;
|
||
|
|
|
||
|
|
/*headings*/
|
||
|
|
--breadcrumb: grey;
|
||
|
|
--h1: #2b2b2b;
|
||
|
|
--h2: #2b2b2b;
|
||
|
|
--h3: #2b2b2b;
|
||
|
|
--headerunderline: grey;
|
||
|
|
|
||
|
|
/*boxes*/
|
||
|
|
--quotebackground:grey;
|
||
|
|
--quotetext: #2b2b2b;
|
||
|
|
--boxbg: #bfbfbf;
|
||
|
|
--showcontentborder:grey;
|
||
|
|
|
||
|
|
--seriesofbg:#bfbfbf;
|
||
|
|
--seriesoftext:#2b2b2b;
|
||
|
|
|
||
|
|
/*infotable*/
|
||
|
|
--infoboxbg:#eaecf0;
|
||
|
|
--centertext:#bdbdbd;
|
||
|
|
--boldtext:#2b2b2b;
|
||
|
|
--infotext:#2b2b2b;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
body{
|
||
|
|
background-color: var(--backgroundcolor);
|
||
|
|
font-family:Atkinson Hyperlegible;
|
||
|
|
font-size: 15.5px;
|
||
|
|
margin: 0;
|
||
|
|
color: var(--textcolor);
|
||
|
|
}
|
||
|
|
/*container*/
|
||
|
|
.wrapper{
|
||
|
|
min-height: 100vh;
|
||
|
|
margin: auto;
|
||
|
|
/*width of the content*/
|
||
|
|
width: 85%;
|
||
|
|
margin: auto;
|
||
|
|
border:2px solid var(--borders);
|
||
|
|
margin-top: 15px;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
/*main content*/
|
||
|
|
main{
|
||
|
|
padding: 15px;
|
||
|
|
background: var(--main);
|
||
|
|
min-height: 100vh;
|
||
|
|
clear: left;
|
||
|
|
}
|
||
|
|
/*links*/
|
||
|
|
a{
|
||
|
|
color: var(--link);
|
||
|
|
}
|
||
|
|
/*link hover*/
|
||
|
|
a:hover{
|
||
|
|
text-shadow: 0 0 1px ;
|
||
|
|
color: var(--linkhover);
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
/*breadcrumbs*/
|
||
|
|
.breadcrumb{
|
||
|
|
color: var(--breadcrumb);
|
||
|
|
}
|
||
|
|
header{
|
||
|
|
height: 100px;
|
||
|
|
border-bottom:2px solid var(--borders);
|
||
|
|
background:var(--header);
|
||
|
|
}
|
||
|
|
/*prevent image overflow*/
|
||
|
|
main img{
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
/*footer*/
|
||
|
|
footer{
|
||
|
|
background:var(--footer);
|
||
|
|
padding: 35px;
|
||
|
|
border-top:2px solid var(--borders);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*headers*/
|
||
|
|
h1,h2,h3{
|
||
|
|
overflow: hidden;
|
||
|
|
border-bottom: 2px solid var(--headerunderline);
|
||
|
|
}
|
||
|
|
h2{
|
||
|
|
font-size: 19pt;
|
||
|
|
}
|
||
|
|
h3{
|
||
|
|
font-size: 16pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*table of contents*/
|
||
|
|
.showcontent{
|
||
|
|
padding: 3px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.contents{
|
||
|
|
background-color:var(--boxbg);
|
||
|
|
width: 14%;
|
||
|
|
padding: 7px;
|
||
|
|
border: 2px solid var(--showcontentborder);
|
||
|
|
}
|
||
|
|
/*this changes the dropdown to a hamburger menu for desktop screens*/
|
||
|
|
.toc summary {
|
||
|
|
list-style-type: '☰ ';
|
||
|
|
}
|
||
|
|
.toc ul{
|
||
|
|
list-style: none;
|
||
|
|
margin-left: -30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*quotes*/
|
||
|
|
.quotebox{
|
||
|
|
width: 30%;
|
||
|
|
background-size: cover;
|
||
|
|
font-style: italic;
|
||
|
|
padding: 10px;
|
||
|
|
|
||
|
|
padding: 13px;
|
||
|
|
border-left: solid;
|
||
|
|
background-color:var(--quotebackground);
|
||
|
|
color: var(--quotetext);
|
||
|
|
}
|
||
|
|
|
||
|
|
/*series of*/
|
||
|
|
.revealsummary{
|
||
|
|
text-align: center;
|
||
|
|
background-color:var(--seriesofbg);
|
||
|
|
padding: 10px;
|
||
|
|
font-weight: bold;
|
||
|
|
border: 2px solid var(--showcontentborder);
|
||
|
|
}
|
||
|
|
.reveal{
|
||
|
|
text-align: center;
|
||
|
|
background-color:var(--seriesofbg);
|
||
|
|
padding: 5px;
|
||
|
|
width: 50%;
|
||
|
|
border: 2px solid var(--showcontentborder);
|
||
|
|
color: var(--seriesoftext);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/*flair*/
|
||
|
|
#flair::before {
|
||
|
|
background-size: cover;
|
||
|
|
background-size: 25px 25px;
|
||
|
|
display: inline-block;
|
||
|
|
width: 30px;
|
||
|
|
height: 20px;
|
||
|
|
margin-left: 4px;
|
||
|
|
content:"⚶";
|
||
|
|
}
|
||
|
|
|
||
|
|
/*flair with image- delete above if using. you will need to play with the width and height to make it fit properly*/
|
||
|
|
|
||
|
|
/* #flair::before { background-image: url('https://i.ibb.co/SwkXQjP/itsalime.png');
|
||
|
|
background-size: cover;
|
||
|
|
background-size: 20px 25px;
|
||
|
|
display: inline-block;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
margin-left: 4px;
|
||
|
|
content:" ";
|
||
|
|
}*/
|
||
|
|
|
||
|
|
/*infotable*/
|
||
|
|
.infotable {
|
||
|
|
float:right;
|
||
|
|
margin-left:5px;
|
||
|
|
background:var(--infoboxbg);
|
||
|
|
border-left:2px solid var(--borders);
|
||
|
|
border:2px solid var(--borders);
|
||
|
|
width:21%;
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--infotext);
|
||
|
|
|
||
|
|
}
|
||
|
|
.infotable img{
|
||
|
|
max-width: 100%;
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
.infotable th {
|
||
|
|
text-align:left;
|
||
|
|
|
||
|
|
}
|
||
|
|
.infotable th{
|
||
|
|
padding: 5px;
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
.infotable ul{
|
||
|
|
list-style: none;
|
||
|
|
padding: 0px;
|
||
|
|
margin: 4px;
|
||
|
|
}
|
||
|
|
#centertext{
|
||
|
|
text-align: center;
|
||
|
|
background: var(--centertext);
|
||
|
|
}
|
||
|
|
/*clear float after infobox*/
|
||
|
|
#clear::after {
|
||
|
|
content: "";
|
||
|
|
clear: both;
|
||
|
|
display: table;
|
||
|
|
}
|
||
|
|
/*responsiveness*/
|
||
|
|
|
||
|
|
/*narrow*/
|
||
|
|
@media(max-width: 900px) {
|
||
|
|
.infotable{
|
||
|
|
width: 30%;
|
||
|
|
}
|
||
|
|
.wrapper{
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.chapters{
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
.reveal{
|
||
|
|
width: 60%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/*medium*/
|
||
|
|
@media(max-width: 1250px) {
|
||
|
|
.infotable{
|
||
|
|
width: 35%;
|
||
|
|
}
|
||
|
|
.contents{
|
||
|
|
width: 40%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*mobile */
|
||
|
|
@media(orientation: portrait) {
|
||
|
|
.quotebox{
|
||
|
|
width: 90%;
|
||
|
|
margin: auto;
|
||
|
|
padding: 15px;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
body{
|
||
|
|
margin-top: 0px;
|
||
|
|
}
|
||
|
|
.infotable{
|
||
|
|
width: 100%;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrapper{
|
||
|
|
width: 95%;
|
||
|
|
}
|
||
|
|
.chapters{
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
.main{
|
||
|
|
padding-top: 20px;
|
||
|
|
}
|
||
|
|
.contents{
|
||
|
|
width: 95%;
|
||
|
|
}
|
||
|
|
.reveal{
|
||
|
|
width: 95%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</html>
|