Skip to content

Commit

Permalink
🚀 | Merged CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@xbubbo
xbubbo authored Oct 22, 2023
1 parent 7d65a29 commit 1fc2e36
Show file tree
Hide file tree
Showing 7 changed files with 259 additions and 281 deletions.
4 changes: 1 addition & 3 deletions static/apps.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@
<link rel="canonical" href="https://www.space.com/news">
<!-- Site Stylesheets -->
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/nav.css">
<link rel="stylesheet" href="/css/card.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<!-- Main Site Scripts -->
<script src="/scripts/index.js"></script>
Expand All @@ -25,7 +23,7 @@
<body>
<!-- Nav Bar Start-->
<div class="fixed-nav-bar">
<a class="logo" href="/./"><img id="INImg" src="main.png"></a>
<a class="icon" href="/./"><img id="INImg" src="main.png"></a>
<div class="fixed-nav-bar-right">
<a class="navbar-link" href="/./algebra"><i class="fa-solid fa-gamepad navbar-icon"></i>Games</a>
<a class="navbar-link" href="/./news"><span class="material-symbols-outlined weird-icon">apps</span>Apps</a>
Expand Down
100 changes: 0 additions & 100 deletions static/css/card.css
View file

This file was deleted.

250 changes: 250 additions & 0 deletions static/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,253 @@ body {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: white;
}

.fixed-nav-bar {
position: fixed;
top: 0;
letter-spacing: 2px;
font-size: 22px;
left: 0;
right: 0;
min-height: 13vh;
padding: 0 25px;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.02);
box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.5);
backface-visibility: visible;
transition: 0.35s ease;
z-index: 100;
backdrop-filter: blur(10px);
}

.fixed-nav-bar .icon:hover {
transform: translateY(-55%) scale(1.03);
font-weight: 800;
}

.fixed-nav-bar .icon {
position: absolute;
top: 50%;
transform: translateY(-50%) scale(1);
text-transform: uppercase;
font-size: 30px;
font-family: 'Inter', sans-serif;
cursor: pointer;
color: white;
font-weight: 600;
margin-left: 5px;
font-style: normal;
text-decoration: none;
transition: all 0.2s ease;
}

.fixed-nav-bar-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-transform: uppercase;
font-size: 18px;
color: white;
font-weight: 600;
right: 2%;
}

.time {
position: absolute;
top: 50%;
left: 50%;
text-transform: uppercase;
transform: translateY(-50%) translateX(-50%);
font-size: 3.3vh;
color: white;
font-weight: 600;
text-align: center;
cursor: default;
user-select: none;
}

.fixed-nav-bar-right .navbar-link {
margin-left: 10px;
text-transform: uppercase;
font-size: 2.5vh;
cursor: pointer;
color: white;
font-weight: 800;
right: 2%;
font-family: 'Inter', sans-serif;
font-style: normal;
text-decoration: none;
transition: all 0.2s ease;
transform: translateX(0%);
}
@media (orientation: portrait) {
.fixed-nav-bar-right .navbar-link {
margin-left: 10px;
text-transform: uppercase;
font-size: 2.5vw;
cursor: pointer;
color: white;
font-weight: 800;
right: 2%;
font-family: 'Inter', sans-serif;
font-style: normal;
text-decoration: none;
transition: all 0.2s ease;
transform: translateX(0%);
}
.fixed-nav-bar-right .navbar-link:hover {
text-transform: uppercase;
cursor: pointer;
font-weight: 800;
font-family: 'Inter', sans-serif;
font-style: normal;
font-size: 3vw;
transform: translateX(-20%);
}
}

.fixed-nav-bar-right .navbar-link:hover {
text-transform: uppercase;
cursor: pointer;
font-weight: 800;
font-family: 'Inter', sans-serif;
font-style: normal;
font-size: 3vh;
transform: translateX(-20%);
}

.navbar-icon {
margin-right: 5px;
transition: all 0.2s ease;
}

.weird-icon {
line-height: 150px;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
margin-bottom: 5px;
}

.navbar-link {
margin-right: 5px;
font-size: 3vh;
}

.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.navbar-link:hover > .settings-icon {
animation: spin 0.5s;
animation-timing-function: cubic-bezier(0, 1.04, 0.91, 0.99);
}

@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
img {
width: 6vh;
padding-top: 5px;
}
@media (orientation: portrait) {
img {
width: 6vw;
}
}

.column {
width: 145px;
transition: all 0.2s ease;
cursor: pointer;
background: #4545459e;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
margin: 0;

}

.column img {
position: absolute;
width: 145px;
height: 145px;
border-radius: 0px;
transition: all 0.2s ease;
border-radius: 10px;
}

.column p {
width: 145px;
height: 19px;
font-style: normal;
font-weight: 800;
font-size: 18px;
line-height: 19px;
text-align: center;
color: #ffffff;
text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
padding-top: 136px;
padding-bottom: 12px;
}

.column:hover {
transform: scale(1.2);
}

.column:hover .label {
transform: translateX(-50%) scale(1.3);
}

.input-container {
position: relative;
margin-top: 150px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5em;
}

input {
padding: 20px;
width: 550px;
border-radius: 5px;
background: #353535;
text-align: center;
font-size: 24px;
border: none;
outline: none;
color: white;
}

select {
padding: 20px;
border-radius: 5px;
background: #353535;
color: white;
font-size: 20px;
border: 0px;
outline: none;
cursor: pointer;
}
.container-apps {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2.3em;
flex-direction: row;
}
.pinned-apps {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2.3em;
}
Loading

9 comments on commit 1fc2e36

@hop-deploy
Copy link

@hop-deploy hop-deploy bot commented on 1fc2e36 Oct 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deployment Status Build Logs Updated At
instell ✅ Deployed View Logs 2023-10-22T22:40:40.636Z

@hop-deploy
Copy link

@hop-deploy hop-deploy bot commented on 1fc2e36 Oct 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deployment Status Build Logs Updated At
interstellar ✅ Deployed View Logs 2023-10-22T22:40:41.657Z

@hop-deploy
Copy link

@hop-deploy hop-deploy bot commented on 1fc2e36 Oct 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deployment Status Build Logs Updated At
we-love-art ✅ Deployed View Logs 2023-10-22T22:40:46.941Z

@hop-deploy
Copy link

@hop-deploy hop-deploy bot commented on 1fc2e36 Oct 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deployment Status Build Logs Updated At
your-mom ✅ Deployed View Logs 2023-10-22T22:41:05.187Z

@hop-deploy
Copy link

@hop-deploy hop-deploy bot commented on 1fc2e36 Oct 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deployment Status Build Logs Updated At
interstellar ✅ Deployed View Logs 2023-10-22T22:41:12.856Z

@hop-deploy
Copy link

@hop-deploy hop-deploy bot commented on 1fc2e36 Oct 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deployment Status Build Logs Updated At
st3llar ❌ Failed View Logs 2023-10-22T22:41:25.621Z

@hop-deploy
Copy link

@hop-deploy hop-deploy bot commented on 1fc2e36 Oct 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deployment Status Build Logs Updated At
interstellar ✅ Deployed View Logs 2023-10-22T22:41:35.672Z

@hop-deploy
Copy link

@hop-deploy hop-deploy bot commented on 1fc2e36 Oct 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deployment Status Build Logs Updated At
interstellar ✅ Deployed View Logs 2023-10-22T22:41:47.479Z

@hop-deploy
Copy link

@hop-deploy hop-deploy bot commented on 1fc2e36 Oct 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deployment Status Build Logs Updated At
interstellar-v5 ✅ Deployed View Logs 2023-10-22T22:41:48.631Z

Please sign in to comment.