diff options
Diffstat (limited to 'css')
-rw-r--r-- | css/base.css | 38 | ||||
-rw-r--r-- | css/content.css | 34 | ||||
-rw-r--r-- | css/main.css | 6 | ||||
-rw-r--r-- | css/nojs.css | 2 | ||||
-rw-r--r-- | css/page.css | 25 | ||||
-rw-r--r-- | css/pageFooter.css | 0 | ||||
-rw-r--r-- | css/pageHeader.css (renamed from css/pghdr.css) | 8 | ||||
-rw-r--r-- | css/pgftr.css | 18 | ||||
-rw-r--r-- | css/root.css | 23 |
9 files changed, 60 insertions, 94 deletions
diff --git a/css/base.css b/css/base.css index 094f0c8..fc0cd76 100644 --- a/css/base.css +++ b/css/base.css @@ -2,11 +2,11 @@ margin-top:1rem; } -div.graphicsPreview + *,img + *,ol + *,p.graphicText + *,p.large + *,p.small + *,ul + *,table + * { +div.graphicsPreview + *,img + *,ol + *,p.large + *,p.small + *,ul + *,table + * { margin-top:1rem; } -ol ol,ol ul,p.large + p.small,p.small + p.small,ul ol, ul ul { +ol ol,ol ul,ul ol, ul ul { margin-top:0; } @@ -33,13 +33,13 @@ p.pageTitle { } p.pageTitle { - font-size: 3rem; - text-align: center; + font-size: 3rem; + text-align: center; + font-weight:bold; } p.pageTitle sub { - font-size: 1rem; - font-style:italic; + font-size:1rem; } p.large { @@ -47,12 +47,11 @@ p.large { font-weight: bold; } -p.small,p.graphicText { - font-size:calc(11rem / 12); -} - p.small { + font-size: calc(7rem / 8); + font-style: italic; font-weight:bold; + margin-top: 0; } p.small span.data + span.data::before { @@ -77,8 +76,8 @@ div.graphicsPreview { } div.graphicsPreview img { - background-color:var(--backgroundColour); - border-color: var(--backgroundColour); + background-color:var(--backgroundColour0); + border-color: var(--backgroundColour0); border-radius: calc(1rem / 3 * 2); border-style: solid; border-width: calc(1rem / 3); @@ -87,15 +86,6 @@ div.graphicsPreview img { max-width: 12rem; } -p.graphicText { - font-style:italic; - margin-top:calc(1rem / 2); -} - -p.graphicText + p.graphicText { - margin-top:0; -} - img { background-color:var(--foregroundColour); border-color: var(--foregroundColour); @@ -114,7 +104,7 @@ p img { } img.mcBanner { - background-color:var(--backgroundColour); + background-color:var(--backgroundColour1); border-radius: 0; border-style: none; height: 6rem; @@ -146,7 +136,7 @@ table { border-color: var(--foregroundColour); border-style: solid; border-width: calc(1rem / 12); - color: var(--backgroundColour); + color: var(--backgroundColour0); } table.data { @@ -165,7 +155,7 @@ table tr td,table tr th { } table tr td { - background-color:var(--backgroundColour); + background-color:var(--backgroundColour0); color: var(--foregroundColour); } diff --git a/css/content.css b/css/content.css deleted file mode 100644 index 08b5b8b..0000000 --- a/css/content.css +++ /dev/null @@ -1,34 +0,0 @@ -div.content { - background-color:var(--backgroundColour); - border-top-color:var(--foregroundColour); - border-top-style:solid; - border-top-width:calc(1rem / 3); - box-sizing: border-box; - height: 100%; - margin: auto; - max-width: var(--maximumPageWidth); - min-width: var(--minimumPageWidth); - padding: 1rem 2rem; - padding-bottom: calc(3rem / 2 + 2rem); - width: 100%; -} - -div.section + div.section::before { - content: ""; - background-color:var(--colour); - display: block; - height: calc(1rem / 3); - margin: 1rem 0; - width: calc(100% / 2); -} - -div.subsection { - border-left-color:var(--colour); - border-left-style:solid; - border-left-width:calc(1rem / 3); - padding: 0 1rem; -} - -div.subsection + div.subsection { - margin-top:1rem; -} diff --git a/css/main.css b/css/main.css index d1980d8..c05e8f8 100644 --- a/css/main.css +++ b/css/main.css @@ -2,6 +2,6 @@ @import "/css/base.css"; -@import "/css/pghdr.css"; -@import "/css/content.css"; -@import "/css/pgftr.css"; +@import "/css/pageHeader.css"; +@import "/css/page.css"; +@import "/css/pageFooter.css"; diff --git a/css/nojs.css b/css/nojs.css index c49504d..a793d2f 100644 --- a/css/nojs.css +++ b/css/nojs.css @@ -2,7 +2,7 @@ img.themeToggler { display:none; } -div.content { +div.page { padding-bottom:1rem; } diff --git a/css/page.css b/css/page.css new file mode 100644 index 0000000..1a94139 --- /dev/null +++ b/css/page.css @@ -0,0 +1,25 @@ +div.page { + background-color: var(--backgroundColour1); + border-bottom-left-radius: 1rem; + border-bottom-right-radius:1rem; + border-top-color: var(--foregroundColour); + border-top-style: solid; + border-top-width: calc(1rem / 3); + box-sizing: border-box; + height: 100%; + margin: auto; + margin-bottom: 1rem; + max-width: var(--maximumPageWidth); + min-width: var(--minimumPageWidth); + padding: 1rem 2rem; + width: 100%; +} + +div.section + div.section::before { + content: ""; + background-color:var(--colour); + display: block; + height: calc(1rem / 3); + margin: 1rem 0; + width: calc(100% / 2); +} diff --git a/css/pageFooter.css b/css/pageFooter.css new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/css/pageFooter.css diff --git a/css/pghdr.css b/css/pageHeader.css index 4944ff7..baeecfd 100644 --- a/css/pghdr.css +++ b/css/pageHeader.css @@ -16,7 +16,7 @@ div.navbar p span.section + span.section::before { } div.navbar p,div.navbar p span.section a,div.navbar p span.section a:visited { - color: var(--backgroundColour); + color: var(--backgroundColour0); text-decoration:none; } @@ -33,12 +33,12 @@ div.navbar p span.section a.mandelbrot-link:hover { } div.navbar img.themeToggler { - background-color:var(--backgroundColour); - border-color: var(--backgroundColour); + background-color:var(--backgroundColour0); + border-color: var(--backgroundColour0); border-radius: calc(1rem / 3 * 2); border-width: calc(1rem / 3); border-style: solid; - color: var(--backgroundColour); + color: var(--backgroundColour0); cursor: pointer; display: block; margin: 0 auto; diff --git a/css/pgftr.css b/css/pgftr.css deleted file mode 100644 index 7a229a7..0000000 --- a/css/pgftr.css +++ /dev/null @@ -1,18 +0,0 @@ -div.toTop { - background-color: var(--foregroundColour); - border-radius: calc(1rem / 3); - bottom: 1rem; - cursor: pointer; - display: block; - height: 1rem; - left: calc(100vw / 2 - 6rem / 2); - opacity: calc(1 / 2); - position: fixed; - width: 6rem; - z-index: 1; -} - -div.toTop:hover { - height: calc(3rem / 2); - opacity:1; -} diff --git a/css/root.css b/css/root.css index 4ff2826..258c4ea 100644 --- a/css/root.css +++ b/css/root.css @@ -1,14 +1,17 @@ :root { - --black: #2E2E2E; - --white: #FCF9F9; - --red: #A6192E; /* 187 C */ - --yellow:#FFA400; /* 137 C */ - --green: #00965E; /* 340 C */ - --blue: #006BA6; /* 307 C */ + --black: #202020; + --darkgrey: #2B2B2B; + --lightgrey:#EAEAEA; + --white: #F4F4F4; + --red: #A50034; /* 207 C */ + --yellow: #FFA400; /* 137 C */ + --green: #00965E; /* 340 C */ + --blue: #006BA6; /* 307 C */ - --backgroundColour:var(--black); - --foregroundColour:var(--white); - --colour: var(--red); + --backgroundColour0:var(--black); + --backgroundColour1:var(--darkgrey); + --foregroundColour: var(--white); + --colour: var(--red); --minimumPageWidth:12rem; --maximumPageWidth:52rem; @@ -23,6 +26,6 @@ } body { - background-color:var(--backgroundColour); + background-color:var(--backgroundColour0); color: var(--foregroundColour); } |