--navbar-bg: #292f2f;
--jumbotron-bg: #3a4346;
--copyright-bg: #292f2f;
- --link-color: 66,139,202;
- --footer-link-color: #ddd;
+ --link-color: #2fa6bc;
+ --footer-link-color: #ecf7fa;
--nlink-col: #000;
- --text-color: #333;
- --footer-text-color: #eee;
- --copyright-text-color: #ccc;
- --jumbotron-text-color: #eee;
+ --text-color: #292f2f;
+ --footer-text-color: #ecf7fa;
+ --copyright-text-color: #ecf7fa;
+ --jumbotron-text-color: #ecf7fa;
--border-color: #292f2f;
- --box-hover-color: #ddd;
+ --box-color: #4c5456;
+ --box-hover-color: #292f2f;
--box-round: 10px;
+ --max-width: 600px;
}
/* reset css for browser compat */
}
a {
- color: rgb(var(--link-color));
+ color: var(--link-color);
text-decoration: none;
}
align-items: center;
border-bottom: 1px solid var(--border-color);
z-index: 100;
+ padding-right: 5px;
+}
+[class*='fn-'] {
+ margin-top: auto;
+ margin-bottom: auto;
+ font-size: 30px;
+ color: #E6E6E6;
+ text-shadow: .5px .5px #000;
+}
+.green {
+ color: #4BEB4A;
}
@media all and (max-width: 600px) {
}
.navbar a {
+ margin-top: 2px;
height: 40px;
}
-a.nav-light {
- background-color: #eee;
- height: 44px;
- padding: 2px;
- margin-right: 3px;
-}
-
.nlogo {
height: 40px;
}
/* main */
.container {
- padding: 50px 0 0;
width: 100%;
min-height: 98vh;
+ padding-top: 50px;
padding-bottom: 11.5rem;
}
.main {
- margin: 0 .5em;
- margin-top: 1em;
+ margin: 0 auto;
+ margin-top: .75em;
+ padding: 0 .75em;
+ max-width: var(--max-width);
+ line-height: 1.3;
}
.main h1,
.main h2,
.main h3,
-.main p + p {
- margin-top: .5em;
+.main li,
+.main p + p,
+.main ul + p {
+ margin-top: .7em;
+}
+
+.main ul {
+ padding-left: 2em;
+ list-style-type: disc;
}
/* jumbotron */
position: relative;
width: 100%;
margin-top: -16px;
- background: #000;
background: var(--jumbotron-bg);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
color: var(--jumbotron-text-color);
.child {
text-align: center;
- margin: .5em;
+ margin: .5em auto;
font-size: 32px;
line-height: 48px;
+ max-width: 75%;
}
.box-container {
.box {
text-align: center;
text-decoration: none;
- color: var(--text-color);
+ color: var(--jumbotron-text-color);
margin-bottom: 5px;
padding: 5px;
flex-basis: 30%;
- background-color: #fff;
+ background-color: var(--box-color);
border-radius: var(--box-round);
- -webkit-border-radius: var(--box-round);
- -moz-border-radius: var(--box-round);
-}
-
-.box span {
- display: block;
}
.box:hover,.box:active {
}
.box div{
- font-size: 28px;
- line-height: 28px;
- padding-left: 8px;
- font-weight: 700;
position: relative;
- display: inline;
- top: -10px;
+ top: initial;
+ font-size: 20px;
+ font-weight: 600;
+ line-height: 16px;
+ padding: 10px 0;
+ display: block;
}
.fa-users {
margin-bottom: 5px;
}
-.fa-4x {
- padding-left: 8px;
-}
-
.title {
text-align: center;
}
div.art {
clear: right;
+ flex-grow: 1;
+}
+
+div.artlist {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-items: stretch;
+ max-width: var(--max-width);
+ margin: 0 auto;
+ margin-top: .5em;
}
div.art:not(:first-child) {
float: right;
color: #ccc;
margin: 0 .5em;
+ line-height: 24px;
}
p.heading {
margin-top: 0;
}
-/* Article */
-.art-full h1,
-.art-full h2,
-.art-full h3,
-.art-full h4 {}
-
/* help */
.hmain {
display: flex;
color: var(--footer-link-color);
}
+.footer a:hover {
+ color: #fff;
+}
+
.footer h2 {
margin-bottom: .1em;
display: inline-block;
.fa-4x {
padding: 0;
margin: 0;
+ width: 60px;
+ text-align: center;
+ font-size: 28px;
}
.box-container {
}
.box div {
+ font-size: 22px;
+ line-height: 22px;
+ padding-left: 8px;
+ font-weight: 700;
position: relative;
- top: initial;
- font-size: 16px;
- font-weight: normal;
- line-height: 16px;
- padding: 10px 0;
- display: block;
+ display: inline;
+ text-align: center;
+
+ }
+
+ .box {
+ text-align: left;
+ border-radius: calc(var(--box-round) / 2);
+ margin: 5px 0;
}
}