ELEC60015-HLP-CW/docs/content/style.css

395 lines
8.3 KiB
CSS

@import url(https://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono|Open+Sans:400,600,700);
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&display=swap');
/* COLOUR THEME */
/*
Backround (white): #FBFFFE
Highlight/secondary background (yellow): #FAA916
Highlight (blue): #01ABAA
TextColour (off black): #272838
*/
/*--------------------------------------------------------------------------
Formatting for F# code snippets
/*--------------------------------------------------------------------------*/
/* strings --- and stlyes for other string related formats */
span.s {
color: #E0E268;
}
/* printf formatters */
span.pf { color:#E0C57F; }
/* escaped chars */
span.e { color:#EA8675; }
/* identifiers --- and styles for more specific identifier types */
span.id { color:#d1d1d1; }
/* module */
span.m { color:#43AEC6; }
/* reference type */
span.rt { color:#43AEC6; }
/* value type */
span.vt { color:#43AEC6; }
/* interface */
span.if{ color:#43AEC6; }
/* type argument */
span.ta { color:#43AEC6; }
/* disposable */
span.d { color:#43AEC6; }
/* property */
span.prop { color:#43AEC6; }
/* punctuation */
span.p { color:#43AEC6; }
/* function */
span.f { color:#e1e1e1; }
/* active pattern */
span.pat { color:#4ec9b0; }
/* union case */
span.u { color:#4ec9b0; }
/* enumeration */
span.e { color:#4ec9b0; }
/* keywords */
span.k { color:#FAB11D; }
/* comment */
span.c { color:#808080; }
/* operators */
span.o { color:#af75c1; }
/* numbers */
span.n { color:#96C71D; }
/* line number */
span.l { color:#80b0b0; }
/* mutable var or ref cell */
span.v { color:#d1d1d1; font-weight: bold; }
/* inactive code */
span.inactive { color:#808080; }
/* preprocessor */
span.prep { color:#af75c1; }
/* fsi output */
span.fsi { color:#808080; }
/* omitted */
span.omitted {
background:#3c4e52;
border-radius:5px;
color:#808080;
padding:0px 0px 1px 0px;
}
/* tool tip */
div.tip {
background:#475b5f;
border-radius:4px;
font:11pt 'Droid Sans', arial, sans-serif;
padding:6px 8px 6px 8px;
display:none;
color:#d1d1d1;
pointer-events:none;
}
table.pre pre {
padding:0px;
margin:0px;
border:none;
}
table.pre, pre.fssnip, pre {
line-height:13pt;
border:1px solid #d8d8d8;
border-collapse:separate;
white-space:pre;
font: 9pt 'Droid Sans Mono',consolas,monospace;
width:90%;
margin:10px 20px 20px 20px;
background-color:#212d30;
padding:10px;
border-radius:5px;
color:#d1d1d1;
max-width: none;
}
pre.fssnip code {
font: 9pt 'Droid Sans Mono',consolas,monospace;
}
table.pre pre {
padding:0px;
margin:0px;
border-radius:0px;
width: 100%;
}
table.pre td {
padding:0px;
white-space:normal;
margin:0px;
}
table.pre td.lines {
width:30px;
}
/*--------------------------------------------------------------------------
Formatting for page & standard document content
/*--------------------------------------------------------------------------*/
body {
font-family: 'Inconsolata', 'Helvetica';
margin: 0;
padding-top: 0px;
padding-bottom: 40px;
}
pre {
word-wrap: inherit;
}
/* Format the heading - nicer spacing etc. */
.masthead {
overflow: hidden;
}
.masthead .muted a {
text-decoration:none;
color:#999999;
}
.masthead ul, .masthead li {
margin-bottom:0px;
}
.masthead .nav li {
margin-top: 15px;
font-size:110%;
}
.masthead h3 {
margin-bottom:5px;
font-size:170%;
}
hr {
margin:0px 0px 20px 0px;
}
/* Make table headings and td.title bold */
td.title, thead {
font-weight:bold;
}
/* Format the right-side menu */
#menu {
margin-top:50px;
font-size:11pt;
padding-left:20px;
}
#menu .nav-header {
font-size:12pt;
color:#606060;
margin-top:20px;
}
#menu li {
line-height:25px;
}
/* -------- NAVIGATION BAR STYLE ---------- */
/* Add a black background color to the top navigation */
.topnav {
background-color: #FAA916;
overflow: hidden;
line-height: 20px;
vertical-align: middle;
font-weight: 600;
flex-direction: column;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
margin: 0.5%;
padding: 0.75%;
color: #272838;
text-align: center;
text-decoration: none;
font-size: 18px;
}
/* Change the color of links on hover */
.topnav a:hover {
border-radius: 5px;
background-color: #FBFFFE;
color: #272838;
}
/* Right-aligned section inside the top navigation */
.topnav-right {
flex-direction: column;
overflow: hidden;
vertical-align: middle;
}
.topnav-right a {
float: right;
margin: 0.5%;
padding: 0.75%;
color: #FBFFFE;
background-color: #01ABAA;
border: 1px solid #FBFFFE;
border-radius: 5px;
}
/* -------- PANNEL STYLE ------- */
.IntroBackground {
margin-top: 0.5%;
background: url('../content/img/circuit/circuitcropped.png');
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 70%);
}
.IntroLayer {
margin-top: 0.5%;
background-color: rgba(250, 169, 22, 0.8);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 70%);
}
/* ------- GENERAL TEXT PARAGRAPH STYLE ------ */
.GeneralText {
margin: 5%;
color: #272838;
}
/* -------- TABLE OF CONTENTS STYLE ------- */
#toc_container {
background: rgba(250, 169, 22, 0.65) none repeat scroll 0 0;
border: 3px solid #FAA916;
display: table;
margin-bottom: 1em;
padding: 20px;
width: auto;
}
.toc_title {
font-weight: 700;
text-align: left;
color: #272838
}
#toc_container li, #toc_container ul, #toc_container ul li {
list-style: outside none none !important;
margin-bottom: 5px;
}
/* ------ GENERIC IMAGE FORMATTING -------- */
img {
max-width: 100%;
height: auto;
text-align: center;
width: 50%;
margin-left: auto;
margin-right: auto;
display: block;
}
/* ------- CLASSES TO ADD LINES BETWEEN SECTIONS -------- */
.section {
border-bottom: 1px solid #FAA916;
}
#halfwidth {
width: 50%;
}
/* -------- List formatting --------- */
li{
margin: 10px 0;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.topnav {
flex-direction: column;
}
.topnav-right {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.topnav-right {
float: none;
width: 100%;
}
}
/* Change font sizes for headings etc. */
#main h1 { font-size: 26pt; margin:10px 0px 15px 0px; font-weight:400; border: 1px solid #272838; border-width: 0 1px;}
#main h2 { font-size: 20pt; margin:20px 0px 0px 0px; font-weight:400; border-bottom: 1px solid #272838; }
#main h3 { font-size: 14pt; margin:15px 0px 0px 0px; font-weight:600; }
#main p { font-size: 11pt; margin:5px 0px 15px 0px; }
#main ul { font-size: 11pt; margin-top:10px; }
#main li { font-size: 11pt; margin: 5px 0px 5px 0px; }
#main strong { font-weight:700; }
/*--------------------------------------------------------------------------
Formatting for API reference
/*--------------------------------------------------------------------------*/
.type-list .type-name, .module-list .module-name {
width:25%;
font-weight:bold;
}
.member-list .member-name {
width:35%;
}
#main .xmldoc h2 {
font-size:14pt;
margin:10px 0px 0px 0px;
}
#main .xmldoc h3 {
font-size:12pt;
margin:10px 0px 0px 0px;
}
.github-link {
float:right;
text-decoration:none;
}
.github-link img {
border-style:none;
margin-left:10px;
}
.github-link .hover { display:none; }
.github-link:hover .hover { display:block; }
.github-link .normal { display: block; }
.github-link:hover .normal { display: none; }
/*--------------------------------------------------------------------------
Links
/*--------------------------------------------------------------------------*/
h1 a, h1 a:hover, h1 a:focus,
h2 a, h2 a:hover, h2 a:focus,
h3 a, h3 a:hover, h3 a:focus,
h4 a, h4 a:hover, h4 a:focus,
h5 a, h5 a:hover, h5 a:focus,
h6 a, h6 a:hover, h6 a:focus { color : inherit; text-decoration : inherit; outline:none }
/*--------------------------------------------------------------------------
Additional formatting for the homepage
/*--------------------------------------------------------------------------*/
#nuget {
margin-top:20px;
font-size: 11pt;
padding:20px;
}
#nuget pre {
font-size:11pt;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
background: #404040;
border-style:none;
color: #e0e0e0;
margin-top:15px;
}