[wip] website redesign
This commit is contained in:
parent
59e98e5274
commit
c169972931
GPG key ID:
D40098E5B60B2197
5 changed files with 198 additions and 0 deletions
9
assets/footer.scss
Normal file
9
assets/footer.scss
Normal 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
40
assets/home.scss
Normal 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
79
assets/sidebar.scss
Normal 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
32
assets/variables.scss
Normal 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
38
config.yaml
Normal 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
|
||||
Loading…
Reference in a new issue