mirror of
https://github.com/seigler/dashdev-website
synced 2025-07-28 07:16:09 +00:00
update css
remove layout dir
This commit is contained in:
readme
parent
b79c6f7f54
commit
d35d3cf54c
22 changed files with 2653 additions and 428 deletions
|
|
@ -1,277 +1,319 @@
|
|||
/* basic page styles */
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: georgia, cambria, "times new roman", times, serif;
|
||||
font-size: 1em;
|
||||
color: #555;
|
||||
background-color: #eee;
|
||||
line-height: 1.5;
|
||||
font-family: georgia, cambria, "times new roman", times, serif;
|
||||
font-size: 1em;
|
||||
color: #555;
|
||||
background-color: #eee;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
|
||||
display: block;
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1, h2, .logo {
|
||||
font-family: arial, helvetica, free-sans, sans-serif;
|
||||
font-weight: normal;
|
||||
h1,
|
||||
h2,
|
||||
.logo {
|
||||
font-family: arial, helvetica, free-sans, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.6em;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.4em;
|
||||
margin: 2rem 0 0 0;
|
||||
font-size: 1.4em;
|
||||
margin: 2rem 0 0 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1em 0;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 1em 0 1.5em 3em;
|
||||
ul,
|
||||
ol {
|
||||
margin: 1em 0 1.5em 3em;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0 0 0.75em 0;
|
||||
margin: 0 0 0.75em 0;
|
||||
}
|
||||
|
||||
img {
|
||||
float: right;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 50%;
|
||||
margin: 0 0 1em 1em;
|
||||
border: 0 none;
|
||||
float: right;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 50%;
|
||||
margin: 0 0 1em 1em;
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 1em 0 1.5em 3em;
|
||||
background-color: #eff5ef;
|
||||
border-radius: 3px;
|
||||
overflow: auto;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 1em 0 1.5em 3em;
|
||||
background-color: #eff5ef;
|
||||
border-radius: 3px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Consolas, Menlo, "DejaVu Mono", monospace;
|
||||
color: #363;
|
||||
background-color: #eff5ef;
|
||||
border-radius: 3px;
|
||||
padding: 0 0.2em;
|
||||
font-family: Consolas, Menlo, "DejaVu Mono", monospace;
|
||||
color: #363;
|
||||
background-color: #eff5ef;
|
||||
border-radius: 3px;
|
||||
padding: 0 0.2em;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a:link, a:visited {
|
||||
text-decoration: none;
|
||||
color: #66c;
|
||||
a:link,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: #66c;
|
||||
}
|
||||
|
||||
a:hover, a:active {
|
||||
color: #c66;
|
||||
a:hover,
|
||||
a:active {
|
||||
color: #c66;
|
||||
}
|
||||
|
||||
.pagelist {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.pagelist li {
|
||||
flex: 1 1 45%;
|
||||
margin: 0 1em 1em 0;
|
||||
flex: 1 1 45%;
|
||||
margin: 0 1em 1em 0;
|
||||
}
|
||||
|
||||
.pagelist a {
|
||||
display: block;
|
||||
height: 100%;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #ccc;
|
||||
outline: 0 none;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
height: 100%;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #ccc;
|
||||
outline: 0 none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pagelist a:hover, .pagelist a:focus {
|
||||
background-color: #f9f9f9;
|
||||
border-color: #999;
|
||||
.pagelist a:hover,
|
||||
.pagelist a:focus {
|
||||
background-color: #f9f9f9;
|
||||
border-color: #999;
|
||||
}
|
||||
|
||||
.pagelist h2, .pagelist p {
|
||||
margin: 0;
|
||||
.pagelist h2,
|
||||
.pagelist p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagelist p {
|
||||
color: #333;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
p.articleinfo {
|
||||
font-size: 0.8em;
|
||||
color: #777;
|
||||
font-size: 0.8em;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
|
||||
/* layout */
|
||||
|
||||
.content {
|
||||
max-width: 50em;
|
||||
padding: 0 0.5em;
|
||||
margin: 0 auto;
|
||||
/* for page and article template */
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
/* Distance left, right 4em */
|
||||
padding: 0em 4em;
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
main {
|
||||
clear: both;
|
||||
background-color: #fff;
|
||||
overflow: auto;
|
||||
/* for page and article template */
|
||||
clear: both;
|
||||
background-color: #fff;
|
||||
/* todo check not working here */
|
||||
/* overflow: scroll; */
|
||||
margin: 55px 0px 0 0px;
|
||||
}
|
||||
|
||||
article {
|
||||
padding: 1rem 0;
|
||||
/* for page and article template */
|
||||
/* Distance top 1rem for content */
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
header, footer {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
background-color: #eee;
|
||||
header,
|
||||
footer {
|
||||
/* footer global */
|
||||
clear: both;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
overflow: auto;
|
||||
background-color: rgb(214, 4, 4);
|
||||
}
|
||||
|
||||
footer {
|
||||
font-size: 0.85em;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
font-size: 0.85em;
|
||||
padding: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5em;
|
||||
margin: 0.2em 0 0 0;
|
||||
font-size: 1.5em;
|
||||
margin: 0.2em 0 0 0;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
padding: 0.2em 0;
|
||||
color: #999;
|
||||
padding: 0.2em 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
/* navigation */
|
||||
|
||||
.nav ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
flex: 1 1 100%;
|
||||
margin: 0;
|
||||
flex: 1 1 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav a, .nav strong {
|
||||
display: block;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
padding: 0.6em 0;
|
||||
.nav a,
|
||||
.nav strong {
|
||||
display: block;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
padding: 0.6em 0;
|
||||
}
|
||||
|
||||
.nav.main a {
|
||||
color: #222;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.nav a.active, .nav strong {
|
||||
background-color: #fff;
|
||||
.nav a.active,
|
||||
.nav strong {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.nav.page {
|
||||
margin-top: 1.5em;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
margin-top: 1.5em;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
@media (min-width: 16em) {
|
||||
|
||||
.nav li {
|
||||
flex: 1 1 50%;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
flex: 1 1 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 32em) {
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.nav.main {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.nav.main li {
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 3em 0 2em 0;
|
||||
}
|
||||
|
||||
.subpages .content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.subpages article {
|
||||
flex: 1 1 70%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.subpages .nav.sub {
|
||||
flex: 1 1 30%;
|
||||
margin: 0 0 0 2rem;
|
||||
}
|
||||
|
||||
.nav.sub ul {
|
||||
margin-top: 1em;
|
||||
flex-direction: column;
|
||||
border-top: 1px dotted #ccc;
|
||||
}
|
||||
|
||||
.nav.sub li {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
}
|
||||
|
||||
.nav.sub a, .nav.sub strong {
|
||||
text-align: left;
|
||||
padding-left: 0.75em;
|
||||
}
|
||||
|
||||
.nav.page a {
|
||||
text-align: left;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.nav.page a.next {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
}
|
||||
header {
|
||||
/* header global */
|
||||
position: fixed;
|
||||
/* CHECK added */
|
||||
height: 55px;
|
||||
top: 0;
|
||||
}
|
||||
.logo {
|
||||
float: left;
|
||||
}
|
||||
.nav.main {
|
||||
float: right;
|
||||
}
|
||||
.nav li {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.nav.main li {
|
||||
width: 6em;
|
||||
}
|
||||
main {
|
||||
/* CHECK same padding options for both templates here!? */
|
||||
/* position: fixed; */
|
||||
/* margin: 55px 0px 0px 310px; */
|
||||
/* padding: 3em 0em 2em 0em; */
|
||||
/* overflow: auto; */
|
||||
}
|
||||
.subpages .content {
|
||||
/* article template */
|
||||
display: flex;
|
||||
margin: 55px 0px 0px 310px;
|
||||
}
|
||||
.subpages article {
|
||||
/* article template */
|
||||
/* flex: 1 1 70%; */
|
||||
/* min-width for text content */
|
||||
min-width: 100%;
|
||||
}
|
||||
.subpages .nav.sub {
|
||||
/* article template */
|
||||
height: 100%;
|
||||
width: 310px;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgb(88, 9, 112);
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
padding-top: 20px;
|
||||
margin-top: 55px
|
||||
}
|
||||
.nav.sub ul {
|
||||
margin-top: 1em;
|
||||
flex-direction: column;
|
||||
border-top: 1px dotted #ccc;
|
||||
}
|
||||
.nav.sub li {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
}
|
||||
.nav.sub a,
|
||||
.nav.sub strong {
|
||||
text-align: left;
|
||||
padding-left: 0.75em;
|
||||
}
|
||||
.nav.page a {
|
||||
text-align: left;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
.nav.page a.next {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue