keyemail/keyemail-dev
1
2
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Commment Section & Designs

Browse source
This commit is contained in:
Keyemail 2024-05-05 20:24:26 -07:00
parent 8eda99ae06
commit a07e1aeffe
1 changed files with 64 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/views/HomePage.vue
View file

@ -11,7 +11,32 @@
<p>I specialize in IT and web development-related stuff, but I also love doing a variety of different hobbies such as Flight Simulator, or learning Japanese. I daily run an Arch Linux machine as my main system and support Linux in every way. I'm glad to meet you! </p> <p>I specialize in IT and web development-related stuff, but I also love doing a variety of different hobbies such as Flight Simulator, or learning Japanese. I daily run an Arch Linux machine as my main system and support Linux in every way. I'm glad to meet you! </p>
</div> </div>
<article> <article>
<h1>Comments!</h1> <h1>Comments! Please leave one!</h1>
<div>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello! this is a very long text thats suppose to take the entire screen so we can see how it handles mutiple if not triple the amount of lines it suppose to use.</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
<span>Me: Hello!</span>
</div>
<input type="text" placeholder="Start Typing.." required minlength="1"/>
</article> </article>
</div> </div>
</template> </template>
@ -70,6 +95,9 @@ header h1 {
width: 750px; width: 750px;
color: white; color: white;
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;
background-color: #151d2f;
border-radius: 10px;
padding: 20px;
} }
.intro h1 { .intro h1 {
@ -87,9 +115,9 @@ header h1 {
} }
article { article {
background-color: #101a30; background-color: #151d2f;
height: 250px; height: 350px;
width: 430px; width: 630px;
margin: 90px 0; margin: 90px 0;
border-radius: 10px; border-radius: 10px;
padding: 20px; padding: 20px;
@ -99,6 +127,38 @@ article h1 {
font-size: 1.5rem; font-size: 1.5rem;
color: white; color: white;
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;
width: 100%;
text-align: center;
}
article div {
color: white;
font-family: 'Rubik', sans-serif;
font-weight: 300;
margin-top: 10px;
display: flex;
flex-direction: column-reverse;
overflow: auto;
max-height: 240px;
background-color: #111826;
padding: 10px;
border-radius: 10px;
}
article span {
margin: 8px 0;
}
article input {
all: unset;
margin-top: 10px;
background-color: #111826;
height: 40px;
color: white;
padding: 5px;
border-radius: 10px;
width: 100%;
box-sizing: border-box;
} }
@media screen and (max-width: 450px){ @media screen and (max-width: 450px){