switching/style/main.css

239 lines
3.4 KiB
CSS
Raw Normal View History

html, body {
height: 100%;
2019-07-23 17:13:21 +00:00
}
.mainContainer {
2019-07-29 13:28:26 +00:00
width: 85%;
2019-07-23 17:13:21 +00:00
margin: auto;
min-height: 100%;
2019-07-23 17:13:21 +00:00
}
2019-07-29 09:23:56 +00:00
.button {
2019-07-29 13:28:26 +00:00
border-radius: 5px;
2019-07-29 09:23:56 +00:00
display: block;
padding: 20px;
background-color: #cde6ea;
2019-07-29 13:28:26 +00:00
box-sizing: content-box;
2019-07-29 09:23:56 +00:00
text-decoration: none;
font-weight: bold;
color: inherit;
text-align: center;
float: right;
font-size: 18px;
transition: background-color 0.2s ease;
}
2019-07-29 13:28:26 +00:00
2019-07-27 20:57:51 +00:00
nav {
display: flex;
overflow: hidden;
background-color: #93ff83;
}
nav > a {
2019-07-29 13:28:26 +00:00
padding: 20px;
2019-07-27 20:57:51 +00:00
flex: auto;
display: block;
2019-07-29 13:28:26 +00:00
box-sizing: content-box;
2019-07-27 20:57:51 +00:00
text-decoration: none;
font-weight: bold;
color: inherit;
text-align: center;
2019-07-27 22:08:55 +00:00
background-color: transparent;
2019-07-28 10:46:34 +00:00
font-size: 18px;
2019-07-27 22:08:55 +00:00
2019-07-28 10:46:34 +00:00
transition: background-color 0.2s ease;
2019-07-27 22:08:55 +00:00
}
nav > a.current {
background-color: #5db9ef;
}
nav > a:hover,
.button:hover {
2019-07-27 22:08:55 +00:00
background-color: rgba(0, 0, 0, 0.2);
}
nav > a.current:hover {
background-color: #5397ca;
2019-07-27 20:57:51 +00:00
}
nav > a:visited {
color: inherit;
}
2019-07-27 22:08:55 +00:00
nav > a > div {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
}
2019-07-29 13:28:26 +00:00
@media only screen and (max-width : 640px) {
nav {
display: block;
overflow: hidden;
background-color: #93ff83;
}
nav > a {
padding: 20px;
flex: auto;
display: block;
box-sizing: content-box;
text-decoration: none;
font-weight: bold;
color: inherit;
text-align: center;
background-color: transparent;
font-size: 18px;
transition: background-color 0.2s ease;
}
nav > a.current {
background-color: #5db9ef;
}
nav > a:hover,
.button:hover {
background-color: rgba(0, 0, 0, 0.2);
}
nav > a.current:hover {
background-color: #5397ca;
}
nav > a:visited {
color: inherit;
}
nav > a > div {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
}
}
.mainContainer {
font-size: 14px;
color: #333;
text-align: left;
}
.mainContainer h1 {
2019-07-23 17:13:21 +00:00
text-align: center;
margin: 10px 0 5px 0;
font-size: 24px;
font-weight: 600;
color: #000;
2019-07-23 17:13:21 +00:00
}
.mainContainer h2 {
margin: 10px 0 5px 0;
font-size: 22px;
font-weight: 600;
color: #000;
2019-07-23 17:13:21 +00:00
}
.mainContainer h3 {
margin: 10px 0 5px 0;
font-size: 18px;
font-weight: 600;
color: #000;
}
.mainContainer h4 {
margin: 10px 0 5px 0;
font-size: 14px;
font-weight: 600;
color: #000;
}
.mainContainer p {
margin: 5px 5px 0 10px;
}
.mainContainer strong {
font-weight: 600;
}
.mainContainer ul,
.mainContainer ol {
margin: 5px 5px 10px 10px;
list-style-position: outside;
}
.mainContainer ul li {
margin: 5px 5px 0 15px;
}
.mainContainer img,
.mainContainer iframe {
margin: 15px 0 15px 15px;
2019-07-23 17:13:21 +00:00
}
.c1 {
color: aliceblue;
background-color: darkred;
}
.c2 {
color: aliceblue;
background-color: midnightblue;
}
.c3 {
color: aliceblue;
background-color: indigo;
}
.c4 {
color: aliceblue;
background-color: seagreen;
2019-07-28 10:46:34 +00:00
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: '';
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
.content {
padding: 10px;
2019-07-29 09:23:56 +00:00
}
2019-07-29 09:58:45 +00:00
.footer {
width: 100%;
min-height: 30px;
padding: 10px 20px;
background-color: rgba(10, 10, 10, .1);
font-size: 14px;
color: #777;
text-align: left;
box-sizing: border-box;
2019-07-29 09:58:45 +00:00
}