Preview of a mobile view for gogs

head.tmpl

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="/css/mobile.css" />

mobile.css

@media (min-width: 1020px) {
	.menu-icon.octicon{
		display: none;
	}
}
@media (max-width: 1020px) {
	body {
	  min-width: 320px !important;
	  max-width: 100%;
	}
	
	img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
		max-width: 100%;
	}
	
	.item.brand,
	.six.wide.column,
	.ui.five.wide.column{
		display: none !important;
	}
	
	footer a[href^="https://gogs.io"]{
		display: none;
	}
	
	.ten.wide.column,
	.ui.grid > [class*="four wide"].column,
	.ui.eleven.wide.column,
	.ui.grid > [class*="twelve wide"].column,
	.full.height,
	.dashboard,
	.following.bar.light,
	[class*="vertically padded"].ui.grid,
	#release-list .ui.grid,
	#git-stats,
	.repository.new.repo .ui.form .selection.dropdown:not(.owner),
	.repository.new.repo form input, 
	.repository.new.migrate form input, 
	.repository.new.fork form input, 
	.repository.new.repo form textarea, 
	.repository.new.migrate form textarea, 
	.repository.new.fork form textarea,
	.ui.form .inline.field > .selection.dropdown,
	.ui.form .inline.fields .field > .selection.dropdown,
	.feeds .news .issue.title
	{
		width: 100% !important;
	}
	
	.ui.vertically.padded.grid.head .column{
		padding: 0;
	}
	
	.ui.header .ui.right .ui.small.button,
	.ui.header .ui.right .ui.labeled.button{
		margin: 5px 2.5px;
	}
	
	.ui.container,
	.ui.container:not(.fluid)
	{
		width: 90% !important;
		margin: auto 5% !important;
		/*margin: 0 !important;*/
	}
	
	.ui.grid.news{
		max-width: 100% !important;
	}
	
	.ui.menu .fitted.item{
		/*width: 100%;
		position: absolute;
		top: 75%;*/
	}
	
	footer{
		width: 100%;
		height: 75px;
		bottom: 0;
		position: relative;
	}
	
	footer .ui.container{
		height: 100%;
	}
	
	footer .version{
		display: none;
	}
	
	footer .ui.left{
		width: 70%;
		word-wrap: break-word;
	}
	
	.ui.right .ui.secondary.head.menu .item[href^="/org/"]{
		display: none;
	}
	
	.ui.language.bottom.floating.slide.up.dropdown.link.item{
		right: 5%;
		position: absolute;
		bottom: 36.5%;
	}
	
	.ui.grid > [class*="ten wide"].column {
		width: 100% !important;
	}
	
	.following.bar a.main-menu.item .menu-icon.octicon{
		display: block;
		font-size: large;
		text-indent: 0;
		margin: 5px auto !important;
	}
	
	.following.bar a.main-menu.item.active{
		width: 50px;
	}
	
	.following.bar a.main-menu.item{
		text-indent: -9999px;
		white-space: nowrap; 
		overflow: hidden;
		font-size: 0px;
		width: 35px;
	}
	
	.following.bar a.main-menu.item .menu-icon.octicon.octicon-git-pull-request{
		padding-left: 5px;
	}
	
	.ui.vertical.menu{
		margin: 0 auto !important;
		width: 90%;
	}
	
	.ui.header{
		text-align: center;
	}
	
	.column .ui.header .ui.right{
		padding-top: 5px;
		width: 90%;
		margin: 0 auto;
		float: none;
	}
	
	.ui.user.list .item .content{
		width: 85%;
	}
	
	.ui.user.list .item .content .br{
		display: block;
	}
	
	.ui.user.list .item .content .octicon.octicon-location{
		padding-left: 5px;
	}
	
	.ui.container .ui.grid .ui.eleven.wide.column .text.right .ui.green.button{
		width: 100%;
	}
	
	.repository .ui.container .ui.secondary.menu{
		padding: 6px 6px 30px;
		position: relative;
		width: 100%;
	}
	
	
	.repository.file.list #repo-files-table .grey.has-emoji,
	.repository.file.list #repo-files-table thead th,
	.repository.file.list #repo-files-table td.message.collapsing.has-emoji{
		display: none;
	}
	
	.repository.file.list #repo-files-table thead th:first-child {
		width: 200%;
	}
	
	.repository.file.list #repo-files-table tr{
		width: 100%;
	}
	.ui.container .ui.header .ui.right .ui.small.button{
		margin: 0;
	}
	
	.ui.attached.header .right{
		margin-top: 5px;
		float: none;
	}
	
	#commits-table tbody tr {
		height: 125px !important;
	}
	
	#commits-table .author {
		height: 50px;
		position: absolute;
	}
	#commits-table .author a {
		vertical-align: middle;
	}
	
	#commits-table .message.collapsing {
		position: absolute;
		left: 0;
		margin-top: 40px;
		width: 100% !important;
		height: 85px;
		border-bottom: 1px #e1e1e1;
		border-bottom-style: inherit;
	}
	
	#commits-table tr td {
		border-top: none;
	}
	
	#commits-table thead{
		display: none;
	}
	
	#commits-table .grey.text.right.aligned {
		position: absolute;
		right: 0;
		height: 50px;
		padding-top: 0.785714em;
	}
	#commits-table .grey.text.right.aligned .time-since.poping.up {
		vertical-align: middle;
	}
	
	#commits-table .ui.sha.label {
		margin-left: 0;
		margin-bottom: 5px;
	}
	
	#commits-table .has-emoji {
		white-space: normal;
	}
	
	#commits-table .has-emoji::before {
		content: "\A";
		white-space: pre;
	}
	
	#commits-table thead tr th.four.wide,
	#commits-table thead tr th.nine.wide.message,
	#commits-table thead tr th.three.wide{
		font-size: 0 !important;
	}
	
	#file-buttons{
		display: none !important;
	}
	
	.ui.menu .right.fitted.item{
		height:30px; 
		width:100%; 
		top: 50px;
		position:absolute; 
		bottom:0;
	}
	
	.ui.tabs.container .ui.tabular.menu .item{
		text-indent: -9999px;
		white-space: nowrap; 
		overflow: hidden;
		font-size: 0px;
		width: 50px;
	}
	
	.repository .ui.container .ui.secondary.menu.right.floated.menu{
		display: none;
	}
	.ui.grid > [class*="one wide"].column{
		margin-left: -3.25em;
		margin-top: 3em;
		position: absolute;
	}
	
	.ui.tabular.menu .item i{
		text-indent: 0;
	}
	
	.ui.tabular.menu .item span{
		text-indent: 0;
		margin-left: 0 !important;
		margin: auto;
	}
	
	.repository .header-wrapper .ui.tabular .octicon{
		margin: 0 auto !important;
	}
	.repository .header-wrapper .ui.tabular .octicon.octicon-file-text{
		padding-left: 5px;
	}
	
	.ui.tabular.menu .right.menu{
		/*margin-right: 5%;*/
	}
	
	#repo-desc{
		text-align: center;
	}
	
	.repository.release #release-list > li .meta {
		text-align: left;
		padding-bottom: 0;
		border-left: 1px solid #DDD;
	}
	.repository.release #release-list > li .detail{
		padding-top: 10px;
	}
	
	.repository.new.repo form .header, 
	.repository.new.migrate form .header,
	.repository.new.fork form .header,
	.organization.new.org form .header,
	.ui.top.attached.header{
		padding-left: 0 !important;
	}
	
	.repository.new.repo form .inline.field > label, 
	.repository.new.migrate form .inline.field > label, 
	.repository.new.fork form .inline.field > label,
	.organization.new.org form .inline.field > label,
	.ui.form .inline.field > :first-child, 
	.ui.form .inline.fields .field > :first-child{
		text-align: left;
	}
	
	.inline.field a[href^="/user/sign_up"]{
		white-space: nowrap;
	}
	
	.repository.new.repo .ui.form #auto-init,
	.repository.new.repo form .optional .title,
	.repository.new.migrate form .optional .title,
	.repository.new.fork form .optional .title
	.repository.new.repo form .help, .repository.new.migrate form .help, 
	.repository.new.fork form .help,
	.organization.new.org form .help{
		margin-left: 0 !important;
	}
	
	.repository .ui.container .navbar .ui.compact.small.menu,
	.ui.form .inline.field > input, 
	.ui.form .inline.field > select, 
	.ui.form .inline.fields .field > input, 
	.ui.form .inline.fields .field > select{
		width: 100% !important;
	}
	
	.repository .ui.container .navbar .ui.compact.small.menu .item{
		position: relative;
		width: 50%;
		text-align: center;
	}
	.repository .ui.container .navbar .ui.right{
		margin-top: 5px;
		float: none;
	}
	.repository .ui.container .navbar .ui.right .ui.green.button{
		margin: auto;
		display: table;
	}
	
	.ui.form .field:last-child,
	.ui.form .field:last-child .ui.button{
		width: 100%;
		margin: 3px auto;
	}
	
	.ui.repository.list .ui.grid > [class*="middle aligned"].column:not(.row){
		width: 5em !important;
		position: absolute;
	}
	.ui.repository.list .ui.grid > [class*="fourteen wide"].column{
		width: 100% !important;
	}
	.ui.repository.list .ui.grid > [class*="fourteen wide"].column .has-emoji,
	.ui.repository.list .ui.grid > [class*="fourteen wide"].column .time{
		text-align: center;
		padding-left: 5em;
		padding-right: 5em;
	}
	
	.organization .ui.header .floating.ui.black.label{
		position: static;
		margin-left: 5% !important;
	}
	
	.organization .ui.header .item{
		width: 50%;
	}
	
	.organization .item.ui.grid .ui.one.wide.column{
		width: 48px !important;
		height: 48px !important;
		position: absolute;
		padding: 0;
		margin-left: 1rem;
	}
	
	.organization .item.ui.grid .ui.three.wide.column{
		padding-left: 0;
		padding-right: 0;
		margin-left: 1em;
	}
	
	.organization .item.ui.grid .ui.three.wide.column.center{
		width: 50% !important;
		right: 5%;
		position: absolute;
	}
	.organization.teams .ui.green.button{
		width: 100%;
	}
}

templates-head.tmpl

<!DOCTYPE html>
<html>
<head data-suburl="{{AppSubURL}}">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	{{if not .PageIsAdmin}}
		<meta name="author" content="{{if .Repository}}{{.Owner.Name}}{{else}}Gogs{{end}}" />
		<meta name="description" content="{{if .Repository}}{{.Repository.Name}}{{if .Repository.Description}} - {{.Repository.Description}}{{end}}{{else}}Gogs is a painless self-hosted Git service{{end}}" />
		<meta name="keywords" content="go, git, self-hosted, gogs">
	{{end}}
	<meta name="referrer" content="no-referrer" />
	<meta name="_csrf" content="{{.CSRFToken}}" />
	<meta name="_suburl" content="{{AppSubURL}}" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	
	<!-- Open Graph Tags -->
	{{if .PageIsAdmin}}
	{{else if .PageIsUserProfile}}
		<meta property="og:url" content="{{.Owner.HTMLURL}}" />
		<meta property="og:type" content="profile" />
		<meta property="og:title" content="{{.Owner.Name}}{{if .Owner.FullName}} ({{.Owner.FullName}}){{end}}">
		<meta property="og:description" content="{{.Owner.Name}} has {{.Owner.NumFollowers}} followers and is following {{.Owner.NumFollowing}} people.">
		<meta property="og:image" content="{{.Owner.AvatarLink}}" />
	{{else if .Repository}}
		<meta property="og:url" content="{{.Repository.HTMLURL}}" />
		<meta property="og:type" content="object" />
		<meta property="og:title" content="{{.Repository.FullName}}">
		<meta property="og:description" content="{{.Repository.Description}}">
		<meta property="og:image" content="{{.Repository.Owner.AvatarLink}}" />
	{{else}}
		<meta property="og:url" content="{{AppURL}}" />
		<meta property="og:type" content="website" />
		<meta property="og:title" content="{{AppName}}">
		<meta property="og:description" content="Gogs is a painless self-hosted Git service.">
		<meta property="og:image" content="{{AppURL}}img/gogs-lg.png" />
		<meta property="og:site_name" content="Gogs">
	{{end}}

	<link rel="shortcut icon" href="{{AppSubURL}}/img/favicon.png" />

	<script src="{{AppSubURL}}/js/jquery-1.11.3.min.js"></script>
	<script src="{{AppSubURL}}/js/libs/jquery.are-you-sure.js"></script>
	<link rel="stylesheet" href="{{AppSubURL}}/assets/font-awesome-4.6.3/css/font-awesome.min.css">
	<link rel="stylesheet" href="{{AppSubURL}}/assets/octicons-4.3.0/octicons.min.css">

	<!-- notebook.js for rendering ipython notebooks and marked.js for rendering markdown in notebooks -->
	{{if .IsIPythonNotebook}}
		<script src="{{AppSubURL}}/plugins/notebookjs-0.3.0/notebook.min.js"></script>
		<script src="{{AppSubURL}}/plugins/marked-0.3.6/marked.min.js"></script>
	{{end}}

	{{if .RequireSimpleMDE}}
		<link rel="stylesheet" href="{{AppSubURL}}/plugins/simplemde-1.10.1/simplemde.min.css">
		<script src="{{AppSubURL}}/plugins/simplemde-1.10.1/simplemde.min.js"></script>
		<script src="{{AppSubURL}}/plugins/codemirror-5.17.0/addon/mode/loadmode.js"></script>
		<script src="{{AppSubURL}}/plugins/codemirror-5.17.0/mode/meta.js"></script>
		<script>
			CodeMirror.modeURL =  "{{AppSubURL}}/plugins/codemirror-5.17.0/mode/%N/%N.js";
		</script>
	{{end}}

	<!-- Stylesheet -->
	<link rel="stylesheet" href="{{AppSubURL}}/css/semantic-2.3.1.min.css">
	<link rel="stylesheet" href="{{AppSubURL}}/css/gogs.css?v={{MD5 AppVer}}">
	<noscript>
		<style>
			.dropdown:hover > .menu { display: block; }
			.ui.secondary.menu .dropdown.item > .menu { margin-top: 0; }
		 </style>
	</noscript>

	<!-- JavaScript -->
	<script src="{{AppSubURL}}/js/semantic-2.3.1.min.js"></script>
	<script src="{{AppSubURL}}/js/gogs.js?v={{MD5 AppVer}}"></script>

	<title>{{if .Title}}{{.Title}} - {{end}}{{AppName}}</title>

	<meta name="theme-color" content="{{ThemeColorMetaTag}}">

	{{template "inject/head" .}}
</head>
<body>
	<div class="full height">
		<noscript>This website works better with JavaScript</noscript>

		{{if not .PageIsInstall}}
			<div class="following bar light">
				<div class="ui container">
					<div class="ui grid">
						<div class="column">
							<div class="ui top secondary menu">
								<a class="item brand" href="{{AppSubURL}}/">
									<img class="ui mini image" src="{{AppSubURL}}/img/favicon.png">
								</a>

								{{if .IsLogged}}
									<a class="main-menu item{{if .PageIsDashboard}} active{{end}}" href="{{AppSubURL}}/">{{.i18n.Tr "dashboard"}}
										<i class="menu-icon octicon octicon-home"></i>
									</a>
									<a class="main-menu item{{if .PageIsIssues}} active{{end}}" href="{{AppSubURL}}/issues">{{.i18n.Tr "issues"}}
										<i class="menu-icon octicon octicon-issue-opened"></i>
									</a>
									<a class="main-menu item{{if .PageIsPulls}} active{{end}}" href="{{AppSubURL}}/pulls">{{.i18n.Tr "pull_requests"}}
										<i class="menu-icon octicon octicon-git-pull-request"></i>
									</a>
								{{else}}
									<a class="main-menu item{{if .PageIsHome}} active{{end}}" href="{{AppSubURL}}/">{{.i18n.Tr "home"}}
										<i class="menu-icon octicon octicon-home"></i>
									</a>
								{{end}}

								<a class="main-menu item{{if .PageIsExplore}} active{{end}}" href="{{AppSubURL}}/explore/repos">{{.i18n.Tr "explore"}}
									<i class="menu-icon octicon octicon-file-directory"></i>
								</a>

								{{/*<div class="item">
									<div class="ui icon input">
									<input class="searchbox" type="text" placeholder="{{.i18n.Tr "search_project"}}">
									<i class="search icon"></i>
									</div>
									</div>*/}}

								{{if .IsLogged}}
									<div class="right menu">
										<div class="ui dropdown head link jump item poping up" data-content="{{.i18n.Tr "create_new"}}" data-variation="tiny inverted">
											<span class="text">
												<i class="octicon octicon-plus"><span class="sr-only">{{.i18n.Tr "create_new"}}</span></i>
												<i class="octicon octicon-triangle-down"></i>
											</span>
											<div class="menu">
												<a class="item" href="{{AppSubURL}}/repo/create">
													<i class="octicon octicon-plus"></i> {{.i18n.Tr "new_repo"}}
												</a>
												<a class="item" href="{{AppSubURL}}/repo/migrate">
													<i class="octicon octicon-repo-clone"></i> {{.i18n.Tr "new_migrate"}}
												</a>
												{{if .LoggedUser.CanCreateOrganization}}
												<a class="item" href="{{AppSubURL}}/org/create">
													<i class="octicon octicon-organization"></i> {{.i18n.Tr "new_org"}}
												</a>
												{{end}}
											</div><!-- end content create new menu -->
										</div><!-- end dropdown menu create new -->

										<div class="ui dropdown head link jump item poping up" tabindex="-1" data-content="{{.i18n.Tr "user_profile_and_more"}}" data-variation="tiny inverted">
											<span class="text avatar">
												<img class="ui small rounded image" src="{{.LoggedUser.RelAvatarLink}}">
												<span class="sr-only">{{.i18n.Tr "user_profile_and_more"}}</span>
												<i class="octicon octicon-triangle-down" tabindex="-1"></i>
											</span>
											<div class="menu" tabindex="-1">
												<div class="ui header">
													{{.i18n.Tr "signed_in_as"}} <strong>{{.LoggedUser.Name}}</strong>
												</div>

												<div class="divider"></div>
												<a class="item" href="{{AppSubURL}}/{{.LoggedUser.Name}}">
													<i class="octicon octicon-person"></i> {{.i18n.Tr "your_profile"}}
												</a>
												<a class="{{if .PageIsUserSettings}}active{{end}} item" href="{{AppSubURL}}/user/settings">
													<i class="octicon octicon-settings"></i> {{.i18n.Tr "your_settings"}}
												</a>
												<a class="item" target="_blank" rel="noopener noreferrer" href="https://gogs.io/docs" rel="noreferrer">
													<i class="octicon octicon-question"></i> {{.i18n.Tr "help"}}
												</a>
												{{if .IsAdmin}}
													<div class="divider"></div>

													<a class="{{if .PageIsAdmin}}active{{end}} item" href="{{AppSubURL}}/admin">
														<i class="icon settings"></i> {{.i18n.Tr "admin_panel"}}
													</a>
												{{end}}

												<div class="divider"></div>
												<a class="item" href="{{AppSubURL}}/user/logout">
													<i class="octicon octicon-sign-out"></i> {{.i18n.Tr "sign_out"}}
												</a>
											</div><!-- end content avatar menu -->
										</div><!-- end dropdown avatar menu -->
									</div><!-- end signed user right menu -->

								{{else}}

									<a class="main-menu item" target="_blank"  rel="noopener noreferrer" href="https://gogs.io/docs" rel="noreferrer">{{.i18n.Tr "help"}}
										<i class="menu-icon octicon octicon-info"></i>
									</a>
									<div class="right menu">
										{{if .ShowRegistrationButton}}
											<a class="main-menu item{{if .PageIsSignUp}} active{{end}}" href="{{AppSubURL}}/user/sign_up">
												<i class="menu-icon octicon octicon-person"></i> {{.i18n.Tr "register"}}
											</a>
										{{end}}
										<a class="main-menu item{{if .PageIsSignIn}} active{{end}}" href="{{AppSubURL}}/user/login?redirect_to={{.Link}}">
											<i class="menu-icon octicon octicon-sign-in"></i> {{.i18n.Tr "sign_in"}}
										</a>
									</div><!-- end anonymous right menu -->

								{{end}}
							</div><!-- end top menu -->
						</div><!-- end column -->
					</div><!-- end grid -->
				</div><!-- end container -->
			</div><!-- end bar -->
		{{end}}
{{/*
	</div>
</body>
</html>
*/}}