ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 15:45:05 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Center play buttons

Browse source
This commit is contained in:
Thomas Smith 2023-02-08 16:54:12 -05:00
parent 14a6b5c2c7
commit a663fa8ea4
3 changed files with 48 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/layouts/index.html
View file

@ -152,6 +152,11 @@
margin-right: 5px; margin-right: 5px;
} }
#hero-terminal-content{
min-height: 0px !important;
max-height: none !important;
}
.terminal{ .terminal{
height: auto; height: auto;
min-height: 40%; min-height: 40%;
@ -303,7 +308,9 @@
</div> </div>
<div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3"> <div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
<code id="terminal-output-2"> <code id="terminal-output-2">
{{- partial "play-btn" -}} <div style="margin-top: 15%;">
{{- partial "play-btn.html" -}}
</div>
</code> </code>
</div> </div>
</div> </div>
@ -476,7 +483,9 @@ Created next project successfully
</div> </div>
<div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3"> <div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
<code id="terminal-output-3"> <code id="terminal-output-3">
{{- partial "play-btn.html" -}} <div style="margin-top: 15%;">
{{- partial "play-btn.html" -}}
</div>
</code> </code>
</div> </div>
</div> </div>
@ -555,7 +564,9 @@ EOF
</div> </div>
<div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3"> <div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3">
<code id="terminal-output-4"> <code id="terminal-output-4">
{{- partial "play-btn.html" -}} <div style="margin-top: 15%;">
{{- partial "play-btn.html" -}}
</div>
</code> </code>
</div> </div>
</div> </div>
@ -620,19 +631,35 @@ EOF
position: fixed; position: fixed;
width: 100%; width: 100%;
} }
.feature-terminal{ @media only screen and (max-width: 768px) {
width: 100%; .feature-terminal{
min-height: 400px; width: 100%;
border: 2px solid gray; min-height: 250px;
background-color: #1a1a1a; border: 2px solid gray;
border-radius: 10px; background-color: #1a1a1a;
box-shadow: 0px 10px 18px #121212; border-radius: 10px;
animation: float 3s ease-in-out infinite; box-shadow: 0px 10px 18px #121212;
animation: float 3s ease-in-out infinite;
}
.terminal-content{
height: 250px;
}
} }
.terminal-content{ @media only screen and (min-width: 768px) {
overflow-y: auto; .terminal-content{
min-height:400px; overflow-y: auto;
max-height: 400px; min-height:400px;
max-height: 400px;
}
.feature-terminal{
width: 100%;
min-height: 400px;
border: 2px solid gray;
background-color: #1a1a1a;
border-radius: 10px;
box-shadow: 0px 10px 18px #121212;
animation: float 3s ease-in-out infinite;
}
} }
.speed-terminal{ .speed-terminal{
width: 100%; width: 100%;
@ -730,9 +757,9 @@ EOF
width: 1px; width: 1px;
height: 35px; height: 35px;
background-color: #949494; background-color: #949494;
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.circle-gray{ .circle-gray{
@ -745,8 +772,6 @@ EOF
margin-right: auto; margin-right: auto;
} }
</style> </style>
<div> <div>

2
src/layouts/partials/hero-terminal-animation.html
View file

@ -10,7 +10,7 @@
<div class="traffic-light"></div> <div class="traffic-light"></div>
</div> </div>
<div class="p-xl-5 p-lg-5 p-md-3 p-sm-3 p-3"> <div class="p-xl-5 p-lg-5 p-md-3 p-sm-3 p-3">
<div class="terminal-content"> <div class="terminal-content" id="hero-terminal-content">
<code id="terminal-output"></code> <code id="terminal-output"></code>
<p id="terminal-input"></p> <p id="terminal-input"></p>
</div> </div>

5
src/layouts/partials/play-btn.html
View file

@ -18,11 +18,10 @@
border-radius: 60px; border-radius: 60px;
display: block; display: block;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left:auto; margin-left:auto;
margin-right:auto; margin-right:auto;
margin-top: 100px;
position: relative; position: relative;
} }