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 }}
|
<meta name="description" content="{{ . }}">{{ end }}
|
||||||
{{ with .Site.Params.author }}
|
{{ with .Site.Params.author }}
|
||||||
<meta name="author" content="{{ . }}">{{ end }}
|
<meta name="author" content="{{ . }}">{{ end }}
|
||||||
<link rel="stylesheet" href="assets/style.css">
|
<link rel="stylesheet" href="/assets/style.css">
|
||||||
{{ with .OutputFormats.Get "RSS" -}}
|
{{ with .OutputFormats.Get "RSS" -}}
|
||||||
{{ printf `
|
{{ printf `
|
||||||
<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
|
<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