<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<style>
/*
* Remove items from // Reset styles and hide elements
.nodeco { text-decoration:Atlassian for a cleaner Portal aspect.
*/
.ia-splitter-left, #main-header, .page-metadata, #likes-and-labels-container, #comments-section, #footer, .aui-nav li { display: none !important; }
.ia-splitter { border:none !important }
.nodeco i#editPageLink { text-align:center; font-size:6em; color:#2A7886display:inline-block !important; }
#header { position: absolute !important; width: 100vw !important; z-index: 99 !important; }
#main { margin:0 .nodeco:hover { text-decoration!important; width:100vw !important; height: 100vh !important; padding-top: 10vh !important; border:none !important; }
#content { .nodeco:hover ipadding: 0 !important; }
#CSUCHPCPortal-HPCPORTAL { color:rgba(42,120,134,0.9)font-size: 3em !important; textfont-decorationweight:nonebold !important; }
.flex { display:flex; }
.column { flex-direction:column; }
.justbwn { justify-content:space-between; }
.justrnd { justify-content:space-around; }
.ia-splitter-left, #main-header, .page-metadata, #likes-and-labels-container, #comments-section, #footer, .aui-nav li { display: none !important; }
#editPageLink { display:inline-block !important; }
#main { margin:0 !important; height:94.5vh !important; border:none !important; }
.ia-splitter { border:none !important }
h1:last-child { font-size: 3em !important; font-weight:bold !important; margin-top: 5% !important; }
#hpc-icons { max-width:60vw; margin:auto; }
.hpc-icon { width: 20%; min-width:180px; text-align:center;}
/*
* Style HPC alert items.
*/
.grid-alert {
display: grid;
grid-template-columns: 1fr 1fr 7fr 2fr;
grid-gap: 0 10px;
grid-template-areas: ". a b ."
}
#alert-icon { grid-area: a;}
#alert-message { grid-area: b;}
@media (max-width: 600px) {
.grid-alert {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(2, auto);
grid-gap: 10px 0;
grid-template-areas: "a"
"b";
justify-self: center;
text-align: center;
}
#alert-icon i { font-size:1em;}
}
/*
* Style HPC navigation items.
*/
.grid-nav {
display: grid;
grid-template-columns: 1fr repeat(3, 3fr) 1fr;
grid-template-rows: 1fr;
grid-gap: 0 10px;
grid-template-areas: ". a b c .";
}
@media (max-width: 600px) {
.grid-nav {
display: grid;
grid-template-columns: 1fr 9fr 1fr;
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px 0;
grid-template-areas: ". a ."
". b ."
". c .";
}
}
.hpc-nav-item {
align-self: center;
justify-self: center;
text-align: center;
text-decoration: none !important;
}
#support { grid-area: a; }
#docs{ grid-area: b; }
#stats{ grid-area: c; }
.hpc-nav-item i {
font-size: 6em;
color: #2A7886;
padding: 10px;
}
.hpc-nav-item:hover i {
color: rgba(42,120,134,0.9);
}
.hpc-nav-item p {
font-size: 1.8em;
color: black;
padding: 10px;
}
.hpc-nav-item:hover p {
color: rgba(0,0,0,0.8);
}
</style>
<span<div idclass="hpcgrid-iconsnav">
<div class="hpc-nav-item"flex justbwnid="support">
<a href="https://servicedesk.csuc.cat/servicedesk/customer/portal/10" class="nodeco flex column justrnd hpc-icon">
>
<i class="fas fa-question-circle"></i>
<p>Support</p>
<h2 style="text-align:center;font-size:1.8em">Support</br><span style="font-size:0.7em">(with registration)</span></h2>
</a>
<a </a>
<a href="https://servicedesk.csuc.cat/servicedesk/customer/portal/10/user/forgotpassword">(With registration, forgot your password?)</a>
</div>
<a class="hpc-nav-item" id="docs" href="https://confluence.csuc.cat/display/HPCKB/HPC+Knowledge+Base" class="nodeco flex column justrnd hpc-icon">
>
<i class="fas fa-book"></i>
<h2 style="text-align:center;font-size:1.8em">Documentation</h2> <p>Documentation</p>
</a>
<a <a class="hpc-nav-item" id="stats" href="https://confluence.csuc.cat/display/HPCKB/HPC+Stats" class="nodeco flex column justrnd hpc-icon">
>
<i class="fas fa-chart-bar"></i>
<h2 style="text-align:center;font-size:1.8em">Status</br></h2>
<p>Status</p>
</a>
</span>div> |