You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

478 lines
6.1 KiB

/* This file is for your main application css. */
@import "~minireset.css/minireset.css";
/* === Variables === */
$rainbow: linear-gradient(90deg,
rgba(131,58,180,1) 0%,
rgba(253,29,65,1) 50%,
rgba(252,176,69,1) 100%);
$font-content: 'Open Sans', Helvetica, sans-serif;
$font-heading: $font-content;
$bg-base: #111;
$bg-content: #282c34;
$bg-info: #31708f;
$color-info: #d9edf7;
$bg-warning: #8a6d3b;
$color-warning: #fcf8e3;
$bg-danger: #a94442;
$color-danger: #f2dede;
$color-text: #ddd;
$border-base: #666;
/* === Fonts ===*/
@font-face {
font-family: 'Open Sans';
src: url('../static/fonts/OpenSans-Regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* === Imports === */
@import "./phoenix";
@import "./nprogress";
/* === Base === */
html {
height: 100%;
}
body {
background: $bg-base;
color: $color-text;
font-family: $font-content;
font-size: 1rem;
line-height: 1.5rem;
}
h1, h2, h3 {
margin-bottom: 1rem;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.3rem;
}
a {
color: $color-text;
}
/* === Layout === */
.container { max-width: 60rem; }
.grid { display: flex; }
.col, .spacer { flex: 1; }
main[role=main] {
padding: 0 2rem 2rem 2rem;
background: $bg-base;
}
footer {
padding: 2rem;
background: $bg-content;
}
.width-full {
margin-left: -2rem;
margin-right: -2rem;
padding: 2rem;
}
.padding {
padding: 2rem;
}
section:not(.hero) + section,
div + section {
margin-top: 2rem;
}
/* === Navigation === */
nav[role=navigation] {
background: $bg-content;
line-height: 1.5em;
&:before {
content: '';
position: absolute;
width: 100%;
left: 0;
height: 3px;
background: $rainbow;
}
ul {
display: flex;
margin: 0 1rem;
padding: 0;
white-space: nowrap;
overflow-x: auto;
}
li {
display: inline-block;
}
li.brand {
font-weight: bold;
}
li {
a {
display: block;
padding: 1rem;
text-decoration: none;
transition: all 0.3s;
&:hover {
background: #3a3a3a;
}
}
}
}
aside.menu {
ul {
li {
padding-left: 2rem;
margin: 0 -2rem 0 -4rem;
background: $bg-content;
a {
display: inline-block;
width: 100%;
padding: 1rem 2rem;
transition: all 0.3s;
text-decoration: none;
&:hover {
background: #3a3a3a;
}
}
}
}
}
/* === Styling === */
button[type=submit], a.button {
display: inline-block;
color: white;
font-size: 1rem;
text-decoration: none;
border: 1px solid $border-base;
background: $bg-content;
padding: 0.5rem 1rem;
margin: 0;
&:hover {
background: $rainbow;
color: white;
border: 1px solid white;
}
}
.hero {
margin: 0 -2rem 0;
background: $bg-base;
padding: 2rem;
h1 {
margin: 0 0 1rem 0;
font-family: $font-heading;
font-weight: bold;
&:last-child {
margin: 0;
}
}
p {
font-size: 1.3rem;
&:not(last-child) {
margin-bottom: 0.5rem;
}
}
}
#editor {
border: 1px solid white;
margin-bottom: 2rem;
}
.buttons {
margin-top: 2rem;
}
kbd {
padding: 1px 3px;
border: 1px solid #111;
background: #222;
border-radius: 3px;
}
.tags {
.tag {
font-size:75%;
background: transparent;
padding: 0 0.3rem;
border-radius: 5px;
border: 1px solid $border-base;
margin-right: 5px;
a { text-decoration: none; }
}
@for $i from 1 through 30 {
.tag.count-#{$i} {
font-size: 100% + percentage(($i*5) / 100);
}
}
}
.backlinks, .sources {
&+form {
margin-top: 1rem;
}
h4 {
margin-bottom: 1rem;
}
.link-wrapper {
display: flex;
padding: 1rem;
border: 1px solid $border-base;
background: $bg-content;
margin-bottom: 1rem;
a {
text-decoration: none;
}
a.link {
display: flex;
flex: 1;
}
}
.link-wrapper:last-child {
margin-bottom: 0;
}
}
.card {
border: 1px solid $border-base;
border-radius: 2px;
margin-right: 1rem;
padding: 0.5rem;
text-decoration: none;
&:last-child {
margin-right: 0;
}
}
/* === Forms === */
form {
margin-bottom: 2rem;
fieldset {
border: 0;
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0;
}
input[type=text],
input[type=url],
input[type=email],
input[type=password] {
background: $bg-content;
color: white;
border: 1px solid $border-base;
margin-bottom: 1rem;
padding: 0.5rem;
width: 100%;
border-radius: 0;
&:last-child {
margin-bottom: 0;
}
}
input.title {
font-size: 1.25rem;
}
input[readonly] {
background: $color-text;
color: #777;
}
}
}
/* === Content === */
article {
margin-bottom: 4rem;
&>a {
text-decoration: none;
}
header {
border-bottom: 1px solid $border-base;
.title {
font-family: $font-heading;
margin-bottom: 0;
}
.id {
color: #aaa;
}
}
footer {
border-top: 1px solid $border-base;
}
&:last-child {
margin-bottom: 0;
}
}
.content.html {
margin-bottom: 2rem;
&:last-child {
margin-bottom: 0;
}
h1 {
font-size: 1.3rem;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 2rem;
&:first-child {
margin-top: 0;
}
}
p {
margin-bottom: 1rem;
&:last-child {
margin-bottom: 0;
}
}
dl {
dt { font-weight: bold; }
dd { margin-bottom: 1rem; }
}
hr {
color: transparent;
height: 0;
width: 100%;
border-top: 1px solid $border-base;
margin: 1rem 0;
}
ul, ol {
margin-left: 2rem;
}
ul {
list-style-type: disc;
}
table {
width: 100%;
overflow-x: auto;
td, th {
border: 1px solid $border-base;
border-width: 0 0 1px;
padding: .5em .75em;
vertical-align: top;
}
thead th {
border-width: 0 0 2px;
}
tbody tr {
&:nth-child(odd) {
background: rgba(0,0,0,0.1);
}
}
}
blockquote, pre {
padding: 1rem;
background: rgba(0,0,0,0.1);
margin-bottom: 1rem;
}
blockquote {
position: relative;
font-size: 1.1rem;
font-style: italic;
&:after {
position: absolute;
content: "";
color: #222;
font-size: 5rem;
line-height: 0;
bottom: -10px;
right: 20px;
}
}
pre {
overflow: auto;
}
}
/* === Media Queries === */
@media (max-width: 400px) {
.flex-grid {
display: block;
}
}
/* === Helpers === */
.bg-content { background: $bg-content; }
.bg-base { background: $bg-base; }