* {
margin: 0;
padding: 0;
font-family: sans-serif;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a, a:hover, a:visited {
/*
background: transparent;
color: #337ab7;
*/
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
a, a:hover, a:visited {
color: #ff0;
}
}
blockquote {
background-color: #f8f8f8;
border-left: 5px solid #e9e9e9;
font-size: .85em;
margin: 1em 0;
padding: .5em 1em;
}
blockquote cite {
color: #999;
display: block;
font-size: .8em;
margin-top: 1em;
}
blockquote cite:before {
content: "\2014 \2009";
}
h3 {
font-size: 1.5em;
font-weight: normal;
margin: 1em 0 .5em 0;
}
p {
margin: 0 0 10px 0;
}
.bg-green {
background-color: #d9ffca;
border-radius: 4px;
padding: .5em 1em;
}
.bg-red {
background-color: #f2dede;
border-radius: 4px;
padding: .5em 1em;
}
.bg-blue {
background-color: #337ab7;
border-radius: 4px;
padding: .5em 1em;
}
.bg-light-blue {
background-color: #d9edf7;
border-radius: 4px;
padding: .5em 1em;
}
/* Some styles for buttons */
.button {
border: 0px;
border-radius: 4px;
cursor: pointer;
display: inline-block;
padding: .5em 1em;
text-align: center;
}
@media only screen and (max-width: 800px) {
.button {
font-size: 1.2rem;
padding: .5em 1em;
width: 100%;
}
}
.button_transparent, /* Green */
.button_transparent:hover,
.button_transparent:visited {
background-color: transparent;
border: 0;
color: black;
}
.button_ok, /* Green */
.button_ok:hover,
.button_ok:visited {
background-color: #4caf50;
color: #fff;
}
.button_info, /* Blue */
.button_info:hover,
.button_info:visited {
background-color: #008cba;
color: #fff;
}
.button_alert, /* Red */
.button_alert:hover,
.button_alert:visited {
background-color: #f44336;
color: #fff;
}
.button_default, /* Gray */
.button_default:hover,
.button_default:visited {
background-color: #e7e7e7;
color: #000;
}
.button_default1, /* Black */
.button_default1:hover,
.button_default1:visited {
background-color: #555;
color: #fff;
}
img {
/* Prevent images from taking up too much space in comments */
max-width: 100%;
}
label {
cursor: pointer;
font-weight: normal;
}
/* Add light blue shadow to form controls */
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.form-control {
display: block;
padding: .5em 1em;
line-height: 1.42857143;
color: #555;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-control-inline {
display: inline;
width: auto;
}
textarea.form-control {
height: 8rem;
}
.pagination {}
.pagination > form {
display: inline-block;
}
.pagination > .page_number {
font-size: .7rem;
font-weight: bold;
margin: 0 1rem;
}
/* When users vote, this <iframe/> is used as target, such that
* the page is not reloaded
*/
.vote_sink {
height: 1px;
left: -10px;
position: fixed;
top: -10px;
width: 1px;
}
html, body {
background-color: #fff;
font-size: 1em;
height: 100%;
line-height: 1em;
margin: 0;
padding: 0;
width: 100%;
}
@media (prefers-color-scheme: dark) {
html, body {
background-color: #333;
color: #ddd;
}
}
pre {
background-color: #efefef;
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 95%;
line-height: 140%;
margin: 1rem 0;
padding: 1rem;
white-space: pre;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
}
pre code {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 95%;
line-height: 140%;
white-space: pre;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
}
@media (prefers-color-scheme: dark) {
pre {
background-color: #000;
color: #fff;
}
}
/* Monospace <pre/> to write some nice ASCII art in frontpage */
pre.new_year {
background-color: transparent;
color: #BF0000;
font-family: monospace;
font-size: .8rem;
font-webkit: bold;
margin: 0 0 2em 0;
text-align: center;
white-space: pre;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
}
/* Inline code */
:not(pre) > code {
background-color: #efefef;
border-radius: 3px;
display: inline-block;
font-family: monospace, sans-serif;
font-size: 85%;
line-height: 140%;
margin: 0 .2em;
padding: .2em;
white-space: pre;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
}
@media (prefers-color-scheme: dark) {
:not(pre) > code {
background-color: #000;
color: #fff;
}
}
/* A <div> that respects \n without converting to <br> */
div.pre {
white-space: pre;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
}
ul, ol {
margin: 1.2em 2em;
}
/* Burger menu icon
*
* How to use:
* <div class="burger-icon">
* <div class="line1"></div>
* <div class="line2"></div>
* <div class="line3"></div>
* </div>
*/
.burger-icon {
display: inline-block;
cursor: pointer;
position: relative;
}
.burger-icon > .line1,
.burger-icon > .line2,
.burger-icon > .line3 {
background-color: #000;
height: 4px;
margin: 4px 0;
transition: .5s;
width: 36px;
}
@media (prefers-color-scheme: dark) {
.burger-icon > .line1,
.burger-icon > .line2,
.burger-icon > .line3 {
background-color: #fff;
}
}
.burger-icon.open > .line1 {
transform: rotate(-45deg) translate(-0px, 11px);
}
.burger-icon.open > .line2 {
opacity: 0;
}
.burger-icon.open > .line3 {
transform: rotate(45deg) translate(-0px, -11px);
}
.burger-icon.notify > .line1,
.burger-icon.notify > .line2,
.burger-icon.notify > .line3 {
background-color: #f00;
}
/* A class used for displaying URLs domain (under post tile) */
.netloc {
color: #828282;
font-size: 1rem;
font-style: italic;
}
@media (prefers-color-scheme: dark) {
.netloc {
color: #ccc;
}
}
.monkey {
height: 1.5em;
margin: 0 1em;
vertical-align: middle;
}
a.topic,
a.topic:hover,
a.topic:visited {
color: rgba(200,0,100,.8);
font-size: 1rem;
padding: 0 .2rem;
text-decoration: none;
}
/* Text icon near the title, to display the post content */
.text_preview {
height: .8rem;
margin: 0 .5rem;
vertical-align: middle;
}
/* Logo text */
a.logo,
a.logo:hover,
a.logo:visited {
color: #000;
font-weight: bold;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
a.logo,
a.logo:hover,
a.logo:visited {
color: #fff;
}
}
/* List of posts, for example in the homepage */
.posts {}
.posts > .menu {
border-bottom: 0px transparent;
font-size: .8rem;
margin-bottom: 1rem;
}
.posts > .menu > a {
padding: .2rem;
}
/* A singe post */
.posts > .post {
display: grid;
grid-template-columns: min-content auto;
grid-column-gap: 1.5rem;
margin-bottom: 2rem;
}
/* Show numbered position in the list */
.posts > .post > .position {
color: #555;
font-style: italic;
line-height: 1.9rem;
text-align: right;
}
@media (prefers-color-scheme: dark) {
.posts > .post > .position {
color: #ccc;
}
}
.posts > .post > .info > .title > a {
color: #000;
font-size: 1.6rem;
}
@media (prefers-color-scheme: dark) {
.posts > .post > .info > .title > a {
color: #fff;
}
}
/* Some post info showed below the title */
.posts > .post > .info > .about {
color: #666;
margin: .5rem 0 0 0;
}
@media (prefers-color-scheme: dark) {
.posts > .post > .info > .about {
color: #ccc;
}
}
.posts > .pagination > form {
width: 100%;
}
.container {
margin: auto;
max-width: 90%;
}
/**************************************************************************
* Page header
*************************************************************************/
.container > .header {
margin-top: 1rem;
}
@media only screen and (max-width: 800px) {
.container > .header {
display: grid;
grid-template-columns: auto;
}
.container > .header > .title-large {
display: none;
}
.container > .header > .title-small {
display: grid;
grid-template-columns: auto max-content;
}
}
@media only screen and (min-width: 800px) {
.container > .header {
display: grid;
grid-template-columns: max-content auto;
}
.container > .header > .title-small {
display: none;
}
}
/* Menu under the logo */
@media only screen and (max-width: 800px) {
.burger-icon {
display: inline-block;
}
.menu {
border-bottom: 2px dashed #aaa;
display: none;
padding: 1rem 0;
}
/* This class is toggled when the burger icon is clicked */
.menu.visible {
display: block;
}
/* Every menu item */
.menu.visible a {
border: 0;
color: #000;
display: block;
margin: 0;
padding: .8rem 0;
text-align: left;
text-decoration: none;
}
/* Highlight menu item of the current active page (Hot/New/Submit/...) */
.menu.visible .active_page {
font-weight: bold;
text-decoration: underline dotted;
text-transform: uppercase;
}
/* Highlight username if there are unread messages */
.menu.visible .new_messages {
background-color: rgb(255, 175, 50);
color: #fff;
font-weight: bold;
padding-left: 1rem;
}
}
@media only screen and (min-width: 800px) {
.burger-icon {
display: none;
}
.menu {
border-bottom: 1px solid transparent;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-end;
}
.menu > .flex-item {
flex: 0 1 auto;
align-self: auto;
order: 0;
border: 0;
border-bottom: 3px solid transparent;
color: #000;
margin: 0;
padding: 0 .5rem .5rem .5rem;
}
@media (prefers-color-scheme: dark) {
.menu > .flex-item {
color: #fff;
}
}
/* Highlight menu item of the current active page (Hot/New/Submit/...) */
.menu > .active_page {
border-bottom: 3px solid #000;
}
@media (prefers-color-scheme: dark) {
.menu > .active_page {
border-bottom: 3px solid #fff;
}
}
/* Highlight username if there are unread messages */
.menu .new_messages {
background-color: rgb(255, 175, 50);
border: 0;
border-radius: 4px;
color: #fff;
font-weight: bold;
margin: 0;
padding: .5em .5em;
text-decoration: none;
}
}
/**************************************************************************
* Page content
*************************************************************************/
.container > .content {
padding: 1em 0;
line-height: 1.5em;
}
.container > .content .vote {
margin: 0 1rem 0 0;
padding: 0 .5rem;
}
.container > .content .vote > form {
display: inline-block;
margin: 0;
padding: 0;
}
.container > .content .vote > form > button {
background: transparent;
border: 0;
cursor: pointer;
display: inline-block;
height: 1rem;
margin: 0;
overflow: hidden;
padding: 0;
text-decoration: none;
vertical-align: middle;
width: 1rem;
}
/* Votes counter */
.container > .content .vote > .count {
margin: 0 .5rem;
}
.container > .content .vote.upvoted {
background-color: #d1ffd5;
border: 1px dashed;
border-color: #00e313;
border-radius: .5rem;
color: #00a200;
font-weight: bolder;
}
.container > .content .vote.downvoted {
background-color: #ffd9d9;
border: 1px dashed;
border-color: #ff7171;
border-radius: .5rem;
color: #f00;
font-weight: bolder;
}
/* Community page */
.container > .content > .community {
}
.container > .content > .community > .about {
border-left: 1px solid #aaa;
float: right;
font-size: .9rem;
margin: 0 0 5% 5%;
padding: 0 5%;
width: 40%;
}
/* New submission page */
.container > .content > form.submit {
width: 100%;
}
/* Page for a post */
.container > .content > .post {
}
/* Style used to format Markdown tables */
.container > .content > .post table {
background: #fff;
border-collapse: collapse;
text-align: left;
}
.container > .content > .post table > th {
border-bottom: 2px solid #6678b1;
color: #039;
font-weight: normal;
padding: 0 1em;
}
.container > .content > .post table > td {
border-bottom: 1px solid #ccc;
color: #669;
padding: .5em 1em;
}
/* The post title */
.container > .content > .post > .title {
font-size: 1.5em;
}
@media (prefers-color-scheme: dark) {
.container > .content > .post > .title {
color: #fff;
}
}
/* Info below post title */
.container > .content > .post > .info {
margin: 1em 0;
}
.container > .content > .post > .info > .username {
margin-left: 1rem;
}
/* Post text */
.container > .content > .post > .text {
margin: 2rem 0;
word-wrap: break-word;
}
@media (prefers-color-scheme: dark) {
.container > .content > .post > .text {
color: #fff;
}
}
/* The "new comment" form for this post page */
.container > .content > .post .new_comment > input[type=submit] {
margin: 1em 0;
}
/* Comments tree for the Post page */
.container > .content > .post > .comments {
margin: 5em 0 0 0;
}
/* A single comment in the tree */
.container > .content > .post > .comments > .comment {
margin: 0 0 1rem 0;
overflow: hidden;
}
/* Some info about this comment */
.container > .content > .post > .comments > .comment > .info {
display: inline-block;
font-size: .9rem;
}
.container > .content > .post > .comments > .comment > .info > .username {
display: inline-block;
margin: 0 1rem;
}
.container > .content > .post > .comments > .comment .info a,
.container > .content > .post > .comments > .comment .info a:hover,
.container > .content > .post > .comments > .comment .info a:visited {
display: inline-block;
text-decoration: none;
}
.container > .content > .post > .comments > .comment > .info > .op {
background-color: rgb(255, 175, 50);
border-radius: 4px;
font-weight: bold;
padding: 0 1rem;
}
.container > .content > .post > .comments > .comment > .info > .op a,
.container > .content > .post > .comments > .comment > .info > .op a:hover,
.container > .content > .post > .comments > .comment > .info > .op a:visited {
color: #fff;
}
/* The comment text */
.container > .content > .post > .comments > .comment > .text {
word-wrap: break-word;
}
/* Give the comment that's linked to in the URL location hash a lightyellow background color */
.container > .content > .post > .comments > .comment:target {
background-color: lightyellow;
}
.container > .content > .search {
margin-bottom: 3rem;
}
/* User home page */
.container > .content > form > .user {
display: grid;
grid-column-gap: 3rem;
grid-row-gap: 1rem;
grid-template-columns max-content: auto;
}
/* User activity */
.container > .content > .user_activity > * {
margin: 0 0 2em 0;
}
/* Login page */
.container > .content > .login {
margin: auto;
max-width: fit-content;
}
.container > .content > .login form > div {
margin: 1rem 0;
}
/* Page to edit a post or a comment */
.container > .content > .edit
{
}
/* Page to reply to a comment */
.container > .content > .reply
{
}
/* About page */
.container > .content > .about {}
.container > .content > .about > h3 {
margin: 1em 0 .5em 0;
}
.container > .content > .about > p {
line-height: 1.5em;
}
/**************************************************************************
* Page footer
*************************************************************************/
.container > footer {
margin: 0;
padding: 2em 0;
text-align: center;
}
.container > footer img {
height: 1.2em;
margin: 0 .5em 0 0;
vertical-align: middle;
}
.container > footer > .monkey {
height: auto;
margin: 0 0 3rem 0;
width: 3%;
}
.container > footer > ul {
list-style: none;
margin: auto;
overflow: hidden;
padding: 0;
width: fit-content;
}
.container > footer > ul > li {
float: left;
margin: 0 2em 0 0;
@media only screen and (max-width: 1024px) {
float: none;
margin: 1rem 0;
}
}