Primo test stilistico vagamente serio

main-old
Antonio De Lucreziis 3 years ago
parent 26268329d9
commit 6c36b803e9

@ -1,485 +1,308 @@
@import url('https://fonts.googleapis.com/css2?family=Share:wght@700&family=Ubuntu+Mono&family=Ubuntu:wght@300;700&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Sen&family=Work+Sans:wght@700&display=swap'); */
/* TODO: Don't use CDN and serve as assets */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
:root {
--font-title: 'Share', cursive;
--font-text: 'Ubuntu', sans-serif;
--font-mono: 'Ubuntu Mono', monospace;
}
* {
box-sizing: border-box;
}
--bg: #f0f0f0;
--fg: #333;
html,
body {
position: relative;
margin: 0;
min-height: 100%;
/* --bg-dark: #e0e0d6;
--bg-darker: #d6d6cc; */
width: 100vw;
overflow-x: hidden;
--bg-dark: hsl(220, 5%, 93%);
--bg-darker: hsl(220, 5%, 90%);
font-family: var(--font-text);
font-weight: 300;
font-size: 17px;
line-height: 1.25;
}
--accent-1: #278542;
--accent-1-fg: #154d24;
html {
background: white;
--font-sf: 'Inter', sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
height: 100%;
min-height: 100%;
--shadow-1: 0 0 16px 0 #00000018;
}
body {
margin: 0 auto;
padding-bottom: 5rem;
max-width: 850px;
text-align: justify;
background: white;
* {
box-sizing: border-box;
}
/* Typography */
h1, h2, h3, h4 {
html, body {
margin: 0;
font-family: var(--font-title);
font-weight: 700;
}
p {
margin: 0.75rem 0;
}
p:last-child {
margin-bottom: 0;
}
/* Elements */
nav {
margin-bottom: 1rem;
display: flex;
flex-wrap: wrap;
border: 4px solid;
border-top: none;
gap: 2px;
/* border-bottom: 1rem solid black; */
width: 100%;
height: fit-content;
}
.nav-item {
flex-grow: 1;
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 2.5rem;
padding: 0 0.75rem;
margin: -2px;
background: var(--bg);
color: var(--fg);
font-size: 130%;
font-weight: bold;
font-family: var(--font-sf);
font-size: 17px;
font-weight: var(--font-weight-normal);
border: 2px solid black;
position: relative;
}
.nav-dropdown {
flex-grow: 1;
margin: -2px;
max-width: 100%;
.main {
max-width: 70ch;
margin: 0 auto 8rem;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
gap: 3rem;
}
.nav-dropdown .label {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 2.5rem;
padding: 0 0.75rem;
nav {
margin: 1rem 0;
font-size: 130%;
font-weight: bold;
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
border: 2px solid black;
}
align-items: center;
font-weight: var(--font-weight-medium);
.nav-dropdown .label .icons8 {
width: 16px;
height: 16px;
color: var(--accent-1-fg);
margin-left: 0.5rem;
transform: translate(0, 0.1rem);
z-index: 0;
}
.nav-dropdown .dropdown {
position: absolute;
top: 100%;
width: 100%;
/* margin-bottom: 0.5rem; */
/* Tutti i link dentro la navbar sono speciali e non sembrano link */
nav a {
display: flex;
flex-direction: column;
gap: 2px;
border: 2px solid black;
background: white;
}
width: 100%;
height: 100%;
.nav-dropdown:not(:hover) .dropdown {
display: none;
}
align-items: center;
justify-content: center;
nav a {
text-decoration: none;
color: inherit;
}
section {
border: 4px solid;
padding: 1rem;
margin-bottom: 1rem;
nav a:hover {
color: var(--accent-1-fg);
text-decoration: none;
}
header {
nav .nav-logo {
/* height: 3.5rem; */
display: flex;
width: 100%;
align-items: center;
justify-content: center;
margin: 2.5rem 0;
}
header .logo {
flex-grow: 1;
padding: 0.5rem;
margin-right: 1rem;
object-fit: contain;
object-position: right;
background: var(--bg-dark);
border-radius: 4px;
border: 1px solid #dadada;
box-shadow: var(--shadow-1);
}
header .title {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
nav .nav-main {
display: grid;
grid-template-columns: repeat(5, 1fr) 2fr 1fr;
header .title h1 {
font-size: 56px;
display: inline-block;
transform: translate(-0.125rem);
}
background: var(--bg-dark);
border-radius: 4px;
border: 1px solid #dadada;
box-shadow: var(--shadow-1);
.service-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
z-index: -1;
}
.service {
flex: 1 1 calc(50% - 1rem);
min-width: 300px;
padding: 1rem 0.75rem;
/* Brutal */
border: 2px solid black;
nav .nav-main a {
padding: 0.75rem 1rem;
}
.user-list {
nav .nav-main .nav-item {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.25rem;
}
.user {
display: flex;
flex-grow: 1;
width: calc(50% - 0.25rem / 2);
min-width: 250px;
align-items: center;
justify-content: space-between;
background: var(--bg-dark);
padding: 0.125rem 0.25rem;
user-select: none;
cursor: pointer;
border: 2px solid black;
z-index: 2;
}
.user h4 {
font-size: 90%;
line-height: 1;
font-family: var(--font-mono);
nav .nav-main .nav-item:hover {
background: var(--bg-darker);
}
.user a {
text-decoration: none;
nav .nav-main .nav-item:last-child {
grid-column: 7 / 8;
}
.user a:hover img {
opacity: 0.6;
}
nav .nav-main .nav-item.dropdown {
position: relative;
.user img {
margin: 0.5rem;
z-index: 1;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
nav .nav-main .nav-item.dropdown .name {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background: black;
color: white;
border-bottom: none;
background: var(--bg-dark);
z-index: 10;
}
footer a, footer a:visited {
color: white;
nav .nav-main .nav-item.dropdown .name:hover {
background: var(--bg-darker);
}
.footer-item {
padding: 0.5rem;
font-size: 90%;
}
nav .nav-main .nav-item.dropdown .nav-items {
position: absolute;
top: 100%;
width: 100%;
.search {
display: flex;
align-items: center;
display: none;
max-width: 27rem;
margin: 1.5rem auto;
border: 2px solid black;
}
#search-field {
width: 100%;
flex-grow: 1;
height: 1.75rem;
padding: 0 0.5rem;
background: var(--bg-dark);
border-radius: 4px;
border: 1px solid #dadada;
box-shadow: var(--shadow-1);
border: none;
border-right: 2px solid black;
}
/*
nav .nav-main .nav-item.dropdown .nav-items::before {
position: absolute;
content: '';
top: -2px;
height: 2px;
left: 0;
right: 0;
width: 100%;
.search img {
display: block;
transform: scale(0.8);
width: 1.75rem;
height: 1.75rem;
background: var(--bg-darker);
} */
cursor: pointer;
nav .nav-main .nav-item.dropdown .name:hover + .nav-items, nav .nav-main .nav-item.dropdown .name + .nav-items:hover {
display: flex;
flex-direction: column;
}
/* Common */
img {
display: block;
/* .nav-main borders */
.nav-main > .nav-item:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
a, a:visited {
color: black;
.nav-main > .nav-item:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
a:hover {
color: gray;
}
footer {
position: absolute;
bottom: 0;
left: 50%;
height: 3rem;
hr {
width: 100%;
height: 1rem;
margin: 1rem 0;
padding: 0;
background: black;
border: none;
}
width: 80ch;
ul {
list-style: square;
}
transform: translate(-50%, 0);
li {
margin: 0.25rem 0;
}
background: var(--bg-dark);
border-radius: 4px;
border: 1px solid #dadada;
border-bottom: none;
box-shadow: var(--shadow-1);
form {
margin: 3rem auto;
padding: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
max-width: 30rem;
border: 4px solid black;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
form .row {
/* Components */
section {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
}
form .row:not(:last-child) {
margin-bottom: 0.5rem;
}
.card-list {
display: flex;
flex-direction: column;
align-items: center;
form label {
width: 30%;
}
gap: 1rem;
form input[type=text], form input[type=password] {
flex-grow: 1;
margin-top: 1rem;
}
form button, form input[type=submit] {
margin-top: 0.5rem;
}
.card {
background: var(--bg-dark);
border-radius: 4px;
border: 1px solid #dadada;
box-shadow: var(--shadow-1);
input[type=text], input[type=password] {
font-size: 15px;
max-width: 60ch;
padding: 0 0.2rem;
height: 1.5rem;
appearance: none;
outline: none;
padding: 1rem;
border: 2px solid black;
display: flex;
flex-direction: column;
}
input[type=text]:focus, input[type=password]:focus {
background: #e0e0e0;
.card .title {
font-size: 22px;
font-weight: var(--font-weight-bold);
}
button, input[type=submit] {
outline: none;
font-size: 17px;
font-family: var(--font-title);
padding: 0 4rem;
height: 1.6rem;
background: black;
color: white;
border: none;
/* border: 2px solid black; */
.card .date {
font-size: 15px;
color: #666;
cursor: pointer;
margin-bottom: 0.75rem;
}
button:hover, input[type=submit]:hover {
background: #444;
.card .description {
font-weight: var(--font-weight-light);
color: #222;
}
/* Utils */
.icons8 {
width: 25px;
height: 25px;
display: inline-block;
vertical-align: middle;
}
/* Typography */
h2 .icons8 {
transform: translateY(-0.125rem);
}
h1, h2, h3, h4 {
margin: 0;
margin-top: 1rem;
margin-bottom: 0.5rem;
.hfill {
/* min-height: 0.5rem; */
flex-grow: 1000;
font-weight: var(--font-weight-light);
}
@media screen and (max-width: 850px) {
section, nav {
border-left: none;
border-right: none;
}
p {
margin: 0.5rem 0;
}
@media screen and (max-width: 30rem) {
form {
border-left: none;
border-right: none;
}
}
/* Controls */
/* Large screen */
@media screen and (min-width: 421px) {
.nav-dropdown .dropdown {
margin-top: -2px;
}
a {
color: var(--accent-1-fg);
text-decoration: none;
}
/* Mobile screen */
@media screen and (max-width: 420px) and (orientation: portrait) {
nav {
flex-direction: column;
}
.nav-dropdown:hover {
padding: 0 0.25rem 0.25rem;
}
.nav-dropdown, .nav-dropdown .nav-item {
margin: -2px 0;
}
.nav-item, .nav-dropdown .label {
max-width: 100%;
border-left: none;
border-right: none;
}
.nav-dropdown .dropdown {
position: relative;
border: 4px solid black;
border-top-width: 2px;
}
a:hover {
color: var(--accent-1);
text-decoration: underline;
}

@ -34,10 +34,10 @@ func Load() {
Host = stringOrDefault(os.Getenv("HOST"), "localhost:8080")
log.Printf("HOST = %v", Host)
GitUrl = stringOrDefault(os.Getenv("GIT_URL"), "git.phc.dm.unipi.it")
GitUrl = stringOrDefault(os.Getenv("GIT_URL"), "https://git.phc.dm.unipi.it")
log.Printf("GIT_URL = %v", GitUrl)
ForumUrl = stringOrDefault(os.Getenv("FORUM_URL"), "forum.phc.dm.unipi.it")
ForumUrl = stringOrDefault(os.Getenv("FORUM_URL"), "https://forum.phc.dm.unipi.it")
log.Printf("FORUM_URL = %v", ForumUrl)
}

@ -7,15 +7,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ template "title" . }}</title>
<link rel="icon" href="/assets/icons/icons8-electronics-100.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"
integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
crossorigin="anonymous"></script>
integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js"
integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
crossorigin="anonymous"></script>
integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
renderMathInElement(document.body, {
@ -36,71 +39,66 @@
<body>
<nav>
<!-- Site -->
<div class="nav-item">
<a href="/">PHC</a>
<div class="nav-logo">
<a href="/">
<img src="assets/images/logo-circuit-board@100w.png" alt="phc-logo">
</a>
</div>
<div class="nav-dropdown">
<div class="label">
Risorse
<img class="icons8" src="https://img.icons8.com/ios-filled/100/000000/expand-arrow.png"/>
<div class="nav-main">
<div class="nav-item">
<a href="/utenti">Utenti</a>
</div>
<div class="dropdown">
<div class="nav-item">
<a href="/blog/">Notizie</a>
</div>
<div class="nav-item">
<a href="/blog/categories/guide/">Guide</a>
</div>
<div class="nav-item">
<a href="/news">News</a>
</div>
</div>
<div class="nav-dropdown">
<div class="label">
Servizi
<img class="icons8" src="https://img.icons8.com/ios-filled/100/000000/expand-arrow.png"/>
</div>
<div class="dropdown">
<div class="nav-item">
<a href="/utenti">Utenti</a>
</div>
<div class="nav-item">
<a href="https://{{ .Config.GitUrl }}">Git</a>
<div class="nav-item dropdown">
<div class="name">
<a href="/progetti">
Progetti
</a>
</div>
<div class="nav-item">
<a href="https://{{ .Config.MatrixUrl }}">Matrix</a>
</div>
<div class="nav-item">
<a href="https://{{ .Config.ForumUrl }}">Forum</a>
<div class="nav-items">
<div class="nav-item">
<a href="{{ .Config.GitUrl }}">Gitea</a>
</div>
<div class="nav-item">
<a href="{{ .Config.ForumUrl }}">Zulip</a>
</div>
<div class="nav-item">
<a href="/guide">Guide</a>
</div>
<div class="nav-item">
<a href="/seminari">Seminari</a>
</div>
</div>
</div>
<div class="nav-item">
<a href="/storia">Storia</a>
</div>
<div class="nav-item">
<a href="/about">About</a>
</div>
<!-- User -->
{{if .User}}
<div class="nav-item">
<a href="/profile">@{{ .User }}</a>
</div>
{{else}}
<div class="nav-item">
<a href="/login">Accedi</a>
</div>
{{end}}
</div>
<!-- Spacing -->
<div class="hfill"></div>
<!-- User -->
{{if .User}}
<div class="nav-item">
<a href="/settings">@{{ .User }}</a>
</div>
{{else}}
<div class="nav-item">
<a href="/login">Accedi</a>
</div>
{{end}}
</nav>
{{ template "body" . }}
<div class="main">
{{ template "body" . }}
</div>
<footer>
<div class="footer-item">
macchinisti@poisson.phc.dm.xxxxx.xx
</div>
&centerdot;
<div class="footer-item">
Icone da <a target="_blank" href="https://icons8.it">Icons8</a>
</div>
</footer>
</body>

@ -3,120 +3,82 @@
{{define "title"}}PHC &bull; phc.dm.xxxxx.xx{{end}}
{{define "body"}}
<section>
<header>
<img class="logo" src="https://img.icons8.com/ios-filled/100/000000/electronics.png" />
<div class="title">
<h1 class="huge">
PHC
</h1>
<h2>Poisson</h2>
<h2>Notizie Importanti</h2>
<div class="card-list">
<div class="card">
<div class="title">
<a href="/news/notizia-super-wow-1">News 1</a>
</div>
<div class="date">yyyy-mm-dd</div>
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis nemo aperiam, voluptas quam alias esse sed natus tempore suscipit fugiat sit delectus exercitationem numquam ipsum assumenda recusandae consequatur...
</div>
</div>
</header>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores quas nostrum suscipit nulla. Reiciendis
quos et
vel animi amet facere dignissimos, nemo, repudiandae suscipit esse quod obcaecati iure soluta cumque?
</p>
<div class="card">
<div class="title">
<a href="/news/notizia-super-wow-2">News 2</a>
</div>
<div class="date">yyyy-mm-dd</div>
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis nemo aperiam, voluptas quam alias esse sed natus tempore suscipit fugiat sit delectus exercitationem numquam ipsum assumenda recusandae consequatur...
</div>
</div>
<div class="card">
<div class="title">
<a href="/news/notizia-super-wow-3">News 3</a>
</div>
<div class="date">yyyy-mm-dd</div>
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis nemo aperiam, voluptas quam alias esse sed natus tempore suscipit fugiat sit delectus exercitationem numquam ipsum assumenda recusandae consequatur...
</div>
</div>
</div>
</section>
<section>
<h2>
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/service.png" />
Servizi
</h2>
<p>
Questi sono tutte le risorse e i servizi offerti dal PHC.
</p>
<div class="service-list">
<div class="service">
<h3>
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/news.png" />
<a href="/blog">Blog & Notizie</a>
</h3>
<p>
Blog del PHC, qui sono racconte le ultime notizie sui nostri progetti recenti, informazioni su eventuali
guasti e giorni di manuntenzione.
</p>
</div>
<div class="service">
<h3>
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/user-manual.png" />
<a href="/guides">Guide</a>
</h3>
<p>
Nel corso del tempo abbiamo scritto alcune guide utili per utilizzare Poisson o Linux in generale.
</p>
<!-- TODO: Progetti/Servizi/Cose fornite -->
<h2>Progetti</h2>
<div class="card-list">
<div class="card">
<div class="title">Project title</div>
<div class="description">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem assumenda voluptatum harum quo nisi alias ab cupiditate corrupti est, illum culpa, excepturi, fugiat dolore doloribus minima placeat facilis enim quaerat!
</p>
</div>
</div>
<div class="service">
<h3>
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/find-user-male.png" />
<a href="/utenti">Utenti</a>
</h3>
<p>
Lista degli utenti di Poisson e link a relativi siti.
</p>
<div class="card">
<div class="title">Project title</div>
<div class="description">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem assumenda voluptatum harum quo nisi alias ab cupiditate corrupti est, illum culpa, excepturi, fugiat dolore doloribus minima placeat facilis enim quaerat!
</p>
</div>
</div>
<div class="service">
<h3>
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/git.png" />
<a href="https://git.phc.dm.xxxxx.xx">Git</a>
</h3>
<p>
Server Git per gli utenti di Poisson, i progetti del PHC ad un certo punto verranno tenuti qui.
</p>
</div>
<div class="service">
<h3>
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/matrix-logo.png" />
<a href="https://element.phc.dm.xxxxx.xx">Matrix server</a>
</h3>
<p>
Server locale per chattare e fare videoconferenze con altre persone del dipartimento.
</p>
</div>
<div class="service">
<h3>
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/road-worker.png" />
<a href="https://forum.phc.dm.xxxxx.xx">Forum</a>
</h3>
<p>
Forum per parlare di Matematica in \(\LaTeX\), Informatica e argomenti accademici in generale.
</p>
<div class="card">
<div class="title">Project title</div>
<div class="description">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem assumenda voluptatum harum quo nisi alias ab cupiditate corrupti est, illum culpa, excepturi, fugiat dolore doloribus minima placeat facilis enim quaerat!
</p>
</div>
</div>
</div>
</section>
<section>
<h2>
<img class="icons8" src="https://img.icons8.com/ios-filled/50/000000/work.png" />
Macchinisti
</h2>
<p>
Al momento i macchinisti sono:
</p>
<ul>
<li><a href="https://poisson.phc.dm.unipi.it/~persona">Persona 1</a> dal 2018</li>
<li><a href="https://poisson.phc.dm.unipi.it/~persona">Persona 5</a> dal 2017</li>
<li><a href="https://poisson.phc.dm.unipi.it/~persona">Persona 3</a> dal 2016</li>
<li><a href="https://poisson.phc.dm.unipi.it/~persona">Persona 4</a> dal 2015</li>
<li><a href="https://poisson.phc.dm.unipi.it/~persona">Persona 6</a> dal 2014</li>
<li><a href="https://poisson.phc.dm.unipi.it/~persona">Persona 2</a> dal 2013</li>
<li><a href="https://poisson.phc.dm.unipi.it/~persona">Persona 7</a> dal 2012</li>
</ul>
<h3>Vuoi diventare un macchinista?</h3>
<p>
Ti interessa (o interesserebbe) smanettare al PC, montare e smontare i cose? Stai spesso in dipartimento? Allora
puoi venire a parlare con noi per diventare un apprendista macchinista per poi entrare nel PHC.
</p>
<div class="card">
<div class="title">Vuoi diventare un macchinista?</div>
<div class="description">
<p>
Ti interessa (o interesserebbe) smanettare al PC, montare e smontare i cose? Stai spesso in dipartimento? Allora
puoi venire a parlare con noi per diventare un apprendista macchinista per poi entrare nel PHC.
</p>
</div>
</div>
</section>
{{end}}
Loading…
Cancel
Save