Skip to content

Instantly share code, notes, and snippets.

@oauo

oauo/index.pug

Last active September 9, 2020 20:34
Show Gist options
  • Save oauo/5d055b04cc603f50ca33a1deccdf1aca to your computer and use it in GitHub Desktop.
Save oauo/5d055b04cc603f50ca33a1deccdf1aca to your computer and use it in GitHub Desktop.
Download ZIP
maplist 1 #tf2
Raw
index.pug
#app
.activeserver
.info
button.join.fas.fa-sign-in
.left
.subtitle Active server
.name TF2Maps.net | Frankfurt
.right
.current 22
.seperator /
.max 24
.notice
i.fas.fa-megaphone
| Maps being played are part of the 72hr Jam
.map
.icon
img.icon(src="https://tf2maps.net/data/resource_icons/9/9935.jpg")
.container
.title
a(title="Spellway!" href="https://tf2maps.net/downloads/koth_spillway_event.9935/" target="_blank")
.gamemode koth
.joiner _
.name spillway_event
.joiner _
.version.release rc4
button.copy.fas.fa-clipboard
button.copy.fas.fa-arrow-alt-to-bottom
.user by
a.username(display="19" href="https://tf2maps.net/members/pont.29052/" target="_blank") pont
.note
i.fas.fa-megaphone
| low priority
.date Last Sunday at 1:30 PM
.row
.players
.player.starred
i.fas.fa-star
| Lo-fi Longcat
.player
| idk someone
.player Sandwhip
.player Username
.player Some User
.player Raccoons
.player Username
.player Some User
.player A User
.player Username
.player Some User
.player A User
.player Username
.player Some User
.player A User
.player Raccoons Again
.player Username
.player Some User
.player A User
button.toggle.fas.fa-eye-slash
.map
.icon
img.icon(src="https://tf2maps.net/data/resource_icons/10/10124.jpg")
.container
.title
a(title="A HellTower based karting race" href="https://tf2maps.net/downloads/10124/" target="_blank")
.gamemode plr
.joiner _
.name kartingtower
.joiner _
.version.release a4
button.copy.fas.fa-clipboard
.user by
a.username(display="2" href="https://tf2maps.net/members/33837/" target="_blank") [GIB] Kapwiing
.note
i.fas.fa-megaphone
| Jam Map Final Version with all custom content and aclipping issue fixed Contains halloween karts
.date Yesterday at 5:42 PM
.map
.container
.title
a(href="https://www.dropbox.com/s/x2osugfzvtovk6w/ctf_diggy.bsp?dl=1" target="_blank")
.gamemode ctf
.joiner _
.name diggy
button.copy.fas.fa-clipboard
.user by
a.username(display="2" href="https://tf2maps.net/members/33837/" target="_blank") Gruppy#8970
.date Yesterday at 8:17 PM
.map
.container
.title
a(title="A HellTower based karting race" href="https://tf2maps.net/downloads/sheol.10319/download?version=26307" target="_blank")
.gamemode arena
.joiner _
.name sheol
.joiner _
.version.release a1
button.copy.fas.fa-clipboard
.user by
a.username(display="2" href="https://tf2maps.net/members/33837/" target="_blank") scrly
.date Today at 10:51 PM
Raw
playground.json
{
"scripts": [],
"styles": [
"https://pro.fontawesome.com/releases/v5.13.1/css/all.css",
"https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css",
"https://fonts.googleapis.com/css2?family=Fira+Code&family=Open+Sans&display=swap"
]
}
Raw
script.js
//steam://run/440
//steam://connect/eu.tf2maps.net:27015
Raw
style.scss
:root {
--background:#23282E;
--background-transparent:rgba(35, 40, 46, 0.5);
--text:white;
--text-dim:#CCD1D9;
--card-background:#2C3339;
--card-text:var(--text);
--card-text-dim:var(--text-dim);
--card-background-grab:#262C32;
--card-text-grab:#3C4349;
--input-background:#15191C;
--input-text:var(--text);
--button-red-hover:#D8334A;
--button-red-light:#ED5565;
--button-red-dark:#BF263C;
--welcome-point:#FFCE54;
--checkbox-enabled:#5D9CEC;
--match-summary:#AC92EC;
--button-text-disabled:#656D78;
--camera-height:6rem;
--grey:#656D78;
--swap-duration:1s;
}
body {
background:var(--background);
color:var(--text);
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
#app {
display: grid;
grid-gap:1rem;
width:calc(100% - 4rem);
max-width: 60rem;
margin:0 auto;
padding:2rem 0;
a {
color:inherit;
text-decoration:none;
}
button {
background:none;
border:none;
color:inherit;
}
.username[display] {
&[display="3"] {
color: #a832db;
}
&[display="4"] {
color:#d81a79;
}
&[display="19"] {
color: #04A50F
}
&[display="29"] {
color: #FF6A00
}
&[display="36"] {
color:#27d1bb;
}
}
.activeserver {
display: flex;
flex-direction: column;
background:linear-gradient(-20deg,#6A50A7, #8067B7);
border-radius: 1.5rem;
padding:1rem;
.info {
position: relative;
flex-grow: 1;
display:grid;
grid-gap: 1rem;
grid-template-columns: 1fr auto;
padding-bottom: 1rem;
button {
position: absolute;
top:-.5rem;
right:-.5rem;
width:2rem;
height:2rem;
background:white;
color:black;
border:none;
border-radius: 100%;
transform:translate(50%,-50%);
cursor: pointer;
outline:none;
box-shadow: 0 0 2rem -.5rem black;
transition:.25s;
&:hover {
box-shadow: 0 0 2rem 0rem white;
}
}
.left {
flex-grow: 1;
.subtitle {
font-size:0.9rem;
}
.name {
font-size: 1.5rem;
font-weight: bold;
}
}
.right {
display:flex;
flex-direction: row;
align-items: center;
font-size:1.5rem;
.current {
font-size: 2rem;
font-weight: bold;
}
.seperator, .max {
font-weight: 200;
}
}
.notice {
grid-column:span 2;
border-radius: .25rem;
padding:0 .5rem;
i {
margin-right:.5rem;
}
}
}
.map {
background-color:rgba(0,0,0,0.25);
box-shadow: none;
}
.row {
margin-top:1rem;
display:flex;
}
.players {
display:flex;
flex-wrap: wrap;
flex-grow:1;
border:0.125rem solid rgba(0,0,0,0.25);
border-radius: .5rem;
padding:.125rem;
.player {
display:inline-block;
padding:.25rem .5rem;
background:rgba(0,0,0,0.25);
margin:.125rem;
border-radius: .25rem;
cursor: pointer;
transition:.25s -.1s;
&:hover {
background:#ffffff40;
}
&.starred {
background:#ffffff;
color:black;
}
&.dislike {
background:#e0233c;
}
>i {
margin-right:.25rem;
}
}
}
.toggle {
width:2rem;
height:2rem;
margin:.125rem;
cursor: pointer;
}
}
.map {
display: flex;
flex-direction: row;
//min-height: 6rem;
//height:10vw;
max-height:8rem;
background-color:var(--card-background);
border-radius:.5rem;
box-shadow: 0 0 2rem -1rem black;
background-repeat: no-repeat;
background-size: 100% auto;
padding:.5rem;
.icon {
min-width: 8rem;
width:25%;
margin-right:.5rem;
@media only screen and (max-width:40rem) {
display:none;
}
img {
width:100%;
height:auto;
border-radius: .25rem;
margin-bottom:-3px;
}
}
.container {
flex-grow:1;
display: flex;
flex-direction: column;
.title {
font-size:1.25rem;
a {
>* {
display:inline;
}
}
.name {
font-weight: bold;
//padding:.15rem .5rem;
//background-color:rgba(0,0,0,0.25);
}
.joiner {
color:#AAB2BD;
}
/*.gamemode {
color:#E6E9ED;
}
.version{
&.alpha {
color:#ED5565;
}
&.beta {
color:#A0D468;
}
&.release {
color:#FFCE54;
}
&.final {
color:#4FC1E9;
}
}
.name {
font-weight: bold;
}*/
.copy {
position: relative;
width:2rem;
height:2rem;
cursor: pointer;
opacity:0.5;
transition:.25s -.1s;
outline:none;
font-size:1rem;
&:before {
position: relative;
top:-.1rem;
}
&:hover {
opacity:1;
}
&:active {
top:.125rem;
color:#8067B7;
}
}
}
.user {
.username {
font-weight: bold;
}
}
.note {
padding:.25rem .5rem;
background:rgba(0,0,0,0.25);
margin:.25rem 0;
border-radius: .25rem;
i {
margin-right:.5rem;
}
}
.date {
margin-top:auto;
padding-bottom:.25rem;
text-align:right;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment