kuvia2/templates/user_profil.tmpl

{{template "top" .}}
<style>

    @media all and (min-width: 900px){
        .row {
            padding-top: calc(var(--bs-gutter-x) * .5);
            padding-bottom: calc(var(--bs-gutter-x) * .5);
        }
        .col-4 {
            padding-right: calc(var(--bs-gutter-x) * .5);
            padding-left: calc(var(--bs-gutter-x) * .5);
        }
    }
    @media all and (max-width: 900px){
        .row {
            padding-top: calc(var(--bs-gutter-x) * .1);
            padding-bottom: calc(var(--bs-gutter-x) * .1);
        }
        .col-4 {
            padding-right: calc(var(--bs-gutter-x) * .1);
            padding-left: calc(var(--bs-gutter-x) * .1);
        }
        .centered-bottom{
            display: none;
        }
    }


    .imageContainer {
        position: relative;
        text-align: center;
        color: white;
    }

    .top-right {
        position: absolute;
        top: 8px;
        right: 16px;
        color: #ffffff;
    }

    .centered-bottom {
        position: absolute;
        bottom: 8px;
        left: 50%;
        color: #ffffff;
        transform: translate(-50%, -50%);
    }
</style>
<div class="container" style="margin-top: 100px;">
<div class="row">
    <div class="col-3">
        <img src="/image?path={{ .user.Image }}&width=200" style="border-radius: 50%;max-width: 80%;" ></img>
    </div>
    <div class="col-9">
        <h1>{{ if not .user.Name }}
                {{ .user.Username }}
            {{else}}
                {{ .user.Name }}
            {{end}}</h1>
        <p class="d-none d-sm-none d-md-block">{{ if .user.AboutMe }}{{ .user.AboutMe }}{{ end }}</p>
        <div style="padding-top: 30px;" class="d-none d-md-block">
            {{ if .user.Webpage }}<i class="fas fa-globe"></i> <a href="{{ .user.Webpage }}">{{ .user.Webpage }}</a> {{ end }}
            {{ if .user.Location}}<i class="fas fa-map-marker-alt"></i> {{ .user.Location }}{{ end }}
        </div>
    </div>
</div>
<div class="row d-block d-sm-block d-md-none" >
<div class="col-12">
   {{ if .user.AboutMe }} <p>{{ .user.AboutMe }}</p>{{ end }}
    <div style="padding-top: 0px;">
        {{ if .user.Webpage }}<br/><i class="fas fa-globe"></i> <a href="{{ .user.Webpage }}">{{ .user.Webpage }}</a>{{ end }}
        {{ if .user.Location}}<br/><i class="fas fa-map-marker-alt"></i> {{ .user.Location }}{{ end }}
    </div>
</div>
</div>
<hr></hr>
    {{ range .list }}
    <div class="row">
        {{ range . }}
        <div class="col-4">
            <div class="imageContainer">
                <a href="/u/{{ $.user.Username }}/{{ .Id }}">
                    <img src="/image?path={{ .MainImage }}" style="max-width: 100%" />
                    <div class="top-right"><i class="far fa-images"></i></div>
                    <!--<div class="centered-bottom">{{ .Name }}</div>!-->
                </a>

            </div>

        </div>
        {{ end }}
    </div>
    {{ end }}
</div>
        {{template "bottom" .}}