Skip to content

Commit

Permalink
Move CSS around
Browse files Browse the repository at this point in the history
  • Loading branch information
@slowe
slowe committed Nov 28, 2024
1 parent 3e537c8 commit dc232d7
Show file tree
Hide file tree
Showing 5 changed files with 177 additions and 174 deletions.
171 changes: 2 additions & 169 deletions src/_includes/css/oi.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ p, iframe, h2, h3, figure, ul, ol, .padded-bottom { margin-bottom: 1em; }
button, .button { border: 0px; font-size: 1em; background-color: #efefef; color: black; text-decoration: none!important; display: inline-block; padding: 3em 1em; cursor: pointer; vertical-align: top; line-height: 1.25em; }
a:hover, a:focus { text-decoration: underline; }
a:visited { color: inherit; }
a { color: inherit; text-decoration: inherit;}
a { color: inherit; text-decoration: inherit; }
footer { width: 100%; padding-bottom: 3em; }
code,pre { font-family: monospace; color: #444; background-color: #efefef; }
code { padding: 0.125em 0.25em; }
Expand Down Expand Up @@ -82,9 +82,6 @@ a.button:hover, button:hover, button:focus, a.button:focus { background-color: #
.tallpadded { padding-top: 2em; padding-bottom: 2em; }
section { padding: 2em 0; }

.block { padding:2em; border-style: solid; margin-top: 2em; margin-bottom: 2em; border-width: 1px 1px; border-color: #bbbb}

.block p { padding: 1em; }
.skip-to-content-link { position: absolute; top: -3rem; right: 0.5rem; z-index: 2000; transition: top 0.2s; padding: 0.5rem 1rem; }
.skip-to-content-link:focus { top: 0.25rem; }

Expand All @@ -109,33 +106,6 @@ header nav ul {
}
header nav ul li { display: inline-block; }
header nav ul > li > a { padding: 1em 1em; display: inline-block; width: 100%; color: inherit; }
.header-holder { max-width: 1300px; position: relative; margin: auto;}

.about { padding: 2em; margin-bottom: 1em; border-style: solid; border-width: 1px; border-color: #bbbb;}

.summary { padding-top: 2em; text-align:center; }

.text { padding: 1em; text-align:center; font-weight: 400; font-size: 1.1em;}

.read-more { margin-top: 1em; padding-bottom: 0.5em; }
.read-more a {
font-weight: 600;
color: #0a2f45;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: #91cfce;
text-decoration-thickness: 2px;
border-style: solid;
border-width: 1px 1px 1px;
border-color: #bbbb;
padding: 1em;
transition: color 0.15s linear, background-color 0.15s linear;

&:hover {
color: white;
background: #002331;
}
}

/* Dashboard */
.pane {
Expand All @@ -152,12 +122,7 @@ header nav ul > li > a { padding: 1em 1em; display: inline-block; width: 100%; c
border-color: #7eb4b3;
transition: color 0.15s linear, background-color 0.15s linear;

&:hover {
color: white;
fill: white;
background: #002331;
}
}
}

.grid .pane h2 {
text-decoration: none;
Expand Down Expand Up @@ -198,148 +163,16 @@ ul.grid > li > a > h2 {
&:hover {
color: white;
text-decoration-color: #91cfce;
}
}

.text-panel {
background: #91cfce;
color: #0a2f45;
border-right: solid;
border-width: 1px 1px;
border-color: #7eb4b3;
transition: color 0.15s linear, background-color 0.15s linear;

&:hover {
color: white;
background: #002331;
}
.impact-link {
padding: 4em;
}
}


.impact-link:hover {
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: #91cfce;
text-decoration-thickness: 3px;
}

.legend { margin-bottom: 1em; text-align: center; }
.legend .legend-item { display: inline-block; line-height: 1em; margin-right: 1em; cursor: pointer; }
.legend .legend-item svg { float: left; }

.oi-legend-inner .oi-legend-item { background: inherit!important; outline: none; }
.oi-legend-inner .oi-legend-item.oi-series-on { background: inherit!important; outline: none!important; }

.big-number {
font-size: 3.5em;
line-height: 1.25em;
font-weight: bold;
text-align: center;
display: block;
margin-top: 0;
color: inherit;
transition: color 0.3s linear, background-color 0.3s linear;
}

.dashboard-figure {
height: 100%;
display: flex;
flex-direction: column;
}

.figure-link {
color: inherit;
text-decoration: none;
}

.footnote { font-size: 1.1em;
text-align: center;
color: inherit;
padding-top: 2em;
font-weight: 400;
}
.note { text-align: center; color: inherit; font-weight: 400; padding-bottom: 1em; }

/* Header */

.site-header {
background: #0a2f45;
left: 0;
right: 0;
top: 0;
z-index: 1002;
}

.site-header-content {
align-items: center;
padding-top: 1.55em;
padding-bottom: 1.55em;
gap: 1em;
width: 90%;
max-width: 1600px;
}
.header-grid { display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 0.5em; list-style: none;}
header a { font-size: 0.9em;}
.header-logo { float:left; margin: 0; }



/* Footer */

.grid-list { display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 0.5em; list-style: none; margin: 0; margin-bottom: 2em; }
.grid-list > li > a { padding: 1em; background: #dfdfdf; text-decoration: none; display: block; text-align: center; height: 100%; }


.elsewhere { float: left; margin-top: 1em; margin-bottom: 0;}
.elsewhere li { display: block; margin-left: 0em; }
.elsewhere li:first-child { margin-left: 0; }
.elsewhere li a { display: block; }
.elsewhere.grid { display: flex; gap: 0em; flex-direction: column; list-style: none; }
.elsewhere.grid li a { display: flex; gap: 0.5em; align-items: center;}
.elsewhere.grid * { margin:0; }

.footer { margin-bottom: 0;}
.footer-links { display: grid; list-style: none; float: left; margin-left: 0; grid-gap: 1em;}
.footer-links li a { font-size: 1.1em; text-decoration: underline; }
.footer li h3 {
font-size: 1.2em;
text-decoration: underline;
color: #ffffff;
text-decoration: underline;
text-underline-offset: 10px;
text-decoration-color: #91cfce;
text-decoration-thickness: 3px;
text-align: left;
}

ul.footer-logos { display: block; list-style: none; margin-left: 0;}

.oi-credit { font-weight: 800px; font-size: 1.1em; padding:0;}

footer .address { margin-top: 1em; }
footer a { color: inherit; }
footer hr.about { margin: 32px 0; border: 0; border-top:1px solid #444; }

.footer.grid-list { grid-template-columns: 100%; }


@media only screen and (max-width: 1080px) {
.grid { grid-template-columns: 100%; }
.grid-list { grid-template-columns: repeat(2,1fr); grid-gap: 0.25em; }
}

@media only screen and (min-width: 800px) {
.footer-links {
display:grid;
grid-template-columns: 1fr 1fr;
}
.footer.grid-list {
grid-template-columns: 1fr 2fr 1fr;
}
}

@media only screen and (max-width: 800px) {
ul.grid.dashboard {
Expand Down
170 changes: 170 additions & 0 deletions src/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,177 @@
.oi-chart-bar line { stroke: #004563!important; stroke-opacity: 0.3; }
.oi-chart-line line { stroke: #004563!important; stroke-opacity: 0.3; }

.block { padding:2em; border-style: solid; margin-top: 2em; margin-bottom: 2em; border-width: 1px 1px; border-color: #bbbb}

.block p { padding: 1em; }


.header-holder { max-width: 1300px; position: relative; margin: auto;}

.about { padding: 2em; margin-bottom: 1em; border-style: solid; border-width: 1px; border-color: #bbbb;}

.summary { padding-top: 2em; text-align:center; }

.text { padding: 1em; text-align:center; font-weight: 400; font-size: 1.1em;}

.read-more { margin-top: 1em; display: inline-block; }
.read-more a {
display: block;
font-weight: 600;
color: #0a2f45;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: #91cfce;
text-decoration-thickness: 2px;
border-style: solid;
border-width: 1px 1px 1px;
border-color: #bbbb;
padding: 1em;
transition: color 0.15s linear, background-color 0.15s linear;

&:hover, &:focus {
color: white;
background: #002331;
}
}



.text-panel {
background: #91cfce;
color: #0a2f45;
border-right: solid;
border-width: 1px 1px;
border-color: #7eb4b3;
transition: color 0.15s linear, background-color 0.15s linear;

&:hover, &:focus {
color: white;
background: #002331;
}
.impact-link {
padding: 4em;
}
}


.impact-link:hover, .impact-link:focus {
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: #91cfce;
text-decoration-thickness: 3px;
}

.legend { margin-bottom: 1em; text-align: center; }
.legend .legend-item { display: inline-block; line-height: 1em; margin-right: 1em; cursor: pointer; }
.legend .legend-item svg { float: left; }

.oi-legend-inner .oi-legend-item { background: inherit!important; outline: none; }
.oi-legend-inner .oi-legend-item.oi-series-on { background: inherit!important; outline: none!important; }

.big-number {
font-size: 3.5em;
line-height: 1.25em;
font-weight: bold;
text-align: center;
display: block;
margin-top: 0;
color: inherit;
transition: color 0.3s linear, background-color 0.3s linear;
}

.dashboard-figure {
height: 100%;
display: flex;
flex-direction: column;
}

.figure-link {
color: inherit;
text-decoration: none;
}

.footnote { font-size: 1.1em;
text-align: center;
color: inherit;
padding-top: 2em;
font-weight: 400;
}
.note { text-align: center; color: inherit; font-weight: 400; padding-bottom: 1em; }

/* Header */

.site-header {
background: #0a2f45;
left: 0;
right: 0;
top: 0;
z-index: 1002;
}

.site-header-content {
align-items: center;
padding-top: 1.55em;
padding-bottom: 1.55em;
gap: 1em;
width: 90%;
max-width: 1600px;
}
.header-grid { display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 0.5em; list-style: none;}
header a { font-size: 0.9em;}
.header-logo { float:left; margin: 0; }


/* Footer */

.grid-list { display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 0.5em; list-style: none; margin: 0; margin-bottom: 2em; }
.grid-list > li > a { padding: 1em; background: #dfdfdf; text-decoration: none; display: block; text-align: center; height: 100%; }


.elsewhere { float: left; margin-top: 1em; margin-bottom: 0;}
.elsewhere li { display: block; margin-left: 0em; }
.elsewhere li:first-child { margin-left: 0; }
.elsewhere li a { display: block; }
.elsewhere.grid { display: flex; gap: 0em; flex-direction: column; list-style: none; }
.elsewhere.grid li a { display: flex; gap: 0.5em; align-items: center;}
.elsewhere.grid * { margin:0; }

.footer { margin-bottom: 0;}
.footer-links { display: grid; list-style: none; float: left; margin-left: 0; grid-gap: 1em;}
.footer-links li a { font-size: 1.1em; text-decoration: underline; }
.footer li h3 {
font-size: 1.2em;
text-decoration: underline;
color: #ffffff;
text-decoration: underline;
text-underline-offset: 10px;
text-decoration-color: #91cfce;
text-decoration-thickness: 3px;
text-align: left;
}

ul.footer-logos { display: block; list-style: none; margin-left: 0;}

.oi-credit { font-weight: 800px; font-size: 1.1em; padding:0;}

footer .address { margin-top: 1em; }
footer a { color: inherit; }
footer hr.about { margin: 32px 0; border: 0; border-top:1px solid #444; }

.footer.grid-list { grid-template-columns: 100%; }


@media screen and (max-width: 1200px) {
.oi-dashboard { grid-gap: 1.5vw; }
.oi-dashboard .footnote { font-size: max(10px, 0.7em); }
}

@media only screen and (min-width: 800px) {
.footer-links {
display:grid;
grid-template-columns: 1fr 1fr;
}
.footer.grid-list {
grid-template-columns: 1fr 2fr 1fr;
}
}
Loading

0 comments on commit dc232d7

Please sign in to comment.