yequari.com/themes/saturn/static/css/main.css

331 lines
5.1 KiB
CSS
Raw Normal View History

2023-08-12 10:44:17 +00:00
/* CSS HEX */
:root {
--jet: #353535ff;
--chinese-red: #aa3322ff;
--pale-silver: #c4bbafff;
--space-cadet: #292640ff;
--xiketic: #0f101aff;
--blue-ryb: #4056f4ff;
--raisin-black: #241e1eff;
--dim-gray: #756b6bff;
--pewter-blue: #93A8ACff;
--celestial-blue: #5299D3;
--white-smoke: #F1EDEE;
--midnight-blue: #18206F;
--penn-blue: #17255A;
--eerie-black: #172121;
--vista-blue: #8EA4D2;
/* solarized dark colors */
--base00: #657b83;
--base01: #586e75;
--base02: #073642;
--base03: #002b36;
--base0: #839496;
--base1: #93a1a1;
--base2: #eee8d5;
--base3: #fdf6e3;
--yellow: #b58900;
--orange: #cb4b16;
--red: #dc322f;
--magenta: #d33682;
--violet: #6c71c4;
--blue: #268bd2;
--cyan: #2aa198;
--green: #859900;
--main-bg: var(--base02);
--content-bg: var(--base03);
--primary-text: var(--base0);
--secondary-text: var(--base01);
--primary-link: var(--magenta);
--primary-link-hover: var(--red);
--secondary-link: var(--blue);
}
@font-face {
font-family: "Genesis";
src: url("/fonts/NiseGenesis.TTF");
}
/*
* Page text: Krub
* Headings & Top nav: Lalezar
*/
body {
background-color: var(--main-bg);
color: var(--primary-text);
font-family: 'Krub', sans-serif;
scrollbar-width: none;
}
body::-webkit-scrollbar {
display: none;
}
p {
font-size: 1.1rem;
line-height: 2;
}
a:link, a:visited {
color: var(--primary-link);
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
h1,h2,h3,h4,h5,h6 {
color: var(--primary-text);
font-family: 'Lalezar', display;
}
.hidden {
display: none;
}
.column {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 1000px;
margin: 10px auto;
background-color: rgba(23,33,33,0.7);
padding: 0 20px;
min-height: 800px;
}
header {
display: flex;
flex-flow: row wrap;
flex-shrink: 0;
margin: 10px;
}
header h1 {
font-family: "Genesis", 'Courier New', Courier, monospace;
font-size: 1.5rem;
color: var(--pewter-blue);
}
nav {
flex: 1;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav li {
display: inline;
}
nav li a {
display: inline-block;
padding: 15px 20px;
transition-property: background-color;
transition-duration: 0.5s;
transition-delay: 0.1s;
font-family: 'Nova Mono', monospace;
font-weight: bold;
font-size: 0.9em;
}
main {
flex: 1;
display: flex;
flex-flow: row wrap;
/* gap: 20px; */
z-index: 1;
margin: 0 0.1rem;
}
.sidebar {
flex: 3 1;
margin: 0 2rem;
}
.sidebar p {
line-height: 1;
}
section.content {
flex: 8 1;
padding: 0 1rem;
}
section p {
text-indent: 1rem;
text-align: justify;
}
footer {
display: flex;
flex-direction: column;
padding: 0 0 15px 0px;
text-align: center;
color: var(--secondary-text);
border-top: 1px solid var(--secondary-text);
}
footer div {
flex: 1;
}
a.sitetitle {
text-decoration: none;
}
footer ul.social {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
footer li.social {
display: inline;
}
footer li.social a {
display: inline-block;
padding: 0 10px;
color: var(--secondary-link);
}
a.tag {
color: var(--secondary-link);
}
a.permalink {
padding: 0 5px;
}
a.summary {
color: var(--primary-text);
}
time.dt-published {
color: var(--secondary-text);
}
ul.posts {
list-style-type: none;
}
img {
max-width: 500px;
height: auto;
}
code {
background-color: black;
padding: 10px;
overflow-x: scroll;
color: white;
}
pre code{
display: block;
}
#webmentions img { max-height: 1.2em; margin-right: -1ex; }
.center {
text-align: center;
}
ul.pagination {
list-style: none;
text-align: center;
}
li.page-item {
display: inline;
padding: 0.3rem;
}
/*
* Links page
*/
#links-main {
display: flex;
flex-flow: row wrap;
}
#links-main li {
padding: 7px 0;
}
.links-column {
flex: 1 1 33%;
overflow-wrap: break-word;
}
.hover-links {
position: relative;
border-bottom: 1px dotted var(--chinese-red);
}
.hover-links:before {
content: attr(data-hover);
visibility: hidden;
opacity: 0;
max-width: 340px;
min-width: 200px;
background-color: var(--xiketic);
color: var(--pewter-blue);
text-align: center;
border: 4px double var(--dim-gray);
border-radius: 5px;
padding: 5px;
transition: opacity 1s ease-in-out;
position: absolute;
z-index: 1;
left: -50px;
top: -250%;
}
.hover-links:hover:before {
opacity: 1;
visibility: visible;
}
@media only screen and (max-width: 450px) {
div.nav {
border: none;
}
body {
background-color: var(--content-bg);
}
.column {
border: none;
background: none;
max-width: unset;
margin: 0 auto;
padding: 0.2rem;
}
#content {
padding: 0;
}
div.titlex {
margin: 0 auto;
}
}