My space on the web https://inhji.de
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.
 
 
 
 
 

387 lines
6.9 KiB

/* === External Dependencies === */
@import "~minireset.css/minireset.css";
@import "~bootstrap-icons/font/bootstrap-icons.css";
@import "~sass-material-colors/sass/sass-material-colors";
@import "~@yaireo/tagify/src/tagify";
/* === Color Definitions === */
$primary-color: 'blue';
$colors: (
light: (
surface: material-color('blue-grey', '50'),
surface-var: material-color('blue-grey', '200'),
surface-dark: material-color('blue-grey', '800'),
on-surface: material-color('blue-grey', '900'),
background: material-color('blue-grey', '200'),
primary: material-color($primary-color, '700'),
primary-inverse: material-color($primary-color, 'a700'),
on-primary: material-color('blue-grey', '50'),
navigation: material-color('blue-grey', '900'),
navigation-var: material-color('blue-grey', '800'),
on-navigation: material-color('blue-grey', '50')
),
dark: (
surface: material-color('blue-grey', '800'),
surface-var: material-color('blue-grey', '800'),
surface-dark: material-color('blue-grey', '800'),
on-surface: material-color('blue-grey', '50'),
background: material-color('blue-grey', '900'),
primary: material-color($primary-color, '700'),
primary-inverse: material-color($primary-color, '300'),
on-primary: material-color('blue-grey', '50'),
navigation: material-color('blue-grey', '900'),
navigation-var: material-color('blue-grey', '800'),
on-navigation: material-color('blue-grey', '50')
)
);
@import "./colors";
/* === Variables === */
$font-content: 'Open Sans', Helvetica, sans-serif;
$font-heading: $font-content;
$width-wrapper: 60rem;
$width-sidebar: 15rem;
$width-sidebar-collapsed: 3rem;
$bg-info: material-color('green', '500');
$color-info: material-color('green', '100');
$bg-warning: #8a6d3b;
$color-warning: #fcf8e3;
$bg-danger: #a94442;
$color-danger: #f2dede;
$phone: 768px;
$shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.75);
/* === 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";
@import "./markdown";
@import "./navigation";
@import "./forms";
@import "./tablesort";
@import "./prism";
@import "./cards";
/* === Base === */
html {
height: 100%;
}
body {
@include color-assign(background-color, background);
@include color-assign(color, on-surface);
font-family: $font-content;
font-size: 1rem;
line-height: 1.5rem;
}
h2, h3 {
margin-bottom: 1rem;
}
h1 {
font-size: 2rem;
line-height: 2rem;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.3rem;
}
a {
@include color-assign(color, on-surface);
text-decoration: none;
}
/* === Layout === */
.container { max-width: $width-wrapper; }
.grid, .flex { display: flex; }
.col, .spacer { flex: 1; }
.flex-1 {flex: 1;}
.flex-2 {flex: 2;}
.flex-3 {flex: 3;}
.flex-4 {flex: 4;}
body.logged-in {
.container {
max-width: $width-wrapper + $width-sidebar;
}
#wrapper {
margin-left: $width-sidebar;
}
}
main[role=main] {
padding: 0 2rem 2rem 2rem;
@include color-assign(background-color, background);
}
footer {
padding: 2rem;
@include color-assign(background-color, surface);
}
.width-full {
margin-left: -2rem;
margin-right: -2rem;
padding: 2rem;
}
.padding {
padding: 2rem;
}
section + section,
div + section {
margin-top: 2rem;
}
/* === Styling === */
button[type=submit], a.button {
@include color-assign(background-color, surface);
@include color-assign(color, on-surface);
display: inline-block;
font-size: 1rem;
border: 1px solid #000;
@include color-assign(border-color, on-surface);
padding: 0.5rem 1rem;
margin: 0;
&:hover {
@include color-assign(color, on-primary);
@include color-assign(background-color, primary);
}
}
header.hero {
@include color-assign(background-color, primary);
@include color-assign(color, on-primary);
margin: 0 -2rem 0;
padding: 2rem;
h1 {
font-family: $font-heading;
font-weight: bold;
margin-bottom: 0.5rem;
}
p {
font-size: 1.3rem;
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 0;
}
}
}
.buttons {
margin-top: 2rem;
}
kbd {
padding: 1px 3px;
border: 1px solid #111;
@include color-assign(border-color, on-surface);
@include color-assign(background-color, surface);
border-radius: 3px;
}
.tags {
.tag {
display: inline-block;
font-size:75%;
@include color-assign(background, surface);
@include color-assign(color, on-surface);
padding: 0 0.3rem;
margin: 0.1rem;
border-radius: 5px;
border: 1px solid white;
@include color-assign(border-color, surface-var);
}
}
.notes {
margin-top: 4rem;
.note {
header {
@include color-assign(background-color, primary);
@include color-assign(color, on-primary);
}
}
}
#goto-anything {
position: fixed;
top: 5rem;
left: 15rem;
width: 30rem;
border: 1px solid white;
box-shadow: $shadow;
@include color-assign(background-color, surface);
@include color-assign(border-color, surface);
&.closed {
display: none;
}
form { margin: 0; }
input {
padding: 1rem;
border: none;
width: 100%;
@include color-assign(background-color, surface);
&:focus-visible {
outline: none;
border: none;
}
}
.results {
.result {
padding: 1rem;
&.active {
@include color-assign(background-color, surface-var);
}
}
}
}
/* === Content === */
article {
margin-bottom: 4rem;
&.single {
margin-bottom: 2rem;
}
header {
@include color-assign(background, surface);
.title {
font-family: $font-heading;
margin-bottom: 0;
}
}
footer {
border-top: 1px solid white;
@include color-assign(border-color, surface-var);
}
&:last-child {
margin-bottom: 0;
}
}
.backlinks, .sources {
&+form {
margin-top: 1rem;
}
h4 {
margin-bottom: 1rem;
padding: 0.5rem 1rem;
font-weight: bold;
border: 1px solid white;
@include color-assign(border-color, on-surface);
@include color-assign(color, on-primary);
@include color-assign(background-color, primary);
}
.link-wrapper {
display: flex;
padding: 1rem;
border: 1px solid white;
@include color-assign(border-color, on-surface);
@include color-assign(background-color, surface);
margin-bottom: 1rem;
a.link {
flex: 1;
span:first-child {
font-weight: bold;
}
}
}
.link-wrapper:last-child {
margin-bottom: 0;
}
}
/* === Media Queries === */
@media (max-width: $phone) {
.flex-grid {
display: block;
}
#goto-anything-wrapper {
#goto-anything {
left: 5%;
width: 90%;
}
#goto-anything-button {
display: block;
}
}
aside#sidebar {
width: $width-sidebar-collapsed;
.label {
display: none;
}
}
body.logged-in {
.container {
max-width: $width-wrapper + $width-sidebar-collapsed;
}
#wrapper {
margin-left: $width-sidebar-collapsed;
}
}
}
/* === Helpers === */
.bg-content { @include color-assign(background-color, surface); }
.bg-base { @include color-assign(background-color, background); }