usm-website/public_html/common/style/mobile.css

/*
 * Personal website of UltrasonicMadness
 * Copyright (C) 2018 UltrasonicMadness
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>. 
 */

html
{
    height:100%;
}

body
{
    font-family:sans-serif;
    font-size:150%;
    margin:0;
    padding:0;
    min-height:100%;
    
    display:flex;
    flex-flow:column;
}

#main-logo-container
{
    display:flex;
}

#main-logo-container a
{
    flex:1;
    background-color:#000;
    width:100%;
}

#main-logo-container img
{
    display:block;
    margin:auto;
    width:50%;
}

nav
{
    display:flex;
    flex-flow:row;
    width:100%;
    
    padding-left:0;
    padding-right:0;
    
    margin:0;
    font-size:48pt;
}

nav a
{
    flex:1;
    width:100%;
    height:100%;
    line-height:2em;
    text-align:center;
    text-decoration:none;
}

#page-pane
{
    display:flex;
    flex-flow:column;
    flex:1;
}

main h1
{
	margin:0;
	font-size:350%;
	font-weight:100;
    text-align:center;
}

footer
{
    flex:1;
    font-size:50%;
}

.app-container
{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    width:95%;
}

.app-container div
{
    width:25%;
    padding:0.5em;
}

.app-container div img
{
    border-radius:15%;
    display:block;
    margin:auto;
    width:100%;
    border-width:2px;
    border-style:solid;
    border-color:#000;
}

.app-container div a
{
    display:block;
    width:100%;
    padding:0.5em;
    font-size:125%;
    text-align:center;
    text-decoration:none;
    border-radius:15%;
}

.app-container div a:focus
{
    outline:none;
}

#social img
{
    width:100%;
}

#social a
{
    display:inline-block;
    width:20%;
    padding:0;
    margin:0;
}