oliverbooth/oliverbooth.dev
oliverbooth
/
oliverbooth.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

style: add side-wide SCSS

This commit is contained in:
Oliver Booth 2023-08-04 12:31:05 +01:00
parent 6c04fd1bf1
commit 567a47c62e
Signed by: oliverbooth
GPG Key ID: 725DB725A0D9EE61
3 changed files with 159 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
oliverbooth.dev/Pages/Shared/_Layout.cshtml
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
@ -6,6 +6,7 @@
<title>@ViewData["Title"] - oliverbooth.dev</title>
<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.min.css" asp-append-version="true"/>
<link rel="stylesheet" href="~/oliverbooth.dev.styles.css" asp-append-version="true"/>
</head>
<body>

22
oliverbooth.dev/wwwroot/css/site.css
View File

@ -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
View 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;
}