tweak: Change css to resemble the suckless.org style
Seems a bit cleaner
This commit is contained in:
parent
6697dc04c0
commit
190cd67937
|
@ -17,18 +17,16 @@
|
|||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-family: serif;
|
||||
/* font-family: 'Source Serif Pro', serif; */
|
||||
font-size: 1.5em;
|
||||
}
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-family: serif;
|
||||
/* font-family: 'Source Serif Pro', serif; */
|
||||
font-size: 1.5em;
|
||||
background-color: #fff;
|
||||
|
||||
header {
|
||||
flex-basis: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
|
||||
|
@ -42,57 +40,102 @@ header {
|
|||
|
||||
}
|
||||
|
||||
article {
|
||||
flex-basis: 60%;
|
||||
padding-left: 1em;
|
||||
/* header */
|
||||
header {
|
||||
flex-basis: 100%;
|
||||
flex-shrink: 0;
|
||||
background-color: #eee;
|
||||
clear: both;
|
||||
color: #555;
|
||||
padding: 0em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex-basis: 100%;
|
||||
flex-shrink: 0;
|
||||
header h1 {
|
||||
margin-left: 0.7em;
|
||||
}
|
||||
|
||||
header nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
nav a,
|
||||
header a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
/*
|
||||
color: inherit;
|
||||
*/
|
||||
text-decoration: none;
|
||||
color: #005386;
|
||||
}
|
||||
|
||||
header h1 span {
|
||||
margin-left: 0em;
|
||||
font-size: 70%;
|
||||
font-style: italic;
|
||||
margin-left: 0em;
|
||||
font-size: 70%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Navigation bar */
|
||||
header nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
body>nav {
|
||||
flex-basis: content;
|
||||
padding-right: 1vw;
|
||||
min-width: 16em;
|
||||
float: left;
|
||||
margin: 0 1px 0 0;
|
||||
border-right: 1px dotted #ccc;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
nav a{
|
||||
/*
|
||||
color: inherit;
|
||||
*/
|
||||
text-decoration: none;
|
||||
color: #005386;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style-type: none;
|
||||
list-style-position: outside;
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style-type: none;
|
||||
list-style-position: outside;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
nav li ul {
|
||||
padding-left: 0.6em
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
|
||||
nav li a {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0.3em 2em 0.8ex 1em;
|
||||
}
|
||||
|
||||
/* Other sections */
|
||||
|
||||
article{
|
||||
padding: 0.3em 0 0 0;
|
||||
flex-basis: 70%;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 2em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-basis: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* links */
|
||||
|
||||
a {
|
||||
color: #005386;
|
||||
}
|
||||
|
||||
/* Images and figures */
|
||||
|
||||
figure figcaption {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
|
|
Loading…
Reference in New Issue
Block a user