now with only css!
This commit is contained in:
parent
3994295dae
commit
8e372be6b1
@ -1,4 +0,0 @@
|
||||
@font-face{
|
||||
font-family: FiraCode;
|
||||
src: url(fonts/FiraCode-Regular.ttf);
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
@use "variables" as vars;
|
||||
|
||||
.home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
&__content {
|
||||
text-align: justify;
|
||||
max-width: 850px;
|
||||
|
||||
img {
|
||||
border-radius: 16px;
|
||||
float: left;
|
||||
margin: 0 24px 16px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.home {
|
||||
&__content {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
@use "variables" as vars;
|
||||
|
||||
.single {
|
||||
&__title {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
color: vars.$color-orange-dark;
|
||||
}
|
||||
|
||||
&__date {
|
||||
color: vars.$color-yellow-dark;
|
||||
}
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
@use "variables" as vars;
|
||||
|
||||
.services {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// &__title {
|
||||
// }
|
||||
|
||||
&__list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.service {
|
||||
width: 45%;
|
||||
align-self: center;
|
||||
margin: 8px 0;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__text {
|
||||
padding: 2px;
|
||||
line-height: 24px;
|
||||
background: vars.$color-bg0_h;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
@use "variables" as vars;
|
||||
|
||||
.sidebar {
|
||||
width: 25%;
|
||||
max-width: 400px;
|
||||
// background-color: green;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin-left: -48px;
|
||||
padding: 8px;;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
// Colour
|
||||
$color-bg: #282828;
|
||||
$color-fg: #ebdbb2;
|
||||
$color-red-dark: #cc241d;
|
||||
$color-green-dark: #98971a;
|
||||
$color-yellow-dark: #d79921;
|
||||
$color-blue-dark: #458588;
|
||||
$color-purple-dark: #b16286;
|
||||
$color-aqua-dark: #689d6a;
|
||||
$color-grey-dark: #928374;
|
||||
$color-orange-dark: #d65d0e;
|
||||
$color-red: #fb4934;
|
||||
$color-green: #b8bb26;
|
||||
$color-yellow: #fabd2f;
|
||||
$color-blue: #83a598;
|
||||
$color-purple: #d3869b;
|
||||
$color-aqua: #8ec07c;
|
||||
$color-grey: #a89984;
|
||||
$color-orange: #fe8019;
|
||||
$color-bg0_h: #1d2021;
|
||||
$color_bg0_s: #32302f;
|
||||
$color-bg0: $color-bg;
|
||||
$color-bg1: #3c3836;
|
||||
$color-bg2: #504845;
|
||||
$color-bg3: #665c54;
|
||||
$color-bg4: #7c6f64;
|
||||
$color-fg0: #fbf1c7;
|
||||
$color-fg1: $color-fg;
|
||||
$color-fg2: #d5c4a1;
|
||||
$color-fg3: #bdae93;
|
||||
$color-fg4: #a89984;
|
||||
|
||||
// Layout
|
||||
$content-width-norm: 50%;
|
||||
$content-width-mid: 60%;
|
||||
$content-width-narrow: 80%;
|
||||
@ -1,165 +0,0 @@
|
||||
@use "variables" as vars;
|
||||
|
||||
@import "services";
|
||||
@import "me";
|
||||
@import "posts";
|
||||
@import "sidebar";
|
||||
@import "fonts";
|
||||
|
||||
body {
|
||||
color: vars.$color-fg;
|
||||
background: vars.$color-bg;
|
||||
font-family: FiraCode, monospace;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: FiraCode, monospace;
|
||||
}
|
||||
|
||||
pre code { white-space: pre-wrap; }
|
||||
|
||||
.content-wrapper {
|
||||
width: vars.$content-width-norm;
|
||||
padding: 0 calc((100% - #{vars.$content-width-norm}) / 2);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.content-wrapper {
|
||||
width: vars.$content-width-mid;
|
||||
padding: 0 calc((100% - #{vars.$content-width-mid}) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
.content-wrapper {
|
||||
width: vars.$content-width-narrow;
|
||||
padding: 0 calc((100% - #{vars.$content-width-narrow}) / 2);
|
||||
}
|
||||
|
||||
.main {
|
||||
flex-direction: column;
|
||||
|
||||
&__content {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: block;
|
||||
// background-color: red;
|
||||
|
||||
&__title {
|
||||
a,
|
||||
a:link,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: vars.$color-orange-dark !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__nav {
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-wrap:wrap;
|
||||
|
||||
&__item {
|
||||
margin-right: 32px;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
|
||||
&__content {
|
||||
width: 70%;
|
||||
// background-color: blue;
|
||||
}
|
||||
}
|
||||
|
||||
.summary {
|
||||
&__title {
|
||||
a,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: vars.$color-orange-dark;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: vars.$color-orange;
|
||||
}
|
||||
}
|
||||
|
||||
&__date {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&__time {
|
||||
&--created {
|
||||
color: vars.$color-aqua;
|
||||
}
|
||||
|
||||
&--edited {
|
||||
color: vars.$color-aqua-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
|
||||
h1 {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: auto 0 28px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
// background: purple;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
color: vars.$color-blue-dark;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: vars.$color-blue;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: vars.$color-green-dark;
|
||||
}
|
||||
@ -10,7 +10,7 @@
|
||||
<meta name="description" content="{{ . }}">{{ end }}
|
||||
{{ with .Site.Params.author }}
|
||||
<meta name="author" content="{{ . }}">{{ end }}
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
{{ with .OutputFormats.Get "RSS" -}}
|
||||
{{ printf `
|
||||
<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
|
||||
|
||||
279
static/assets/style.css
Normal file
279
static/assets/style.css
Normal file
@ -0,0 +1,279 @@
|
||||
:root {
|
||||
--color-bg: #282828;
|
||||
--color-fg: #ebdbb2;
|
||||
--color-red-dark: #cc241d;
|
||||
--color-green-dark: #98971a;
|
||||
--color-yellow-dark: #d79921;
|
||||
--color-blue-dark: #458588;
|
||||
--color-purple-dark: #b16286;
|
||||
--color-aqua-dark: #689d6a;
|
||||
--color-grey-dark: #928374;
|
||||
--color-orange-dark: #d65d0e;
|
||||
--color-red: #fb4934;
|
||||
--color-green: #b8bb26;
|
||||
--color-yellow: #fabd2f;
|
||||
--color-blue: #83a598;
|
||||
--color-purple: #d3869b;
|
||||
--color-aqua: #8ec07c;
|
||||
--color-grey: #a89984;
|
||||
--color-orange: #fe8019;
|
||||
--color-bg0_h: #1d2021;
|
||||
--color_bg0_s: #32302f;
|
||||
--color-bg0: #282828;
|
||||
--color-bg1: #3c3836;
|
||||
--color-bg2: #504845;
|
||||
--color-bg3: #665c54;
|
||||
--color-bg4: #7c6f64;
|
||||
--color-fg0: #fbf1c7;
|
||||
--color-fg1: #ebdbb2;
|
||||
--color-fg2: #d5c4a1;
|
||||
--color-fg3: #bdae93;
|
||||
--color-fg4: #a89984;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: FiraCode;
|
||||
src: url(/fonts/FiraCode-Regular.ttf);
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--color-fg);
|
||||
background: var(--color-bg);
|
||||
font-family: FiraCode, monospace;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: FiraCode, monospace;
|
||||
}
|
||||
|
||||
pre code {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.content-wrapper {}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: block;
|
||||
|
||||
.header__title {
|
||||
|
||||
a,
|
||||
a:link,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: var(--color-orange-dark) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.header__nav {
|
||||
.header__nav__list {
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
|
||||
.header__nav__list__item {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.summary {
|
||||
.summary__title {
|
||||
|
||||
a,
|
||||
a:link,
|
||||
a:visited {
|
||||
color: var(--color-orange-dark);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-orange);
|
||||
}
|
||||
}
|
||||
|
||||
.summary__date {
|
||||
margin-bottom: 8px;
|
||||
|
||||
.summary__date__time {
|
||||
.summary__date__time--created {
|
||||
color: var(--color-aqua);
|
||||
}
|
||||
|
||||
.summary__date__time--edited {
|
||||
color: var(--color-aqua-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.list__title {
|
||||
display: flex;
|
||||
|
||||
h1 {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: auto 0 28px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited,
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
color: var(--color-blue-dark);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: var(--color-green-dark);
|
||||
}
|
||||
|
||||
/* ME */
|
||||
|
||||
.home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
.home__content {
|
||||
text-align: justify;
|
||||
max-width: 850px;
|
||||
|
||||
img {
|
||||
border-radius: 16px;
|
||||
float: left;
|
||||
margin: 0 24px 16px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* POSTS */
|
||||
|
||||
.single {
|
||||
.single__title {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
color: var(--color-orange-dark);
|
||||
}
|
||||
|
||||
.single__date {
|
||||
color: var(--color-yellow-dark);
|
||||
}
|
||||
}
|
||||
|
||||
/* SIDEBAR */
|
||||
|
||||
.sidebar {
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin-left: -48px;
|
||||
padding: 8px;
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* SERVICES */
|
||||
|
||||
.services {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
/* .services__title {} */
|
||||
|
||||
.services__list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.service {
|
||||
width: 45%;
|
||||
align-self: center;
|
||||
margin: 8px 0;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.service__text {
|
||||
padding: 2px;
|
||||
line-height: 24px;
|
||||
background: var(--color-bg0_h);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.main__content {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 25%;
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.main {
|
||||
.main__content {
|
||||
width: 74%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.content-wrapper {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
;
|
||||
Loading…
Reference in New Issue
Block a user