style: add side-wide SCSS
This commit is contained in:
parent
6c04fd1bf1
commit
567a47c62e
@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
@ -6,6 +6,7 @@
|
|||||||
<title>@ViewData["Title"] - oliverbooth.dev</title>
|
<title>@ViewData["Title"] - oliverbooth.dev</title>
|
||||||
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"/>
|
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"/>
|
||||||
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
|
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
|
||||||
|
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/>
|
||||||
<link rel="stylesheet" href="~/oliverbooth.dev.styles.css" asp-append-version="true"/>
|
<link rel="stylesheet" href="~/oliverbooth.dev.styles.css" asp-append-version="true"/>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -1,22 +0,0 @@
|
|||||||
html {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
html {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
|
|
||||||
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
position: relative;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
157
oliverbooth.dev/wwwroot/css/site.scss
Normal file
157
oliverbooth.dev/wwwroot/css/site.scss
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
html, body {
|
||||||
|
background: #121212;
|
||||||
|
color: #f5f5f5;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
|
||||||
|
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
position: relative;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
&:link, &:visited, &:hover, &:active {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #03A9F4;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#site-title {
|
||||||
|
a {
|
||||||
|
&:link, &:visited, &:hover, &:active {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: 'Roboto Mono', monospace;
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
hr.page-separator {
|
||||||
|
border-top: 5px dashed #ffffff;
|
||||||
|
opacity: 1;
|
||||||
|
margin: 50px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.container {
|
||||||
|
max-width: 600px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.contact-reasons {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-left: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
&:link, &:visited, &:hover, &:active {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: #212121;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
a.btn, button {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 960px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
ul.site-nav {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 20px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: 24px;
|
||||||
|
|
||||||
|
&:link, &:visited, &:hover, &:active {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pre code span.line {
|
||||||
|
counter-increment: line;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: counter(line);
|
||||||
|
display: inline-block;
|
||||||
|
border-right: 1px solid #ddd;
|
||||||
|
padding: 0 .5em;
|
||||||
|
margin-right: .5em;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-ln-numbers {
|
||||||
|
user-select: none;
|
||||||
|
text-align: center;
|
||||||
|
color: #ccc;
|
||||||
|
vertical-align: top;
|
||||||
|
padding-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-ln-code {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user