Skip to content

Commit

Permalink
theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@BurntWaffleCake
BurntWaffleCake committed Sep 20, 2023
1 parent aa42e40 commit 42d36d0
Show file tree
Hide file tree
Showing 3 changed files with 173 additions and 24 deletions.
Binary file added Lora-VariableFont_wght.ttf
View file
Binary file not shown.
129 changes: 113 additions & 16 deletions articlestylesheet.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
html {
scroll-behavior: smooth;
height: 100%;
}

Expand All @@ -11,72 +12,164 @@ body {
padding: 0%;
margin: 0%;

max-height: 100vh;

background-color: rgb(101, 101, 101);
}

#global-nav {
box-sizing: border-box;
position: sticky;
display: flex;
flex-direction: row;
justify-content: center;
gap: .5em;
gap: .05em;

height: 50px;
height: 4.5em;
width: 100%;
background-color: rgb(143, 143, 143)
padding: 0.5em;

background-color: #1e1e1e;
}

#global-nav-icon {
margin-right: auto;
height: 100%;
}

@font-face {
font-family: myFirstFont;
src: url(Lora-VariableFont_wght.ttf);
}

.global-nav-link {
width: 7.5rem;
display: flex;
align-items: center;
justify-content: center;

/* width: 6rem; */
padding-left: 2em;
padding-right: 2em;
margin: .3em;
border-radius: 2em;
border: 3px solid #a688fa;

text-decoration: none;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #a688fa;
font-weight: bolder;

text-align: center;
vertical-align: middle;
padding: auto;
background-color: lightgray;

background-color: #282828;
transition: 500ms;
}

.global-nav-link:hover {
background-color: #575757;
color: white;
}

#global-nav-extra {
width: 10rem;
margin-left: auto;
background-color: red;
background-color: transparent;
}

#article-body {
display: flex;
flex-grow: 1;
background-color: gray;
background-color: #282828;
background-image: radial-gradient(circle, #282828);
overflow: hidden;
}

#article-nav {
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;

flex-direction: column;
width: 15em;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 15em;
background-color: rgb(169, 169, 169);

background-image: linear-gradient(to left, transparent, #1d1d1d);
}

.article-nav-link {
display: block;
display: flex;
align-items: center;

padding: .5em;
padding-left: 25px;
width: 100%;
height: 3em;
background-color: rgb(151, 151, 151);
text-align: center;
height: 1.5em;

text-decoration: none;
font-size: large;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

background-image: linear-gradient(to left, transparent, transparent);
color: #d4c2ff;
}

.article-nav-header {
display: flex;
align-items: center;
margin: 0%;
padding-left: 25px;
width: 100%;

font-size: x-large;
font-weight: bold;
text-decoration: underline;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

background-image: linear-gradient(to left, transparent, transparent);
color: #d4c2ff;
}

.article-nav-link:hover {
background-color: white;
background-image: linear-gradient(to left, transparent, #3f3f3f);
}

#article-body article {
flex-grow: 1;
padding: 5em;

background-color: pink;
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: #1d1d1d transparent;

font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: x-large;
text-align: justify;
color: #ba9ffb;
line-height: 1.5em;

background-color: transparent;
}

#article-body h1 {
margin-top: 0%;
overflow-wrap: break-word;
text-align: center;
font-size: 3em;
line-height: 1em;
}

#bookmark4 {
scroll-behavior:smooth;
}

@media screen and (max-width: 1000px) {
#article-bookmarks {
visibility: hidden;
display: none;
}
}

#article-bookmarks {
Expand All @@ -85,5 +178,9 @@ body {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 15em;
background-color: rgb(169, 169, 169);
background-color: transparent;
}

#article-bookmarks .article-nav-link:hover {
background-image: linear-gradient(to right, transparent, #3f3f3f);
}
68 changes: 60 additions & 8 deletions templateArticle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,33 +9,85 @@
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./articlestylesheet.css">
<link rel="stylesheet" href="https://fonts.google.com/specimen/Lora">
</head>

<body>
<nav id="global-nav">
<img id="global-nav-icon" src="https://www.ivins.com/wp-content/uploads/2020/09/placeholder-1.png">
<a class="global-nav-link" href="">Link1</a>
<a class="global-nav-link" href="">Link2</a>
<img id="global-nav-icon" src="https://placeholderlogo.com/img/placeholder-logo-1.png">
<a class="global-nav-link" href="">Classes</a>
<a class="global-nav-link" href="">Blog</a>
<a class="global-nav-link" href="">Link3</a>
<div id="global-nav-extra"></div>
</nav>

<div id="article-body">
<nav id="article-nav">
<a href="" class="article-nav-link">Link1</d>
<p class="article-nav-header">Header</p>
<a href="" class="article-nav-link">Link1</a>
<a href="" class="article-nav-link">Link2</a>
<a href="" class="article-nav-link">Link3</a>
<hr style="width: 50%;" />
<p class="article-nav-header">Header2</p>
<a href="" class="article-nav-link">Link1</a>
<a href="" class="article-nav-link">Link2</a>
<a href="" class="article-nav-link">Link3</a>
<hr style="width: 50%;" />
<p class="article-nav-header">Header3</p>
<a href="" class="article-nav-link">Link1</a>
<a href="" class="article-nav-link">Link2</a>
<a href="" class="article-nav-link">Link3</a>
</nav>

<article>
This is some text

<article id="article-contents">
<h1>This is a header1</h1>
<h2>This is a header2</h2>
<h3>This is a header3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Gravida in
fermentum et sollicitudin ac orci. Sem integer vitae justo eget. Sit amet justo donec enim diam. Vel
risus commodo viverra maecenas accumsan. Integer eget aliquet nibh praesent tristique. Vitae aliquet nec
ullamcorper sit. Suspendisse sed nisi lacus sed. Laoreet sit amet cursus sit amet dictum sit amet justo.
Molestie ac feugiat sed lectus vestibulum mattis. Rhoncus est pellentesque elit ullamcorper dignissim
cras tincidunt lobortis feugiat.
</p>
<p>
Sem integer vitae justo eget magna fermentum iaculis eu non. Magna etiam tempor orci eu. Commodo
ullamcorper a lacus vestibulum sed. Ut sem nulla pharetra diam. Dictum sit amet justo donec. Et pharetra
pharetra massa massa ultricies mi quis hendrerit. Turpis nunc eget lorem dolor sed viverra ipsum. Mattis
pellentesque id nibh tortor id aliquet lectus proin nibh. Pharetra convallis posuere morbi leo urna
molestie at elementum eu. Egestas dui id ornare arcu. Viverra suspendisse potenti nullam ac tortor vitae
purus faucibus ornare. Dignissim enim sit amet venenatis urna cursus eget. Nisl purus in mollis nunc sed
id semper risus. Nulla pharetra diam sit amet nisl suscipit adipiscing. Quis imperdiet massa tincidunt
nunc pulvinar sapien et ligula. A scelerisque purus semper eget duis at. In nibh mauris cursus mattis
molestie.
</p>
<p>
Tortor at auctor urna nunc id. Dictum sit amet justo donec enim diam vulputate ut. Pellentesque habitant
morbi tristique senectus. Feugiat pretium nibh ipsum consequat. Lobortis feugiat vivamus at augue eget
arcu dictum varius. Rhoncus urna neque viverra justo nec ultrices dui. Morbi non arcu risus quis varius
quam quisque id. Consectetur adipiscing elit duis tristique sollicitudin. Integer enim neque volutpat ac
tincidunt. Magna fringilla urna porttitor rhoncus dolor purus. Ac turpis egestas maecenas pharetra
convallis. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Lorem mollis
aliquam ut porttitor leo a. Eget nunc lobortis mattis aliquam. Pellentesque elit eget gravida cum sociis
natoque penatibus et magnis. Ac ut consequat semper viverra nam.
</p>
<p id="bookmark4">
Nunc congue nisi vitae suscipit tellus. Fringilla urna porttitor rhoncus dolor purus. Justo nec ultrices
dui sapien eget mi proin sed. Massa massa ultricies mi quis hendrerit dolor magna eget est. Vulputate mi
sit amet mauris commodo quis imperdiet. Eu augue ut lectus arcu bibendum at varius vel pharetra. Morbi
tincidunt augue interdum velit euismod in pellentesque massa placerat. Mi in nulla posuere sollicitudin
aliquam. Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Massa id neque aliquam
vestibulum morbi blandit cursus. Dictum fusce ut placerat orci nulla pellentesque. Tincidunt lobortis
feugiat vivamus at augue. Cras sed felis eget velit aliquet sagittis id. Nunc id cursus metus aliquam
eleifend mi in nulla posuere. Accumsan sit amet nulla facilisi. Dolor purus non enim praesent elementum.

</p>
</article>

<nav id="article-bookmarks">
<a href="" class="article-nav-link">Link1</d>
<a href="#bookmark4" class="article-nav-link">Link1</a>
<a href="" class="article-nav-link">Link2</a>
<a href="" class="article-nav-link">Link3</a>
<a href="" class="article-nav-link">Link1</a>
Expand Down

0 comments on commit 42d36d0

Please sign in to comment.