ArKa/ArKa-Web
1
0
Fork 0
Code Issues Pull Requests Activity

UPDATE: blog style & content

Browse Source
This commit is contained in:
Oxbian
2023-12-06 20:39:45 +01:00
parent 1edc13b09b
commit df2d86f9a7
4 changed files with 85 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/fonts/BlockZone.ttf Normal file
View File

Binary file not shown.

65
assets/style/style.css
View File

@ -1,19 +1,24 @@
@font-face {
font-family: "BlockZone";
src: url("../fonts/BlockZone.ttf") format("truetype");
}
/* Root */
:root
{
/* Dark mode */
--dark-bg: #0d0d0d;
--dark-text: #ffdab9;
--dark-link: black;
--dark-bg: #191919;
--dark-text: #BBBBBB;
--dark-link: #191919;
--dark-link-bg: #f08080;
--dark-title: #f08080;
/* Light mode */
--light-bg: #ffdab9;
--light-text: #0d0d0d;
--light-link: black;
--light-link-bg: #f08080;
--light-title: #f08080;
--light-text: #191919;
--light-link: #191919;
--light-link-bg: #DE6E7C;
--light-title: #DE6E7C;
/* Default mode */
--bg-color: var(--dark-bg);
@ -31,9 +36,11 @@ body
color: var(--text-color);
border: 1px solid var(--link-bg-color);
font-size: calc(10px + 0.390625vw);
font-family: "BlockZone";
width: 90vw;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
text-align: center;
}
@ -123,7 +130,16 @@ h1, h2, h3, h4 {
}
h1 {
border-bottom: 1px solid var(--title-color);
width: 80%;
margin: 0 auto;
text-align: center;
border: 1px solid var(--title-color);
}
main div.h1-content {
width: 80%;
margin: 0 auto;
}
#contact ul
@ -131,21 +147,20 @@ h1 {
margin-bottom: 2vh;
}
/* Responsive design */
@media screen and (max-width: 700px)
{
body
{
font-size: 10px;
font-size: 10px;
}
}
@media screen and (max-width: 500px)
@media screen and (max-width: 600px)
{
nav ul, #contact ul
{
flex-direction: column;
gap: 0.5rem;
flex-direction: column;
gap: 0.5rem;
}
}
@ -154,11 +169,11 @@ h1 {
{
:root
{
--bg-color: var(--dark-bg);
--text-color: var(--dark-text);
--link-color: var(--dark-link);
--link-bg-color: var(--dark-link-bg);
--title-color: var(--dark-title);
--bg-color: var(--dark-bg);
--text-color: var(--dark-text);
--link-color: var(--dark-link);
--link-bg-color: var(--dark-link-bg);
--title-color: var(--dark-title);
}
}
@ -167,10 +182,10 @@ h1 {
{
:root
{
--bg-color: var(--light-bg);
--text-color: var(--light-text);
--link-color: var(--light-link);
--link-bg-color: var(--light-link-bg);
--title-color: var(--light-title);
--bg-color: var(--light-bg);
--text-color: var(--light-text);
--link-color: var(--light-link);
--link-bg-color: var(--light-link-bg);
--title-color: var(--light-title);
}
}