personal/werc-1.5.0-tweaks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tweak: Change css to resemble the suckless.org style

Browse Source 
Seems a bit cleaner
This commit is contained in:
Nuno Sempere 2022-07-06 04:54:07 +00:00
parent 6697dc04c0
commit 190cd67937
1 changed files with 81 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
pub/style/style.css
View File

@ -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; 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 { body {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-family: serif; font-family: serif;
/* font-family: 'Source Serif Pro', serif; */ /* font-family: 'Source Serif Pro', serif; */
font-size: 1.5em; 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 */ /* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@ -42,57 +40,102 @@ header {
} }
article { /* header */
flex-basis: 60%; header {
padding-left: 1em; flex-basis: 100%;
flex-shrink: 0;
background-color: #eee;
clear: both;
color: #555;
padding: 0em;
margin: 0;
} }
footer { header h1 {
flex-basis: 100%; margin-left: 0.7em;
flex-shrink: 0;
} }
header nav {
display: flex;
justify-content: space-between;
}
nav a,
header a { header a {
text-decoration: none; /*
color: inherit; color: inherit;
*/
text-decoration: none;
color: #005386;
} }
header h1 span { header h1 span {
margin-left: 0em; margin-left: 0em;
font-size: 70%; font-size: 70%;
font-style: italic; font-style: italic;
}
/* Navigation bar */
header nav {
display: flex;
justify-content: space-between;
} }
body>nav { body>nav {
flex-basis: content; float: left;
padding-right: 1vw; margin: 0 1px 0 0;
min-width: 16em; border-right: 1px dotted #ccc;
width: 250px;
}
nav a{
/*
color: inherit;
*/
text-decoration: none;
color: #005386;
}
nav a:hover {
background-color: #ddd;
} }
nav ul { nav ul {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
list-style-type: none; list-style-type: none;
list-style-position: outside; list-style-position: outside;
padding-left: 0; padding-left: 0;
} }
nav li ul { 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 { footer {
margin-top: 2em; flex-basis: 100%;
display: flex; flex-shrink: 0;
justify-content: space-between; margin-top: 2em;
display: flex;
justify-content: space-between;
} }
/* links */
a {
color: #005386;
}
/* Images and figures */
figure figcaption { figure figcaption {
display: block; display: block;
margin-left: auto; margin-left: auto;