[wip] website redesign

This commit is contained in:
Vri 🌈 2022-11-28 18:33:52 +01:00
parent 59e98e5274
commit c169972931
Signed by: vrifox
GPG key ID: D40098E5B60B2197
5 changed files with 198 additions and 0 deletions

9
assets/footer.scss Normal file
View file

@ -0,0 +1,9 @@
footer {
color: var(--text-secondary);
grid-area: footer;
a { color: var(--text-secondary); }
span {
padding: 17.6px 30px;
margin-right: auto;
}
}

40
assets/home.scss Normal file
View file

@ -0,0 +1,40 @@
#introduction {
align-items: center;
background: var(--vriish-gradient);
display: flex;
flex-direction: column;
padding: 3em 0;
gap: .5em;
justify-content: center;
z-index: 2;
h1, p {
margin: 0;
}
}
#latest-posts {
display: flex;
flex-direction: row;
gap: 1em;
hyphens: auto;
overflow-x: scroll;
.post-group {
background: var(--vriish-gradient);
border-radius: .5em;
display: flex;
flex-direction: column;
text-shadow: var(--vriish-gradient-shadow);
min-width: 15em;
width: 33.333%;
.title {
flex: auto;
margin: 1em;
}
aside {
margin: 1em;
}
}
a {
text-decoration: none;
}
}

79
assets/sidebar.scss Normal file
View file

@ -0,0 +1,79 @@
// -----------
// - sidebar -
// -----------
#sidebar {
background: var(--sidebar-background);
border-top: 2px solid var(--vriish-rose);
display: flex;
flex-direction: column;
grid-area: sidebar;
height: 100vh;
margin-top: -2px;
max-width: 300px;
position: sticky;
top: 0;
z-index: 1;
header {
text-align: center;
padding: 2em 1em;
#name {
margin: 0;
font-weight: bold;
font-size: 1.8em;
}
#information {
margin: 0;
font-size: .8em;
}
}
#sidebar-menu {
padding: 2em 1em;
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
border-radius: .5em;
margin: .25em 0;
padding: .25em .5em;
position: relative;
letter-spacing: .025em;
a {
text-shadow: 0 0 0 transparent;
transition: text-shadow .5s;
}
::after {
background: var(--vriish-gradient);
border-radius: .5em;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
transition: opacity .5s;
opacity: 0;
z-index: -1;
}
&.active {
background: var(--vriish-gradient);
a {
text-shadow: var(--vriish-gradient-shadow);
}
}
&:hover {
a {
text-shadow: var(--vriish-gradient-shadow);
}
::after {
opacity: 1;
}
}
}
a {
text-decoration: none;
}
}
}

32
assets/variables.scss Normal file
View file

@ -0,0 +1,32 @@
:root {
--background: hsl(210, 21%, 15%);
--border: hsl(210, 21%, 20%);
--text: hsl(210, 21%, 95%);
--text-2: hsl(210, 21%, 80%);
--text-secondary: hsl(210, 21%, 40%);
--sidebar-background: hsl(210, 21%, 10%);
--vriish-rose: hsl(0, 100%, 75%);
--orange: hsl(25, 100%, 75%);
--gold: hsl(50, 100%, 75%);
--emerald: hsl(130, 100%, 75%);
--sky: hsl(215, 100%, 75%);
--purpur: hsl(275, 100%, 75%);
--white: hsl(360, 100%, 100%);
--vriish-gradient: linear-gradient(30deg, var(--orange) -100%, var(--vriish-rose) 100%);
--vriish-gradient-shadow: 2px 2px 10px var(--background);
}
@media (prefers-color-scheme: light) {
:root {
--background: hsl(0, 100%, 97.5%);
--border: hsl(0, 100%, 90%);
--text: rgb(50, 40, 30);
--text-2: rgb(90, 80, 70);
--sidebar-background: hsl(0, 100%, 95%);
}
}

38
config.yaml Normal file
View file

@ -0,0 +1,38 @@
baseURL: "https://vrifox.cc/"
title: "Vris Cute Corner"
enableRobotsTXT: true
menu:
main:
- identifier: "home"
name: "Startseite"
pageref: "/"
weight: 1
- identifier: "skills"
name: "Kenntnisse"
pageref: "/kenntnisse/"
weight: 2
- identifier: "projects"
name: "Projekte"
pageref: "/portfolio/"
weight: 3
- identifier: "blog"
name: "Blog"
pageref: "/blog/"
weight: 4
#- identifier: "blogroll"
# name: "Empfehlungen"
# pageref: "/blogroll/"
# weight: 5
markup:
highlight:
anchorLineNos: false
lineNos: false
lineNumbersInTable: false
noClasses: false
style: "dracula"
tabWidth: 4
goldmark:
extensions:
linkify: false
renderer:
unsafe: true