120 lines
2.7 KiB
CSS
120 lines
2.7 KiB
CSS
|
/* Base CSS */
|
||
|
|
|
||
|
|
/*
|
||
|
|
* This CSS file contains (for me) logical style defaults that are easy to read.
|
||
|
|
*
|
||
|
|
* This file is quite often used as a starting point for other projects.
|
||
|
|
*
|
||
|
|
* Todo:
|
||
|
|
* <button>
|
||
|
|
* <inputs>
|
||
|
|
* <progress>
|
||
|
|
* <meter>
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* rem is relative to the html element, and em is relative to the current element. */
|
||
|
|
html { font-size:100%; }
|
||
|
|
|
||
|
|
body
|
||
|
|
{
|
||
|
|
font-family: sans-serif; /* Serif is awful :( */
|
||
|
|
|
||
|
|
background: #f3f3f3; /* Don't forget to update the @page one too for paged media */
|
||
|
|
color: #232323;
|
||
|
|
}
|
||
|
|
|
||
|
|
title { string-set: page-title content(text); }
|
||
|
|
|
||
|
|
/* Special tweaks for paged media (e.g. PDFs) */
|
||
|
|
@page {
|
||
|
|
font-family: sans-serif;
|
||
|
|
background: #f3f3f3; /* Set the background colour to cover the whole page */
|
||
|
|
|
||
|
|
@top-left {
|
||
|
|
content: "Freeside Linux 201 - Web Server Setup";
|
||
|
|
opacity: 0.6;
|
||
|
|
}
|
||
|
|
@top-right {
|
||
|
|
content: "By Starbeamrainbowlabs and @closebracket";
|
||
|
|
opacity: 0.6;
|
||
|
|
}
|
||
|
|
@bottom-right {
|
||
|
|
content: "Page " counter(page) " of " counter(pages);
|
||
|
|
opacity: 0.6;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* A small tweak to things more responsive */
|
||
|
|
iframe, object, embed, img, video, table {
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Turn the user's cursor into a hand when over things they can click */
|
||
|
|
button, summary {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
th, td {
|
||
|
|
margin: 4px 6px;
|
||
|
|
padding: 4px 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre { page-break-inside: avoid; break-inside: avoid; }
|
||
|
|
pre, code {
|
||
|
|
white-space: pre-wrap;
|
||
|
|
-moz-tab-size: 4;
|
||
|
|
tab-size: 4;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* todo add the rest of the textbox like inputs here */
|
||
|
|
input[type=text], input[type=number], textarea {
|
||
|
|
margin: 3px 5px;
|
||
|
|
padding: 5px 8px;
|
||
|
|
|
||
|
|
background: white;
|
||
|
|
border: 0;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Utility / layout aids */
|
||
|
|
.float.left { float: left; }
|
||
|
|
.float.right { float: right; }
|
||
|
|
|
||
|
|
.flex { display: flex; }
|
||
|
|
.flex-1 { flex: 1; }
|
||
|
|
.flex-2 { flex: 2; }
|
||
|
|
.flex-3 { flex: 3; }
|
||
|
|
.flex-4 { flex: 4; }
|
||
|
|
.flex-5 { flex: 5; }
|
||
|
|
.flex-6 { flex: 6; }
|
||
|
|
|
||
|
|
.small-spacing { margin: 2px 4px; padding: 2px 4px; }
|
||
|
|
.med-spacing { margin: 5px 8px; padding: 5px 8px; }
|
||
|
|
.high-spacing { margin: 8px 10px; padding: 8px 10px; }
|
||
|
|
|
||
|
|
.text-left { text-align: left; }
|
||
|
|
.text-centre { text-align: center; }
|
||
|
|
.text-right { text-align: right; }
|
||
|
|
|
||
|
|
.small-text { font-size: 0.8rem; }
|
||
|
|
.medium-text { font-size: 1rem; }
|
||
|
|
.large-text { font-size: 1.3rem; }
|
||
|
|
|
||
|
|
.bold-text { font-weight: bolder; }
|
||
|
|
|
||
|
|
.block { display: block; }
|
||
|
|
.inline { display: inline; }
|
||
|
|
.inline.block { display: inline-block; }
|
||
|
|
|
||
|
|
.invisilink { text-decoration: none; color: inherit; }
|
||
|
|
.invisilist { list-style-type: none; margin: 5px; padding: 5px; }
|
||
|
|
|
||
|
|
.tiny-image { max-width: 100px; max-height: 100px; }
|
||
|
|
.small-image { max-width: 250px; max-height: 250px; }
|
||
|
|
.medium-image { max-width: 450px; max-height: 450px; }
|
||
|
|
.large-image { max-width: 650px; max-height: 650px; }
|
||
|
|
|
||
|
|
.img-text-middle{ vertical-align: middle; }
|